@flowgram.ai/form-materials 0.4.10 → 0.4.12

package/package.json

@@ -1,17 +1,55 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
   "exports": {
-    "types": "./dist/types/index.d.ts",
-    "import": "./dist/esm/index.mjs",
-    "require": "./dist/cjs/index.js"
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/types/components/*/index.d.ts",
+      "import": "./dist/esm/components/*/index.mjs",
+      "require": "./dist/cjs/components/*/index.js"
+    },
+    "./effects/*": {
+      "types": "./dist/types/effects/*/index.d.ts",
+      "import": "./dist/esm/effects/*/index.mjs",
+      "require": "./dist/cjs/effects/*/index.js"
+    },
+    "./hooks/*": {
+      "types": "./dist/types/hooks/*/index.d.ts",
+      "import": "./dist/esm/hooks/*/index.mjs",
+      "require": "./dist/cjs/hooks/*/index.js"
+    },
+    "./shared/*": {
+      "types": "./dist/types/shared/*/index.d.ts",
+      "import": "./dist/esm/shared/*/index.mjs",
+      "require": "./dist/cjs/shared/*/index.js"
+    },
+    "./form-plugins/*": {
+      "types": "./dist/types/form-plugins/*/index.d.ts",
+      "import": "./dist/esm/form-plugins/*/index.mjs",
+      "require": "./dist/cjs/form-plugins/*/index.js"
+    },
+    "./plugins/*": {
+      "types": "./dist/types/plugins/*/index.d.ts",
+      "import": "./dist/esm/plugins/*/index.mjs",
+      "require": "./dist/cjs/plugins/*/index.js"
+    },
+    "./validate/*": {
+      "types": "./dist/types/validate/*/index.d.ts",
+      "import": "./dist/esm/validate/*/index.mjs",
+      "require": "./dist/cjs/validate/*/index.js"
+    }
   },
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.mjs",
   "types": "./dist/types/index.d.ts",
+  "sideEffects": false,
   "bin": {
     "flowgram-form-materials": "./bin/run.sh"
   },
@@ -30,9 +68,9 @@
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "zod": "^3.24.4",
-    "@flowgram.ai/editor": "0.4.10",
-    "@flowgram.ai/json-schema": "0.4.10",
-    "@flowgram.ai/coze-editor": "0.4.10"
+    "@flowgram.ai/editor": "0.4.12",
+    "@flowgram.ai/json-schema": "0.4.12",
+    "@flowgram.ai/coze-editor": "0.4.12"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
@@ -48,9 +86,10 @@
     "typescript": "^5.8.3",
     "vitest": "^0.34.6",
     "@rslib/core": "~0.12.4",
+    "cross-env": "~7.0.3",
     "@rsbuild/plugin-react": "^1.1.1",
