@flowgram.ai/form-materials 0.4.4 → 0.4.6

package/dist/esm/editor-E2BQTPCD.js

@@ -0,0 +1,388 @@
+// src/components/code-editor/editor.tsx
+import React, { useEffect, useRef } from "react";
+import {
+  ActiveLinePlaceholder,
+  createRenderer,
+  EditorProvider
+} from "@coze-editor/editor/react";
+import preset from "@coze-editor/editor/preset-code";
+import { EditorView } from "@codemirror/view";
+
+// src/components/code-editor/utils.ts
+function getSuffixByLanguageId(languageId) {
+  if (languageId === "python") {
+    return ".py";
+  }
+  if (languageId === "typescript") {
+    return ".ts";
+  }
+  if (languageId === "shell") {
+    return ".sh";
+  }
+  if (languageId === "json") {
+    return ".json";
+  }
+  return "";
+}
+
+// src/components/code-editor/language-features.ts
+import { languages } from "@coze-editor/editor/preset-code";
+import { typescript } from "@coze-editor/editor/language-typescript";
+import { shell } from "@coze-editor/editor/language-shell";
+import { python } from "@coze-editor/editor/language-python";
+import { json } from "@coze-editor/editor/language-json";
+import { mixLanguages } from "@coze-editor/editor";
+languages.register("python", python);
+languages.register("shell", shell);
+languages.register("typescript", typescript);
+languages.register("json", {
+  // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
+  language: mixLanguages({
+    outerLanguage: json.language
+  }),
+  languageService: json.languageService
+});
+var tsWorkerInit = false;
+var initTsWorker = () => {
+  if (tsWorkerInit) {
+    return;
+  }
+  tsWorkerInit = true;
+  const tsWorker = new Worker(
+    new URL(`@coze-editor/editor/language-typescript/worker`, import.meta.url),
+    { type: "module" }
+  );
+  typescript.languageService.initialize(tsWorker, {
+    compilerOptions: {
+      // eliminate Promise error
+      lib: ["es2015", "dom"],
+      noImplicitAny: false
+    }
+  });
+};
+
+// src/components/code-editor/theme/index.ts
+import { themes } from "@coze-editor/editor/preset-code";
+
+// src/components/code-editor/theme/light.ts
+import { createTheme, tags as t } from "@coze-editor/editor/preset-code";
+var colors = {
+  background: "#FFFFFF",
+  comment: "#6B7280",
+  key: "#2563EB",
+  variable: "#DC2626",
+  string: "#059669",
+  number: "#EA580C",
+  boolean: "#7C3AED",
+  null: "#7C3AED",
+  separator: "#374151"
+};
+var lightTheme = createTheme({
+  variant: "light",
+  settings: {
+    background: "#FFFFFF",
+    foreground: "#1F2937",
+    caret: "#2563EB",
+    selection: "#E5E7EB",
+    gutterBackground: "#F9FAFB",
+    gutterForeground: "#6B7280",
+    gutterBorderColor: "transparent",
+    gutterBorderWidth: 0,
+    lineHighlight: "#F3F4F680",
+    bracketColors: ["#F59E0B", "#8B5CF6", "#06B6D4"],
+    tooltip: {
+      backgroundColor: "#FFFFFF",
+      color: "#1F2937",
+      border: "1px solid #E5E7EB",
+      boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
+    },
+    link: {
+      color: "#2563EB"
+    },
+    completionItemHover: {
+      backgroundColor: "#F3F4F6"
+    },
+    completionItemSelected: {
+      backgroundColor: "#E5E7EB"
+    },
+    completionItemIcon: {
+      color: "#4B5563"
+    },
+    completionItemLabel: {
+      color: "#1F2937"
+    },
+    completionItemInfo: {
+      color: "#4B5563"
+    },
+    completionItemDetail: {
+      color: "#6B7280"
+    }
+  },
+  styles: [
+    // JSON
+    {
+      tag: t.comment,
+      color: colors.comment
+    },
+    {
+      tag: [t.propertyName],
+      color: colors.key
+    },
+    {
+      tag: [t.variableName],
+      color: colors.variable
+    },
+    {
+      tag: [t.string],
+      color: colors.string
+    },
+    {
+      tag: [t.number],
+      color: colors.number
+    },
+    {
+      tag: [t.bool],
+      color: colors.boolean
+    },
+    {
+      tag: [t.null],
+      color: colors.null
+    },
+    {
+      tag: [t.separator],
+      color: colors.separator
+    },
+    // markdown
+    {
+      tag: [t.heading],
+      color: "#2563EB"
+    },
+    {
+      tag: [t.processingInstruction],
+      color: "#2563EB"
+    },
+    // js
+    {
+      tag: [t.definitionKeyword],
+      color: "#9333EA"
+    },
+    {
+      tag: [t.modifier],
+      color: "#9333EA"
+    },
+    {
+      tag: [t.controlKeyword],
+      color: "#9333EA"
+    },
+    {
+      tag: [t.operatorKeyword],
+      color: "#9333EA"
+    },
+    // shell
+    // curl
+    {
+      tag: [t.standard(t.variableName)],
+      color: "#059669"
+    },
+    // -X
+    {
+      tag: [t.attributeName],
+      color: "#EA580C"
+    },
+    // url in string (includes quotes), e.g. "https://..."
+    {
+      tag: [t.special(t.string)],
+      color: "#2563EB"
+    }
+  ]
+});
+
+// src/components/code-editor/theme/dark.ts
+import { createTheme as createTheme2, tags as t2 } from "@coze-editor/editor/preset-code";
+var colors2 = {
+  background: "#0D1117",
+  // syntax - 现代化暗色主题配色
+  comment: "#8B949E",
+  key: "#7DD3FC",
+  variable: "#F472B6",
+  string: "#34D399",
+  number: "#FBBF24",
+  boolean: "#A78BFA",
+  null: "#A78BFA",
+  separator: "#E6EDF3"
+};
+var darkTheme = createTheme2({
+  variant: "dark",
+  settings: {
+    background: colors2.background,
+    foreground: "#E6EDF3",
+    caret: "#7DD3FC",
+    selection: "#264F7833",
+    gutterBackground: colors2.background,
+    gutterForeground: "#6E7681",
+    gutterBorderColor: "transparent",
+    gutterBorderWidth: 0,
+    lineHighlight: "#21262D",
+    bracketColors: ["#FBBF24", "#A78BFA", "#7DD3FC"],
+    tooltip: {
+      backgroundColor: "#21262D",
+      color: "#E6EDF3",
+      border: "1px solid #30363D"
+    },
+    link: {
+      color: "#58A6FF"
+    },
+    completionItemHover: {
+      backgroundColor: "#21262D"
+    },
+    completionItemSelected: {
+      backgroundColor: "#1F6EEB"
+    },
+    completionItemIcon: {
+      color: "#8B949E"
+    },
+    completionItemLabel: {
+      color: "#E6EDF3"
+    },
+    completionItemInfo: {
+      color: "#8B949E"
+    },
+    completionItemDetail: {
+      color: "#6E7681"
+    }
+  },
+  styles: [
+    // json
+    {
+      tag: t2.comment,
+      color: colors2.comment
+    },
+    {
+      tag: [t2.propertyName],
+      color: colors2.key
+    },
+    {
+      tag: [t2.string],
+      color: colors2.string
+    },
+    {
+      tag: [t2.number],
+      color: colors2.number
+    },
+    {
+      tag: [t2.bool],
+      color: colors2.boolean
+    },
+    {
+      tag: [t2.null],
+      color: colors2.null
+    },
+    {
+      tag: [t2.separator],
+      color: colors2.separator
+    },
+    // js
+    {
+      tag: [t2.definitionKeyword],
+      color: "#C084FC"
+    },
+    {
+      tag: [t2.modifier],
+      color: "#C084FC"
+    },
+    {
+      tag: [t2.controlKeyword],
+      color: "#C084FC"
+    },
+    {
+      tag: [t2.operatorKeyword],
+      color: "#C084FC"
+    },
+    // markdown
+    {
+      tag: [t2.heading],
+      color: "#7DD3FC"
+    },
+    {
+      tag: [t2.processingInstruction],
+      color: "#7DD3FC"
+    },
+    // shell
+    // curl
+    {
+      tag: [t2.standard(t2.variableName)],
+      color: "#34D399"
+    },
+    // -X
+    {
+      tag: [t2.attributeName],
+      color: "#FBBF24"
+    },
+    // url in string (includes quotes), e.g. "https://..."
+    {
+      tag: [t2.special(t2.string)],
+      color: "#7DD3FC"
+    }
+  ]
+});
+
+// src/components/code-editor/theme/index.ts
+themes.register("dark", darkTheme);
+themes.register("light", lightTheme);
+
+// src/components/code-editor/editor.tsx
+var OriginCodeEditor = createRenderer(preset, [
+  EditorView.theme({
+    "&.cm-focused": {
+      outline: "none"
+    }
+  })
+]);
+function CodeEditor({
+  value,
+  onChange,
+  languageId = "python",
+  theme = "light",
+  children,
+  placeholder,
+  activeLinePlaceholder,
+  options,
+  readonly
+}) {
+  const editorRef = useRef(null);
+  useEffect(() => {
+    if (languageId === "typescript") {
+      initTsWorker();
+    }
+  }, [languageId]);
+  useEffect(() => {
+    if (editorRef.current?.getValue() !== value) {
+      editorRef.current?.setValue(String(value || ""));
+    }
+  }, [value]);
+  return /* @__PURE__ */ React.createElement(EditorProvider, null, /* @__PURE__ */ React.createElement(
+    OriginCodeEditor,
+    {
+      defaultValue: String(value || ""),
+      options: {
+        uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
+        languageId,
+        theme,
+        placeholder,
+        readOnly: readonly,
+        editable: !readonly,
+        ...options || {}
+      },
+      didMount: (editor) => {
+        editorRef.current = editor;
+      },
+      onChange: (e) => onChange?.(e.value)
+    },
+    activeLinePlaceholder && /* @__PURE__ */ React.createElement(ActiveLinePlaceholder, null, activeLinePlaceholder),
+    children
+  ));
+}
+export {
+  CodeEditor
+};
+//# sourceMappingURL=editor-E2BQTPCD.js.map

