@flowgram.ai/form-materials 0.2.21 → 0.2.23

package/bin/index.ts

@@ -85,9 +85,14 @@ program
     // 5. Copy the materials to the project
     console.log(chalk.bold('These Materials will be added to your project'));
     console.log(allMaterials);
+    copyMaterial(material, projectInfo, { overwrite: true });
+
     allMaterials.forEach((mat: Material) => {
+      if (mat === material) {
+        return;
+      }
       // Add type for mat
-      copyMaterial(mat, projectInfo);
+      copyMaterial(mat, projectInfo, { overwrite: false });
     });
   });
 

package/bin/materials.ts

@@ -115,7 +115,15 @@ export function bfsMaterials(material: Material, _materials: Material[] = []): B
   };
 }
 
-export const copyMaterial = (material: Material, projectInfo: ProjectInfo): void => {
+export const copyMaterial = (
+  material: Material,
+  projectInfo: ProjectInfo,
+  {
+    overwrite,
+  }: {
+    overwrite?: boolean;
+  } = {}
+): void => {
   const sourceDir: string = material.path;
   const materialRoot: string = path.join(
     projectInfo.projectPath,
@@ -124,6 +132,12 @@ export const copyMaterial = (material: Material, projectInfo: ProjectInfo): void
     `${material.type}`
   );
   const targetDir = path.join(materialRoot, material.name);
+
+  if (!overwrite && fs.readdirSync(targetDir)?.length > 0) {
+    console.log(`Material ${material.name} already exists in ${materialRoot}, skip copying.`);
+    return;
+  }
+
   fs.cpSync(sourceDir, targetDir, { recursive: true });
 
   let materialRootIndexTs: string = '';

package/dist/esm/index.js

@@ -1951,8 +1951,8 @@ function BatchOutputs(props) {
 }
 
 // src/components/prompt-editor/index.tsx
-import React15 from "react";
-import { Renderer, EditorProvider } from "@coze-editor/editor/react";
+import React15, { useEffect as useEffect4, useRef as useRef3 } from "react";
+import { Renderer, EditorProvider, ActiveLinePlaceholder } from "@coze-editor/editor/react";
 import preset from "@coze-editor/editor/preset-prompt";
 
 // src/components/prompt-editor/styles.tsx
@@ -2084,28 +2084,47 @@ var jinja_default = JinjaHighlight;
 
 // src/components/prompt-editor/index.tsx
 function PromptEditor(props) {
-  const { value, onChange, readonly, style, hasError, children } = props || {};
+  const {
+    value,
+    onChange,
+    readonly,
+    placeholder,
+    activeLinePlaceholder,
+    style,
+    hasError,
+    children
+  } = props || {};
+  const editorRef = useRef3(null);
+  useEffect4(() => {
+    if (editorRef.current?.getValue() !== value?.content) {
+      editorRef.current?.setValue(String(value?.content || ""));
+    }
+  }, [value]);
   return /* @__PURE__ */ React15.createElement(UIContainer4, { $hasError: hasError, style }, /* @__PURE__ */ React15.createElement(EditorProvider, null, /* @__PURE__ */ React15.createElement(
     Renderer,
     {
+      didMount: (editor) => {
+        editorRef.current = editor;
+      },
       plugins: preset,
       defaultValue: String(value?.content),
       options: {
         readOnly: readonly,
-        editable: !readonly
+        editable: !readonly,
+        placeholder
       },
       onChange: (e) => {
         onChange({ type: "template", content: e.value });
       }
     }
-  ), /* @__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), /* @__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
 import React18 from "react";
 
 // src/components/prompt-editor-with-variables/extensions/variable-tree.tsx
-import React16, { useEffect as useEffect4, useState as useState6 } from "react";
+import React16, { useEffect as useEffect5, useState as useState6 } from "react";
 import { Popover, Tree } from "@douyinfe/semi-ui";
 import {
   Mention,
@@ -2133,7 +2152,7 @@ function VariableTree() {
     setPosition(e.state.selection.main.head);
     setVisible(e.value);
   }
-  useEffect4(() => {
+  useEffect5(() => {
     if (!editor) {
       return;
     }
@@ -2167,8 +2186,8 @@ function VariableTree() {
 }
 
 // src/components/prompt-editor-with-variables/extensions/variable-tag.tsx
+import ReactDOM from "react-dom";
 import React17, { useLayoutEffect as useLayoutEffect4 } from "react";
-import { createRoot } from "react-dom/client";
 import { isEqual, last } from "lodash";
 import {
   Disposable,
@@ -2237,9 +2256,12 @@ var VariableTagWidget = class extends WidgetType {
     this.keyPath = keyPath;
     this.scope = scope;
   }
+  renderReact(jsx) {
+    ReactDOM.render(jsx, this.rootDOM);
+  }
   renderVariable(v) {
     if (!v) {
-      this.root.render(
+      this.renderReact(
         /* @__PURE__ */ React17.createElement(UITag2, { prefixIcon: /* @__PURE__ */ React17.createElement(IconIssueStroked2, null), color: "amber" }, "Unknown")
       );
       return;
@@ -2247,7 +2269,7 @@ var VariableTagWidget = class extends WidgetType {
     const rootField = last(v.parentFields);
     const rootTitle = /* @__PURE__ */ React17.createElement(UIRootTitle2, null, rootField?.meta.title ? `${rootField.meta.title} -` : "");
     const rootIcon = this.renderIcon(rootField?.meta.icon);
-    this.root.render(
+    this.renderReact(
       /* @__PURE__ */ React17.createElement(
         Popover2,
         {
@@ -2259,10 +2281,10 @@ var VariableTagWidget = class extends WidgetType {
   }
   toDOM(view) {
     const dom = document.createElement("span");
-    this.root = createRoot(dom);
+    this.rootDOM = dom;
     this.toDispose.push(
       Disposable.create(() => {
-        this.root.unmount();
+        ReactDOM.unmountComponentAtNode(this.rootDOM);
       })
     );
     this.toDispose.push(
@@ -2334,7 +2356,7 @@ function PromptEditorWithVariables(props) {
 import React21 from "react";
 
 // src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx
-import React20, { useEffect as useEffect5, useState as useState7 } from "react";
+import React20, { useEffect as useEffect6, useState as useState7 } from "react";
 import { Popover as Popover3 } from "@douyinfe/semi-ui";
 import {
   Mention as Mention2,
@@ -2428,7 +2450,7 @@ function InputsTree({ inputsValues }) {
     setPosition(e.state.selection.main.head);
     setVisible(e.value);
   }
-  useEffect5(() => {
+  useEffect6(() => {
     if (!editor) {
       return;
     }
@@ -2466,8 +2488,12 @@ function PromptEditorWithInputs({ inputsValues, ...restProps }) {
 }
 
 // src/components/code-editor/index.tsx
-import React22, { useRef as useRef3 } from "react";
-import { createRenderer, EditorProvider as EditorProvider2 } from "@coze-editor/editor/react";
+import React22, { useEffect as useEffect7, useRef as useRef4 } from "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";
 
@@ -2516,7 +2542,7 @@ var lightTheme = createTheme({
     gutterBorderColor: "transparent",
     gutterBorderWidth: 0,
     lineHighlight: "#f0f0f0",
-    bracketColors: ["#FFEF61", "#DD99FF", "#78B0FF"],
+    bracketColors: ["#FFD700", "#DD99FF", "#78B0FF"],
     tooltip: {
       backgroundColor: "#f0f0f0",
       color: "#000",
@@ -2746,9 +2772,18 @@ function CodeEditor({
   onChange,
   languageId = "python",
   theme = "light",
-  children
+  children,
+  placeholder,
+  activeLinePlaceholder,
+  options: options2,
+  readonly
 }) {
-  const editorRef = useRef3(null);
+  const editorRef = useRef4(null);
+  useEffect7(() => {
+    if (editorRef.current?.getValue() !== value) {
+      editorRef.current?.setValue(String(value || ""));
+    }
+  }, [value]);
   return /* @__PURE__ */ React22.createElement(EditorProvider2, null, /* @__PURE__ */ React22.createElement(
     OriginCodeEditor,
     {
@@ -2756,22 +2791,28 @@ function CodeEditor({
       options: {
         uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
         languageId,
-        theme
+        theme,
+        placeholder,
+        readOnly: readonly,
+        editable: !readonly,
+        ...options2 || {}
       },
       didMount: (editor) => {
         editorRef.current = editor;
       },
       onChange: (e) => onChange?.(e.value)
     },
+    activeLinePlaceholder && /* @__PURE__ */ React22.createElement(ActiveLinePlaceholder2, null, activeLinePlaceholder),
     children
   ));
 }
 
 // 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 useEffect6, useState as useState8 } from "react";
+import React23, { useEffect as useEffect8, useState as useState8 } from "react";
 import { Popover as Popover4, Tree as Tree3 } from "@douyinfe/semi-ui";
 import {
   Mention as Mention3,
@@ -2799,7 +2840,7 @@ function VariableTree2() {
     setPosition(e.state.selection.main.head);
     setVisible(e.value);
   }
-  useEffect6(() => {
+  useEffect8(() => {
     if (!editor) {
       return;
     }
@@ -2834,7 +2875,7 @@ function VariableTree2() {
 
 // src/components/json-editor-with-variables/extensions/variable-tag.tsx
 import React24, { useLayoutEffect as useLayoutEffect5 } from "react";
-import { createRoot as createRoot2 } from "react-dom/client";
+import { createRoot } from "react-dom/client";
 import { isEqual as isEqual2, last as last3 } from "lodash";
 import {
   Disposable as Disposable2,
@@ -2925,7 +2966,7 @@ var VariableTagWidget2 = class extends WidgetType2 {
   }
   toDOM(view) {
     const dom = document.createElement("span");
-    this.root = createRoot2(dom);
+    this.root = createRoot(dom);
     this.toDispose.push(
       Disposable2.create(() => {
         this.root.unmount();
@@ -2992,8 +3033,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", ...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