@uiw/react-codemirror组件使用@codemirror/lang-xml组件后，编辑器中的xml是raw格式，怎么转成pretty格式

在使用`@uiw/react-codemirror`组件结合`@codemirror/lang-xml`处理XML时，如果需要将原始格式（raw）的XML转换为更易读的漂亮格式（pretty format），你可以利用CodeMirror本身提供的`previewPrettyPrint`选项。这个选项会在显示模式下自动美化XML内容。

首先，在使用`react-codemirror`组件时，确保你在配置选项里包含了`preview`和`previewPrettyPrint`：

import { useCodemirror } from '@uiw/react-codemirror';
import 'codemirror/addon/brace-fold/xml-fold.js'; // 加上这一行来支持XML折叠

function MyEditor() {
  const CodeMirror = useCodemirror({
    value: '<your_xml_here>',
    lang: 'xml',
    options: {
      mode: 'text/x-markdown',
      theme: 'neo', // 选择合适的主题
      lineNumbers: true,
      gutters: ['CodeMirror-linenumbers'],
      preview: 'html',
      previewPrettyPrint: true, // 这一行启用漂亮的XML预览
    },
  });

  // ...其他代码...

  return (
    <CodeMirror />
  );
}

在这个例子中，`previewPrettyPrint`设置为`true`后，XML内容会被自动格式化成易于阅读的样子。

如果你想要在实时编辑时也保持格式，可以监听`change`事件，并在用户输入后手动更新预览：

useEffect(() => {
  function updatePreview() {
    const { doc, display } = CodeMirror.state;
    display.updateDoc(doc);
  }

  CodeMirror.on('change', updatePreview);
  return () => CodeMirror.off('change', updatePreview); // 在组件卸载时移除监听
}, [CodeMirror]);