refactor: playground add comparsion

src/components/editor/viewer.tsx

@@ -0,0 +1,89 @@
+import Editor from '@monaco-editor/react';
+import React, { useEffect, useRef, useState } from 'react';
+import EditorWrap from '../editor-wrap';
+
+interface ViewerProps {
+  lang: string;
+  defaultLang?: string;
+  langOptions?: Global.BaseOption<string>[];
+  config?: any;
+  value: string;
+  height?: string | number;
+  theme?: string;
+  showHeader?: boolean;
+}
+
+const ViewerEditor: React.FC<ViewerProps> = (props) => {
+  const editorRef = useRef<any>(null);
+  const {
+    lang,
+    value,
+    config,
+    langOptions,
+    defaultLang,
+    height = 380,
+    showHeader
+  } = props;
+  const [langType, setLangType] = useState(defaultLang);
+
+  const handleBeforeMount = (monaco: any) => {
+    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: false,
+      noSyntaxValidation: false,
+      diagnosticCodesToIgnore: [80001]
+    });
+  };
+
+  const handleEditorDidMount = (editor: any, monaco: any) => {
+    editorRef.current = editor;
+    console.log('loaded====', editor, monaco);
+  };
+
+  const handleOnChangeLang = (value: string) => {
+    setLangType(value);
+  };
+  const formatCode = () => {
+    if (editorRef.current) {
+      setTimeout(() => {
+        editorRef.current
+          ?.getAction?.('editor.action.formatDocument')
+          ?.run()
+          .then(() => {
+            console.log('format success');
+          });
+      }, 100);
+    }
+  };
+
+  useEffect(() => {
+    formatCode();
+    setTimeout(() => {
+      const lineCount = editorRef.current?.getModel().getLineCount(); // 获取总行数
+      editorRef.current?.revealLine(lineCount); // 滚动到最后一行
+    }, 100); // 可以调整延时，确保编辑器完全加载
+  }, [value]);
+
+  return (
+    <EditorWrap
+      copyText={value}
+      langOptions={langOptions}
+      defaultValue={lang}
+      showHeader={showHeader}
+      onChangeLang={handleOnChangeLang}
+    >
+      <Editor
+        height={height}
+        theme="vs-dark"
+        className="monaco-editor"
+        defaultLanguage={defaultLang}
+        language={langType}
+        value={value}
+        options={config}
+        beforeMount={handleBeforeMount}
+        onMount={handleEditorDidMount}
+      />
+    </EditorWrap>
+  );
+};
+
+export default React.memo(ViewerEditor);