@thienvu18/designable-react-settings-form 2.0.0 → 2.0.2

package/lib/components/MonacoInput/index.js

@@ -1,246 +1,352 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MonacoInput = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = __importStar(require("@monaco-editor/react"));
-const designable_react_1 = require("@thienvu18/designable-react");
-const antd_1 = require("antd");
-const parser_1 = require("@babel/parser");
-const designable_shared_1 = require("@thienvu18/designable-shared");
-const format_1 = require("./format");
-const classnames_1 = __importDefault(require("classnames"));
-require("./styles.less");
-require("./config");
-const config_1 = require("./config");
-const MonacoInput = ({ className, language, defaultLanguage, width, helpLink, helpCode, helpCodeViewWidth, height, onMount, onChange, ...props }) => {
-    const [loaded, setLoaded] = (0, react_1.useState)(false);
-    const theme = (0, designable_react_1.useTheme)();
-    const valueRef = (0, react_1.useRef)('');
-    const validateRef = (0, react_1.useRef)(null);
-    const submitRef = (0, react_1.useRef)(null);
-    const declarationRef = (0, react_1.useRef)([]);
-    const extraLibRef = (0, react_1.useRef)(null);
-    const monacoRef = (0, react_1.useRef)(null);
-    const editorRef = (0, react_1.useRef)(null);
-    const computedLanguage = (0, react_1.useRef)(language || defaultLanguage);
-    const realLanguage = (0, react_1.useRef)('');
-    const unmountedRef = (0, react_1.useRef)(false);
-    const changedRef = (0, react_1.useRef)(false);
-    const uidRef = (0, react_1.useRef)((0, designable_shared_1.uid)());
-    const prefix = (0, designable_react_1.usePrefix)('monaco-input');
-    const input = props.value || props.defaultValue;
-    (0, react_1.useEffect)(() => {
-        unmountedRef.current = false;
-        (0, config_1.initMonaco)();
-        return () => {
-            if (extraLibRef.current) {
-                extraLibRef.current.dispose();
-            }
-            unmountedRef.current = true;
-        };
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (monacoRef.current && props.extraLib) {
-            updateExtraLib();
+'use strict'
+var __createBinding =
+  (this && this.__createBinding) ||
+  (Object.create
+    ? function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k
+        var desc = Object.getOwnPropertyDescriptor(m, k)
+        if (
+          !desc ||
+          ('get' in desc ? !m.__esModule : desc.writable || desc.configurable)
+        ) {
+          desc = {
+            enumerable: true,
+            get: function () {
+              return m[k]
+            },
+          }
         }
-    }, [props.extraLib]);
-    const updateExtraLib = () => {
-        if (extraLibRef.current) {
-            extraLibRef.current.dispose();
-        }
-        extraLibRef.current =
-            monacoRef.current.languages.typescript.typescriptDefaults.addExtraLib(props.extraLib, `${uidRef.current}.d.ts`);
-    };
-    const isFileLanguage = () => {
-        const lang = computedLanguage.current;
-        return lang === 'javascript' || lang === 'typescript';
-    };
-    const isExpLanguage = () => {
-        const lang = computedLanguage.current;
-        return lang === 'javascript.expression' || lang === 'typescript.expression';
-    };
-    const renderHelper = () => {
-        const getHref = () => {
-            if (typeof helpLink === 'string')
-                return helpLink;
+        Object.defineProperty(o, k2, desc)
+      }
+    : function (o, m, k, k2) {
+        if (k2 === undefined) k2 = k
+        o[k2] = m[k]
+      })
+var __setModuleDefault =
+  (this && this.__setModuleDefault) ||
+  (Object.create
+    ? function (o, v) {
+        Object.defineProperty(o, 'default', { enumerable: true, value: v })
+      }
+    : function (o, v) {
+        o['default'] = v
+      })
+var __importStar =
+  (this && this.__importStar) ||
+  function (mod) {
+    if (mod && mod.__esModule) return mod
+    var result = {}
+    if (mod != null)
+      for (var k in mod)
+        if (k !== 'default' && Object.prototype.hasOwnProperty.call(mod, k))
+          __createBinding(result, mod, k)
+    __setModuleDefault(result, mod)
+    return result
+  }
+var __importDefault =
+  (this && this.__importDefault) ||
+  function (mod) {
+    return mod && mod.__esModule ? mod : { default: mod }
+  }
+Object.defineProperty(exports, '__esModule', { value: true })
+exports.MonacoInput = void 0
+const jsx_runtime_1 = require('react/jsx-runtime')
+const react_1 = require('react')
+const react_2 = __importStar(require('@monaco-editor/react'))
+const designable_react_1 = require('@thienvu18/designable-react')
+const antd_1 = require('antd')
+const parser_1 = require('@babel/parser')
+const designable_shared_1 = require('@thienvu18/designable-shared')
+const format_1 = require('./format')
+const classnames_1 = __importDefault(require('classnames'))
+require('./styles.less')
+require('./config')
+const config_1 = require('./config')
+const MonacoInput = ({
+  className,
+  language,
+  defaultLanguage,
+  width,
+  helpLink,
+  helpCode,
+  helpCodeViewWidth,
+  height,
+  onMount,
+  onChange,
+  ...props
+}) => {
+  const [loaded, setLoaded] = (0, react_1.useState)(false)
+  const theme = (0, designable_react_1.useTheme)()
+  const valueRef = (0, react_1.useRef)('')
+  const validateRef = (0, react_1.useRef)(null)
+  const submitRef = (0, react_1.useRef)(null)
+  const declarationRef = (0, react_1.useRef)([])
+  const extraLibRef = (0, react_1.useRef)(null)
+  const monacoRef = (0, react_1.useRef)(null)
+  const editorRef = (0, react_1.useRef)(null)
+  const computedLanguage = (0, react_1.useRef)(language || defaultLanguage)
+  const realLanguage = (0, react_1.useRef)('')
+  const unmountedRef = (0, react_1.useRef)(false)
+  const changedRef = (0, react_1.useRef)(false)
+  const uidRef = (0, react_1.useRef)((0, designable_shared_1.uid)())
+  const prefix = (0, designable_react_1.usePrefix)('monaco-input')
+  const input = props.value || props.defaultValue
+  ;(0, react_1.useEffect)(() => {
+    unmountedRef.current = false
+    ;(0, config_1.initMonaco)()
+    return () => {
+      if (extraLibRef.current) {
+        extraLibRef.current.dispose()
+      }
+      unmountedRef.current = true
+    }
+  }, [])
+  ;(0, react_1.useEffect)(() => {
+    if (monacoRef.current && props.extraLib) {
+      updateExtraLib()
+    }
+  }, [props.extraLib])
+  const updateExtraLib = () => {
+    if (extraLibRef.current) {
+      extraLibRef.current.dispose()
+    }
+    extraLibRef.current =
+      monacoRef.current.languages.typescript.typescriptDefaults.addExtraLib(
+        props.extraLib,
+        `${uidRef.current}.d.ts`
+      )
+  }
+  const isFileLanguage = () => {
+    const lang = computedLanguage.current
+    return lang === 'javascript' || lang === 'typescript'
+  }
+  const isExpLanguage = () => {
+    const lang = computedLanguage.current
+    return lang === 'javascript.expression' || lang === 'typescript.expression'
+  }
+  const renderHelper = () => {
+    const getHref = () => {
+      if (typeof helpLink === 'string') return helpLink
+      if (isFileLanguage()) {
+        return 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript'
+      }
+      if (isExpLanguage()) {
+        return 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators'
+      }
+    }
+    if (helpLink === false) return null
+    const href = getHref()
+    return (
+      href &&
+      (0, jsx_runtime_1.jsx)(antd_1.Tooltip, {
+        title: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, {
+          token: 'SettingComponents.MonacoInput.helpDocument',
+        }),
+        children: (0, jsx_runtime_1.jsx)('div', {
+          className: prefix + '-helper',
+          children: (0, jsx_runtime_1.jsx)('a', {
+            target: '_blank',
+            href: href,
+            rel: 'noreferrer',
+            children: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, {
+              infer: 'Help',
+            }),
+          }),
+        }),
+      })
+    )
+  }
+  const onMountHandler = (editor, monaco) => {
+    editorRef.current = editor
+    monacoRef.current = monaco
+    onMount?.(editor, monaco)
+    const model = editor.getModel()
+    const currentValue = editor.getValue()
+    model['getDesignerLanguage'] = () => computedLanguage.current
+    if (currentValue) {
+      ;(0, format_1.format)(computedLanguage.current, currentValue)
+        .then((content) => {
+          editor.setValue(content)
+          setLoaded(true)
+        })
+        .catch(() => {
+          setLoaded(true)
+        })
+    } else {
+      setLoaded(true)
+    }
+    if (props.extraLib) {
+      updateExtraLib()
+    }
+    editor.onDidChangeModelContent(() => {
+      onChangeHandler(editor.getValue())
+    })
+  }
+  const submit = () => {
+    clearTimeout(submitRef.current)
+    submitRef.current = setTimeout(() => {
+      onChange?.(valueRef.current)
+    }, 1000)
+  }
+  const validate = () => {
+    if (realLanguage.current === 'typescript') {
+      clearTimeout(validateRef.current)
+      validateRef.current = setTimeout(() => {
+        try {
+          if (valueRef.current) {
             if (isFileLanguage()) {
-                return 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript';
-            }
-            if (isExpLanguage()) {
-                return 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators';
+              ;(0, parser_1.parse)(valueRef.current, {
+                sourceType: 'module',
+                plugins: ['typescript', 'jsx'],
+              })
+            } else if (isExpLanguage()) {
+              ;(0, parser_1.parseExpression)(valueRef.current, {
+                plugins: ['typescript', 'jsx'],
+              })
             }
-        };
-        if (helpLink === false)
-            return null;
-        const href = getHref();
-        return (href && ((0, jsx_runtime_1.jsx)(antd_1.Tooltip, { title: (0, jsx_runtime_1.jsx)(designable_react_1.TextWidget, { token: "SettingComponents.MonacoInput.helpDocument" }), children: (0, jsx_runtime_1.jsx)("div", { className: prefix + '-helper', children: (0, jsx_runtime_1.jsx)("a", { target: "_blank", href: href, rel: "noreferrer", children: (0, jsx_runtime_1.jsx)(designable_react_1.IconWidget, { infer: "Help" }) }) }) })));
-    };
-    const onMountHandler = (editor, monaco) => {
-        editorRef.current = editor;
-        monacoRef.current = monaco;
-        onMount?.(editor, monaco);
-        const model = editor.getModel();
-        const currentValue = editor.getValue();
-        model['getDesignerLanguage'] = () => computedLanguage.current;
-        if (currentValue) {
-            (0, format_1.format)(computedLanguage.current, currentValue)
-                .then((content) => {
-                editor.setValue(content);
-                setLoaded(true);
-            })
-                .catch(() => {
-                setLoaded(true);
-            });
-        }
-        else {
-            setLoaded(true);
-        }
-        if (props.extraLib) {
-            updateExtraLib();
-        }
-        editor.onDidChangeModelContent(() => {
-            onChangeHandler(editor.getValue());
-        });
-    };
-    const submit = () => {
-        clearTimeout(submitRef.current);
-        submitRef.current = setTimeout(() => {
-            onChange?.(valueRef.current);
-        }, 1000);
-    };
-    const validate = () => {
-        if (realLanguage.current === 'typescript') {
-            clearTimeout(validateRef.current);
-            validateRef.current = setTimeout(() => {
-                try {
-                    if (valueRef.current) {
-                        if (isFileLanguage()) {
-                            (0, parser_1.parse)(valueRef.current, {
-                                sourceType: 'module',
-                                plugins: ['typescript', 'jsx'],
-                            });
-                        }
-                        else if (isExpLanguage()) {
-                            (0, parser_1.parseExpression)(valueRef.current, {
-                                plugins: ['typescript', 'jsx'],
-                            });
-                        }
-                    }
-                    monacoRef.current.editor.setModelMarkers(editorRef.current.getModel(), computedLanguage.current, []);
-                    declarationRef.current = editorRef.current.deltaDecorations(declarationRef.current, [
-                        {
-                            range: new monacoRef.current.Range(1, 1, 1, 1),
-                            options: {},
-                        },
-                    ]);
-                    submit();
-                }
-                catch (e) {
-                    declarationRef.current = editorRef.current.deltaDecorations(declarationRef.current, [
-                        {
-                            range: new monacoRef.current.Range(e.loc.line, e.loc.column, e.loc.line, e.loc.column),
-                            options: {
-                                isWholeLine: true,
-                                glyphMarginClassName: 'monaco-error-highline',
-                            },
-                        },
-                    ]);
-                    monacoRef.current.editor.setModelMarkers(editorRef.current.getModel(), computedLanguage.current, [
-                        {
-                            code: '1003',
-                            severity: 8,
-                            startLineNumber: e.loc.line,
-                            startColumn: e.loc.column,
-                            endLineNumber: e.loc.line,
-                            endColumn: e.loc.column,
-                            message: e.message,
-                        },
-                    ]);
-                }
-            }, 240);
-        }
-        else {
-            submit();
-            declarationRef.current = editorRef.current.deltaDecorations(declarationRef.current, [
-                {
-                    range: new monacoRef.current.Range(1, 1, 1, 1),
-                    options: {},
+          }
+          monacoRef.current.editor.setModelMarkers(
+            editorRef.current.getModel(),
+            computedLanguage.current,
+            []
+          )
+          declarationRef.current = editorRef.current.deltaDecorations(
+            declarationRef.current,
+            [
+              {
+                range: new monacoRef.current.Range(1, 1, 1, 1),
+                options: {},
+              },
+            ]
+          )
+          submit()
+        } catch (e) {
+          declarationRef.current = editorRef.current.deltaDecorations(
+            declarationRef.current,
+            [
+              {
+                range: new monacoRef.current.Range(
+                  e.loc.line,
+                  e.loc.column,
+                  e.loc.line,
+                  e.loc.column
+                ),
+                options: {
+                  isWholeLine: true,
+                  glyphMarginClassName: 'monaco-error-highline',
                 },
-            ]);
+              },
+            ]
+          )
+          monacoRef.current.editor.setModelMarkers(
+            editorRef.current.getModel(),
+            computedLanguage.current,
+            [
+              {
+                code: '1003',
+                severity: 8,
+                startLineNumber: e.loc.line,
+                startColumn: e.loc.column,
+                endLineNumber: e.loc.line,
+                endColumn: e.loc.column,
+                message: e.message,
+              },
+            ]
+          )
         }
-    };
-    const onChangeHandler = (value) => {
-        changedRef.current = true;
-        valueRef.current = value;
-        validate();
-    };
-    computedLanguage.current = language || defaultLanguage;
-    realLanguage.current = /(?:javascript|typescript)/gi.test(computedLanguage.current)
-        ? 'typescript'
-        : computedLanguage.current;
-    const renderHelpCode = () => {
-        if (!helpCode)
-            return null;
-        return ((0, jsx_runtime_1.jsx)("div", { className: prefix + '-view', style: { width: helpCodeViewWidth || '50%' }, children: (0, jsx_runtime_1.jsx)(react_2.default, { value: helpCode, theme: theme === 'dark' ? 'monokai' : 'chrome-devtools', defaultLanguage: realLanguage.current, language: realLanguage.current, options: {
-                    ...props.options,
-                    lineNumbers: 'off',
-                    readOnly: true,
-                    glyphMargin: false,
-                    folding: false,
-                    lineDecorationsWidth: 0,
-                    lineNumbersMinChars: 0,
-                    minimap: {
-                        enabled: false,
-                    },
-                    tabSize: 2,
-                    smoothScrolling: true,
-                    scrollbar: {
-                        verticalScrollbarSize: 5,
-                        horizontalScrollbarSize: 5,
-                        alwaysConsumeMouseWheel: false,
-                    },
-                }, width: "100%", height: "100%" }) }));
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(prefix, className, {
-            loaded,
-        }), style: { width, height }, children: [renderHelper(), (0, jsx_runtime_1.jsx)("div", { className: prefix + '-view', children: (0, jsx_runtime_1.jsx)(react_2.default, { ...props, theme: theme === 'dark' ? 'monokai' : 'chrome-devtools', defaultLanguage: realLanguage.current, language: realLanguage.current, options: {
-                        glyphMargin: true,
-                        ...props.options,
-                        tabSize: 2,
-                        smoothScrolling: true,
-                        scrollbar: {
-                            verticalScrollbarSize: 5,
-                            horizontalScrollbarSize: 5,
-                            alwaysConsumeMouseWheel: false,
-                        },
-                    }, value: input, width: "100%", height: "100%", onMount: onMountHandler }) }), renderHelpCode()] }));
-};
-exports.MonacoInput = MonacoInput;
-exports.MonacoInput.loader = react_2.loader;
+      }, 240)
+    } else {
+      submit()
+      declarationRef.current = editorRef.current.deltaDecorations(
+        declarationRef.current,
+        [
+          {
+            range: new monacoRef.current.Range(1, 1, 1, 1),
+            options: {},
+          },
+        ]
+      )
+    }
+  }
+  const onChangeHandler = (value) => {
+    changedRef.current = true
+    valueRef.current = value
+    validate()
+  }
+  computedLanguage.current = language || defaultLanguage
+  realLanguage.current = /(?:javascript|typescript)/gi.test(
+    computedLanguage.current
+  )
+    ? 'typescript'
+    : computedLanguage.current
+  const renderHelpCode = () => {
+    if (!helpCode) return null
+    return (0, jsx_runtime_1.jsx)('div', {
+      className: prefix + '-view',
+      style: { width: helpCodeViewWidth || '50%' },
+      children: (0, jsx_runtime_1.jsx)(react_2.default, {
+        value: helpCode,
+        theme: theme === 'dark' ? 'monokai' : 'chrome-devtools',
+        defaultLanguage: realLanguage.current,
+        language: realLanguage.current,
+        options: {
+          ...props.options,
+          lineNumbers: 'off',
+          readOnly: true,
+          glyphMargin: false,
+          folding: false,
+          lineDecorationsWidth: 0,
+          lineNumbersMinChars: 0,
+          minimap: {
+            enabled: false,
+          },
+          tabSize: 2,
+          smoothScrolling: true,
+          scrollbar: {
+            verticalScrollbarSize: 5,
+            horizontalScrollbarSize: 5,
+            alwaysConsumeMouseWheel: false,
+          },
+        },
+        width: '100%',
+        height: '100%',
+      }),
+    })
+  }
+  return (0, jsx_runtime_1.jsxs)('div', {
+    className: (0, classnames_1.default)(prefix, className, {
+      loaded,
+    }),
+    style: { width, height },
+    children: [
+      renderHelper(),
+      (0, jsx_runtime_1.jsx)('div', {
+        className: prefix + '-view',
+        children: (0, jsx_runtime_1.jsx)(react_2.default, {
+          ...props,
+          theme: theme === 'dark' ? 'monokai' : 'chrome-devtools',
+          defaultLanguage: realLanguage.current,
+          language: realLanguage.current,
+          options: {
+            glyphMargin: true,
+            ...props.options,
+            tabSize: 2,
+            smoothScrolling: true,
+            scrollbar: {
+              verticalScrollbarSize: 5,
+              horizontalScrollbarSize: 5,
+              alwaysConsumeMouseWheel: false,
+            },
+          },
+          value: input,
+          width: '100%',
+          height: '100%',
+          onMount: onMountHandler,
+        }),
+      }),
+      renderHelpCode(),
+    ],
+  })
+}
+exports.MonacoInput = MonacoInput
+exports.MonacoInput.loader = react_2.loader