@flowgram.ai/form-materials 0.4.13 → 0.4.14

package/dist/cjs/components/code-editor/editor.js

@@ -1,21 +1,5 @@
 "use strict";
-var __webpack_modules__ = {
-    "./init-worker": function(module) {
-        module.exports = import("./init-worker.js").then(function(module) {
-            return module;
-        });
-    }
-};
-var __webpack_module_cache__ = {};
-function __webpack_require__(moduleId) {
-    var cachedModule = __webpack_module_cache__[moduleId];
-    if (void 0 !== cachedModule) return cachedModule.exports;
-    var module = __webpack_module_cache__[moduleId] = {
-        exports: {}
-    };
-    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-    return module.exports;
-}
+var __webpack_require__ = {};
 (()=>{
     __webpack_require__.n = (module)=>{
         var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
@@ -47,67 +31,60 @@ function __webpack_require__(moduleId) {
     };
 })();
 var __webpack_exports__ = {};
-(()=>{
-    __webpack_require__.r(__webpack_exports__);
-    __webpack_require__.d(__webpack_exports__, {
-        CodeEditor: ()=>CodeEditor
-    });
-    const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-    const external_react_namespaceObject = require("react");
-    const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
-    const preset_code_namespaceObject = require("@flowgram.ai/coze-editor/preset-code");
-    var preset_code_default = /*#__PURE__*/ __webpack_require__.n(preset_code_namespaceObject);
-    const view_namespaceObject = require("@codemirror/view");
-    const external_utils_js_namespaceObject = require("./utils.js");
-    require("./theme/index.js");
-    require("./language-features.js");
-    const OriginCodeEditor = (0, react_namespaceObject.createRenderer)(preset_code_default(), [
-        view_namespaceObject.EditorView.theme({
-            '&.cm-focused': {
-                outline: 'none'
-            }
-        })
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    CodeEditor: ()=>CodeEditor
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const react_namespaceObject = require("@flowgram.ai/coze-editor/react");
+const preset_code_namespaceObject = require("@flowgram.ai/coze-editor/preset-code");
+var preset_code_default = /*#__PURE__*/ __webpack_require__.n(preset_code_namespaceObject);
+const semi_ui_namespaceObject = require("@douyinfe/semi-ui");
+const view_namespaceObject = require("@codemirror/view");
+const external_utils_js_namespaceObject = require("./utils.js");
+const external_language_features_js_namespaceObject = require("./language-features.js");
+const OriginCodeEditor = (0, react_namespaceObject.createRenderer)(preset_code_default(), [
+    view_namespaceObject.EditorView.theme({
+        '&.cm-focused': {
+            outline: 'none'
+        }
+    })
+]);
+function CodeEditor({ value, onChange, languageId = 'python', theme = 'light', children, placeholder, activeLinePlaceholder, options, readonly }) {
+    const { loaded } = (0, external_language_features_js_namespaceObject.useDynamicLoadLanguage)(languageId);
+    const editorRef = (0, external_react_namespaceObject.useRef)(null);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (editorRef.current?.getValue() !== value) editorRef.current?.setValue(String(value || ''));
+    }, [
+        value
     ]);
-    function CodeEditor({ value, onChange, languageId = 'python', theme = 'light', children, placeholder, activeLinePlaceholder, options, readonly }) {
-        const editorRef = (0, external_react_namespaceObject.useRef)(null);
-        (0, external_react_namespaceObject.useEffect)(()=>{
-            if (editorRef.current?.getValue() !== value) editorRef.current?.setValue(String(value || ''));
-        }, [
-            value
-        ]);
-        (0, external_react_namespaceObject.useEffect)(()=>{
-            if ("typescript" === languageId) Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "./init-worker")).then((module)=>{
-                module.initTsWorker();
-            });
-        }, [
-            languageId
-        ]);
-        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.EditorProvider, {
-            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(OriginCodeEditor, {
-                defaultValue: String(value || ''),
-                options: {
-                    uri: `file:///untitled${(0, external_utils_js_namespaceObject.getSuffixByLanguageId)(languageId)}`,
-                    languageId,
-                    theme,
-                    placeholder,
-                    readOnly: readonly,
-                    editable: !readonly,
-                    ...options || {}
-                },
-                didMount: (editor)=>{
-                    editorRef.current = editor;
-                },
-                onChange: (e)=>onChange?.(e.value),
-                children: [
-                    activeLinePlaceholder && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.ActiveLinePlaceholder, {
-                        children: activeLinePlaceholder
-                    }),
-                    children
-                ]
-            })
-        });
-    }
-})();
+    if (!loaded) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(semi_ui_namespaceObject.Skeleton, {});
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.EditorProvider, {
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(OriginCodeEditor, {
+            defaultValue: String(value || ''),
+            options: {
+                uri: `file:///untitled${(0, external_utils_js_namespaceObject.getSuffixByLanguageId)(languageId)}`,
+                languageId,
+                theme,
+                placeholder,
+                readOnly: readonly,
+                editable: !readonly,
+                ...options || {}
+            },
+            didMount: (editor)=>{
+                editorRef.current = editor;
+            },
+            onChange: (e)=>onChange?.(e.value),
+            children: [
+                activeLinePlaceholder && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.ActiveLinePlaceholder, {
+                    children: activeLinePlaceholder
+                }),
+                children
+            ]
+        })
+    });
+}
 exports.CodeEditor = __webpack_exports__.CodeEditor;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "CodeEditor"

