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

package/dist/esm/index.js

@@ -943,6 +943,7 @@ var ConstantInputWrapper = styled2.div`
 
 // src/components/json-schema-editor/hooks.tsx
 import { useEffect, useMemo as useMemo3, useRef, useState } from "react";
+import { omit } from "lodash";
 var _id = 0;
 function genId() {
   return _id++;
@@ -1015,7 +1016,7 @@ function usePropertiesEdit(value, onChange) {
         if (!_property.name) {
           continue;
         }
-        nextProperties[_property.name] = _property;
+        nextProperties[_property.name] = omit(_property, ["key", "name", "isPropertyRequired"]);
         if (_property.isPropertyRequired) {
           nextRequired.push(_property.name);
         }
@@ -2092,7 +2093,8 @@ function PromptEditor(props) {
     activeLinePlaceholder,
     style,
     hasError,
-    children
+    children,
+    disableMarkdownHighlight
   } = props || {};
   const editorRef = useRef3(null);
   useEffect4(() => {
@@ -2117,7 +2119,7 @@ function PromptEditor(props) {
         onChange({ type: "template", content: e.value });
       }
     }
-  ), activeLinePlaceholder && /* @__PURE__ */ React15.createElement(ActiveLinePlaceholder, null, activeLinePlaceholder), /* @__PURE__ */ React15.createElement(markdown_default, null), /* @__PURE__ */ React15.createElement(language_support_default, null), /* @__PURE__ */ React15.createElement(jinja_default, null), children));
+  ), activeLinePlaceholder && /* @__PURE__ */ React15.createElement(ActiveLinePlaceholder, null, activeLinePlaceholder), !disableMarkdownHighlight && /* @__PURE__ */ React15.createElement(markdown_default, null), /* @__PURE__ */ React15.createElement(language_support_default, null), /* @__PURE__ */ React15.createElement(jinja_default, null), children));
 }
 
 // src/components/prompt-editor-with-variables/index.tsx
@@ -2489,7 +2491,11 @@ function PromptEditorWithInputs({ inputsValues, ...restProps }) {
 
 // src/components/code-editor/index.tsx
 import React22, { useEffect as useEffect7, useRef as useRef4 } from "react";
-import { ActiveLinePlaceholder as ActiveLinePlaceholder2, createRenderer, EditorProvider as EditorProvider2 } from "@coze-editor/editor/react";
+import {
+  ActiveLinePlaceholder as ActiveLinePlaceholder2,
+  createRenderer,
+  EditorProvider as EditorProvider2
+} from "@coze-editor/editor/react";
 import preset2 from "@coze-editor/editor/preset-code";
 import { EditorView as EditorView4 } from "@codemirror/view";
 
@@ -2538,7 +2544,7 @@ var lightTheme = createTheme({
     gutterBorderColor: "transparent",
     gutterBorderWidth: 0,
     lineHighlight: "#f0f0f0",
-    bracketColors: ["#FFEF61", "#DD99FF", "#78B0FF"],
+    bracketColors: ["#FFD700", "#DD99FF", "#78B0FF"],
     tooltip: {
       backgroundColor: "#f0f0f0",
       color: "#000",
@@ -2741,11 +2747,14 @@ themes.register("light", lightTheme);
 
 // 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("typescript", typescript);
+languages.register("shell", shell);
 languages.register("json", {
   // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
   language: mixLanguages({
@@ -2753,7 +2762,6 @@ languages.register("json", {
   }),
   languageService: json.languageService
 });
-languages.register("shell", shell);
 
 // src/components/code-editor/index.tsx
 var OriginCodeEditor = createRenderer(preset2, [
@@ -2770,7 +2778,9 @@ function CodeEditor({
   theme = "light",
   children,
   placeholder,
-  activeLinePlaceholder
+  activeLinePlaceholder,
+  options: options2,
+  readonly
 }) {
   const editorRef = useRef4(null);
   useEffect7(() => {
@@ -2786,7 +2796,10 @@ function CodeEditor({
         uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
         languageId,
         theme,
-        placeholder
+        placeholder,
+        readOnly: readonly,
+        editable: !readonly,
+        ...options2 || {}
       },
       didMount: (editor) => {
         editorRef.current = editor;
@@ -2800,6 +2813,7 @@ function CodeEditor({
 
 // src/components/json-editor-with-variables/index.tsx
 import React25 from "react";
+import { transformerCreator } from "@coze-editor/editor/preset-code";
 
 // src/components/json-editor-with-variables/extensions/variable-tree.tsx
 import React23, { useEffect as useEffect8, useState as useState8 } from "react";
@@ -3023,8 +3037,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 = 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__ */ React25.createElement(CodeEditor, { languageId: "json", activeLinePlaceholder: "Press '@' to Select variable", ...props }, /* @__PURE__ */ React25.createElement(VariableTree2, null), /* @__PURE__ */ React25.createElement(VariableTagInject2, null));
+  return /* @__PURE__ */ React25.createElement(
+    CodeEditor,
+    {
+      languageId: "json",
+      activeLinePlaceholder: "Press '@' to Select variable",
+      ...props,
+      options: {
+        transformer,
+        ...props.options || {}
+      }
+    },
+    /* @__PURE__ */ React25.createElement(VariableTree2, null),
+    /* @__PURE__ */ React25.createElement(VariableTagInject2, null)
+  );
 }
 
 // src/effects/provide-batch-input/index.ts
@@ -3093,7 +3148,7 @@ var provideBatchOutputsEffect = createEffectFromVariableProvider2({
 });
 
 // src/effects/auto-rename-ref/index.ts
-import { isArray, isObject as isObject2 } from "lodash";
+import { isArray, isObject as isObject2, uniq } from "lodash";
 import {
   DataEvent,
   VariableFieldKeyRenameService
@@ -3114,9 +3169,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 });
+            }
           }
         });
       });
@@ -3126,18 +3202,31 @@ 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 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 (isObject2(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);
     });