feat(settings): improve MonacoInput

packages/core/src/drivers/DragDropDriver.ts

@@ -24,6 +24,7 @@ export class DragDropDriver extends EventDriver<Engine> {
     ) {
       return true
     }
+    if (e.target?.['closest']?.('.monaco-editor')) return
     GlobalState.startEvent = e
     GlobalState.dragging = false
     GlobalState.onMouseDownAt = Date.now()

packages/react-settings-form/package.json

@@ -15,10 +15,12 @@
     "build:umd": "rollup --config"
   },
   "peerDependencies": {
-    "antd": "^4.15.5"
+    "antd": "^4.0.0",
+    "@ant-design/icons": "^4.0.0"
   },
   "devDependencies": {
-    "antd": "^4.15.5"
+    "antd": "^4.15.5",
+    "@ant-design/icons": "^4.6.2"
   },
   "dependencies": {
     "@babel/parser": "^7.14.7",

packages/react-settings-form/src/components/MonacoInput/config.ts

@@ -0,0 +1,38 @@
+import { loader } from '@monaco-editor/react'
+import chromeTheme from './themes/chrome'
+import monokaiTheme from './themes/monokai'
+import { format } from './format'
+
+loader.init().then((monaco) => {
+  monaco.editor.defineTheme('monokai', monokaiTheme as any)
+  monaco.editor.defineTheme('chrome-devtools', chromeTheme as any)
+  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+    target: monaco.languages.typescript.ScriptTarget.Latest,
+    allowNonTsExtensions: true,
+    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+    module: monaco.languages.typescript.ModuleKind.CommonJS,
+    noEmit: true,
+    esModuleInterop: true,
+    jsx: monaco.languages.typescript.JsxEmit.React,
+    reactNamespace: 'React',
+    allowJs: true,
+  })
+
+  monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    noSemanticValidation: false,
+    noSyntaxValidation: true,
+  })
+  monaco.languages.registerDocumentFormattingEditProvider('typescript', {
+    async provideDocumentFormattingEdits(model) {
+      return [
+        {
+          text: await format(
+            model['getLanguage']?.() || 'typescript',
+            model.getValue()
+          ),
+          range: model.getFullModelRange(),
+        },
+      ]
+    },
+  })
+})

packages/react-settings-form/src/components/MonacoInput/format.ts

@@ -1,48 +1,49 @@
 import { parseExpression, parse } from '@babel/parser'
-import { loadScript } from '../../shared/loadScript'
 
-loadScript({
-  package: 'prettier@2.3.2',
-  entry: 'standalone.min.js',
-  root: 'prettier',
-})
+interface IPrettierModule {
+  default: {
+    format(
+      source: string,
+      options: {
+        semi?: boolean
+        parser?: (code: string) => any
+      }
+    ): string
+  }
+}
 
-export const loadPrettier = () =>
-  loadScript({
-    package: 'prettier@2.3.2',
-    entry: 'standalone.min.js',
-    root: 'prettier',
-  })
+const prettier: Promise<IPrettierModule> = new Function(
+  'return import("https://cdn.jsdelivr.net/npm/prettier@2.3.2/esm/standalone.mjs")'
+)()
 
-export const format = async (code: string, language: string) => {
-  const lang = String(language).toLocaleLowerCase()
-  if (lang === 'json') {
-    return JSON.stringify(JSON.parse(code), null, 2)
-  }
-  if (lang === 'javascript' || lang === 'typescript') {
-    return loadPrettier().then(({ format }) => {
-      return format(code, {
+export const format = async (language: string, source: string) => {
+  return prettier.then((module) => {
+    if (
+      language === 'javascript.expression' ||
+      language === 'typescript.expression'
+    ) {
+      return module.default.format(source, {
         semi: false,
         parser(text) {
-          return parse(text, {
-            sourceType: 'module',
-            plugins: ['jsx'],
+          return parseExpression(text, {
+            plugins: ['typescript', 'jsx'],
           })
         },
       })
-    })
-  }
-  if (lang === 'javascript.expression' || lang === 'typescript.expression') {
-    return loadPrettier().then(({ format }) => {
-      return format(code, {
+    }
+    if (/(?:javascript|typescript)/gi.test(language)) {
+      return module.default.format(source, {
         semi: false,
         parser(text) {
-          return parseExpression(text, {
-            plugins: ['jsx'],
+          return parse(text, {
+            plugins: ['typescript', 'jsx'],
           })
         },
       })
-    })
-  }
-  return code
+    }
+    if (language === 'json') {
+      return JSON.stringify(source, null, 2)
+    }
+    return source
+  })
 }