@flowgram.ai/form-materials 0.3.3 → 0.3.5

package/src/effects/listen-ref-schema-change/index.ts

@@ -13,7 +13,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 /**
  * Example:

package/src/effects/listen-ref-value-change/index.ts

@@ -12,7 +12,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 /**
  * Example:

package/src/effects/provide-batch-input/index.ts

@@ -11,7 +11,7 @@ import {
   getNodeForm,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 export const provideBatchInputEffect: EffectOptions[] = createEffectFromVariableProvider({
   private: true,

package/src/form-plugins/batch-outputs-plugin/index.ts

@@ -17,7 +17,7 @@ import {
   FlowNodeScopeType,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
   parse: (value: Record<string, IFlowRefValue>, ctx) => [

package/src/form-plugins/infer-assign-plugin/index.ts

@@ -14,7 +14,7 @@ import {
   getNodeScope,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue, IFlowValue } from '../../typings';
+import { IFlowRefValue, IFlowValue } from '@/typings';
 
 type AssignValueType =
   | {

package/src/form-plugins/infer-inputs-plugin/index.ts

@@ -12,7 +12,7 @@ import {
   Scope,
 } from '@flowgram.ai/editor';
 
-import { IFlowConstantValue, IFlowRefValue, IFlowTemplateValue } from '../../typings';
+import { IFlowConstantValue, IFlowRefValue, IFlowTemplateValue } from '@/typings';
 
 interface InputConfig {
   sourceKey: string;

package/src/plugins/json-schema-preset/type-definition/array.tsx

@@ -6,6 +6,8 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
+
 import { CodeEditorMini } from '@/components/code-editor-mini';
 
 import { type JsonSchemaTypeRegistry } from '../manager';
@@ -17,7 +19,7 @@ export const arrayRegistry: Partial<JsonSchemaTypeRegistry> = {
       value={props.value}
       languageId="json"
       onChange={(v) => props.onChange?.(v)}
-      placeholder="Please Input Array"
+      placeholder={I18n.t('Please Input Array')}
       readonly={props.readonly}
     />
   ),

package/src/plugins/json-schema-preset/type-definition/boolean.tsx

@@ -6,6 +6,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
 import { Select } from '@douyinfe/semi-ui';
 
 import { type JsonSchemaTypeRegistry } from '../manager';
@@ -16,12 +17,12 @@ export const booleanRegistry: Partial<JsonSchemaTypeRegistry> = {
     const { value, onChange, ...rest } = props;
     return (
       <Select
-        placeholder="Please Select Boolean"
+        placeholder={I18n.t('Please Select Boolean')}
         size="small"
         disabled={props.readonly}
         optionList={[
-          { label: 'True', value: 1 },
-          { label: 'False', value: 0 },
+          { label: I18n.t('True'), value: 1 },
+          { label: I18n.t('False'), value: 0 },
         ]}
         value={value ? 1 : 0}
         onChange={(value) => onChange?.(!!value)}

package/src/plugins/json-schema-preset/type-definition/integer.tsx

@@ -6,6 +6,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
 import { InputNumber } from '@douyinfe/semi-ui';
 
 import { type JsonSchemaTypeRegistry } from '../manager';
@@ -14,7 +15,7 @@ export const integerRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'integer',
   ConstantRenderer: (props) => (
     <InputNumber
-      placeholder="Please Input Integer"
+      placeholder={I18n.t('Please Input Integer')}
       size="small"
       disabled={props.readonly}
       precision={0}

package/src/plugins/json-schema-preset/type-definition/number.tsx

@@ -6,6 +6,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
 import { InputNumber } from '@douyinfe/semi-ui';
 
 import { type JsonSchemaTypeRegistry } from '../manager';
@@ -14,7 +15,7 @@ export const numberRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'number',
   ConstantRenderer: (props) => (
     <InputNumber
-      placeholder="Please Input Number"
+      placeholder={I18n.t('Please Input Number')}
       size="small"
       disabled={props.readonly}
       hideButtons

package/src/plugins/json-schema-preset/type-definition/object.tsx

@@ -6,6 +6,8 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
+
 import { CodeEditorMini } from '@/components/code-editor-mini';
 
 import { type JsonSchemaTypeRegistry } from '../manager';
@@ -17,7 +19,7 @@ export const objectRegistry: Partial<JsonSchemaTypeRegistry> = {
       value={props.value}
       onChange={(v) => props.onChange?.(v)}
       languageId="json"
-      placeholder="Please Input Object"
+      placeholder={I18n.t('Please Input Object')}
       readonly={props.readonly}
     />
   ),

package/src/plugins/json-schema-preset/type-definition/string.tsx

@@ -6,6 +6,7 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
 import { Input } from '@douyinfe/semi-ui';
 
 import { type JsonSchemaTypeRegistry } from '../manager';
@@ -13,6 +14,11 @@ import { type JsonSchemaTypeRegistry } from '../manager';
 export const stringRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'string',
   ConstantRenderer: (props) => (
-    <Input placeholder="Please Input String" size="small" disabled={props.readonly} {...props} />
+    <Input
+      placeholder={I18n.t('Please Input String')}
+      size="small"
+      disabled={props.readonly}
+      {...props}
+    />
   ),
 };

package/src/shared/index.ts

@@ -4,3 +4,4 @@
  */
 
 export * from './format-legacy-refs';
