feat: refactoring code

.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;
+}

.gitignore

@@ -4,3 +4,4 @@ node_modules
 .dumi/tmp-test
 .dumi/tmp-production
 .DS_Store
+.idea

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) lin-mt <lin-mt@outlook.com>
+Copyright (c) [email protected]
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,4 +1,4 @@
-# json-schema-editor-antd
+# @quiet-front-end/json-schema-editor-antd
 
 [![NPM version](https://img.shields.io/npm/v/@quiet-front-end/json-schema-editor-antd.svg?style=flat)](https://npmjs.org/package/@quiet-front-end/json-schema-editor-antd)
 [![NPM downloads](http://img.shields.io/npm/dm/@quiet-front-end/json-schema-editor-antd.svg?style=flat)](https://npmjs.org/package/@quiet-front-end/json-schema-editor-antd)
@@ -50,6 +50,9 @@ $ yarn run build:watch
 # build docs
 $ yarn run docs:build
 
+# Locally preview the production build.
+$ yarn run docs:preview
+
 # check your project for potential problems
 $ yarn run doctor
 ```

docs/index.md

@@ -8,13 +8,13 @@ hero:
     - text: Github
       link: https://github.com/lin-mt/json-schema-editor-antd
 features:
-  - title: 高颜值
-    emoji: 🌹
+  #  - title: Hello
+  - emoji: 💎
     description: 基于最新的 antd 版本构建
-  - title: 可视化
-    emoji: 🧐
+  #  - title: World
+  - emoji: 🧐
     description: 可视化编辑 Json Schema
-  - title: Mock
-    emoji: 🎭
-    description: 支持多种数据格式的 Mock
+  #  - title: '!'
+  - emoji: 🚀
+    description: JSON Schema Draft 07 标准
 ---

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@quiet-front-end/json-schema-editor-antd",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "private": false,
-  "description": "Json Schema 可视化编辑器",
+  "description": "Json Schema Editor",
   "keywords": [
     "json",
     "schema",
@@ -25,6 +25,7 @@
     "build:watch": "father dev",
     "dev": "dumi dev",
     "docs:build": "dumi build",
+    "docs:preview": "dumi preview",
     "doctor": "father doctor",
     "lint": "npm run lint:es && npm run lint:css",
     "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
@@ -56,19 +57,19 @@
     ]
   },
   "dependencies": {
-    "@ant-design/icons": "^5.0.1",
-    "@monaco-editor/react": "^4.4.6",
-    "antd": "^5.2.3",
-    "lodash": "^4.17.21",
-    "mobx": "^6.8.0",
-    "mobx-react": "^7.6.0"
+    "@ant-design/icons": "^5.3.7",
+    "@monaco-editor/react": "^4.6.0",
+    "antd": "^5.18.0",
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
-    "@types/lodash": "^4.14.191",
+    "@types/lodash": "^4.17.4",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@umijs/lint": "^4.0.0",
-    "dumi": "^2.0.2",
+    "dumi": "^2.3.0",
     "eslint": "^8.23.0",
     "father": "^4.1.0",
     "husky": "^8.0.1",
@@ -88,6 +89,6 @@
     "access": "public"
   },
   "authors": [
-    "lin-mt <lin-mt@outlook.com>"
+    "[email protected]"
   ]
 }

src/JsonSchemaEditor/MonacoEditor/index.tsx

@@ -0,0 +1,86 @@
+import Editor, { OnChange } from '@monaco-editor/react';
+import { theme } from 'antd';
+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;
+
+  const { token } = theme.useToken();
+
+  function editorWillMount(monaco: any) {
+    monaco.editor.defineTheme('x-code-default', xcodeDefault);
+  }
+
+  return (
+    <div
+      style={{
+        border: `1px solid ${token.colorBorder}`,
+        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: 5,
+          lineNumbersMinChars: 3,
+          // 滚动条样式
+          scrollbar: {
+            verticalScrollbarSize: 9,
+            horizontalScrollbarSize: 9,
+          },
+          // 小地图
+          minimap: {
+            enabled: false,
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export default MonacoEditor;