feat: add materials.components api (#288)

apps/demo-fixed-layout-simple/src/hooks/use-editor-props.tsx

@@ -75,7 +75,7 @@ export function useEditorProps(
        * 可以通过 key 自定义 UI 组件
        */
       materials: {
-        renderNodes: {
+        components: {
           ...defaultFixedSemiMaterials,
           /**
            * Components can be customized based on key business-side requirements.

apps/demo-fixed-layout/src/hooks/use-editor-props.ts

@@ -162,11 +162,11 @@ export function useEditorProps(
        * 可以通过 key 自定义 UI 组件
        */
       materials: {
-        renderNodes: {
+        components: {
           ...defaultFixedSemiMaterials,
-          [FlowRendererKey.ADDER]: NodeAdder,
-          [FlowRendererKey.BRANCH_ADDER]: BranchAdder,
-          [FlowRendererKey.DRAG_NODE]: DragNode,
+          [FlowRendererKey.ADDER]: NodeAdder, // Node Add Button
+          [FlowRendererKey.BRANCH_ADDER]: BranchAdder, // Branch Add Button
+          [FlowRendererKey.DRAG_NODE]: DragNode, // Component in node dragging
         },
         renderDefaultNode: BaseNode, // node render
         renderTexts: {

apps/docs/src/en/guide/getting-started/create-fixed-layout-simple.mdx

@@ -80,7 +80,7 @@ export function useEditorProps(
        * https://github.com/bytedance/flowgram.ai/blob/main/packages/materials/fixed-semi-materials/src/components/index.tsx
        */
       materials: {
-        renderNodes: {
+        components: {
           ...defaultFixedSemiMaterials,
           // [FlowRendererKey.ADDER]: NodeAdder,
           // [FlowRendererKey.BRANCH_ADDER]: BranchAdder,

apps/docs/src/zh/guide/getting-started/create-fixed-layout-simple.mdx

@@ -81,7 +81,7 @@ export function useEditorProps(
        * https://github.com/bytedance/flowgram.ai/blob/main/packages/materials/fixed-semi-materials/src/components/index.tsx
        */
       materials: {
-        renderNodes: {
+        components: {
           ...defaultFixedSemiMaterials,
           // [FlowRendererKey.ADDER]: NodeAdder,
           // [FlowRendererKey.BRANCH_ADDER]: BranchAdder,

packages/plugins/materials-plugin/src/create-materials-plugin.ts

@@ -6,6 +6,10 @@ import { definePluginCreator } from '@flowgram.ai/core';
 export type MaterialReactComponent<T = any> = (props: T) => React.ReactNode | null;
 
 export interface MaterialsPluginOptions {
+  /**
+   * 注册特定的 UI 组件
+   */
+  components?: Record<FlowRendererKey | string, MaterialReactComponent>;
   /**
    * 注册特定的节点渲染组件
    */
@@ -28,7 +32,7 @@ export const createMaterialsPlugin = definePluginCreator<MaterialsPluginOptions>
      */
     registry.registerReactComponent(
       FlowRendererKey.NODE_RENDER,
-      opts.renderDefaultNode || (() => null),
+      opts.renderDefaultNode || (() => null)
     );
 
     /**
@@ -37,12 +41,20 @@ export const createMaterialsPlugin = definePluginCreator<MaterialsPluginOptions>
     if (opts.renderTexts) {
       registry.registerText(opts.renderTexts);
     }
+    /**
+     * 注册组件
+     */
+    if (opts.components) {
+      Object.keys(opts.components).forEach((key) =>
+        registry.registerReactComponent(key, opts.components![key])
+      );
+    }
     /**
      * 注册单节点渲染
      */
     if (opts.renderNodes) {
-      Object.keys(opts.renderNodes).forEach(key =>
-        registry.registerReactComponent(key, opts.renderNodes![key]),
+      Object.keys(opts.renderNodes).forEach((key) =>
+        registry.registerReactComponent(key, opts.renderNodes![key])
       );
     }
   },