使用新的编辑器库，playground获得更多功能 (#418)

.umirc.js

 import { defineConfig } from 'dumi';
+import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
 import path from 'path';
 
 export default defineConfig({
@@ -109,5 +110,8 @@ export default defineConfig({
       '@alifd/next',
     ],
   ],
+  chainWebpack(config, { webpack }) {
+    config.plugin('monaco-editor').use(MonacoWebpackPlugin);
+  },
   // more config: https://d.umijs.org/config
 });

docs/playground/main.js

 import React, { useState, useEffect } from 'react';
-import deepEqual from 'deep-equal';
 import parseJson from 'json-parse-better-errors';
 import FormRender, { useForm } from 'form-render';
 import DefaultSchema from './json/simplest.json';
 import { Tabs } from 'antd';
 import AsyncSelect from './customized/AsyncSelect';
-import CodeBlock from './monaco';
+import MonacoEditor from './monaco';
 const { TabPane } = Tabs;
 
 // help functions
@@ -54,15 +53,21 @@ const Demo = ({ schemaName, theme, ...formProps }) => {
       <div className="w-50 h-100 pl2 flex flex-column">
         <Tabs
           defaultActiveKey="1"
-          onChange={() => {}}
+          onChange={() => { }}
           className="flex flex-column"
           style={{ overflow: 'auto' }}
         >
           <TabPane tab="Schema" key="1">
-            <CodeBlock value={schemaStr} onChange={handleCodeChange} />
+            <MonacoEditor
+              value={schemaStr}
+              onChange={handleCodeChange}
+            />
           </TabPane>
           <TabPane tab="Data" key="2">
-            <CodeBlock value={schema2str(form.getValues())} readOnly />
+            <MonacoEditor
+              value={schema2str(form.getValues())}
+              options={{ readOnly: true }}
+            />
           </TabPane>
         </Tabs>
       </div>

docs/playground/monaco/index.js

 import React from 'react';
-import Editor from 'react-simple-code-editor';
-import { languages, highlight } from 'prismjs/components/prism-core';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import './theme.css';
+import MonacoEditor from 'react-monaco-editor';
+import { valueMap, keySuggestions } from './suggestionsMap';
+
+const Demo = ({ value, onChange, options }) => {
+
+  const editorWillMount = (monaco) => {
+    monaco.languages.registerCompletionItemProvider('json', {
+      provideCompletionItems: (model, position) => {
+
+        // 得到冒号之前的文本
+        var textUntilPosition = model.getValueInRange({
+          startLineNumber: position.lineNumber,
+          startColumn: 1,
+          endLineNumber: position.lineNumber,
+          endColumn: position.column
+        });
+
+        const word = model.getWordUntilPosition(position);
+        const range = {
+          startLineNumber: position.lineNumber,
+          endLineNumber: position.lineNumber,
+          startColumn: word.startColumn,
+          endColumn: word.endColumn
+        };
+
+        let propKey = '';
+        const match = textUntilPosition.match(/[a-z]+(?=["][:])/)
+        if (match && match.length) {
+          propKey = match[0];
+        }
+
+        const suggestions = propKey ? (valueMap(range)[propKey] || []) : keySuggestions(range)
+
+        return { suggestions }
+
+      },
+      triggerCharacters: ['"']
+    });
+  }
 
-const Demo = ({ value, onChange }) => {
   return (
-    <Editor
+    <MonacoEditor
+      height="800px"
+      language="json"
       value={value}
-      onValueChange={onChange}
-      highlight={code => highlight(code, languages.js)}
-      padding={10}
-      style={{
-        fontFamily: '"Fira code", "Fira Mono", monospace',
-        fontSize: 16,
-      }}
+      onChange={onChange}
+      editorWillMount={editorWillMount}
+      options={options}
     />
   );
 };

docs/playground/monaco/suggestionsMap.js

+import { monaco } from 'react-monaco-editor'
+
+const valueMap = (range) => {
+  return {
+    widget: [
+      {
+        label: 'input',
+        insertText: 'input',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '输入框'
+      },
+      {
+        label: 'textarea',
+        insertText: 'textarea',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '多行输入框'
+      },
+      {
+        label: 'date',
+        insertText: 'date',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '日期组件'
+      },
+      {
+        label: 'time',
+        insertText: 'time',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '时间组件'
+      },
+      {
+        label: 'dateRange',
+        insertText: 'dateRange',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '日期范围'
+      },
+      {
+        label: 'timeRange',
+        insertText: 'timeRange',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '时间范围'
+      },
+      {
+        label: 'checkbox',
+        insertText: 'checkbox',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '是否选择'
+      },
+      {
+        label: 'select',
+        insertText: 'select',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '下拉单选'
+      },
+      {
+        label: 'radio',
+        insertText: 'radio',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '点击单选'
+      },
+      {
+        label: 'multiSelect',
+        insertText: 'multiSelect',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '下拉多选框'
+      },
+      {
+        label: 'checkboxes',
+        insertText: 'checkboxes',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '点击多选框'
+      },
+      {
+        label: 'cascader',
+        insertText: 'cascader',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '级联选择'
+      },
+      {
+        label: 'treeSelect',
+        insertText: 'treeSelect',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '树形选择'
+      },
+      {
+        label: 'color',
+        insertText: 'color',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '颜色选择'
+      },
+      {
+        label: 'upload',
+        insertText: 'upload',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '上传组件'
+      },
+      {
+        label: 'html',
+        insertText: 'html',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '文本（只读展示）'
+      },
+      {
+        label: 'slider',
+        insertText: 'slider',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '滑动输入条'
+      },
+      {
+        label: 'rate',
+        insertText: 'rate',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '五星评分'
+      },
+      {
+        label: 'map',
+        insertText: 'map',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '对象'
+      },
+      {
+        label: 'list0',
+        insertText: 'list0',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '列表(复杂结构，但item数量不大)'
+      },
+      {
+        label: 'list1',
+        insertText: 'list1',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '列表(每个item有1-2条数据，没有复杂结构)'
+      },
+      {
+        label: 'list2',
+        insertText: 'list2',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '列表(每个item有3-5条数据，没有复杂结构)'
+      },
+      {
+        label: 'list3',
+        insertText: 'list3',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '列表(每个item数据量大，或者结构复杂)'
+      },
+    ],
+    type: [
+      {
+        label: 'string',
+        insertText: 'string',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'string'
+      },
+      {
+        label: 'number',
+        insertText: 'number',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'number'
+      },
+      {
+        label: 'boolean',
+        insertText: 'boolean',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'boolean'
+      },
+      {
+        label: 'array',
+        insertText: 'array',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'array'
+      },
+      {
+        label: 'object',
+        insertText: 'object',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'object'
+      },
+      {
+        label: 'range',
+        insertText: 'range',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'range'
+      },
+      {
+        label: 'html',
+        insertText: 'html',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'html'
+      },
+    ],
+    format: [
+      {
+        label: 'image',
+        insertText: 'image',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'image'
+      },
+      {
+        label: 'textarea',
+        insertText: 'textarea',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'textarea'
+      },
+      {
+        label: 'color',
+        insertText: 'color',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'color'
+      },
+      {
+        label: 'email',
+        insertText: 'email',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'email'
+      },
+      {
+        label: 'url',
+        insertText: 'url',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'url'
+      },
+      {
+        label: 'dateTime',
+        insertText: 'dateTime',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'dateTime'
+      },
+      {
+        label: 'date',
+        insertText: 'date',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'date'
+      },
+      {
+        label: 'time',
+        insertText: 'time',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'time'
+      },
+      {
+        label: 'upload',
+        insertText: 'upload',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: 'upload'
+      },
+    ],
+    displayType: [
+      {
+        label: 'row',
+        insertText: 'row',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '并排展示'
+      },
+      {
+        label: 'column',
+        insertText: 'column',
+        kind: monaco.languages.CompletionItemKind['Keyword'],
+        range,
+        detail: '两排展示'
+      },
+    ]
+  }
+}
+
+const keySuggestions =(range) => [
+  {
+    label: 'title',
+    insertText: 'title',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '表单的标题信息'
+  },
+  {
+    label: 'description',
+    insertText: 'description',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '表单的描述信息'
+  },
+  {
+    label: 'type',
+    insertText: 'type',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '组件值的数据类型'
+  },
+  {
+    label: 'format',
+    insertText: 'format',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '输入框的格式'
+  },
+  {
+    label: 'default',
+    insertText: 'default',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '组件的默认值'
+  },
+  {
+    label: 'required',
+    insertText: 'required',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '是否必填'
+  },
+  {
+    label: 'placeholder',
+    insertText: 'placeholder',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: 'placeholder'
+  },
+  {
+    label: 'bind',
+    insertText: 'bind',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: 'bind'
+  },
+  {
+    label: 'min',
+    insertText: 'min',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '最小值'
+  },
+  {
+    label: 'max',
+    insertText: 'max',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '最大值'
+  },
+  {
+    label: 'disabled',
+    insertText: 'disabled',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '是否禁用'
+  },
+  {
+    label: 'readOnly',
+    insertText: 'readOnly',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '是否只读'
+  },
+  {
+    label: 'hidden',
+    insertText: 'hidden',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '是否隐藏'
+  },
+  {
+    label: 'displayType',
+    insertText: 'displayType',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '表单布局'
+  },
+  {
+    label: 'width',
+    insertText: 'width',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '单个元素的展示宽度'
+  },
+  {
+    label: 'labelWidth',
+    insertText: 'labelWidth',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: 'label 的宽度'
+  },
+  {
+    label: 'className',
+    insertText: 'className',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: 'className'
+  },
+  {
+    label: 'widget',
+    insertText: 'widget',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '指定使用哪个组件渲染'
+  },
+  {
+    label: 'readOnlyWidget',
+    insertText: 'readOnlyWidget',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '指定只读模式下用哪个自定义组件渲染'
+  },
+  {
+    label: 'extra',
+    insertText: 'extra',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '展示更多说明信息'
+  },
+  {
+    label: 'properties',
+    insertText: 'properties',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '包裹对象的子属性(只在对象组件中使用)'
+  },
+  {
+    label: 'items',
+    insertText: 'items',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '描述列表中每个item的结构(只在列表中使用)'
+  },
+  {
+    label: 'enum',
+    insertText: 'enum',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '描述枚举值的值'
+  },
+  {
+    label: 'enumNames',
+    insertText: 'enumNames',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '描述枚举值的文案'
+  },
+  {
+    label: 'rules',
+    insertText: 'rules',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '校验rules'
+  },
+  {
+    label: 'props',
+    insertText: 'enumNames',
+    kind: monaco.languages.CompletionItemKind['Keyword'],
+    range,
+    detail: '额外组件属性'
+  },
+]
+
+export { valueMap, keySuggestions }
\ No newline at end of file

docs/playground/monaco/theme.css

-/* PrismJS 1.16.0
-https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+graphql+jsx+regex */
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-
-code[class*='language-'],
-pre[class*='language-'] {
-  color: black;
-  background: none;
-  text-shadow: 0 1px white;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  font-size: 1em;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-pre[class*='language-']::-moz-selection,
-pre[class*='language-'] ::-moz-selection,
-code[class*='language-']::-moz-selection,
-code[class*='language-'] ::-moz-selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-pre[class*='language-']::selection,
-pre[class*='language-'] ::selection,
-code[class*='language-']::selection,
-code[class*='language-'] ::selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-@media print {
-  code[class*='language-'],
-  pre[class*='language-'] {
-    text-shadow: none;
-  }
-}
-
-/* Code blocks */
-pre[class*='language-'] {
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-}
-
-:not(pre) > code[class*='language-'],
-pre[class*='language-'] {
-  background: #f5f2f0;
-}
-
-/* Inline code */
-:not(pre) > code[class*='language-'] {
-  padding: 0.1em;
-  border-radius: 0.3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: slategray;
-}
-
-.token.punctuation {
-  color: #999;
-}
-
-.namespace {
-  opacity: 0.7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #905;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #690;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #9a6e3a;
-  background: hsla(0, 0%, 100%, 0.5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #07a;
-}
-
-.token.function,
-.token.class-name {
-  color: #dd4a68;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-  color: #e90;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}

package.json

@@ -44,5 +44,9 @@
     "url": "git+https://github.com/alibaba/x-render.git",
     "branch": "master",
     "platform": "github"
+  },
+  "dependencies": {
+    "monaco-editor-webpack-plugin": "^3.1.0",
+    "react-monaco-editor": "^0.43.0"
   }
 }