-    "@flowgram.ai/eslint-config": "0.4.10",
-    "@flowgram.ai/ts-config": "0.4.10"
+    "@flowgram.ai/eslint-config": "0.4.12",
+    "@flowgram.ai/ts-config": "0.4.12"
   },
   "peerDependencies": {
     "react": ">=16.8",
@@ -62,9 +101,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "build": "rslib build",
-    "build:fast": "rslib build",
-    "build:watch": "rslib build",
+    "build": "cross-env NODE_ENV=production rslib build",
+    "build:fast": "cross-env NODE_ENV=development rslib build",
+    "build:watch": "npm run build:fast",
     "name-export": "node scripts/name-export.js",
     "clean": "rimraf dist",
     "test": "exit 0",

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

@@ -3,9 +3,17 @@
  * SPDX-License-Identifier: MIT
  */
 
+/* eslint-disable react/prop-types */
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
 import React, { useEffect, useState } from 'react';
 
-import Input, { InputProps } from '@douyinfe/semi-ui/lib/es/input';
+import { Input } from '@douyinfe/semi-ui';
+
+type InputProps = React.ComponentPropsWithoutRef<typeof Input>;
 
 export function BlurInput(props: InputProps) {
   const [value, setValue] = useState('');

package/src/components/{prompt-editor-with-inputs/inputs-picker.tsx → coze-editor-extensions/extensions/inputs-tree.tsx}

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect, useState } from 'react';
 
 import { isPlainObject, last } from 'lodash-es';
 import {
@@ -13,10 +13,18 @@ import {
   type BaseVariableField,
   useScopeAvailable,
 } from '@flowgram.ai/editor';
-import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
-import { Tree } from '@douyinfe/semi-ui';
-
-import { FlowValueUtils } from '@/shared';
+import {
+  Mention,
+  MentionOpenChangeEvent,
+  getCurrentMentionReplaceRange,
+  useEditor,
+  PositionMirror,
+} from '@flowgram.ai/coze-editor/react';
+import { EditorAPI } from '@flowgram.ai/coze-editor/preset-prompt';
+import { type TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
+import { Tree, Popover } from '@douyinfe/semi-ui';
+
+import { IFlowValue, FlowValueUtils } from '@/shared';
 
 type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
 
@@ -115,3 +123,85 @@ export function InputsPicker({
 
   return <Tree treeData={treeData} onSelect={(v) => onSelect(v)} />;
 }
+
+const DEFAULT_TRIGGER_CHARACTERS = ['{', '{}', '@'];
+
+export function InputsTree({
+  inputsValues,
+  triggerCharacters = DEFAULT_TRIGGER_CHARACTERS,
+}: {
+  inputsValues: Record<string, IFlowValue>;
+  triggerCharacters?: string[];
+}) {
+  const [posKey, setPosKey] = useState('');
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState(-1);
+  const editor = useEditor<EditorAPI>();
+
+  function insert(variablePath: string) {
+    const range = getCurrentMentionReplaceRange(editor.$view.state);
+
+    if (!range) {
+      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 + '}}',
+    });
+
+    setVisible(false);
+  }
+
+  function handleOpenChange(e: MentionOpenChangeEvent) {
+    setPosition(e.state.selection.main.head);
+    setVisible(e.value);
+  }
+
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+  }, [editor, visible]);
+
+  return (
+    <>
+      <Mention triggerCharacters={triggerCharacters} onOpenChange={handleOpenChange} />
+
+      <Popover
+        visible={visible}
+        trigger="custom"
+        position="topLeft"
+        rePosKey={posKey}
+        content={
+          <div style={{ width: 300, maxHeight: 300, overflowY: 'auto' }}>
+            <InputsPicker
+              inputsValues={inputsValues}
+              onSelect={(v) => {
+                insert(v);
+              }}
+            />
+          </div>
+        }
+      >
+        {/* PositionMirror allows the Popover to appear at the specified cursor position */}
+        <PositionMirror
+          position={position}
+          // When Doc scroll, update position
+          onChange={() => setPosKey(String(Math.random()))}
+        />
+      </Popover>
+    </>
+  );
+}

package/src/components/{prompt-editor-with-variables → coze-editor-extensions}/extensions/variable-tree.tsx

@@ -17,7 +17,13 @@ import { Popover, Tree } from '@douyinfe/semi-ui';
 
 import { useVariableTree } from '@/components/variable-selector';
 
-export function VariableTree() {
+const DEFAULT_TRIGGER_CHARACTER = ['{', '{}', '@'];
+
+export function VariableTree({
+  triggerCharacters = DEFAULT_TRIGGER_CHARACTER,
+}: {
+  triggerCharacters?: string[];
+}) {
   const [posKey, setPosKey] = useState('');
   const [visible, setVisible] = useState(false);
   const [position, setPosition] = useState(-1);
@@ -65,7 +71,7 @@ export function VariableTree() {
 
   return (
     <>
-      <Mention triggerCharacters={['{', '{}', '@']} onOpenChange={handleOpenChange} />
+      <Mention triggerCharacters={triggerCharacters} onOpenChange={handleOpenChange} />
 
       <Popover
         visible={visible}
@@ -73,7 +79,7 @@ export function VariableTree() {
         position="topLeft"
         rePosKey={posKey}
         content={
-          <div style={{ width: 300 }}>
+          <div style={{ width: 300, maxHeight: 300, overflowY: 'auto' }}>
             <Tree
               treeData={treeData}
               onSelect={(v) => {

package/src/components/coze-editor-extensions/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { lazy } from 'react';
+
+import { createInjectMaterial } from '@/shared';
+
+export const EditorVariableTree = createInjectMaterial(
+  lazy(() =>
+    import('./extensions/variable-tree').then((module) => ({ default: module.VariableTree }))
+  ),
+  {
+    renderKey: 'EditorVariableTree',
+  }
+);
+
+export const EditorVariableTagInject = createInjectMaterial(
+  lazy(() =>
+    import('./extensions/variable-tag').then((module) => ({ default: module.VariableTagInject }))
+  ),
+  {
+    renderKey: 'EditorVariableTagInject',
+  }
+);
+
+export const EditorInputsTree = createInjectMaterial(
+  lazy(() => import('./extensions/inputs-tree').then((module) => ({ default: module.InputsTree }))),
+  {
+    renderKey: 'EditorInputsTree',
+  }
+);

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

@@ -5,9 +5,11 @@
 
 import React from 'react';
 
-import { IJsonSchema, JsonSchemaTypeManager } from '@flowgram.ai/json-schema';
-
-import { useTypeManager } from '@/plugins';
+import {
+  type IJsonSchema,
+  type JsonSchemaTypeManager,
+  useTypeManager,
+} from '@flowgram.ai/json-schema';
 
 import { HorizontalLine, TreeItem, TreeLevel, TreeRow, TreeTitle } from './styles';
 
@@ -33,7 +35,7 @@ function SchemaTree(props: PropsType) {
     parentKey = '',
   } = props || {};
 
-  const typeManager = useTypeManager();
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
 
   const config = typeManager.getTypeBySchema(schema);
   const title = typeManager.getComplexText(schema);

package/src/components/index.ts

@@ -12,6 +12,11 @@ export { CodeEditor, type CodeEditorPropsType } from './code-editor';
 export { CodeEditorMini } from './code-editor-mini';
 export { ConditionRow, type ConditionRowValueType } from './condition-row';
 export { ConstantInput, type ConstantInputStrategy } from './constant-input';
+export {
+  EditorVariableTagInject,
+  EditorVariableTree,
+  EditorInputsTree,
+} from './coze-editor-extensions';
 export {
   DBConditionRow,
   type DBConditionOptionType,

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

@@ -9,10 +9,10 @@ import { I18n } from '@flowgram.ai/editor';
 import { transformerCreator } from '@flowgram.ai/coze-editor/preset-code';
 import { Text } from '@flowgram.ai/coze-editor/language-json';
 
+import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
 import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
 
-import { VariableTree } from './extensions/variable-tree';
-import { VariableTagInject } from './extensions/variable-tag';
+const TRIGGER_CHARACTERS = ['@'];
 
 type Match = { match: string; range: [number, number] };
 function findAllMatches(inputString: string, regex: RegExp): Match[] {
@@ -62,8 +62,8 @@ export function JsonEditorWithVariables(props: JsonEditorWithVariablesProps) {
         ...(props.options || {}),
       }}
     >
-      <VariableTree />
-      <VariableTagInject />
+      <EditorVariableTree triggerCharacters={TRIGGER_CHARACTERS} />
+      <EditorVariableTagInject />
     </CodeEditor>
   );
 }

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

@@ -6,8 +6,7 @@
 import React from 'react';
 
 import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
-
-import { InputsTree } from './extensions/inputs-tree';
+import { EditorInputsTree } from '@/components/coze-editor-extensions';
 
 export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
   inputsValues: any;
@@ -19,7 +18,7 @@ export function PromptEditorWithInputs({
 }: PromptEditorWithInputsProps) {
   return (
     <PromptEditor {...restProps}>
-      <InputsTree inputsValues={inputsValues} />
+      <EditorInputsTree inputsValues={inputsValues} />
     </PromptEditor>
   );
 }

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

@@ -6,17 +6,15 @@
 import React from 'react';
 
 import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
-
-import { VariableTree } from './extensions/variable-tree';
-import { VariableTagInject } from './extensions/variable-tag';
+import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
 
 export interface PromptEditorWithVariablesProps extends PromptEditorPropsType {}
 
 export function PromptEditorWithVariables(props: PromptEditorWithVariablesProps) {
   return (
     <PromptEditor {...props}>
-      <VariableTree />
-      <VariableTagInject />
+      <EditorVariableTree />
+      <EditorVariableTagInject />
     </PromptEditor>
   );
 }

package/src/components/type-selector/index.tsx

@@ -5,11 +5,10 @@
 
 import React, { useMemo } from 'react';
 
-import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { IJsonSchema, useTypeManager, JsonSchemaTypeManager } from '@flowgram.ai/json-schema';
 import { Cascader, Icon, IconButton } from '@douyinfe/semi-ui';
 
 import { createInjectMaterial } from '@/shared/inject-material';
-import { useTypeManager } from '@/plugins';
 
 export interface TypeSelectorProps {
   value?: Partial<IJsonSchema>;
@@ -47,7 +46,7 @@ export function TypeSelector(props: TypeSelectorProps) {
 
   const selectValue = useMemo(() => getTypeSelectValue(value), [value]);
 
-  const typeManager = useTypeManager();
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
 
   const icon = typeManager.getDisplayIcon(value || {});
 

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

@@ -7,8 +7,8 @@ import React, { useMemo } from 'react';
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { I18n } from '@flowgram.ai/editor';
-import { TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
-import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
+import { type TriggerRenderProps } from '@douyinfe/semi-ui/lib/es/treeSelect';
+import { type TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Popover } from '@douyinfe/semi-ui';
 import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
@@ -73,6 +73,8 @@ export const VariableSelector = ({
     return icon;
   };
 
+  console.log('debugger treeValue', treeValue);
+
   return (
     <>
       <UITreeSelect

package/src/components/variable-selector/use-variable-tree.tsx

@@ -5,13 +5,16 @@
 
 import React, { useCallback } from 'react';
 
-import { IJsonSchema, JsonSchemaUtils } from '@flowgram.ai/json-schema';
+import {
+  IJsonSchema,
+  JsonSchemaTypeManager,
+  JsonSchemaUtils,
+  useTypeManager,
+} from '@flowgram.ai/json-schema';
 import { ASTMatch, BaseVariableField, useAvailableVariables } from '@flowgram.ai/editor';
 import { TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Icon } from '@douyinfe/semi-ui';
 
-import { useTypeManager } from '@/plugins';
-
 type VariableField = BaseVariableField<{
   icon?: string | JSX.Element;
   title?: string;
@@ -25,7 +28,7 @@ export function useVariableTree(params: {
 }): TreeNodeData[] {
   const { includeSchema, excludeSchema, skipVariable } = params;
 
-  const typeManager = useTypeManager();
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
   const variables = useAvailableVariables();
 
   const getVariableTypeIcon = useCallback((variable: VariableField) => {

package/src/index.ts

@@ -34,6 +34,9 @@ export {
   TypeSelector,
   VariableSelector,
   VariableSelectorProvider,
+  EditorVariableTagInject,
+  EditorVariableTree,
+  EditorInputsTree,
   getTypeSelectValue,
   parseTypeSelectValue,
   type AssignValueType,

package/src/plugins/json-schema-preset/index.tsx

@@ -2,33 +2,17 @@
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
-import React from 'react';
 
 import {
-  type IJsonSchema,
-  JsonSchemaUtils,
-  useTypeManager as useOriginTypeManager,
-  TypePresetProvider as OriginTypePresetProvider,
-  JsonSchemaTypeManager,
   type JsonSchemaBasicType,
+  JsonSchemaUtils,
+  type IJsonSchema,
 } from '@flowgram.ai/json-schema';
 
-import { jsonSchemaTypePreset } from './type-definition';
-import { type JsonSchemaTypeRegistry, type ConstantRendererProps } from './manager';
+import { useTypeManager, JsonSchemaTypePresetProvider } from './react';
+import { ConstantRendererProps, type JsonSchemaTypeRegistry } from './manager';
 import { createTypePresetPlugin } from './create-type-preset-plugin';
 
-const useTypeManager = () =>
-  useOriginTypeManager() as JsonSchemaTypeManager<IJsonSchema, JsonSchemaTypeRegistry>;
-
-const JsonSchemaTypePresetProvider = ({
-  types = [],
-  children,
-}: React.PropsWithChildren<{ types: JsonSchemaTypeRegistry[] }>) => (
-  <OriginTypePresetProvider types={[...jsonSchemaTypePreset, ...types]}>
-    {children}
-  </OriginTypePresetProvider>
-);
-
 export {
   createTypePresetPlugin,
   useTypeManager,

package/src/plugins/json-schema-preset/react.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import {
+  type IJsonSchema,
+  useTypeManager as useOriginTypeManager,
+  TypePresetProvider as OriginTypePresetProvider,
+  JsonSchemaTypeManager,
+} from '@flowgram.ai/json-schema';
+
+import { jsonSchemaTypePreset } from './type-definition';
+import { type JsonSchemaTypeRegistry } from './manager';
+
+export const useTypeManager = () =>
+  useOriginTypeManager() as JsonSchemaTypeManager<IJsonSchema, JsonSchemaTypeRegistry>;
+
+export const JsonSchemaTypePresetProvider = ({
+  types = [],
+  children,
+}: React.PropsWithChildren<{ types: JsonSchemaTypeRegistry[] }>) => (
+  <OriginTypePresetProvider types={[...jsonSchemaTypePreset, ...types]}>
+    {children}
+  </OriginTypePresetProvider>
+);

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

@@ -11,6 +11,8 @@ import {
   usePlaygroundContainer,
 } from '@flowgram.ai/editor';
 
+type WithRenderKey<T> = T & { renderKey?: string };
+
 /**
  * Creates a material component wrapper with dependency injection support
  *
@@ -48,12 +50,15 @@ import {
  * @returns Wrapper component with dependency injection support
  */
 export function createInjectMaterial<Props>(
-  Component: React.FC<Props> & { renderKey?: string },
+  Component: WithRenderKey<React.FC<Props> | React.ExoticComponent<Props>>,
   params?: {
     renderKey?: string;
   }
-): React.FC<Props> {
-  const InjectComponent: React.FC<Props> = (props) => {
+): WithRenderKey<React.FC<Props>> {
+  // Determine render key: prioritize param specified, then component renderKey, finally component name
+  const renderKey = params?.renderKey || Component.renderKey || Component.name || '';
+
+  const InjectComponent: WithRenderKey<React.FC<Props>> = (props) => {
     const container = usePlaygroundContainer();
 
     // Check if renderer registry is bound in container
@@ -65,9 +70,6 @@ export function createInjectMaterial<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);
 
@@ -83,5 +85,7 @@ export function createInjectMaterial<Props>(
     });
   };
 
+  InjectComponent.renderKey = renderKey;
+
   return InjectComponent;
 }

package/src/validate/validate-flow-value/index.tsx

@@ -6,8 +6,7 @@
 import { isNil } from 'lodash-es';
 import { FeedbackLevel, FlowNodeEntity, getNodeScope } from '@flowgram.ai/editor';
 
-import { IFlowValue } from '@/shared';
-import { FlowValueUtils } from '@/shared';
+import { type IFlowValue, FlowValueUtils } from '@/shared';
 
 interface Context {
   node: FlowNodeEntity;