package/dist/cjs/components/code-editor/index.js

@@ -4,6 +4,11 @@ var __webpack_modules__ = {
         module.exports = import("./editor.js").then(function(module) {
             return module;
         });
+    },
+    "./theme": function(module) {
+        module.exports = import("./theme/index.js").then(function(module) {
+            return module;
+        });
     }
 };
 var __webpack_module_cache__ = {};
@@ -44,8 +49,11 @@ var __webpack_exports__ = {};
         CodeEditor: ()=>CodeEditor
     });
     const index_js_namespaceObject = require("../../shared/index.js");
-    const CodeEditor = (0, index_js_namespaceObject.lazySuspense)(()=>Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "./editor")).then((module)=>({
-                default: module.CodeEditor
+    const CodeEditor = (0, index_js_namespaceObject.lazySuspense)(()=>Promise.all([
+            Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "./editor")),
+            Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "./theme"))
+        ]).then(([editorModule])=>({
+                default: editorModule.CodeEditor
             })));
 })();
 exports.CodeEditor = __webpack_exports__.CodeEditor;

package/dist/cjs/components/code-editor/language-features.js

@@ -1,21 +1,124 @@
 "use strict";
+const __rslib_import_meta_url__ = /*#__PURE__*/ function() {
+    return 'undefined' == typeof document ? new (require('url'.replace('', ''))).URL('file:' + __filename).href : document.currentScript && document.currentScript.src || new URL('main.js', document.baseURI).href;
+}();
+var __webpack_modules__ = {
+    "@flowgram.ai/coze-editor/language-json": function(module) {
+        module.exports = import("@flowgram.ai/coze-editor/language-json").then(function(module) {
+            return module;
+        });
+    },
+    "@flowgram.ai/coze-editor/language-python": function(module) {
+        module.exports = import("@flowgram.ai/coze-editor/language-python").then(function(module) {
+            return module;
+        });
+    },
+    "@flowgram.ai/coze-editor/language-shell": function(module) {
+        module.exports = import("@flowgram.ai/coze-editor/language-shell").then(function(module) {
+            return module;
+        });
+    },
+    "@flowgram.ai/coze-editor/language-typescript": function(module) {
+        module.exports = import("@flowgram.ai/coze-editor/language-typescript").then(function(module) {
+            return module;
+        });
+    }
+};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
 var __webpack_exports__ = {};
