@flowgram.ai/form-materials 0.1.0-alpha.10 → 0.1.0-alpha.11

package/dist/index.d.mts

@@ -1,5 +1,7 @@
 import React$1 from 'react';
 import { TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
+import { InferValues } from '@coze-editor/editor/react';
+import preset from '@coze-editor/editor/preset-code';
 import { EffectOptions, ASTNodeJSON, ASTNode, BaseType, FormPluginCreator } from '@flowgram.ai/editor';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 
@@ -266,6 +268,7 @@ type PropsType$1 = React$1.PropsWithChildren<{
     hasError?: boolean;
     placeholder?: string;
     activeLinePlaceholder?: string;
+    disableMarkdownHighlight?: boolean;
     style?: React$1.CSSProperties;
 }>;
 
@@ -299,6 +302,8 @@ declare function PromptEditorWithInputs({ inputsValues, ...restProps }: PropsTyp
  * SPDX-License-Identifier: MIT
  */
 
+type Preset = typeof preset;
+type Options = Partial<InferValues<Preset[number]>>;
 interface CodeEditorPropsType extends React$1.PropsWithChildren<{}> {
     value?: string;
     onChange?: (value: string) => void;
@@ -306,8 +311,10 @@ interface CodeEditorPropsType extends React$1.PropsWithChildren<{}> {
     theme?: 'dark' | 'light';
     placeholder?: string;
     activeLinePlaceholder?: string;
+    readonly?: boolean;
+    options?: Options;
 }
-declare function CodeEditor({ value, onChange, languageId, theme, children, placeholder, activeLinePlaceholder, }: CodeEditorPropsType): React$1.JSX.Element;
+declare function CodeEditor({ value, onChange, languageId, theme, children, placeholder, activeLinePlaceholder, options, readonly, }: CodeEditorPropsType): React$1.JSX.Element;
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 import React$1 from 'react';
 import { TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
+import { InferValues } from '@coze-editor/editor/react';
+import preset from '@coze-editor/editor/preset-code';
 import { EffectOptions, ASTNodeJSON, ASTNode, BaseType, FormPluginCreator } from '@flowgram.ai/editor';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 
@@ -266,6 +268,7 @@ type PropsType$1 = React$1.PropsWithChildren<{
     hasError?: boolean;
     placeholder?: string;
     activeLinePlaceholder?: string;
+    disableMarkdownHighlight?: boolean;
     style?: React$1.CSSProperties;
 }>;
 
@@ -299,6 +302,8 @@ declare function PromptEditorWithInputs({ inputsValues, ...restProps }: PropsTyp
  * SPDX-License-Identifier: MIT
  */
 
+type Preset = typeof preset;
+type Options = Partial<InferValues<Preset[number]>>;
 interface CodeEditorPropsType extends React$1.PropsWithChildren<{}> {
     value?: string;
     onChange?: (value: string) => void;
@@ -306,8 +311,10 @@ interface CodeEditorPropsType extends React$1.PropsWithChildren<{}> {
     theme?: 'dark' | 'light';
     placeholder?: string;
     activeLinePlaceholder?: string;
+    readonly?: boolean;
+    options?: Options;
 }
-declare function CodeEditor({ value, onChange, languageId, theme, children, placeholder, activeLinePlaceholder, }: CodeEditorPropsType): React$1.JSX.Element;
+declare function CodeEditor({ value, onChange, languageId, theme, children, placeholder, activeLinePlaceholder, options, readonly, }: CodeEditorPropsType): React$1.JSX.Element;
 
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates

package/dist/index.js

@@ -1003,6 +1003,7 @@ var ConstantInputWrapper = import_styled_components2.default.div`
 
 // src/components/json-schema-editor/hooks.tsx
 var import_react6 = require("react");
+var import_lodash2 = require("lodash");
 var _id = 0;
 function genId() {
   return _id++;
@@ -1075,7 +1076,7 @@ function usePropertiesEdit(value, onChange) {
         if (!_property.name) {
           continue;
         }
-        nextProperties[_property.name] = _property;
+        nextProperties[_property.name] = (0, import_lodash2.omit)(_property, ["key", "name", "isPropertyRequired"]);
         if (_property.isPropertyRequired) {
           nextRequired.push(_property.name);
         }
@@ -1737,9 +1738,9 @@ var opConfigs = {
 };
 
 // src/utils/format-legacy-refs/index.ts
-var import_lodash2 = require("lodash");
+var import_lodash3 = require("lodash");
 function formatLegacyRefOnSubmit(value) {
-  if ((0, import_lodash2.isObject)(value)) {
+  if ((0, import_lodash3.isObject)(value)) {
     if (isLegacyFlowRefValueSchema(value)) {
       return formatLegacyRefToNewRef(value);
     }
@@ -1756,7 +1757,7 @@ function formatLegacyRefOnSubmit(value) {
   return value;
 }
 function formatLegacyRefOnInit(value) {
-  if ((0, import_lodash2.isObject)(value)) {
+  if ((0, import_lodash3.isObject)(value)) {
     if (isNewFlowRefValueSchema(value)) {
       return formatNewRefToLegacyRef(value);
     }
@@ -1773,10 +1774,10 @@ function formatLegacyRefOnInit(value) {
   return value;
 }
 function isLegacyFlowRefValueSchema(value) {
-  return (0, import_lodash2.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
+  return (0, import_lodash3.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && typeof value.content === "string";
 }
 function isNewFlowRefValueSchema(value) {
-  return (0, import_lodash2.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && Array.isArray(value.content);
+  return (0, import_lodash3.isObject)(value) && Object.keys(value).length === 2 && value.type === "ref" && Array.isArray(value.content);
 }
 function formatLegacyRefToNewRef(value) {
   const keyPath = value.content.split(".");
@@ -1895,7 +1896,7 @@ var import_semi_icons8 = require("@douyinfe/semi-icons");
 
 // src/components/batch-outputs/use-list.ts
 var import_react16 = require("react");
-var import_lodash3 = require("lodash");
+var import_lodash4 = require("lodash");
 var _id2 = 0;
 function genId2() {
   return _id2++;
@@ -1906,7 +1907,7 @@ function useList({ value, onChange }) {
     setList((_prevList) => {
       const newKeys = Object.keys(value || {});
       const oldKeys = _prevList.map((item) => item.key).filter(Boolean);
-      const addKeys = (0, import_lodash3.difference)(newKeys, oldKeys);
+      const addKeys = (0, import_lodash4.difference)(newKeys, oldKeys);
       return _prevList.filter((item) => !item.key || newKeys.includes(item.key)).map((item) => ({
         id: item.id,
         key: item.key,
@@ -2152,7 +2153,8 @@ function PromptEditor(props) {
     activeLinePlaceholder,
     style,
     hasError,
-    children
+    children,
+    disableMarkdownHighlight
   } = props || {};
   const editorRef = (0, import_react24.useRef)(null);
   (0, import_react24.useEffect)(() => {
@@ -2177,7 +2179,7 @@ function PromptEditor(props) {
         onChange({ type: "template", content: e.value });
       }
     }
-  ), activeLinePlaceholder && /* @__PURE__ */ import_react24.default.createElement(import_react25.ActiveLinePlaceholder, null, activeLinePlaceholder), /* @__PURE__ */ import_react24.default.createElement(markdown_default, null), /* @__PURE__ */ import_react24.default.createElement(language_support_default, null), /* @__PURE__ */ import_react24.default.createElement(jinja_default, null), children));
+  ), activeLinePlaceholder && /* @__PURE__ */ import_react24.default.createElement(import_react25.ActiveLinePlaceholder, null, activeLinePlaceholder), !disableMarkdownHighlight && /* @__PURE__ */ import_react24.default.createElement(markdown_default, null), /* @__PURE__ */ import_react24.default.createElement(language_support_default, null), /* @__PURE__ */ import_react24.default.createElement(jinja_default, null), children));
 }
 
 // src/components/prompt-editor-with-variables/index.tsx
@@ -2243,7 +2245,7 @@ function VariableTree() {
 // src/components/prompt-editor-with-variables/extensions/variable-tag.tsx
 var import_react_dom = __toESM(require("react-dom"));
 var import_react28 = __toESM(require("react"));
-var import_lodash4 = require("lodash");
+var import_lodash5 = require("lodash");
 var import_editor7 = require("@flowgram.ai/editor");
 var import_semi_ui13 = require("@douyinfe/semi-ui");
 var import_semi_icons9 = require("@douyinfe/semi-icons");
@@ -2311,7 +2313,7 @@ var VariableTagWidget = class extends import_view3.WidgetType {
       );
       return;
     }
-    const rootField = (0, import_lodash4.last)(v.parentFields);
+    const rootField = (0, import_lodash5.last)(v.parentFields);
     const rootTitle = /* @__PURE__ */ import_react28.default.createElement(UIRootTitle2, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
     const rootIcon = this.renderIcon(rootField?.meta.icon);
     this.renderReact(
@@ -2345,7 +2347,7 @@ var VariableTagWidget = class extends import_view3.WidgetType {
     return dom;
   }
   eq(other) {
-    return (0, import_lodash4.isEqual)(this.keyPath, other.keyPath);
+    return (0, import_lodash5.isEqual)(this.keyPath, other.keyPath);
   }
   ignoreEvent() {
     return false;
@@ -2407,7 +2409,7 @@ var import_react33 = require("@coze-editor/editor/react");
 
 // src/components/prompt-editor-with-inputs/inputs-picker.tsx
 var import_react31 = __toESM(require("react"));
-var import_lodash5 = require("lodash");
+var import_lodash6 = require("lodash");
 var import_editor8 = require("@flowgram.ai/editor");
 var import_semi_ui14 = require("@douyinfe/semi-ui");
 function InputsPicker({
@@ -2442,7 +2444,7 @@ function InputsPicker({
     const key = keyPath.map((_key, idx) => _key === "[0]" || idx === 0 ? _key : `.${_key}`).join("");
     return {
       key,
-      label: (0, import_lodash5.last)(keyPath),
+      label: (0, import_lodash6.last)(keyPath),
       value: key,
       children
     };
@@ -2575,7 +2577,7 @@ var lightTheme = (0, import_preset_code.createTheme)({
     gutterBorderColor: "transparent",
     gutterBorderWidth: 0,
     lineHighlight: "#f0f0f0",
-    bracketColors: ["#FFEF61", "#DD99FF", "#78B0FF"],
+    bracketColors: ["#FFD700", "#DD99FF", "#78B0FF"],
     tooltip: {
       backgroundColor: "#f0f0f0",
       color: "#000",
@@ -2778,11 +2780,14 @@ import_preset_code3.themes.register("light", lightTheme);
 
 // src/components/code-editor/language-features.ts
 var import_preset_code4 = require("@coze-editor/editor/preset-code");
+var import_language_typescript = require("@coze-editor/editor/language-typescript");
 var import_language_shell = require("@coze-editor/editor/language-shell");
 var import_language_python = require("@coze-editor/editor/language-python");
 var import_language_json = require("@coze-editor/editor/language-json");
 var import_editor9 = require("@coze-editor/editor");
 import_preset_code4.languages.register("python", import_language_python.python);
+import_preset_code4.languages.register("typescript", import_language_typescript.typescript);
+import_preset_code4.languages.register("shell", import_language_shell.shell);
 import_preset_code4.languages.register("json", {
   // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
   language: (0, import_editor9.mixLanguages)({
@@ -2790,7 +2795,6 @@ import_preset_code4.languages.register("json", {
   }),
   languageService: import_language_json.json.languageService
 });
-import_preset_code4.languages.register("shell", import_language_shell.shell);
 
 // src/components/code-editor/index.tsx
 var OriginCodeEditor = (0, import_react36.createRenderer)(import_preset_code5.default, [
@@ -2807,7 +2811,9 @@ function CodeEditor({
   theme = "light",
   children,
   placeholder,
-  activeLinePlaceholder
+  activeLinePlaceholder,
+  options: options2,
+  readonly
 }) {
   const editorRef = (0, import_react35.useRef)(null);
   (0, import_react35.useEffect)(() => {
@@ -2823,7 +2829,10 @@ function CodeEditor({
         uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
         languageId,
         theme,
-        placeholder
+        placeholder,
+        readOnly: readonly,
+        editable: !readonly,
+        ...options2 || {}
       },
       didMount: (editor) => {
         editorRef.current = editor;
@@ -2837,6 +2846,7 @@ function CodeEditor({
 
 // src/components/json-editor-with-variables/index.tsx
 var import_react41 = __toESM(require("react"));
+var import_preset_code6 = require("@coze-editor/editor/preset-code");
 
 // src/components/json-editor-with-variables/extensions/variable-tree.tsx
 var import_react37 = __toESM(require("react"));
@@ -2898,7 +2908,7 @@ function VariableTree2() {
 // src/components/json-editor-with-variables/extensions/variable-tag.tsx
 var import_react39 = __toESM(require("react"));
 var import_client = require("react-dom/client");
-var import_lodash6 = require("lodash");
+var import_lodash7 = require("lodash");
 var import_editor10 = require("@flowgram.ai/editor");
 var import_semi_ui18 = require("@douyinfe/semi-ui");
 var import_semi_icons10 = require("@douyinfe/semi-icons");
@@ -2963,7 +2973,7 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
       );
       return;
     }
-    const rootField = (0, import_lodash6.last)(v.parentFields);
+    const rootField = (0, import_lodash7.last)(v.parentFields);
     const rootTitle = /* @__PURE__ */ import_react39.default.createElement(UIRootTitle3, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
     const rootIcon = this.renderIcon(rootField?.meta.icon);
     this.root.render(
@@ -2997,7 +3007,7 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
     return dom;
   }
   eq(other) {
-    return (0, import_lodash6.isEqual)(this.keyPath, other.keyPath);
+    return (0, import_lodash7.isEqual)(this.keyPath, other.keyPath);
   }
   ignoreEvent() {
     return false;
@@ -3045,8 +3055,49 @@ function VariableTagInject2() {
 }
 
 // src/components/json-editor-with-variables/index.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 = (0, import_preset_code6.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__ */ import_react41.default.createElement(CodeEditor, { languageId: "json", activeLinePlaceholder: "Press '@' to Select variable", ...props }, /* @__PURE__ */ import_react41.default.createElement(VariableTree2, null), /* @__PURE__ */ import_react41.default.createElement(VariableTagInject2, null));
+  return /* @__PURE__ */ import_react41.default.createElement(
+    CodeEditor,
+    {
+      languageId: "json",
+      activeLinePlaceholder: "Press '@' to Select variable",
+      ...props,
+      options: {
+        transformer,
+        ...props.options || {}
+      }
+    },
+    /* @__PURE__ */ import_react41.default.createElement(VariableTree2, null),
+    /* @__PURE__ */ import_react41.default.createElement(VariableTagInject2, null)
+  );
 }
 
 // src/effects/provide-batch-input/index.ts
@@ -3107,7 +3158,7 @@ var provideBatchOutputsEffect = (0, import_editor12.createEffectFromVariableProv
 });
 
 // src/effects/auto-rename-ref/index.ts
-var import_lodash7 = require("lodash");
+var import_lodash8 = require("lodash");
 var import_editor13 = require("@flowgram.ai/editor");
 var autoRenameRefEffect = [
   {
@@ -3125,9 +3176,30 @@ var autoRenameRefEffect = [
           after.key
         ];
         traverseRef(name, form.getValueIn(name), (_drilldownName, _v) => {
-          if (isRefMatch(_v, beforeKeyPath)) {
-            _v.content = [...afterKeyPath, ...(_v.content || [])?.slice(beforeKeyPath.length)];
-            form.setValueIn(_drilldownName, _v);
+          if (_v.type === "ref") {
+            if (isKeyPathMatch(_v.content, beforeKeyPath)) {
+              _v.content = [...afterKeyPath, ...(_v.content || [])?.slice(beforeKeyPath.length)];
+              form.setValueIn(_drilldownName, _v);
+            }
+          } else if (_v.type === "template") {
+            const templateKeyPaths = getTemplateKeyPaths(_v);
+            let hasMatch = false;
+            templateKeyPaths.forEach((_keyPath) => {
+              if (isKeyPathMatch(_keyPath, beforeKeyPath)) {
+                hasMatch = true;
+                const nextKeyPath = [
+                  ...afterKeyPath,
+                  ...(_keyPath || [])?.slice(beforeKeyPath.length)
+                ];
+                _v.content = _v.content?.replace(
+                  `{{${_keyPath.join(".")}}`,
+                  `{{${nextKeyPath.join(".")}}`
+                );
+              }
+            });
+            if (hasMatch) {
+              form.setValueIn(_drilldownName, { ..._v });
+            }
           }
         });
       });
@@ -3137,24 +3209,37 @@ var autoRenameRefEffect = [
     }
   }
 ];
-function isRefMatch(value, targetKeyPath) {
-  return targetKeyPath.every((_key, index) => _key === value.content?.[index]);
+function isKeyPathMatch(keyPath = [], targetKeyPath) {
+  return targetKeyPath.every((_key, index) => _key === keyPath[index]);
+}
+function getTemplateKeyPaths(value) {
+  const keyPathReg = /{{(.*?)}}/g;
+  return (0, import_lodash8.uniq)(value.content?.match(keyPathReg) || []).map(
+    (_keyPath) => _keyPath.slice(2, -2).split(".")
+  );
 }
 function isRef(value) {
   return value?.type === "ref" && Array.isArray(value?.content) && typeof value?.content[0] === "string";
 }
+function isTemplate(value) {
+  return value?.type === "template" && typeof value?.content === "string";
+}
 function traverseRef(name, value, cb) {
-  if ((0, import_lodash7.isObject)(value)) {
+  if ((0, import_lodash8.isObject)(value)) {
     if (isRef(value)) {
       cb(name, value);
       return;
     }
+    if (isTemplate(value)) {
+      cb(name, value);
+      return;
+    }
     Object.entries(value).forEach(([_key, _value]) => {
       traverseRef(`${name}.${_key}`, _value, cb);
     });
     return;
   }
-  if ((0, import_lodash7.isArray)(value)) {
+  if ((0, import_lodash8.isArray)(value)) {
     value.forEach((_value, idx) => {
       traverseRef(`${name}[${idx}]`, _value, cb);
     });