@flowgram.ai/form-materials 0.1.0-alpha.12 → 0.1.0-alpha.14

package/src/components/inputs-values-tree/styles.tsx

@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import styled, { css } from 'styled-components';
+import Icon from '@douyinfe/semi-icons';
+
+export const UIContainer = styled.div``;
+
+export const UIRow = styled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 5px;
+`;
+
+export const UICollapseTrigger = styled.div`
+  cursor: pointer;
+  margin-right: 5px;
+`;
+
+export const UITreeItems = styled.div<{ $shrink?: boolean }>`
+  display: grid;
+  grid-template-columns: auto 1fr;
+
+  ${({ $shrink }) =>
+    $shrink &&
+    css`
+      padding-left: 3px;
+      margin-top: 10px;
+    `}
+`;
+
+export const UITreeItemLeft = styled.div<{
+  $isLast?: boolean;
+  $showLine?: boolean;
+  $showCollapse?: boolean;
+}>`
+  grid-column: 1;
+  position: relative;
+  width: 16px;
+
+  ${({ $showLine, $isLast, $showCollapse }) => {
+    let height = $isLast ? '24px' : '100%';
+    let width = $showCollapse ? '12px' : '30px';
+
+    return (
+      $showLine &&
+      css`
+        &::before {
+          /* 竖线 */
+          content: '';
+          height: ${height};
+          position: absolute;
+          left: -14px;
+          top: -16px;
+          width: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
+
+        &::after {
+          /* 横线 */
+          content: '';
+          position: absolute;
+          left: -14px; // 横线起点和竖线对齐
+          top: 8px; // 跟随你的行高调整
+          width: ${width}; // 横线长度
+          height: 1px;
+          background: #d9d9d9;
+          display: block;
+        }
+      `
+    );
+  }}
+`;
+
+export const UITreeItemRight = styled.div`
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+`;
+
+export const UITreeItemMain = styled.div<{}>`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+`;
+
+export const UICollapsible = styled.div<{ $collapse?: boolean }>`
+  display: none;
+
+  ${({ $collapse }) =>
+    $collapse &&
+    css`
+      display: block;
+    `}
+`;
+
+export const UIActions = styled.div`
+  white-space: nowrap;
+`;
+
+const iconAddChildrenSvg = (
+  <svg
+    className="icon-icon icon-icon-coz_add_node "
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11 6.49988C11 8.64148 9.50397 10.4337 7.49995 10.8884V15.4998C7.49995 16.0521 7.94767 16.4998 8.49995 16.4998H11.208C11.0742 16.8061 11 17.1443 11 17.4998C11 17.8554 11.0742 18.1936 11.208 18.4998H8.49995C6.8431 18.4998 5.49995 17.1567 5.49995 15.4998V10.8884C3.49599 10.4336 2 8.64145 2 6.49988C2 4.0146 4.01472 1.99988 6.5 1.99988C8.98528 1.99988 11 4.0146 11 6.49988ZM6.5 8.99988C7.88071 8.99988 9 7.88059 9 6.49988C9 5.11917 7.88071 3.99988 6.5 3.99988C5.11929 3.99988 4 5.11917 4 6.49988C4 7.88059 5.11929 8.99988 6.5 8.99988Z"
+    ></path>
+    <path d="M17.5 12.4999C18.0523 12.4999 18.5 12.9476 18.5 13.4999V16.4999H21.5C22.0523 16.4999 22.5 16.9476 22.5 17.4999C22.5 18.0522 22.0523 18.4999 21.5 18.4999H18.5V21.4999C18.5 22.0522 18.0523 22.4999 17.5 22.4999C16.9477 22.4999 16.5 22.0522 16.5 21.4999V18.4999H13.5C12.9477 18.4999 12.5 18.0522 12.5 17.4999C12.5 16.9476 12.9477 16.4999 13.5 16.4999H16.5V13.4999C16.5 12.9476 16.9477 12.4999 17.5 12.4999Z"></path>
+  </svg>
+);
+
+export const IconAddChildren = () => <Icon size="small" svg={iconAddChildrenSvg} />;

package/src/components/inputs-values-tree/types.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema } from '@flowgram.ai/json-schema';
+
+import { ConstantInputStrategy } from '@/components/constant-input';
+
+export interface PropsType {
+  value?: any;
+  onChange: (value?: any) => void;
+  readonly?: boolean;
+  hasError?: boolean;
+  schema?: IJsonSchema;
+  style?: React.CSSProperties;
+  constantProps?: {
+    strategies?: ConstantInputStrategy[];
+    [key: string]: any;
+  };
+}

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

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { I18n } from '@flowgram.ai/editor';
+import { transformerCreator } from '@coze-editor/editor/preset-code';
+import { Text } from '@coze-editor/editor/language-json';
+
+import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
+
+import { VariableTree } from './extensions/variable-tree';
+import { VariableTagInject } from './extensions/variable-tag';
+
+type Match = { match: string; range: [number, number] };
+function findAllMatches(inputString: string, regex: RegExp): Match[] {
+  const globalRegex = new RegExp(
+    regex,
+    regex.flags.includes('g') ? regex.flags : regex.flags + 'g'
+  );
+  let match;
+  const matches: Match[] = [];
+
+  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;
+}
+
+const transformer = transformerCreator((text: 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;
+});
+
+export interface JsonEditorWithVariablesProps extends Omit<CodeEditorPropsType, 'languageId'> {}
+
+export function JsonEditorWithVariables(props: JsonEditorWithVariablesProps) {
+  return (
+    <CodeEditor
+      languageId="json"
+      activeLinePlaceholder={I18n.t("Press '@' to Select variable")}
+      {...props}
+      options={{
+        transformer,
+        ...(props.options || {}),
+      }}
+    >
+      <VariableTree />
+      <VariableTagInject />
+    </CodeEditor>
+  );
+}

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

@@ -5,8 +5,7 @@
 
 import React, { useLayoutEffect } from 'react';
 
-import { createRoot, Root } from 'react-dom/client';
-import { isEqual, last } from 'lodash';
+import { isEqual, last } from 'lodash-es';
 import {
   BaseVariableField,
   Disposable,
@@ -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;
 
-  root: Root;
+  root: IPolyfillRoot;
 
   constructor({ keyPath, scope }: { keyPath?: string[]; scope: Scope }) {
     super();
@@ -90,7 +91,7 @@ class VariableTagWidget extends WidgetType {
   toDOM(view: EditorView): HTMLElement {
     const dom = document.createElement('span');
 
-    this.root = createRoot(dom);
+    this.root = polyfillCreateRoot(dom);
 
     this.toDispose.push(
       Disposable.create(() => {
@@ -134,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/json-editor-with-variables/extensions/variable-tree.tsx

@@ -15,7 +15,7 @@ import {
 } from '@coze-editor/editor/react';
 import { EditorAPI } from '@coze-editor/editor/preset-prompt';
 
-import { useVariableTree } from '../../variable-selector';
+import { useVariableTree } from '@/components/variable-selector';
 
 export function VariableTree() {
   const [posKey, setPosKey] = useState('');

package/src/components/json-editor-with-variables/index.tsx

@@ -3,63 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React from 'react';
+import { lazySuspense } from '@/shared';
 
-import { transformerCreator } from '@coze-editor/editor/preset-code';
-import { Text } from '@coze-editor/editor/language-json';
+export const JsonEditorWithVariables = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.JsonEditorWithVariables }))
+);
 
-import { VariableTree } from './extensions/variable-tree';
-import { VariableTagInject } from './extensions/variable-tag';
-import { CodeEditor, type CodeEditorPropsType } from '../code-editor';
-
-type Match = { match: string; range: [number, number] };
-function findAllMatches(inputString: string, regex: RegExp): Match[] {
-  const globalRegex = new RegExp(
-    regex,
-    regex.flags.includes('g') ? regex.flags : regex.flags + 'g'
-  );
-  let match;
-  const matches: Match[] = [];
-
-  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;
-}
-
-const transformer = transformerCreator((text: 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;
-});
-
-export function JsonEditorWithVariables(props: Omit<CodeEditorPropsType, 'languageId'>) {
-  return (
-    <CodeEditor
-      languageId="json"
-      activeLinePlaceholder="Press '@' to Select variable"
-      {...props}
-      options={{
-        transformer,
-        ...(props.options || {}),
-      }}
-    >
-      <VariableTree />
-      <VariableTagInject />
-    </CodeEditor>
-  );
-}
+export type { JsonEditorWithVariablesProps } from './editor';

package/src/components/json-schema-editor/default-value.tsx

@@ -3,132 +3,36 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useRef, useState, useCallback } from 'react';
+import React from 'react';
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
-import { IconButton, JsonViewer, Tooltip } from '@douyinfe/semi-ui';
-import { IconBrackets } from '@douyinfe/semi-icons';
+import { I18n } from '@flowgram.ai/editor';
 
-import { getValueType } from './utils';
-import {
-  ConstantInputWrapper,
-  JSONHeader,
-  JSONHeaderLeft,
-  JSONHeaderRight,
-  JSONViewerWrapper,
-} from './styles';
-import { ConstantInput } from '../constant-input';
+import { ConstantInput } from '@/components/constant-input';
+
+import { ConstantInputWrapper } from './styles';
 
 /**
- * 根据不同的数据类型渲染对应的默认值输入组件。
- * @param props - 组件属性，包括 value, type, placeholder, onChange。
- * @returns 返回对应类型的输入组件或 null。
+ * Renders the corresponding default value input component based on different data types.
+ * @param props - Component properties, including value, type, placeholder, onChange.
+ * @returns Returns the input component of the corresponding type or null.
  */
 export function DefaultValue(props: {
   value: any;
   schema?: IJsonSchema;
-  name?: string;
-  type?: string;
   placeholder?: string;
-  jsonFormatText?: string;
   onChange: (value: any) => void;
 }) {
-  const { value, schema, type, onChange, placeholder, jsonFormatText } = props;
-
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const JsonViewerRef = useRef<JsonViewer>(null);
-
-  // 为 JsonViewer 添加状态管理
-  const [internalJsonValue, setInternalJsonValue] = useState<string>(
-    getValueType(value) === 'string' ? value : ''
-  );
-
-  // 使用 useCallback 创建稳定的回调函数
-  const handleJsonChange = useCallback((val: string) => {
-    // 只在值真正改变时才更新状态
-    if (val !== internalJsonValue) {
-      setInternalJsonValue(val);
-    }
-  }, []);
-
-  // 处理编辑完成事件
-  const handleEditComplete = useCallback(() => {
-    // 只有当存在key，编辑完成时才触发父组件的 onChange
-    onChange(internalJsonValue);
-    // 确保在更新后移除焦点
-    requestAnimationFrame(() => {
-      // JsonViewerRef.current?.format();
-      wrapperRef.current?.blur();
-    });
-    setJsonReadOnly(true);
-  }, [internalJsonValue, onChange]);
-
-  const [jsonReadOnly, setJsonReadOnly] = useState<boolean>(true);
-
-  const handleFormatJson = useCallback(() => {
-    try {
-      const parsed = JSON.parse(internalJsonValue);
-      const formatted = JSON.stringify(parsed, null, 4);
-      setInternalJsonValue(formatted);
-      onChange(formatted);
-    } catch (error) {
-      console.error('Invalid JSON:', error);
-    }
-  }, [internalJsonValue, onChange]);
-
-  return type === 'object' ? (
-    <>
-      <JSONHeader>
-        <JSONHeaderLeft>json</JSONHeaderLeft>
-        <JSONHeaderRight>
-          <Tooltip content={jsonFormatText ?? 'Format'}>
-            <IconButton
-              icon={<IconBrackets style={{ color: 'var(--semi-color-primary)' }} />}
-              size="small"
-              type="tertiary"
-              theme="borderless"
-              onClick={handleFormatJson}
-            />
-          </Tooltip>
-        </JSONHeaderRight>
-      </JSONHeader>
+  const { value, schema, onChange, placeholder } = props;
 
-      <JSONViewerWrapper
-        ref={wrapperRef}
-        tabIndex={-1}
-        onBlur={(e) => {
-          if (wrapperRef.current && !wrapperRef.current?.contains(e.relatedTarget as Node)) {
-            handleEditComplete();
-          }
-        }}
-        onClick={(e: React.MouseEvent) => {
-          setJsonReadOnly(false);
-        }}
-      >
-        <JsonViewer
-          ref={JsonViewerRef}
-          value={getValueType(value) === 'string' ? value : ''}
-          height={120}
-          width="100%"
-          showSearch={false}
-          options={{
-            readOnly: jsonReadOnly,
-            formatOptions: { tabSize: 4, insertSpaces: true, eol: '\n' },
-          }}
-          style={{
-            padding: 0,
-          }}
-          onChange={handleJsonChange}
-        />
-      </JSONViewerWrapper>
-    </>
-  ) : (
+  return (
     <ConstantInputWrapper>
       <ConstantInput
         value={value}
         onChange={(_v) => onChange(_v)}
         schema={schema || { type: 'string' }}
-        placeholder={placeholder ?? 'Default value if parameter is not provided'}
+        placeholder={placeholder ?? I18n.t('Default value if parameter is not provided')}
+        enableMultiLineStr
       />
     </ConstantInputWrapper>
   );

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

@@ -3,10 +3,11 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-import { omit } from 'lodash';
-import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { difference, omit } from 'lodash-es';
+import { produce } from 'immer';
+import { IJsonSchema, type JsonSchemaTypeManager, useTypeManager } from '@flowgram.ai/json-schema';
 
 import { PropertyValueType } from './types';
 
@@ -15,94 +16,59 @@ function genId() {
   return _id++;
 }
 
-function getDrilldownSchema(
-  value?: PropertyValueType,
-  path?: (keyof PropertyValueType)[]
-): { schema?: PropertyValueType | null; path?: (keyof PropertyValueType)[] } {
-  if (!value) {
-    return {};
-  }
-
-  if (value.type === 'array' && value.items) {
-    return getDrilldownSchema(value.items, [...(path || []), 'items']);
-  }
-
-  return { schema: value, path };
-}
-
 export function usePropertiesEdit(
   value?: PropertyValueType,
   onChange?: (value: PropertyValueType) => void
 ) {
-  // Get drilldown (array.items.items...)
-  const drilldown = useMemo(() => getDrilldownSchema(value), [value, value?.type, value?.items]);
-
-  const isDrilldownObject = drilldown.schema?.type === 'object';
-
-  // Generate Init Property List
-  const initPropertyList = useMemo(
-    () =>
-      isDrilldownObject
-        ? Object.entries(drilldown.schema?.properties || {})
-            .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
-            .map(
-              ([name, _value], index) =>
-                ({
-                  key: genId(),
-                  name,
-                  isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-                  ..._value,
-                  extra: {
-                    ...(_value.extra || {}),
-                    index,
-                  },
-                } as PropertyValueType)
-            )
-        : [],
-    [isDrilldownObject]
-  );
-
-  const [propertyList, setPropertyList] = useState<PropertyValueType[]>(initPropertyList);
-
-  const mountRef = useRef(false);
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
+
+  // Get drilldown properties (array.items.items.properties...)
+  const drilldownSchema = typeManager.getPropertiesParent(value || {});
+  const canAddField = typeManager.canAddField(value || {});
+
+  const [propertyList, setPropertyList] = useState<PropertyValueType[]>([]);
+
+  const effectVersion = useRef(0);
+  const changeVersion = useRef(0);
 
   useEffect(() => {
-    // If initRef is true, it means the component has been mounted
-    if (mountRef.current) {
-      // If the value is changed, update the property list
-      setPropertyList((_list) => {
-        const nameMap = new Map<string, PropertyValueType>();
-
-        for (const _property of _list) {
-          if (_property.name) {
-            nameMap.set(_property.name, _property);
-          }
-        }
-        return Object.entries(drilldown.schema?.properties || {})
-          .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
-          .map(([name, _value]) => {
-            const _property = nameMap.get(name);
-            if (_property) {
-              return {
-                key: _property.key,
-                name,
-                isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-                ..._value,
-              };
-            }
-            return {
-              key: genId(),
-              name,
-              isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
-              ..._value,
-            };
-          });
-      });
+    effectVersion.current = effectVersion.current + 1;
+    if (effectVersion.current === changeVersion.current) {
+      return;
     }
-    mountRef.current = true;
-  }, [drilldown.schema]);
+    effectVersion.current = changeVersion.current;
+
+    // If the value is changed, update the property list
+    setPropertyList((_list) => {
+      const newNames = Object.entries(drilldownSchema?.properties || {})
+        .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
+        .map(([key]) => key);
+
+      const oldNames = _list.map((item) => item.name).filter(Boolean) as string[];
+      const addNames = difference(newNames, oldNames);
+
+      return _list
+        .filter((item) => !item.name || newNames.includes(item.name))
+        .map((item) => ({
+          key: item.key,
+          name: item.name,
+          isPropertyRequired: drilldownSchema?.required?.includes(item.name || '') || false,
+          ...(drilldownSchema?.properties?.[item.name || ''] || item || {}),
+        }))
+        .concat(
+          addNames.map((_name) => ({
+            key: genId(),
+            name: _name,
+            isPropertyRequired: drilldownSchema?.required?.includes(_name) || false,
+            ...(drilldownSchema?.properties?.[_name] || {}),
+          }))
+        );
+    });
+  }, [drilldownSchema]);
 
   const updatePropertyList = (updater: (list: PropertyValueType[]) => PropertyValueType[]) => {
+    changeVersion.current = changeVersion.current + 1;
+
     setPropertyList((_list) => {
       const next = updater(_list);
 
@@ -122,21 +88,25 @@ export function usePropertiesEdit(
         }
       }
 
-      let drilldownSchema = value || {};
-      if (drilldown.path) {
-        drilldownSchema = drilldown.path.reduce((acc, key) => acc[key], value || {});
-      }
-      drilldownSchema.properties = nextProperties;
-      drilldownSchema.required = nextRequired;
+      onChange?.(
+        produce(value || {}, (draft) => {
+          const propertiesParent = typeManager.getPropertiesParent(draft);
 
-      onChange?.(value || {});
+          if (propertiesParent) {
+            propertiesParent.properties = nextProperties;
+            propertiesParent.required = nextRequired;
+            return;
+          }
+        })
+      );
 
       return next;
     });
   };
 
   const onAddProperty = () => {
-    updatePropertyList((_list) => [
+    // set property list only, not trigger updatePropertyList
+    setPropertyList((_list) => [
       ..._list,
       { key: genId(), name: '', type: 'string', extra: { index: _list.length + 1 } },
     ]);
@@ -153,14 +123,14 @@ export function usePropertiesEdit(
   };
 
   useEffect(() => {
-    if (!isDrilldownObject) {
+    if (!canAddField) {
       setPropertyList([]);
     }
-  }, [isDrilldownObject]);
+  }, [canAddField]);
 
   return {
     propertyList,
-    isDrilldownObject,
+    canAddField,
     onAddProperty,
     onRemoveProperty,
     onEditProperty,