-const preset_code_namespaceObject = require("@flowgram.ai/coze-editor/preset-code");
-const language_typescript_namespaceObject = require("@flowgram.ai/coze-editor/language-typescript");
-const language_shell_namespaceObject = require("@flowgram.ai/coze-editor/language-shell");
-const language_python_namespaceObject = require("@flowgram.ai/coze-editor/language-python");
-const language_json_namespaceObject = require("@flowgram.ai/coze-editor/language-json");
-const coze_editor_namespaceObject = require("@flowgram.ai/coze-editor");
-preset_code_namespaceObject.languages.register('python', language_python_namespaceObject.python);
-preset_code_namespaceObject.languages.register('shell', language_shell_namespaceObject.shell);
-preset_code_namespaceObject.languages.register("typescript", language_typescript_namespaceObject.typescript);
-preset_code_namespaceObject.languages.register('json', {
-    language: (0, coze_editor_namespaceObject.mixLanguages)({
-        outerLanguage: language_json_namespaceObject.json.language
-    }),
-    languageService: language_json_namespaceObject.json.languageService
-});
-for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+(()=>{
+    __webpack_require__.r(__webpack_exports__);
+    __webpack_require__.d(__webpack_exports__, {
+        dynamicLoadLanguages: ()=>dynamicLoadLanguages,
+        useDynamicLoadLanguage: ()=>useDynamicLoadLanguage
+    });
+    const external_react_namespaceObject = require("react");
+    const preset_code_namespaceObject = require("@flowgram.ai/coze-editor/preset-code");
+    const coze_editor_namespaceObject = require("@flowgram.ai/coze-editor");
+    const dynamicLoadLanguages = {
+        python: ()=>Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "@flowgram.ai/coze-editor/language-python")).then((module)=>{
+                preset_code_namespaceObject.languages.register('python', module.python);
+            }),
+        shell: ()=>Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "@flowgram.ai/coze-editor/language-shell")).then((module)=>{
+                preset_code_namespaceObject.languages.register('shell', module.shell);
+            }),
+        typescript: ()=>Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "@flowgram.ai/coze-editor/language-typescript")).then((module)=>{
+                preset_code_namespaceObject.languages.register("typescript", module.typescript);
+                const tsWorker = new Worker(new URL("@flowgram.ai/coze-editor/language-typescript/worker", __rslib_import_meta_url__), {
+                    type: 'module'
+                });
+                module.typescript.languageService.initialize(tsWorker, {
+                    compilerOptions: {
+                        lib: [
+                            'es2015',
+                            'dom'
+                        ],
+                        noImplicitAny: false
+                    }
+                });
+            }),
+        json: ()=>Promise.resolve().then(__webpack_require__.bind(__webpack_require__, "@flowgram.ai/coze-editor/language-json")).then((module)=>{
+                preset_code_namespaceObject.languages.register('json', {
+                    language: (0, coze_editor_namespaceObject.mixLanguages)({
+                        outerLanguage: module.json.language
+                    }),
+                    languageService: module.json.languageService
+                });
+            })
+    };
+    const useDynamicLoadLanguage = (languageId)=>{
+        const [loaded, setLoaded] = (0, external_react_namespaceObject.useState)((0, external_react_namespaceObject.useMemo)(()=>!!preset_code_namespaceObject.languages.get(languageId), [
+            languageId
+        ]));
+        (0, external_react_namespaceObject.useEffect)(()=>{
+            if (!loaded && dynamicLoadLanguages[languageId]) dynamicLoadLanguages[languageId]().then(()=>{
+                setLoaded(true);
+            });
+        }, [
+            languageId,
+            loaded
+        ]);
+        return {
+            loaded
+        };
+    };
+})();
+exports.dynamicLoadLanguages = __webpack_exports__.dynamicLoadLanguages;
+exports.useDynamicLoadLanguage = __webpack_exports__.useDynamicLoadLanguage;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "dynamicLoadLanguages",
+    "useDynamicLoadLanguage"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/dist/cjs/components/code-editor/theme/dark.js