package/dist/esm/editor-E2BQTPCD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/code-editor/editor.tsx","../../src/components/code-editor/utils.ts","../../src/components/code-editor/language-features.ts","../../src/components/code-editor/theme/index.ts","../../src/components/code-editor/theme/light.ts","../../src/components/code-editor/theme/dark.ts"],"sourcesContent":["/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport React, { useEffect, useRef } from 'react';\n\nimport {\n  ActiveLinePlaceholder,\n  createRenderer,\n  EditorProvider,\n  InferValues,\n} from '@coze-editor/editor/react';\nimport preset, { type EditorAPI } from '@coze-editor/editor/preset-code';\nimport { EditorView } from '@codemirror/view';\n\nimport { getSuffixByLanguageId } from './utils';\nimport { initTsWorker } from './language-features';\n\nimport './theme';\nimport './language-features';\n\nconst OriginCodeEditor = createRenderer(preset, [\n  EditorView.theme({\n    '&.cm-focused': {\n      outline: 'none',\n    },\n  }),\n]);\n\ntype Preset = typeof preset;\ntype Options = Partial<InferValues<Preset[number]>>;\n\nexport interface CodeEditorPropsType extends React.PropsWithChildren<{}> {\n  value?: string;\n  onChange?: (value: string) => void;\n  languageId: 'python' | 'typescript' | 'shell' | 'json';\n  theme?: 'dark' | 'light';\n  placeholder?: string;\n  activeLinePlaceholder?: string;\n  readonly?: boolean;\n  options?: Options;\n}\n\nexport function CodeEditor({\n  value,\n  onChange,\n  languageId = 'python',\n  theme = 'light',\n  children,\n  placeholder,\n  activeLinePlaceholder,\n  options,\n  readonly,\n}: CodeEditorPropsType) {\n  const editorRef = useRef<EditorAPI | null>(null);\n\n  useEffect(() => {\n    if (languageId === 'typescript') {\n      initTsWorker();\n    }\n  }, [languageId]);\n\n  useEffect(() => {\n    // listen to value change\n    if (editorRef.current?.getValue() !== value) {\n      editorRef.current?.setValue(String(value || ''));\n    }\n  }, [value]);\n\n  return (\n    <EditorProvider>\n      <OriginCodeEditor\n        defaultValue={String(value || '')}\n        options={{\n          uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,\n          languageId,\n          theme,\n          placeholder,\n          readOnly: readonly,\n          editable: !readonly,\n          ...(options || {}),\n        }}\n        didMount={(editor: EditorAPI) => {\n          editorRef.current = editor;\n        }}\n        onChange={(e) => onChange?.(e.value)}\n      >\n        {activeLinePlaceholder && (\n          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>\n        )}\n        {children}\n      </OriginCodeEditor>\n    </EditorProvider>\n  );\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nexport function getSuffixByLanguageId(languageId: string) {\n  if (languageId === 'python') {\n    return '.py';\n  }\n  if (languageId === 'typescript') {\n    return '.ts';\n  }\n  if (languageId === 'shell') {\n    return '.sh';\n  }\n  if (languageId === 'json') {\n    return '.json';\n  }\n  return '';\n}\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { languages } from '@coze-editor/editor/preset-code';\nimport { typescript } from '@coze-editor/editor/language-typescript';\nimport { shell } from '@coze-editor/editor/language-shell';\nimport { python } from '@coze-editor/editor/language-python';\nimport { json } from '@coze-editor/editor/language-json';\nimport { mixLanguages } from '@coze-editor/editor';\n\nlanguages.register('python', python);\nlanguages.register('shell', shell);\nlanguages.register('typescript', typescript);\n\nlanguages.register('json', {\n  // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting\n  language: mixLanguages({\n    outerLanguage: json.language,\n  }),\n  languageService: json.languageService,\n});\n\nlet tsWorkerInit = false;\n\nexport const initTsWorker = () => {\n  if (tsWorkerInit) {\n    return;\n  }\n  tsWorkerInit = true;\n\n  const tsWorker = new Worker(\n    new URL(`@coze-editor/editor/language-typescript/worker`, import.meta.url),\n    { type: 'module' }\n  );\n  typescript.languageService.initialize(tsWorker, {\n    compilerOptions: {\n      // eliminate Promise error\n      lib: ['es2015', 'dom'],\n      noImplicitAny: false,\n    },\n  });\n};\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { themes } from '@coze-editor/editor/preset-code';\n\nimport { lightTheme } from './light';\nimport { darkTheme } from './dark';\n\nthemes.register('dark', darkTheme);\nthemes.register('light', lightTheme);\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createTheme, tags as t } from '@coze-editor/editor/preset-code';\nimport { type Extension } from '@codemirror/state';\n\nconst colors = {\n  background: '#FFFFFF',\n  comment: '#6B7280',\n  key: '#2563EB',\n  variable: '#DC2626',\n  string: '#059669',\n  number: '#EA580C',\n  boolean: '#7C3AED',\n  null: '#7C3AED',\n  separator: '#374151',\n};\n\nexport const lightTheme: Extension = createTheme({\n  variant: 'light',\n  settings: {\n    background: '#FFFFFF',\n    foreground: '#1F2937',\n    caret: '#2563EB',\n    selection: '#E5E7EB',\n    gutterBackground: '#F9FAFB',\n    gutterForeground: '#6B7280',\n    gutterBorderColor: 'transparent',\n    gutterBorderWidth: 0,\n    lineHighlight: '#F3F4F680',\n    bracketColors: ['#F59E0B', '#8B5CF6', '#06B6D4'],\n    tooltip: {\n      backgroundColor: '#FFFFFF',\n      color: '#1F2937',\n      border: '1px solid #E5E7EB',\n      boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n    },\n    link: {\n      color: '#2563EB',\n    },\n    completionItemHover: {\n      backgroundColor: '#F3F4F6',\n    },\n    completionItemSelected: {\n      backgroundColor: '#E5E7EB',\n    },\n    completionItemIcon: {\n      color: '#4B5563',\n    },\n    completionItemLabel: {\n      color: '#1F2937',\n    },\n    completionItemInfo: {\n      color: '#4B5563',\n    },\n    completionItemDetail: {\n      color: '#6B7280',\n    },\n  },\n  styles: [\n    // JSON\n    {\n      tag: t.comment,\n      color: colors.comment,\n    },\n    {\n      tag: [t.propertyName],\n      color: colors.key,\n    },\n    {\n      tag: [t.variableName],\n      color: colors.variable,\n    },\n\n    {\n      tag: [t.string],\n      color: colors.string,\n    },\n    {\n      tag: [t.number],\n      color: colors.number,\n    },\n    {\n      tag: [t.bool],\n      color: colors.boolean,\n    },\n    {\n      tag: [t.null],\n      color: colors.null,\n    },\n    {\n      tag: [t.separator],\n      color: colors.separator,\n    },\n\n    // markdown\n    {\n      tag: [t.heading],\n      color: '#2563EB',\n    },\n    {\n      tag: [t.processingInstruction],\n      color: '#2563EB',\n    },\n\n    // js\n    {\n      tag: [t.definitionKeyword],\n      color: '#9333EA',\n    },\n    {\n      tag: [t.modifier],\n      color: '#9333EA',\n    },\n    {\n      tag: [t.controlKeyword],\n      color: '#9333EA',\n    },\n    {\n      tag: [t.operatorKeyword],\n      color: '#9333EA',\n    },\n\n    // shell\n    // curl\n    {\n      tag: [t.standard(t.variableName)],\n      color: '#059669',\n    },\n    // -X\n    {\n      tag: [t.attributeName],\n      color: '#EA580C',\n    },\n    // url in string (includes quotes), e.g. \"https://...\"\n    {\n      tag: [t.special(t.string)],\n      color: '#2563EB',\n    },\n  ],\n});\n","/**\n * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates\n * SPDX-License-Identifier: MIT\n */\n\nimport { createTheme, tags as t } from '@coze-editor/editor/preset-code';\nimport { type Extension } from '@codemirror/state';\n\nconst colors = {\n  background: '#0D1117',\n  // syntax - 现代化暗色主题配色\n  comment: '#8B949E',\n  key: '#7DD3FC',\n  variable: '#F472B6',\n  string: '#34D399',\n  number: '#FBBF24',\n  boolean: '#A78BFA',\n  null: '#A78BFA',\n  separator: '#E6EDF3',\n};\n\nexport const darkTheme: Extension = createTheme({\n  variant: 'dark',\n  settings: {\n    background: colors.background,\n    foreground: '#E6EDF3',\n    caret: '#7DD3FC',\n    selection: '#264F7833',\n    gutterBackground: colors.background,\n    gutterForeground: '#6E7681',\n    gutterBorderColor: 'transparent',\n    gutterBorderWidth: 0,\n    lineHighlight: '#21262D',\n    bracketColors: ['#FBBF24', '#A78BFA', '#7DD3FC'],\n    tooltip: {\n      backgroundColor: '#21262D',\n      color: '#E6EDF3',\n      border: '1px solid #30363D',\n    },\n    link: {\n      color: '#58A6FF',\n    },\n    completionItemHover: {\n      backgroundColor: '#21262D',\n    },\n    completionItemSelected: {\n      backgroundColor: '#1F6EEB',\n    },\n    completionItemIcon: {\n      color: '#8B949E',\n    },\n    completionItemLabel: {\n      color: '#E6EDF3',\n    },\n    completionItemInfo: {\n      color: '#8B949E',\n    },\n    completionItemDetail: {\n      color: '#6E7681',\n    },\n  },\n  styles: [\n    // json\n    {\n      tag: t.comment,\n      color: colors.comment,\n    },\n    {\n      tag: [t.propertyName],\n      color: colors.key,\n    },\n    {\n      tag: [t.string],\n      color: colors.string,\n    },\n    {\n      tag: [t.number],\n      color: colors.number,\n    },\n    {\n      tag: [t.bool],\n      color: colors.boolean,\n    },\n    {\n      tag: [t.null],\n      color: colors.null,\n    },\n    {\n      tag: [t.separator],\n      color: colors.separator,\n    },\n\n    // js\n    {\n      tag: [t.definitionKeyword],\n      color: '#C084FC',\n    },\n    {\n      tag: [t.modifier],\n      color: '#C084FC',\n    },\n    {\n      tag: [t.controlKeyword],\n      color: '#C084FC',\n    },\n    {\n      tag: [t.operatorKeyword],\n      color: '#C084FC',\n    },\n\n    // markdown\n    {\n      tag: [t.heading],\n      color: '#7DD3FC',\n    },\n    {\n      tag: [t.processingInstruction],\n      color: '#7DD3FC',\n    },\n\n    // shell\n    // curl\n    {\n      tag: [t.standard(t.variableName)],\n      color: '#34D399',\n    },\n    // -X\n    {\n      tag: [t.attributeName],\n      color: '#FBBF24',\n    },\n    // url in string (includes quotes), e.g. \"https://...\"\n    {\n      tag: [t.special(t.string)],\n      color: '#7DD3FC',\n    },\n  ],\n});\n"],"mappings":"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","names":["createTheme","t","colors"]}

package/dist/esm/editor-H2R7JJLO.js

@@ -0,0 +1,282 @@
+import {
+  CodeEditor,
+  useVariableTree
+} from "./chunk-G4HQ7OSI.js";
+import {
+  polyfillCreateRoot
+} from "./chunk-QIJ4QVB2.js";
+
+// src/components/json-editor-with-variables/editor.tsx
+import React3 from "react";
+import { I18n } from "@flowgram.ai/editor";
+import { transformerCreator } from "@coze-editor/editor/preset-code";
+
+// src/components/json-editor-with-variables/extensions/variable-tree.tsx
+import React, { useEffect, useState } from "react";
+import { Popover, Tree } from "@douyinfe/semi-ui";
+import {
+  Mention,
+  getCurrentMentionReplaceRange,
+  useEditor,
+  PositionMirror
+} from "@coze-editor/editor/react";
+function VariableTree() {
+  const [posKey, setPosKey] = useState("");
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState(-1);
+  const editor = useEditor();
+  function insert(variablePath) {
+    const range = getCurrentMentionReplaceRange(editor.$view.state);
+    if (!range) {
+      return;
+    }
+    editor.replaceText({
+      ...range,
+      text: "{{" + variablePath + "}}"
+    });
+    setVisible(false);
+  }
+  function handleOpenChange(e) {
+    setPosition(e.state.selection.main.head);
+    setVisible(e.value);
+  }
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+  }, [editor, visible]);
+  const treeData = useVariableTree({});
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Mention, { triggerCharacters: ["@"], onOpenChange: handleOpenChange }), /* @__PURE__ */ React.createElement(
+    Popover,
+    {
+      visible,
+      trigger: "custom",
+      position: "topLeft",
+      rePosKey: posKey,
+      content: /* @__PURE__ */ React.createElement("div", { style: { width: 300 } }, /* @__PURE__ */ React.createElement(
+        Tree,
+        {
+          treeData,
+          onSelect: (v) => {
+            insert(v);
+          }
+        }
+      ))
+    },
+    /* @__PURE__ */ React.createElement(
+      PositionMirror,
+      {
+        position,
+        onChange: () => setPosKey(String(Math.random()))
+      }
+    )
+  ));
+}
+
+// src/components/json-editor-with-variables/extensions/variable-tag.tsx
+import React2, { useLayoutEffect } from "react";
+import { isEqual, last } from "lodash";
+import {
+  Disposable,
+  DisposableCollection,
+  useCurrentScope
+} from "@flowgram.ai/editor";
+import { Popover as Popover2 } from "@douyinfe/semi-ui";
+import { IconIssueStroked } from "@douyinfe/semi-icons";
+import { useInjector } from "@coze-editor/editor/react";
+import {
+  Decoration,
+  EditorView,
+  MatchDecorator,
+  ViewPlugin,
+  WidgetType
+} from "@codemirror/view";
+
+// src/components/json-editor-with-variables/styles.tsx
+import styled from "styled-components";
+import { Tag } from "@douyinfe/semi-ui";
+var UIRootTitle = styled.div`
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+`;
+var UIVarName = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+var UITag = styled(Tag)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 300px;
+
+  & .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+
+  &.semi-tag {
+    margin: 0 5px;
+  }
+`;
+var UIPopoverContent = styled.div`
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+`;
+
+// src/components/json-editor-with-variables/extensions/variable-tag.tsx
+var VariableTagWidget = class extends WidgetType {
+  constructor({ keyPath, scope }) {
+    super();
+    this.toDispose = new DisposableCollection();
+    this.renderIcon = (icon) => {
+      if (typeof icon === "string") {
+        return /* @__PURE__ */ React2.createElement("img", { style: { marginRight: 8 }, width: 12, height: 12, src: icon });
+      }
+      return icon;
+    };
+    this.keyPath = keyPath;
+    this.scope = scope;
+  }
+  renderVariable(v) {
+    if (!v) {
+      this.root.render(
+        /* @__PURE__ */ React2.createElement(UITag, { prefixIcon: /* @__PURE__ */ React2.createElement(IconIssueStroked, null), color: "amber" }, "Unknown")
+      );
+      return;
+    }
+    const rootField = last(v.parentFields);
+    const rootTitle = /* @__PURE__ */ React2.createElement(UIRootTitle, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
+    const rootIcon = this.renderIcon(rootField?.meta.icon);
+    this.root.render(
+      /* @__PURE__ */ React2.createElement(
+        Popover2,
+        {
+          content: /* @__PURE__ */ React2.createElement(UIPopoverContent, null, rootIcon, rootTitle, /* @__PURE__ */ React2.createElement(UIVarName, null, v?.keyPath.slice(1).join(".")))
+        },
+        /* @__PURE__ */ React2.createElement(UITag, { prefixIcon: rootIcon }, rootTitle, /* @__PURE__ */ React2.createElement(UIVarName, null, v?.key))
+      )
+    );
+  }
+  toDOM(view) {
+    const dom = document.createElement("span");
+    this.root = polyfillCreateRoot(dom);
+    this.toDispose.push(
+      Disposable.create(() => {
+        this.root.unmount();
+      })
+    );
+    this.toDispose.push(
+      this.scope.available.trackByKeyPath(
+        this.keyPath,
+        (v) => {
+          this.renderVariable(v);
+        },
+        { triggerOnInit: false }
+      )
+    );
+    this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+    return dom;
+  }
+  eq(other) {
+    return isEqual(this.keyPath, other.keyPath);
+  }
+  ignoreEvent() {
+    return false;
+  }
+  destroy(dom) {
+    this.toDispose.dispose();
+  }
+};
+function VariableTagInject() {
+  const injector = useInjector();
+  const scope = useCurrentScope();
+  useLayoutEffect(() => {
+    const atMatcher = new MatchDecorator({
+      regexp: /\{\{([^\}\{]+)\}\}/g,
+      decoration: (match) => Decoration.replace({
+        widget: new VariableTagWidget({
+          keyPath: match[1]?.split(".") ?? [],
+          scope
+        })
+      })
+    });
+    return injector.inject([
+      ViewPlugin.fromClass(
+        class {
+          constructor(view) {
+            this.view = view;
+            this.decorations = atMatcher.createDeco(view);
+          }
+          update() {
+            this.decorations = atMatcher.createDeco(this.view);
+          }
+        },
+        {
+          decorations: (p) => p.decorations,
+          provide(p) {
+            return EditorView.atomicRanges.of(
+              (view) => view.plugin(p)?.decorations ?? Decoration.none
+            );
+          }
+        }
+      )
+    ]);
+  }, [injector]);
+  return null;
+}
+
+// src/components/json-editor-with-variables/editor.tsx
+function findAllMatches(inputString, regex) {
+  const globalRegex = new RegExp(
+    regex,
+    regex.flags.includes("g") ? regex.flags : regex.flags + "g"
+  );
+  let match;
+  const matches = [];
+  while ((match = globalRegex.exec(inputString)) !== null) {
+    if (match.index === globalRegex.lastIndex) {
+      globalRegex.lastIndex++;
+    }
+    matches.push({
+      match: match[0],
+      range: [match.index, match.index + match[0].length]
+    });
+  }
+  return matches;
+}
+var transformer = transformerCreator((text) => {
+  const originalSource = text.toString();
+  const matches = findAllMatches(originalSource, /\{\{([^\}]*)\}\}/g);
+  if (matches.length > 0) {
+    matches.forEach(({ range }) => {
+      text.replaceRange(range[0], range[1], "null");
+    });
+  }
+  return text;
+});
+function JsonEditorWithVariables(props) {
+  return /* @__PURE__ */ React3.createElement(
+    CodeEditor,
+    {
+      languageId: "json",
+      activeLinePlaceholder: I18n.t("Press '@' to Select variable"),
+      ...props,
+      options: {
+        transformer,
+        ...props.options || {}
+      }
+    },
+    /* @__PURE__ */ React3.createElement(VariableTree, null),
+    /* @__PURE__ */ React3.createElement(VariableTagInject, null)
+  );
+}
+export {
+  JsonEditorWithVariables
+};
+//# sourceMappingURL=editor-H2R7JJLO.js.map