@flowgram.ai/form-materials 0.2.21 → 0.2.23

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';
 
@@ -264,6 +266,8 @@ type PropsType$1 = React$1.PropsWithChildren<{
     onChange: (value?: IFlowTemplateValue) => void;
     readonly?: boolean;
     hasError?: boolean;
+    placeholder?: string;
+    activeLinePlaceholder?: string;
     style?: React$1.CSSProperties;
 }>;
 
@@ -297,13 +301,19 @@ 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;
     languageId: 'python' | 'typescript' | 'shell' | 'json';
     theme?: 'dark' | 'light';
+    placeholder?: string;
+    activeLinePlaceholder?: string;
+    readonly?: boolean;
+    options?: Options;
 }
-declare function CodeEditor({ value, onChange, languageId, theme, children, }: 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';
 
@@ -264,6 +266,8 @@ type PropsType$1 = React$1.PropsWithChildren<{
     onChange: (value?: IFlowTemplateValue) => void;
     readonly?: boolean;
     hasError?: boolean;
+    placeholder?: string;
+    activeLinePlaceholder?: string;
     style?: React$1.CSSProperties;
 }>;
 
@@ -297,13 +301,19 @@ 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;
     languageId: 'python' | 'typescript' | 'shell' | 'json';
     theme?: 'dark' | 'light';
+    placeholder?: string;
+    activeLinePlaceholder?: string;
+    readonly?: boolean;
+    options?: Options;
 }
-declare function CodeEditor({ value, onChange, languageId, theme, children, }: 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

@@ -2144,21 +2144,40 @@ 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 = (0, import_react24.useRef)(null);
+  (0, import_react24.useEffect)(() => {
+    if (editorRef.current?.getValue() !== value?.content) {
+      editorRef.current?.setValue(String(value?.content || ""));
+    }
+  }, [value]);
   return /* @__PURE__ */ import_react24.default.createElement(UIContainer4, { $hasError: hasError, style }, /* @__PURE__ */ import_react24.default.createElement(import_react25.EditorProvider, null, /* @__PURE__ */ import_react24.default.createElement(
     import_react25.Renderer,
     {
+      didMount: (editor) => {
+        editorRef.current = editor;
+      },
       plugins: import_preset_prompt2.default,
       defaultValue: String(value?.content),
       options: {
         readOnly: readonly,
-        editable: !readonly
+        editable: !readonly,
+        placeholder
       },
       onChange: (e) => {
         onChange({ type: "template", content: e.value });
       }
     }
-  ), /* @__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), /* @__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
@@ -2222,8 +2241,8 @@ 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_client = require("react-dom/client");
 var import_lodash4 = require("lodash");
 var import_editor7 = require("@flowgram.ai/editor");
 var import_semi_ui13 = require("@douyinfe/semi-ui");
@@ -2282,9 +2301,12 @@ var VariableTagWidget = class extends import_view3.WidgetType {
     this.keyPath = keyPath;
     this.scope = scope;
   }
+  renderReact(jsx) {
+    import_react_dom.default.render(jsx, this.rootDOM);
+  }
   renderVariable(v) {
     if (!v) {
-      this.root.render(
+      this.renderReact(
         /* @__PURE__ */ import_react28.default.createElement(UITag2, { prefixIcon: /* @__PURE__ */ import_react28.default.createElement(import_semi_icons9.IconIssueStroked, null), color: "amber" }, "Unknown")
       );
       return;
@@ -2292,7 +2314,7 @@ var VariableTagWidget = class extends import_view3.WidgetType {
     const rootField = (0, import_lodash4.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.root.render(
+    this.renderReact(
       /* @__PURE__ */ import_react28.default.createElement(
         import_semi_ui13.Popover,
         {
@@ -2304,10 +2326,10 @@ var VariableTagWidget = class extends import_view3.WidgetType {
   }
   toDOM(view) {
     const dom = document.createElement("span");
-    this.root = (0, import_client.createRoot)(dom);
+    this.rootDOM = dom;
     this.toDispose.push(
       import_editor7.Disposable.create(() => {
-        this.root.unmount();
+        import_react_dom.default.unmountComponentAtNode(this.rootDOM);
       })
     );
     this.toDispose.push(
@@ -2553,7 +2575,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",
@@ -2783,9 +2805,18 @@ function CodeEditor({
   onChange,
   languageId = "python",
   theme = "light",
-  children
+  children,
+  placeholder,
+  activeLinePlaceholder,
+  options: options2,
+  readonly
 }) {
   const editorRef = (0, import_react35.useRef)(null);
+  (0, import_react35.useEffect)(() => {
+    if (editorRef.current?.getValue() !== value) {
+      editorRef.current?.setValue(String(value || ""));
+    }
+  }, [value]);
   return /* @__PURE__ */ import_react35.default.createElement(import_react36.EditorProvider, null, /* @__PURE__ */ import_react35.default.createElement(
     OriginCodeEditor,
     {
@@ -2793,19 +2824,25 @@ 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__ */ import_react35.default.createElement(import_react36.ActiveLinePlaceholder, null, activeLinePlaceholder),
     children
   ));
 }
 
 // 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"));
@@ -2866,7 +2903,7 @@ function VariableTree2() {
 
 // src/components/json-editor-with-variables/extensions/variable-tag.tsx
 var import_react39 = __toESM(require("react"));
-var import_client2 = require("react-dom/client");
+var import_client = require("react-dom/client");
 var import_lodash6 = require("lodash");
 var import_editor10 = require("@flowgram.ai/editor");
 var import_semi_ui18 = require("@douyinfe/semi-ui");
@@ -2947,7 +2984,7 @@ var VariableTagWidget2 = class extends import_view5.WidgetType {
   }
   toDOM(view) {
     const dom = document.createElement("span");
-    this.root = (0, import_client2.createRoot)(dom);
+    this.root = (0, import_client.createRoot)(dom);
     this.toDispose.push(
       import_editor10.Disposable.create(() => {
         this.root.unmount();
@@ -3014,8 +3051,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", ...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