@@ -24,29 +24,48 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    darkTheme: ()=>darkTheme
+    darkTheme: ()=>darkTheme,
+    colors: ()=>colors
 });
 const preset_code_namespaceObject = require("@flowgram.ai/coze-editor/preset-code");
 const colors = {
-    background: '#0D1117',
-    comment: '#8B949E',
-    key: '#7DD3FC',
-    variable: '#F472B6',
-    string: '#34D399',
-    number: '#FBBF24',
-    boolean: '#A78BFA',
-    null: '#A78BFA',
-    separator: '#E6EDF3'
+    background: '#24292e',
+    foreground: '#d1d5da',
+    selection: '#3392FF44',
+    cursor: '#c8e1ff',
+    dropdownBackground: '#24292e',
+    dropdownBorder: '#1b1f23',
+    activeLine: '#4d566022',
+    matchingBracket: '#888892',
+    keyword: '#9197F1',
+    storage: '#f97583',
+    variable: '#ffab70',
+    variableName: '#D9DCFA',
+    parameter: '#e1e4e8',
+    function: '#FFCA66',
+    string: '#FF9878',
+    constant: '#79b8ff',
+    type: '#79b8ff',
+    class: '#b392f0',
+    number: '#2EC7D9',
+    comment: '#568B2A',
+    heading: '#79b8ff',
+    invalid: '#f97583',
+    regexp: '#9ecbff',
+    propertyName: '#9197F1',
+    separator: '#888892',
+    gutters: '#888892',
+    moduleKeyword: '#CC4FD4'
 };
 const darkTheme = (0, preset_code_namespaceObject.createTheme)({
     variant: 'dark',
     settings: {
         background: colors.background,
-        foreground: '#E6EDF3',
-        caret: '#7DD3FC',
-        selection: '#264F7833',
+        foreground: colors.foreground,
+        caret: colors.cursor,
+        selection: colors.selection,
         gutterBackground: colors.background,
-        gutterForeground: '#6E7681',
+        gutterForeground: colors.foreground,
         gutterBorderColor: 'transparent',
         gutterBorderWidth: 0,
         lineHighlight: '#21262D',
@@ -67,7 +86,8 @@ const darkTheme = (0, preset_code_namespaceObject.createTheme)({
             backgroundColor: '#21262D'
         },
         completionItemSelected: {
-            backgroundColor: '#1F6EEB'
+            backgroundColor: colors.selection,
+            color: colors.foreground
         },
         completionItemIcon: {
             color: '#8B949E'
@@ -84,103 +104,153 @@ const darkTheme = (0, preset_code_namespaceObject.createTheme)({
     },
     styles: [
         {
-            tag: preset_code_namespaceObject.tags.comment,
-            color: colors.comment
+            tag: preset_code_namespaceObject.tags.keyword,
+            color: colors.keyword
+        },
+        {
+            tag: preset_code_namespaceObject.tags.variableName,
+            color: colors.variableName
         },
         {
             tag: [
-                preset_code_namespaceObject.tags.propertyName
+                preset_code_namespaceObject.tags.name,
+                preset_code_namespaceObject.tags.deleted,
+                preset_code_namespaceObject.tags.character,
+                preset_code_namespaceObject.tags.macroName
             ],
-            color: colors.key
+            color: colors.variable
         },
         {
             tag: [
-                preset_code_namespaceObject.tags.string
+                preset_code_namespaceObject.tags.propertyName
             ],
-            color: colors.string
+            color: colors.propertyName
         },
         {
             tag: [
-                preset_code_namespaceObject.tags.number
+                preset_code_namespaceObject.tags.processingInstruction,
+                preset_code_namespaceObject.tags.string,
+                preset_code_namespaceObject.tags.inserted,
+                preset_code_namespaceObject.tags.special(preset_code_namespaceObject.tags.string)
             ],
-            color: colors.number
+            color: colors.string
         },
         {
             tag: [
-                preset_code_namespaceObject.tags.bool
+                preset_code_namespaceObject.tags["function"](preset_code_namespaceObject.tags.variableName),
+                preset_code_namespaceObject.tags["function"](preset_code_namespaceObject.tags.propertyName),
+                preset_code_namespaceObject.tags.labelName
             ],
-            color: colors.boolean
+            color: colors.function
         },
         {
             tag: [
-                preset_code_namespaceObject.tags["null"]
+                preset_code_namespaceObject.tags.moduleKeyword,
+                preset_code_namespaceObject.tags.controlKeyword
             ],
-            color: colors.null
+            color: colors.moduleKeyword
         },
         {
             tag: [
-                preset_code_namespaceObject.tags.separator
+                preset_code_namespaceObject.tags.color,
+                preset_code_namespaceObject.tags.constant(preset_code_namespaceObject.tags.name),
+                preset_code_namespaceObject.tags.standard(preset_code_namespaceObject.tags.name)
             ],
-            color: colors.separator
+            color: colors.constant
+        },
+        {
+            tag: preset_code_namespaceObject.tags.definition(preset_code_namespaceObject.tags.name),
+            color: colors.variable
         },
         {
             tag: [
-                preset_code_namespaceObject.tags.definitionKeyword
+                preset_code_namespaceObject.tags.className
             ],
-            color: '#C084FC'
+            color: colors.class
         },
         {
             tag: [
-                preset_code_namespaceObject.tags.modifier
+                preset_code_namespaceObject.tags.number,
+                preset_code_namespaceObject.tags.changed,
+                preset_code_namespaceObject.tags.annotation,
+                preset_code_namespaceObject.tags.modifier,
+                preset_code_namespaceObject.tags.self,
+                preset_code_namespaceObject.tags.namespace
             ],
-            color: '#C084FC'
+            color: colors.number
         },
         {
             tag: [
-                preset_code_namespaceObject.tags.controlKeyword
+                preset_code_namespaceObject.tags.typeName
             ],
-            color: '#C084FC'
+            color: colors.type,
+            fontStyle: colors.type
         },
         {
             tag: [
                 preset_code_namespaceObject.tags.operatorKeyword
             ],
-            color: '#C084FC'
+            color: colors.keyword
         },
         {
             tag: [
-                preset_code_namespaceObject.tags.heading
+                preset_code_namespaceObject.tags.url,
+                preset_code_namespaceObject.tags.escape,
+                preset_code_namespaceObject.tags.regexp,
+                preset_code_namespaceObject.tags.link
             ],
-            color: '#7DD3FC'
+            color: colors.regexp
         },
         {
             tag: [
-                preset_code_namespaceObject.tags.processingInstruction
+                preset_code_namespaceObject.tags.meta,
+                preset_code_namespaceObject.tags.comment
             ],
-            color: '#7DD3FC'
+            color: colors.comment
         },
         {
-            tag: [
-                preset_code_namespaceObject.tags.standard(preset_code_namespaceObject.tags.variableName)
-            ],
-            color: '#34D399'
+            tag: preset_code_namespaceObject.tags.strong,
+            fontWeight: 'bold'
         },
         {
-            tag: [
-                preset_code_namespaceObject.tags.attributeName
-            ],
-            color: '#FBBF24'
+            tag: preset_code_namespaceObject.tags.emphasis,
+            fontStyle: 'italic'
+        },
+        {
+            tag: preset_code_namespaceObject.tags.link,
+            textDecoration: 'underline'
+        },
+        {
+            tag: preset_code_namespaceObject.tags.heading,
+            fontWeight: 'bold',
+            color: colors.heading
         },
         {
             tag: [
-                preset_code_namespaceObject.tags.special(preset_code_namespaceObject.tags.string)
+                preset_code_namespaceObject.tags.atom,
+                preset_code_namespaceObject.tags.bool,
+                preset_code_namespaceObject.tags.special(preset_code_namespaceObject.tags.variableName)
             ],
-            color: '#7DD3FC'
+            color: colors.variable
+        },
+        {
+            tag: preset_code_namespaceObject.tags.invalid,
+            color: colors.invalid
+        },
+        {
+            tag: preset_code_namespaceObject.tags.strikethrough,
+            textDecoration: 'line-through'
+        },
+        {
+            tag: preset_code_namespaceObject.tags.separator,
+            color: colors.separator
         }
     ]
 });
+exports.colors = __webpack_exports__.colors;
 exports.darkTheme = __webpack_exports__.darkTheme;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "colors",
     "darkTheme"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {