feat: code refactoring

Author: lin-mt

.dumi/overrides.less

@@ -3,10 +3,27 @@
   font-weight: lighter;
 }
 
+.dumi-default-navbar {
+  font-weight: normal;
+}
+
+.dumi-default-sidebar-group {
+  font-weight: normal;
+}
+
+.dumi-default-sidebar {
+  width: 200px;
+}
+
 .dumi-default-doc-layout > main {
   padding: 0;
+  max-width: 80%;
 }
 
 .dumi-default-hero {
   height: 800px;
 }
+
+.dumi-default-features {
+  margin: 0 auto 30px;
+}

docs/index.md

@@ -8,13 +8,10 @@ hero:
     - text: Github
       link: https://github.com/lin-mt/json-schema-editor-arco
 features:
-  - title: 高颜值
-    emoji: 🌹
+  - emoji: 🌹
     description: 基于 Arco Design 构建
-  - title: 可视化
-    emoji: 🧐
+  - emoji: 🧐
     description: 可视化编辑 Json Schema
-  - title: Mock
-    emoji: 🎭
-    description: 支持多种数据格式的 Mock
+  - emoji: 🚀
+    description: JSON Schema Draft 07 标准
 ---

package.json

@@ -55,12 +55,10 @@
     ]
   },
   "dependencies": {
-    "@arco-design/web-react": "^2.45.1",
-    "@monaco-editor/react": "^4.4.6",
-    "@types/lodash": "^4.14.191",
-    "lodash": "^4.17.21",
-    "mobx": "^6.8.0",
-    "mobx-react": "^7.6.0"
+    "@arco-design/web-react": "^2.64.1",
+    "@monaco-editor/react": "^4.6.0",
+    "@types/lodash": "^4.17.13",
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",

src/JsonSchemaEditor/MonacoEditor/index.tsx

@@ -0,0 +1,83 @@
+import Editor, { OnChange } from '@monaco-editor/react';
+import React, { ReactElement } from 'react';
+import { xcodeDefault } from './themes';
+
+interface QuietEditorProp {
+  width?: string | number;
+  height?: string | number;
+  value?: string;
+  language?: string;
+  readOnly?: boolean;
+  lineNumbers?: 'on' | 'off' | 'relative' | 'interval';
+  folding?: boolean;
+  renderLineHighlight?: 'all' | 'line' | 'none' | 'gutter';
+  onChange?: OnChange;
+  handleEditorDidMount?: (editor: any, monaco: any) => void;
+}
+
+const MonacoEditor = (props: QuietEditorProp): ReactElement => {
+  const {
+    width,
+    lineNumbers = 'on',
+    height,
+    value,
+    folding = true,
+    language,
+    readOnly = false,
+    renderLineHighlight = 'all',
+    onChange,
+  } = props;
+
+  function editorWillMount(monaco: any) {
+    monaco.editor.defineTheme('x-code-default', xcodeDefault);
+  }
+
+  return (
+    <div
+      style={{
+        border: `1px solid rgb(var(--color-border))`,
+        width: width ? width : '100%',
+      }}
+    >
+      <Editor
+        height={height}
+        width={width}
+        value={value}
+        language={language}
+        onChange={onChange}
+        onMount={props.handleEditorDidMount}
+        beforeMount={editorWillMount}
+        theme="x-code-default"
+        options={{
+          // 只读
+          readOnly,
+          // 关闭行数显示
+          lineNumbers,
+          // 关闭选中行的渲染
+          renderLineHighlight,
+          // 是否折叠
+          folding,
+          smoothScrolling: true,
+          // 编辑器中字体大小
+          fontSize: 13,
+          // 是否可以滚动到最后一行，可以往上滚动超出内容范围
+          scrollBeyondLastLine: false,
+          // 左边空出来的宽度
+          // lineDecorationsWidth: 3,
+          // lineNumbersMinChars: 6,
+          // 滚动条样式
+          scrollbar: {
+            // verticalScrollbarSize: 9,
+            // horizontalScrollbarSize: 9,
+          },
+          // 小地图
+          minimap: {
+            enabled: false,
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export default MonacoEditor;