@flowgram.ai/form-materials 0.1.0-alpha.13 → 0.1.0-alpha.15

package/src/components/json-schema-editor/styles.tsx

@@ -39,37 +39,30 @@ export const UILabel = styled.div`
   margin-bottom: 2px;
 `;
 
-export const UIProperties = styled.div<{ $shrink?: boolean }>`
+export const UITreeItems = styled.div<{ $shrink?: boolean }>`
   display: grid;
   grid-template-columns: auto 1fr;
 
   ${({ $shrink }) =>
     $shrink &&
     css`
-      padding-left: 10px;
+      padding-left: 3px;
       margin-top: 10px;
     `}
 `;
 
-export const UIPropertyLeft = styled.div<{
+export const UITreeItemLeft = styled.div<{
   $isLast?: boolean;
   $showLine?: boolean;
-  $isExpand?: boolean;
-  type?: string;
-  $isFirst?: boolean;
-  $index?: number;
-  $parentExpand?: boolean;
-  $parentType?: string;
+  $showCollapse?: boolean;
 }>`
   grid-column: 1;
   position: relative;
   width: 16px;
 
-  ${({ $showLine, $isLast, $parentType }) => {
-    let height = '100%';
-    if ($parentType && $isLast) {
-      height = '24px';
-    }
+  ${({ $showLine, $isLast, $showCollapse }) => {
+    let height = $isLast ? '24px' : '100%';
+    let width = $showCollapse ? '12px' : '30px';
 
     return (
       $showLine &&
@@ -79,7 +72,7 @@ export const UIPropertyLeft = styled.div<{
           content: '';
           height: ${height};
           position: absolute;
-          left: -22px;
+          left: -14px;
           top: -16px;
           width: 1px;
           background: #d9d9d9;
@@ -90,9 +83,9 @@ export const UIPropertyLeft = styled.div<{
           /* 横线 */
           content: '';
           position: absolute;
-          left: -22px; // 横线起点和竖线对齐
+          left: -14px; // 横线起点和竖线对齐
           top: 8px; // 跟随你的行高调整
-          width: 18px; // 横线长度
+          width: ${width}; // 横线长度
           height: 1px;
           background: #d9d9d9;
           display: block;
@@ -102,7 +95,7 @@ export const UIPropertyLeft = styled.div<{
   }}
 `;
 
-export const UIPropertyRight = styled.div`
+export const UITreeItemRight = styled.div`
   grid-column: 2;
   margin-bottom: 10px;
 
@@ -111,47 +104,11 @@ export const UIPropertyRight = styled.div`
   }
 `;
 
-export const UIPropertyMain = styled.div<{
-  $expand?: boolean;
-  type?: string;
-  $collapse?: boolean;
-  $showCollapse?: boolean;
-}>`
+export const UITreeItemMain = styled.div<{}>`
   display: flex;
   flex-direction: column;
   gap: 10px;
   position: relative;
-
-  ${({ $expand, type, $collapse, $showCollapse }) => {
-    const beforeElement = `
-      &::before {
-        /* 竖线 */
-        content: '';
-        height: 100%;
-        position: absolute;
-        left: -12px;
-        top: 18px;
-        width: 1px;
-        background: #d9d9d9;
-        display: block;
-      }`;
-
-    return (
-      $expand &&
-      css`
-        background-color: #f5f5f5;
-        padding: 10px;
-        border-radius: 4px;
-
-        ${$showCollapse &&
-        $collapse &&
-        (type === 'array' || type === 'object') &&
-        css`
-          ${beforeElement}
-        `}
-      `
-    );
-  }}
 `;
 
 export const UICollapsible = styled.div<{ $collapse?: boolean }>`

package/src/components/json-schema-editor/types.ts

@@ -22,5 +22,4 @@ export interface ConfigType {
   defaultValueTitle?: string;
   defaultValuePlaceholder?: string;
   addButtonText?: string;
-  jsonFormatText?: string;
 }

package/src/components/prompt-editor/editor.tsx

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useEffect, useRef } from 'react';
+
+import {
+  Renderer,
+  EditorProvider,
+  ActiveLinePlaceholder,
+  InferValues,
+} from '@flowgram.ai/coze-editor/react';
+import preset, { EditorAPI } from '@flowgram.ai/coze-editor/preset-prompt';
+
+import { PropsType } from './types';
+import { UIContainer } from './styles';
+import MarkdownHighlight from './extensions/markdown';
+import LanguageSupport from './extensions/language-support';
+import JinjaHighlight from './extensions/jinja';
+
+type Preset = typeof preset;
+type Options = Partial<InferValues<Preset[number]>>;
+
+export interface PromptEditorPropsType extends PropsType {
+  options?: Options;
+}
+
+export function PromptEditor(props: PromptEditorPropsType) {
+  const {
+    value,
+    onChange,
+    readonly,
+    placeholder,
+    activeLinePlaceholder,
+    style,
+    hasError,
+    children,
+    disableMarkdownHighlight,
+    options,
+  } = props || {};
+
+  const editorRef = useRef<EditorAPI | null>(null);
+
+  useEffect(() => {
+    // listen to value change
+    if (editorRef.current?.getValue() !== value?.content) {
+      editorRef.current?.setValue(String(value?.content || ''));
+    }
+  }, [value]);
+
+  return (
+    <UIContainer $hasError={hasError} style={style}>
+      <EditorProvider>
+        <Renderer
+          didMount={(editor: EditorAPI) => {
+            editorRef.current = editor;
+          }}
+          plugins={preset}
+          defaultValue={String(value?.content)}
+          options={{
+            readOnly: readonly,
+            editable: !readonly,
+            placeholder,
+            ...options,
+          }}
+          onChange={(e) => {
+            onChange({ type: 'template', content: e.value });
+          }}
+        />
+        {activeLinePlaceholder && (
+          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
+        )}
+        {!disableMarkdownHighlight && <MarkdownHighlight />}
+        <LanguageSupport />
+        <JinjaHighlight />
+        {children}
+      </EditorProvider>
+    </UIContainer>
+  );
+}

package/src/components/prompt-editor/extensions/jinja.tsx

@@ -5,8 +5,8 @@
 
 import { useLayoutEffect } from 'react';
 
-import { useInjector } from '@coze-editor/editor/react';
-import { astDecorator } from '@coze-editor/editor';
+import { useInjector } from '@flowgram.ai/coze-editor/react';
+import { astDecorator } from '@flowgram.ai/coze-editor';
 import { EditorView } from '@codemirror/view';
 
 function JinjaHighlight() {

package/src/components/prompt-editor/extensions/language-support.tsx

@@ -5,8 +5,8 @@
 
 import { useLayoutEffect } from 'react';
 
-import { useInjector } from '@coze-editor/editor/react';
-import { languageSupport } from '@coze-editor/editor/preset-prompt';
+import { useInjector } from '@flowgram.ai/coze-editor/react';
+import { languageSupport } from '@flowgram.ai/coze-editor/preset-prompt';
 
 function LanguageSupport() {
   const injector = useInjector();

package/src/components/prompt-editor/extensions/markdown.tsx

@@ -5,8 +5,8 @@
 
 import { useLayoutEffect } from 'react';
 
-import { useInjector } from '@coze-editor/editor/react';
-import { astDecorator } from '@coze-editor/editor';
+import { useInjector } from '@flowgram.ai/coze-editor/react';
+import { astDecorator } from '@flowgram.ai/coze-editor';
 import { EditorView } from '@codemirror/view';
 
 function MarkdownHighlight() {

package/src/components/prompt-editor/index.tsx

@@ -3,67 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useEffect, useRef } from 'react';
+import { lazySuspense } from '@/shared';
 
-import { Renderer, EditorProvider, ActiveLinePlaceholder } from '@coze-editor/editor/react';
-import preset, { EditorAPI } from '@coze-editor/editor/preset-prompt';
+export const PromptEditor = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.PromptEditor }))
+);
 
-import { PropsType } from './types';
-import { UIContainer } from './styles';
-import MarkdownHighlight from './extensions/markdown';
-import LanguageSupport from './extensions/language-support';
-import JinjaHighlight from './extensions/jinja';
-
-export type PromptEditorPropsType = PropsType;
-
-export function PromptEditor(props: PropsType) {
-  const {
-    value,
-    onChange,
-    readonly,
-    placeholder,
-    activeLinePlaceholder,
-    style,
-    hasError,
-    children,
-    disableMarkdownHighlight,
-  } = props || {};
-
-  const editorRef = useRef<EditorAPI | null>(null);
-
-  useEffect(() => {
-    // listen to value change
-    if (editorRef.current?.getValue() !== value?.content) {
-      editorRef.current?.setValue(String(value?.content || ''));
-    }
-  }, [value]);
-
-  return (
-    <UIContainer $hasError={hasError} style={style}>
-      <EditorProvider>
-        <Renderer
-          didMount={(editor: EditorAPI) => {
-            editorRef.current = editor;
-          }}
-          plugins={preset}
-          defaultValue={String(value?.content)}
-          options={{
-            readOnly: readonly,
-            editable: !readonly,
-            placeholder,
-          }}
-          onChange={(e) => {
-            onChange({ type: 'template', content: e.value });
-          }}
-        />
-        {activeLinePlaceholder && (
-          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
-        )}
-        {!disableMarkdownHighlight && <MarkdownHighlight />}
-        <LanguageSupport />
-        <JinjaHighlight />
-        {children}
-      </EditorProvider>
-    </UIContainer>
-  );
-}
+export type { PromptEditorPropsType } from './editor';

package/src/components/prompt-editor/types.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { IFlowTemplateValue } from '@/typings';
+import { IFlowTemplateValue } from '@/shared';
 
 export type PropsType = React.PropsWithChildren<{
   value?: IFlowTemplateValue;

package/src/components/prompt-editor-with-inputs/editor.tsx

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+
+import { InputsTree } from './extensions/inputs-tree';
+
+export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
+  inputsValues: any;
+}
+
+export function PromptEditorWithInputs({
+  inputsValues,
+  ...restProps
+}: PromptEditorWithInputsProps) {
+  return (
+    <PromptEditor {...restProps}>
+      <InputsTree inputsValues={inputsValues} />
+    </PromptEditor>
+  );
+}

package/src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx

@@ -5,17 +5,17 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { Popover } from '@douyinfe/semi-ui';
 import {
   Mention,
   MentionOpenChangeEvent,
   getCurrentMentionReplaceRange,
   useEditor,
   PositionMirror,
-} from '@coze-editor/editor/react';
-import { EditorAPI } from '@coze-editor/editor/preset-prompt';
+} from '@flowgram.ai/coze-editor/react';
+import { EditorAPI } from '@flowgram.ai/coze-editor/preset-prompt';
+import { Popover } from '@douyinfe/semi-ui';
 
-import { IFlowValue } from '@/typings';
+import { IFlowValue } from '@/shared';
 
 import { InputsPicker } from '../inputs-picker';
 
@@ -32,6 +32,17 @@ export function InputsTree({ inputsValues }: { inputsValues: Record<string, IFlo
       return;
     }
 
+    /**
+     * When user input {{xxxx}}, {{{xxx}}}(more brackets if possible), replace all brackets with {{xxxx}}
+     */
+    let { from, to } = range;
+    while (editor.$view.state.doc.sliceString(from - 1, from) === '{') {
+      from--;
+    }
+    while (editor.$view.state.doc.sliceString(to, to + 1) === '}') {
+      to++;
+    }
+
     editor.replaceText({
       ...range,
       text: '{{' + variablePath + '}}',

package/src/components/prompt-editor-with-inputs/index.tsx

@@ -3,21 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React from 'react';
+import { lazySuspense } from '@/shared';
 
-import { IFlowValue } from '@/typings';
-import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+export const PromptEditorWithInputs = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.PromptEditorWithInputs }))
+);
 
-import { InputsTree } from './extensions/inputs-tree';
-
-interface PropsType extends PromptEditorPropsType {
-  inputsValues: Record<string, IFlowValue>;
-}
-
-export function PromptEditorWithInputs({ inputsValues, ...restProps }: PropsType) {
-  return (
-    <PromptEditor {...restProps}>
-      <InputsTree inputsValues={inputsValues} />
-    </PromptEditor>
-  );
-}
+export type { PromptEditorWithInputsProps } from './editor';

package/src/components/prompt-editor-with-inputs/inputs-picker.tsx

@@ -5,7 +5,7 @@
 
 import React, { useMemo } from 'react';
 
-import { last } from 'lodash';
+import { isPlainObject, last } from 'lodash-es';
 import {
   type ArrayType,
   ASTMatch,
@@ -16,7 +16,7 @@ import {
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Tree } from '@douyinfe/semi-ui';
 
-import { IFlowValue } from '@/typings';
+import { FlowValueUtils } from '@/shared';
 
 type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
 
@@ -24,7 +24,7 @@ export function InputsPicker({
   inputsValues,
   onSelect,
 }: {
-  inputsValues: Record<string, IFlowValue>;
+  inputsValues: any;
   onSelect: (v: string) => void;
 }) {
   const available = useScopeAvailable();
@@ -76,23 +76,40 @@ export function InputsPicker({
     };
   };
 
-  const treeData: TreeNodeData[] = useMemo(
-    () =>
-      Object.entries(inputsValues).map(([key, value]) => {
-        if (value?.type === 'ref') {
-          const variable = available.getByKeyPath(value.content || []);
+  const getTreeData = (value: any, keyPath: string[]): TreeNodeData | undefined => {
+    const currKey = keyPath.join('.');
 
-          if (variable) {
-            return renderVariable(variable, [key]);
-          }
+    if (FlowValueUtils.isFlowValue(value)) {
+      if (FlowValueUtils.isRef(value)) {
+        const variable = available.getByKeyPath(value.content || []);
+        if (variable) {
+          return renderVariable(variable, keyPath);
         }
+      }
+      return {
+        key: currKey,
+        value: currKey,
+        label: last(keyPath),
+      };
+    }
 
-        return {
-          key,
-          value: key,
-          label: key,
-        };
-      }),
+    if (isPlainObject(value)) {
+      return {
+        key: currKey,
+        value: currKey,
+        label: last(keyPath),
+        children: Object.entries(value)
+          .map(([key, value]) => getTreeData(value, [...keyPath, key])!)
+          .filter(Boolean),
+      };
+    }
+  };
+
+  const treeData: TreeNodeData[] = useMemo(
+    () =>
+      Object.entries(inputsValues)
+        .map(([key, value]) => getTreeData(value, [key])!)
+        .filter(Boolean),
     []
   );
 

package/src/components/prompt-editor-with-variables/editor.tsx

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+
+import { VariableTree } from './extensions/variable-tree';
+import { VariableTagInject } from './extensions/variable-tag';
+
+export interface PromptEditorWithVariablesProps extends PromptEditorPropsType {}
+
+export function PromptEditorWithVariables(props: PromptEditorWithVariablesProps) {
+  return (
+    <PromptEditor {...props}>
+      <VariableTree />
+      <VariableTagInject />
+    </PromptEditor>
+  );
+}

package/src/components/prompt-editor-with-variables/extensions/variable-tag.tsx

@@ -3,10 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-import ReactDOM from 'react-dom';
 import React, { useLayoutEffect } from 'react';
 
-import { isEqual, last } from 'lodash';
+import { isEqual, last } from 'lodash-es';
 import {
   BaseVariableField,
   Disposable,
@@ -14,9 +13,9 @@ import {
   Scope,
   useCurrentScope,
 } from '@flowgram.ai/editor';
+import { useInjector } from '@flowgram.ai/coze-editor/react';
 import { Popover } from '@douyinfe/semi-ui';
 import { IconIssueStroked } from '@douyinfe/semi-icons';
-import { useInjector } from '@coze-editor/editor/react';
 import {
   Decoration,
   DecorationSet,
@@ -26,6 +25,8 @@ import {
   WidgetType,
 } from '@codemirror/view';
 
+import { IPolyfillRoot, polyfillCreateRoot } from '@/shared';
+
 import { UIPopoverContent, UIRootTitle, UITag, UIVarName } from '../styles';
 
 class VariableTagWidget extends WidgetType {
@@ -35,7 +36,7 @@ class VariableTagWidget extends WidgetType {
 
   scope: Scope;
 
-  rootDOM?: HTMLSpanElement;
+  root: IPolyfillRoot;
 
   constructor({ keyPath, scope }: { keyPath?: string[]; scope: Scope }) {
     super();
@@ -52,14 +53,9 @@ class VariableTagWidget extends WidgetType {
     return icon;
   };
 
-  renderReact(jsx: React.ReactElement) {
-    // NOTICE: For React 19, upgrade to 'react-dom/client'
-    ReactDOM.render(jsx, this.rootDOM!);
-  }
-
   renderVariable(v?: BaseVariableField) {
     if (!v) {
-      this.renderReact(
+      this.root.render(
         <UITag prefixIcon={<IconIssueStroked />} color="amber">
           Unknown
         </UITag>
@@ -67,17 +63,14 @@ class VariableTagWidget extends WidgetType {
       return;
     }
 
-    const rootField = last(v.parentFields) || v;
-    const isRoot = v.parentFields.length === 0;
+    const rootField = last(v.parentFields);
 
     const rootTitle = (
-      <UIRootTitle>
-        {rootField?.meta.title ? `${rootField.meta.title} ${isRoot ? '' : '-'} ` : ''}
-      </UIRootTitle>
+      <UIRootTitle>{rootField?.meta.title ? `${rootField.meta.title} -` : ''}</UIRootTitle>
     );
     const rootIcon = this.renderIcon(rootField?.meta.icon);
 
-    this.renderReact(
+    this.root.render(
       <Popover
         content={
           <UIPopoverContent>
@@ -89,7 +82,7 @@ class VariableTagWidget extends WidgetType {
       >
         <UITag prefixIcon={rootIcon}>
           {rootTitle}
-          {!isRoot && <UIVarName>{v?.key}</UIVarName>}
+          <UIVarName>{v?.key}</UIVarName>
         </UITag>
       </Popover>
     );
@@ -98,12 +91,11 @@ class VariableTagWidget extends WidgetType {
   toDOM(view: EditorView): HTMLElement {
     const dom = document.createElement('span');
 
-    this.rootDOM = dom;
+    this.root = polyfillCreateRoot(dom);
 
     this.toDispose.push(
       Disposable.create(() => {
-        // NOTICE: For React 19, upgrade to 'react-dom/client'
-        ReactDOM.unmountComponentAtNode(this.rootDOM!);
+        this.root.unmount();
       })
     );
 
@@ -143,7 +135,7 @@ export function VariableTagInject() {
   // 基于 {{var}} 的正则进行匹配，匹配后进行自定义渲染
   useLayoutEffect(() => {
     const atMatcher = new MatchDecorator({
-      regexp: /\{\{([^\}]+)\}\}/g,
+      regexp: /\{\{([^\}\{]+)\}\}/g,
       decoration: (match) =>
         Decoration.replace({
           widget: new VariableTagWidget({

package/src/components/prompt-editor-with-variables/extensions/variable-tree.tsx

@@ -5,15 +5,15 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { Popover, Tree } from '@douyinfe/semi-ui';
 import {
   Mention,
   MentionOpenChangeEvent,
   getCurrentMentionReplaceRange,
   useEditor,
   PositionMirror,
-} from '@coze-editor/editor/react';
-import { EditorAPI } from '@coze-editor/editor/preset-prompt';
+} from '@flowgram.ai/coze-editor/react';
+import { EditorAPI } from '@flowgram.ai/coze-editor/preset-prompt';
+import { Popover, Tree } from '@douyinfe/semi-ui';
 
 import { useVariableTree } from '@/components/variable-selector';
 
@@ -30,8 +30,20 @@ export function VariableTree() {
       return;
     }
 
+    /**
+     * When user input {{xxxx}}, {{{xxx}}}(more brackets if possible), replace all brackets with {{xxxx}}
+     */
+    let { from, to } = range;
+    while (editor.$view.state.doc.sliceString(from - 1, from) === '{') {
+      from--;
+    }
+    while (editor.$view.state.doc.sliceString(to, to + 1) === '}') {
+      to++;
+    }
+
     editor.replaceText({
-      ...range,
+      from,
+      to,
       text: '{{' + variablePath + '}}',
     });