@flowgram.ai/form-materials 0.3.4 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -34,8 +34,8 @@
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "typescript": "^5.8.3",
-    "@flowgram.ai/editor": "0.3.4",
-    "@flowgram.ai/json-schema": "0.3.4"
+    "@flowgram.ai/editor": "0.3.6",
+    "@flowgram.ai/json-schema": "0.3.6"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -51,8 +51,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.3.4",
-    "@flowgram.ai/ts-config": "0.3.4"
+    "@flowgram.ai/eslint-config": "0.3.6",
+    "@flowgram.ai/ts-config": "0.3.6"
   },
   "peerDependencies": {
     "react": ">=16.8",

package/src/components/assign-row/index.tsx

@@ -9,11 +9,11 @@ import { IconButton } from '@douyinfe/semi-ui';
 import { IconMinus } from '@douyinfe/semi-icons';
 
 import { IFlowConstantRefValue } from '@/typings';
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
 
 import { AssignRowProps } from './types';
 import { BlurInput } from './components/blur-input';
-import { VariableSelector } from '../variable-selector';
-import { DynamicValueInput } from '../dynamic-value-input';
 
 export function AssignRow(props: AssignRowProps) {
   const {
@@ -29,7 +29,7 @@ export function AssignRow(props: AssignRowProps) {
     <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
       <div style={{ width: 150, minWidth: 150, maxWidth: 150 }}>
         {value?.operator === 'assign' ? (
-          <VariableSelector
+          <InjectVariableSelector
             style={{ width: '100%', height: 26 }}
             value={value?.left?.content}
             config={{ placeholder: 'Select Left' }}
@@ -56,7 +56,7 @@ export function AssignRow(props: AssignRowProps) {
         )}
       </div>
       <div style={{ flexGrow: 1 }}>
-        <DynamicValueInput
+        <InjectDynamicValueInput
           readonly={readonly}
           value={value?.right as IFlowConstantRefValue | undefined}
           onChange={(v) =>

package/src/components/assign-rows/index.tsx

@@ -9,7 +9,7 @@ import { FieldArray, FieldArrayRenderProps } from '@flowgram.ai/editor';
 import { Button } from '@douyinfe/semi-ui';
 import { IconPlus } from '@douyinfe/semi-icons';
 
-import { AssignRow, AssignValueType } from '../assign-row';
+import { AssignRow, AssignValueType } from '@/components/assign-row';
 
 interface AssignRowsProps {
   name: string;

package/src/components/batch-outputs/index.tsx

@@ -8,9 +8,10 @@ import React from 'react';
 import { Button, Input } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
+import { useObjectList } from '@/hooks';
+import { InjectVariableSelector } from '@/components/variable-selector';
+
 import { PropsType } from './types';
-import { VariableSelector } from '../variable-selector';
-import { useObjectList } from '../../hooks';
 import { UIRow, UIRows } from './styles';
 
 export function BatchOutputs(props: PropsType) {
@@ -30,7 +31,7 @@ export function BatchOutputs(props: PropsType) {
               value={item.key}
               onChange={(v) => updateKey(item.id, v)}
             />
-            <VariableSelector
+            <InjectVariableSelector
               style={{ flexGrow: 1 }}
               readonly={readonly}
               value={item.value?.content}

package/src/components/batch-outputs/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 export type ValueType = Record<string, IFlowRefValue | undefined>;
 

package/src/components/batch-variable-selector/index.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { PrivateScopeProvider } from '@flowgram.ai/editor';
 
-import { VariableSelector, VariableSelectorProps } from '../variable-selector';
+import { VariableSelector, VariableSelectorProps } from '@/components/variable-selector';
 
 const batchVariableSchema: IJsonSchema = {
   type: 'array',

package/src/components/code-editor-mini/index.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 import styled from 'styled-components';
 
-import { CodeEditor, CodeEditorPropsType } from '../code-editor';
+import { CodeEditor, CodeEditorPropsType } from '@/components/code-editor';
 
 const UIMini = styled.div`
   .ͼ1 .cm-content {

package/src/components/condition-row/hooks/useRule.ts

@@ -8,9 +8,10 @@ import { useMemo } from 'react';
 import { JsonSchemaUtils, JsonSchemaBasicType } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
+import { IFlowRefValue } from '@/typings';
+
 import { IRules } from '../types';
 import { defaultRules } from '../constants';
-import { IFlowRefValue } from '../../../typings';
 
 export function useRule(left?: IFlowRefValue, userRules?: IRules) {
   const available = useScopeAvailable();

package/src/components/condition-row/index.tsx

@@ -8,12 +8,13 @@ import React, { useMemo } from 'react';
 import { I18n } from '@flowgram.ai/editor';
 import { Input } from '@douyinfe/semi-ui';
 
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+
 import { ConditionRowValueType, IRules, OpConfigs } from './types';
 import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from './styles';
 import { useRule } from './hooks/useRule';
 import { useOp } from './hooks/useOp';
-import { VariableSelector } from '../variable-selector';
-import { DynamicValueInput } from '../dynamic-value-input';
 
 interface PropTypes {
   value?: ConditionRowValueType;
@@ -58,7 +59,7 @@ export function ConditionRow({
       <UIOperator>{renderOpSelect()}</UIOperator>
       <UIValues>
         <UILeft>
-          <VariableSelector
+          <InjectVariableSelector
             readonly={readonly}
             style={{ width: '100%' }}
             value={left?.content}
@@ -75,7 +76,7 @@ export function ConditionRow({
         </UILeft>
         <UIRight>
           {targetSchema ? (
-            <DynamicValueInput
+            <InjectDynamicValueInput
               readonly={readonly || !rule}
               value={right}
               schema={targetSchema}

package/src/components/condition-row/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowConstantRefValue, IFlowRefValue } from '../../typings';
+import { IFlowConstantRefValue, IFlowRefValue } from '@/typings';
 
 export enum Op {
   EQ = 'eq',

package/src/components/constant-input/index.tsx

@@ -8,8 +8,11 @@ import React, { useMemo } from 'react';
 
 import { Input } from '@douyinfe/semi-ui';
 
-import { useTypeManager } from '../../plugins';
-import { PropsType } from './types';
+import { useTypeManager } from '@/plugins';
+
+import { PropsType, Strategy as ConstantInputStrategy } from './types';
+
+export { ConstantInputStrategy };
 
 export function ConstantInput(props: PropsType) {
   const { value, onChange, schema, strategies, fallbackRenderer, readonly, ...rest } = props;

package/src/components/constant-input/types.ts

@@ -5,7 +5,7 @@
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 
-import { ConstantRendererProps } from '../../plugins';
+import { ConstantRendererProps } from '@/plugins';
 
 export interface Strategy<Value = any> {
   hit: (schema: IJsonSchema) => boolean;

package/src/components/display-flow-value/index.tsx

@@ -8,8 +8,8 @@ import React, { useMemo } from 'react';
 import { JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { DisplaySchemaTag } from '../display-schema-tag';
-import { IFlowValue } from '../../typings';
+import { IFlowValue } from '@/typings';
+import { DisplaySchemaTag } from '@/components/display-schema-tag';
 
 interface PropsType {
   value?: IFlowValue;

package/src/components/display-inputs-values/index.tsx

@@ -5,8 +5,9 @@
 
 import React from 'react';
 
-import { DisplayFlowValue } from '../display-flow-value';
-import { IFlowValue } from '../../typings';
+import { IFlowValue } from '@/typings';
+import { DisplayFlowValue } from '@/components/display-flow-value';
+
 import { DisplayInputsWrapper } from './styles';
 
 interface PropsType {

package/src/components/display-outputs/index.tsx

@@ -8,7 +8,8 @@ import React, { useEffect } from 'react';
 import { IJsonSchema, JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { useCurrentScope, useRefresh } from '@flowgram.ai/editor';
 
-import { DisplaySchemaTag } from '../display-schema-tag';
+import { DisplaySchemaTag } from '@/components/display-schema-tag';
+
 import { DisplayOutputsWrapper } from './styles';
 
 interface PropsType {

package/src/components/display-schema-tag/index.tsx

@@ -8,8 +8,9 @@ import React from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { Popover } from '@douyinfe/semi-ui';
 
-import { DisplaySchemaTree } from '../display-schema-tree';
-import { useTypeManager } from '../../plugins';
+import { useTypeManager } from '@/plugins';
+import { DisplaySchemaTree } from '@/components/display-schema-tree';
+
 import { PopoverContent, StyledTag, TitleSpan } from './styles';
 
 interface PropsType {

package/src/components/display-schema-tree/index.tsx

@@ -7,7 +7,8 @@ import React from 'react';
 
 import { IJsonSchema, JsonSchemaTypeManager } from '@flowgram.ai/json-schema';
 
-import { useTypeManager } from '../../plugins';
+import { useTypeManager } from '@/plugins';
+
 import { HorizontalLine, TreeItem, TreeLevel, TreeRow, TreeTitle } from './styles';
 
 interface PropsType {

package/src/components/dynamic-value-input/hooks.ts

@@ -8,7 +8,7 @@ import { useMemo, useState } from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { IFlowConstantRefValue } from '../../typings/flow-value';
+import { IFlowConstantRefValue } from '@/typings/flow-value';
 
 export function useRefVariable(value?: IFlowConstantRefValue) {
   const available = useScopeAvailable();

package/src/components/dynamic-value-input/index.tsx

@@ -9,11 +9,12 @@ import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
-import { VariableSelector } from '../variable-selector';
-import { TypeSelector } from '../type-selector';
-import { Strategy } from '../constant-input/types';
-import { ConstantInput } from '../constant-input';
-import { IFlowConstantRefValue } from '../../typings/flow-value';
+import { IFlowConstantRefValue } from '@/typings/flow-value';
+import { createInjectMaterial } from '@/shared';
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { TypeSelector } from '@/components/type-selector';
+import { ConstantInput, ConstantInputStrategy } from '@/components/constant-input';
+
 import { UIContainer, UIMain, UITrigger, UIType } from './styles';
 import { useIncludeSchema, useRefVariable, useSelectSchema } from './hooks';
 
@@ -25,7 +26,7 @@ interface PropsType {
   style?: React.CSSProperties;
   schema?: IJsonSchema;
   constantProps?: {
-    strategies?: Strategy[];
+    strategies?: ConstantInputStrategy[];
     schema?: IJsonSchema; // set schema of constant input only
     [key: string]: any;
   };
@@ -88,7 +89,7 @@ export function DynamicValueInput({
     if (value?.type === 'ref') {
       // Display Variable Or Delete
       return (
-        <VariableSelector
+        <InjectVariableSelector
           style={{ width: '100%' }}
           value={value?.content}
           onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
@@ -108,7 +109,7 @@ export function DynamicValueInput({
         readonly={readonly}
         strategies={[...(constantProps?.strategies || [])]}
         fallbackRenderer={() => (
-          <VariableSelector
+          <InjectVariableSelector
             style={{ width: '100%' }}
             onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
             includeSchema={includeSchema}
@@ -121,7 +122,7 @@ export function DynamicValueInput({
   };
 
   const renderTrigger = () => (
-    <VariableSelector
+    <InjectVariableSelector
       style={{ width: '100%' }}
       value={value?.type === 'ref' ? value?.content : undefined}
       onChange={(_v) => onChange({ type: 'ref', content: _v })}
@@ -141,3 +142,6 @@ export function DynamicValueInput({
     </UIContainer>
   );
 }
+
+DynamicValueInput.renderKey = 'dynamic-value-input-render-key';
+export const InjectDynamicValueInput = createInjectMaterial(DynamicValueInput);

package/src/components/inputs-values/index.tsx

@@ -5,13 +5,15 @@
 
 import React from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
 import { Button, IconButton } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
+import { IFlowConstantRefValue, IFlowValue } from '@/typings';
+import { useObjectList } from '@/hooks';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+
 import { PropsType } from './types';
-import { DynamicValueInput } from '../dynamic-value-input';
-import { IFlowConstantRefValue, IFlowValue } from '../../typings';
-import { useObjectList } from '../../hooks';
 import { UIRow, UIRows } from './styles';
 import { BlurInput } from './components/blur-input';
 
@@ -41,9 +43,9 @@ export function InputsValues({
               size="small"
               value={item.key}
               onChange={(v) => updateKey(item.id, v)}
-              placeholder="Input Key"
+              placeholder={I18n.t('Input Key')}
             />
-            <DynamicValueInput
+            <InjectDynamicValueInput
               style={{ flexGrow: 1 }}
               readonly={readonly}
               value={item.value as IFlowConstantRefValue}

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

@@ -5,8 +5,8 @@
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 
-import { Strategy } from '../constant-input/types';
-import { IFlowValue } from '../../typings';
+import { IFlowValue } from '@/typings';
+import { ConstantInputStrategy } from '@/components/constant-input';
 
 export interface PropsType {
   value?: Record<string, IFlowValue | undefined>;
@@ -16,7 +16,7 @@ export interface PropsType {
   schema?: IJsonSchema;
   style?: React.CSSProperties;
   constantProps?: {
-    strategies?: Strategy[];
+    strategies?: ConstantInputStrategy[];
     [key: string]: any;
   };
 }

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

@@ -8,9 +8,10 @@ import React from 'react';
 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';
-import { CodeEditor, type CodeEditorPropsType } from '../code-editor';
 
 type Match = { match: string; range: [number, number] };
 function findAllMatches(inputString: string, regex: RegExp): Match[] {

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

@@ -3,26 +3,19 @@
  * 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;
@@ -33,102 +26,15 @@ export function DefaultValue(props: {
   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')}
       />
     </ConstantInputWrapper>
   );