+export * from './inject-material';

package/src/shared/inject-material/README.md

@@ -0,0 +1,170 @@
+# InjectMaterial Component
+
+A material component wrapper with dependency injection support for implementing dynamic component replacement mechanisms.
+
+## Why Dependency Injection Matters
+
+### ❌ Tight Coupling: Traditional Dependency Issues
+
+```mermaid
+graph TD
+    A[Material A] --> B[Material B]
+    B --> D[Material D]
+    C[Material C] --> D
+
+    style D fill:#ff4757
+    style A fill:#ffa502
+    style B fill:#ffa502
+    style C fill:#ffa502
+
+    note["💥 Problem: D changes require modifications to A, B, C"]
+```
+
+**Issues:** Chain reactions, high maintenance costs
+
+### ✅ Decoupling: Dependency Injection Solution
+
+```mermaid
+graph TD
+    A[Material A] --> RenderKey[Material D RenderKey]
+    B[Material B] --> RenderKey
+    C[Material C] --> RenderKey
+
+    RenderKey -.-> BaseD[Origin D]
+    CustomD[Custom D] -.-> RenderKey
+
+    style RenderKey fill:#5f27cd
+    style BaseD fill:#2ed573
+    style CustomD fill:#26d0ce
+    style A fill:#a55eea
+    style B fill:#a55eea
+    style C fill:#a55eea
+
+    note2["✅ A, B, C depend on abstract interface, decoupled from D"]
+```
+
+**Benefits:** Hot-swapping, parallel development, version compatibility
+
+## Features
+
+- 🔧 **Dependency Injection**: Support dynamic component replacement via FlowRendererRegistry
+- 🔄 **Smart Fallback**: Automatically use default component when no custom component is registered
+- 🎯 **Type Safety**: Full TypeScript type inference support
+- 📦 **Zero Configuration**: Works out of the box without additional setup
+
+## Usage
+
+### 1. Create Injectable Material Component
+
+```tsx
+import { createInjectMaterial } from '@flowgram.ai/form-materials';
+import { VariableSelector } from './VariableSelector';
+
+// Create injectable material wrapper component
+const InjectVariableSelector = createInjectMaterial(VariableSelector);
+
+// Now you can use it like a regular component
+function MyComponent() {
+  return <InjectVariableSelector value={value} onChange={handleChange} />;
+}
+```
+
+### 2. Register Custom Components
+
+Configure custom renderer in `use-editor-props.tsx`:
+
+```tsx
+import { useEditorProps } from '@flowgram.ai/editor';
+import { YourCustomVariableSelector } from './YourCustomVariableSelector';
+import { VariableSelector } from '@flowgram.ai/form-materials';
+
+function useCustomEditorProps() {
+  const editorProps = useEditorProps({
+    materials: {
+      components: {
+        // Use component's renderKey or component name as key
+        [VariableSelector.renderKey]: YourCustomVariableSelector,
+        [TypeSelector.renderKey]: YourCustomTypeSelector,
+      }
+    }
+  });
+
+  return editorProps;
+}
+```
+
+### 3. Use Custom renderKey
+
+If your component requires a specific renderKey:
+
+```tsx
+const InjectCustomComponent = createInjectMaterial(MyComponent, {
+  renderKey: 'my-custom-key'
+});
+
+// When registering
+{
+  materials: {
+    components: {
+      'my-custom-key': MyCustomRenderer
+    }
+  }
+}
+```
+
+## Sequence Diagram
+
+Complete component registration and rendering sequence diagram:
+
+```mermaid
+sequenceDiagram
+    participant App as Application
+    participant Editor as use-editor-props
+    participant Registry as FlowRendererRegistry
+    participant Inject as InjectMaterial
+    participant Default as Default Component
+    participant Custom as Custom Component
+
+    Note over App,Custom: Component Registration Phase
+    App->>Editor: Call use-editor-props()
+    Editor->>Editor: Configure materials.components
+    Editor->>Registry: Register component to FlowRendererRegistry
+    Registry->>Registry: Store mapping relationship
+    Registry-->>App: Registration complete
+
+    Note over App,Custom: Component Rendering Phase
+    App->>Inject: Render InjectMaterial component
+    Inject->>Registry: Query renderer (getRendererComponent)
+
+    alt Custom renderer exists
+        Registry-->>Inject: Return custom React component
+        Inject->>Custom: Render with custom component
+        Custom-->>App: Render custom UI
+    else No custom renderer
+        Registry-->>Inject: Return null or type mismatch
+        Inject->>Default: Render with default component
+        Default-->>App: Render default UI
+    end
+```
+
+## Render Key Priority
+
+Component render key determination follows this priority order:
+
+1. `params.renderKey` (second parameter of createInjectMaterial)
+2. `Component.renderKey` (component's own renderKey property)
+3. `Component.name` (component's display name)
+4. Empty string (final fallback)
+
+## Type Definition
+
+```typescript
+interface CreateInjectMaterialOptions {
+  renderKey?: string;
+}
+
+function createInjectMaterial<Props>(
+  Component: React.FC<Props> & { renderKey?: string },
+  params?: CreateInjectMaterialOptions
+): React.FC<Props>
+```

package/src/shared/inject-material/README.zh.md

@@ -0,0 +1,174 @@
+# InjectMaterial 组件
+
+一个支持依赖注入的 Material 组件包装器，用于实现动态组件替换机制。
+
+## 为什么需要依赖注入
+
+### ❌ 紧耦合：传统依赖问题
+
+```mermaid
+graph TD
+    A[Material A] --> B[Material B]
+    B --> D[Material D]
+    C[Material C] --> D
+
+    style D fill:#ff4757
+    style A fill:#ffa502
+    style B fill:#ffa502
+    style C fill:#ffa502
+
+    note["💥 问题：D变更导致A、B、C全部需要修改"]
+```
+
+**问题：** 连锁反应、高维护成本
+
+### ✅ 解耦：依赖注入方案
+
+```mermaid
+graph TD
+    A[Material A] --> RenderKey[Material D RenderKey]
+    B[Material B] --> RenderKey
+    C[Material C] --> RenderKey
+
+    RenderKey -.-> BaseD[Origin D]
+    CustomD[Custom D] -.-> RenderKey
+
+    style RenderKey fill:#5f27cd
+    style BaseD fill:#2ed573
+    style CustomD fill:#26d0ce
+    style A fill:#a55eea
+    style B fill:#a55eea
+    style C fill:#a55eea
+
+    note2["✅ A、B、C依赖抽象接口，与D实现解耦"]
+```
+
+**优势：** 热插拔、并行开发、版本兼容
+
+## 特性
+
+- 🔧 **依赖注入**：通过 FlowRendererRegistry 支持动态组件替换
+- 🔄 **智能回退**：当没有注册自定义组件时自动使用默认组件
+- 🎯 **类型安全**：完整的 TypeScript 类型推断支持
+- 📦 **零配置**：开箱即用，无需额外设置
+
+## 安装
+
+该组件是 `@flowgram.ai/form-materials` 包的一部分，无需单独安装。
+
+## 使用
+
+### 1. 创建可注入的 Material 组件件
+
+```tsx
+import { createInjectMaterial } from '@flowgram.ai/form-materials';
+import { VariableSelector } from './VariableSelector';
+
+// 创建可注入的Material包装组件
+const InjectVariableSelector = createInjectMaterial(VariableSelector);
+
+// 现在你可以像使用普通组件一样使用它
+function MyComponent() {
+  return <InjectVariableSelector value={value} onChange={handleChange} />;
+}
+```
+
+### 2. 注册自定义组件
+
+在 `use-editor-props.tsx` 中配置自定义渲染器：
+
+```tsx
+import { useEditorProps } from '@flowgram.ai/editor';
+import { YourCustomVariableSelector } from './YourCustomVariableSelector';
+import { VariableSelector } from '@flowgram.ai/form-materials';
+
+function useCustomEditorProps() {
+  const editorProps = useEditorProps({
+    materials: {
+      components: {
+        // 使用组件的 renderKey 或组件名称作为键
+        [VariableSelector.renderKey]: YourCustomVariableSelector,
+        [TypeSelector.renderKey]: YourCustomTypeSelector,
+      }
+    }
+  });
+
+  return editorProps;
+}
+```
+
+### 3. 使用自定义 renderKey
+
+如果你的组件需要特定的 renderKey：
+
+```tsx
+const InjectCustomComponent = createInjectMaterial(MyComponent, {
+  renderKey: 'my-custom-key'
+});
+
+// 注册时
+{
+  materials: {
+    components: {
+      'my-custom-key': MyCustomRenderer
+    }
+  }
+}
+```
+
+## 时序图
+
+完整的组件注册和渲染时序图：
+
+```mermaid
+sequenceDiagram
+    participant App as 应用程序
+    participant Editor as use-editor-props
+    participant Registry as FlowRendererRegistry
+    participant Inject as InjectMaterial
+    participant Default as 默认组件
+    participant Custom as 自定义组件
+
+    Note over App,Custom: 组件注册阶段
+    App->>Editor: 调用 use-editor-props()
+    Editor->>Editor: 配置 materials.components
+    Editor->>Registry: 向 FlowRendererRegistry 注册组件
+    Registry->>Registry: 存储映射关系
+    Registry-->>App: 注册完成
+
+    Note over App,Custom: 组件渲染阶段
+    App->>Inject: 渲染 InjectMaterial 组件
+    Inject->>Registry: 查询渲染器 (getRendererComponent)
+
+    alt 存在自定义渲染器
+        Registry-->>Inject: 返回自定义 React 组件
+        Inject->>Custom: 使用自定义组件渲染
+        Custom-->>App: 渲染自定义 UI
+    else 无自定义渲染器
+        Registry-->>Inject: 返回 null 或类型不匹配
+        Inject->>Default: 使用默认组件渲染
+        Default-->>App: 渲染默认 UI
+    end
+```
+
+## 渲染键优先级
+
+组件渲染键的确定遵循以下优先级顺序：
+
+1. `params.renderKey` (createInjectMaterial 的第二个参数)
+2. `Component.renderKey` (组件自身的 renderKey 属性)
+3. `Component.name` (组件的显示名称)
+4. 空字符串 (最终回退)
+
+## 类型定义
+
+```typescript
+interface CreateInjectMaterialOptions {
+  renderKey?: string;
+}
+
+function createInjectMaterial<Props>(
+  Component: React.FC<Props> & { renderKey?: string },
+  params?: CreateInjectMaterialOptions
+): React.FC<Props>
+```

package/src/shared/inject-material/index.tsx

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import {
+  FlowRendererComponentType,
+  FlowRendererRegistry,
+  usePlaygroundContainer,
+} from '@flowgram.ai/editor';
+
+/**
+ * Creates a material component wrapper with dependency injection support
+ *
+ * This Higher-Order Component (HOC) implements a dynamic component replacement mechanism
+ * for material components. It automatically checks if a custom renderer is registered
+ * in the editor context, using the injected component if available, otherwise
+ * falling back to the default component.
+ *
+ * @example
+ * ```tsx
+ * // 1.Create an injectable material component
+ * const InjectVariableSelector = createInjectMaterial(VariableSelector)
+ *
+ * // 2. Register custom components in editor
+ * // Configure in use-editor-props.tsx:
+ * const editorProps = {
+ *   materials: {
+ *     components: {
+ *       [VariableSelector.renderKey]: YourCustomVariableSelector
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @description
+ * Data flow explanation:
+ * - Register components to FlowRendererRegistry in use-editor-props
+ * - InjectMaterial reads renderers from FlowRendererRegistry
+ * - If registered renderer exists and type is REACT, use injected component
+ * - If not exists or type mismatch, fallback to default component
+ *
+ * @param Component - Default React component
+ * @param params - Optional parameters
+ * @param params.renderKey - Custom render key name, highest priority
+ * @returns Wrapper component with dependency injection support
+ */
+export function createInjectMaterial<Props>(
+  Component: React.FC<Props> & { renderKey?: string },
+  params?: {
+    renderKey?: string;
+  }
+): React.FC<Props> {
+  const InjectComponent: React.FC<Props> = (props) => {
+    const container = usePlaygroundContainer();
+
+    // Check if renderer registry is bound in container
+    if (!container?.isBound(FlowRendererRegistry)) {
+      // If no registry, use default component directly
+      return React.createElement(Component as (props?: any) => any, { ...props });
+    }
+
+    // Get renderer registry instance
+    const rendererRegistry = container.get(FlowRendererRegistry);
+
+    // Determine render key: prioritize param specified, then component renderKey, finally component name
+    const renderKey = params?.renderKey || Component.renderKey || Component.name || '';
+
+    // Get corresponding renderer from registry
+    const renderer = rendererRegistry.tryToGetRendererComponent(renderKey);
+
+    // Check if renderer exists and type is React component
+    if (renderer?.type !== FlowRendererComponentType.REACT) {
+      // If no suitable renderer found, fallback to default component
+      return React.createElement(Component as (props?: any) => any, { ...props });
+    }
+
+    // Render using injected React component
+    return React.createElement(renderer.renderer, {
+      ...props,
+    });
+  };
+
+  return InjectComponent;
+}

package/src/components/assign-row/config.json

@@ -1,11 +0,0 @@
-{
-  "name": "assign-row",
-  "depMaterials": [
-    "flow-value",
-    "dynamic-value-input",
-    "variable-selector"
-  ],
-  "depPackages": [
-    "@douyinfe/semi-ui"
-  ]
-}

package/src/components/assign-rows/config.json

@@ -1,11 +0,0 @@
-{
-  "name": "assign-rows",
-  "depMaterials": [
-    "flow-value",
-    "dynamic-value-input",
-    "variable-selector"
-  ],
-  "depPackages": [
-    "@douyinfe/semi-ui"
-  ]
-}

package/src/components/batch-outputs/config.json

@@ -1,13 +0,0 @@
-{
-  "name": "batch-outputs",
-  "depMaterials": [
-    "flow-value",
-    "variable-selector",
-    "use-object-list"
-  ],
-  "depPackages": [
-    "@douyinfe/semi-ui",
-    "@douyinfe/semi-icons",
-    "styled-components"
-  ]
-}

package/src/components/batch-variable-selector/config.json

@@ -1,9 +0,0 @@
-{
-  "name": "batch-variable-selector",
-  "depMaterials": [
-    "variable-selector"
-  ],
-  "depPackages": [
-    "@flowgram.ai/json-schema"
-  ]
-}

package/src/components/code-editor/config.json

@@ -1,10 +0,0 @@
-{
-  "name": "code-editor",
-  "depMaterials": [],
-  "depPackages": [
-    "@coze-editor/editor@0.1.0-alpha.879fbb",
-    "@codemirror/view",
-    "@codemirror/state",
-    "typescript"
-  ]
-}

package/src/components/code-editor-mini/config.json

@@ -1,7 +0,0 @@
-{
-  "name": "code-editor-mini",
-  "depMaterials": [
-    "code-editor"
-  ],
-  "depPackages": []
-}