@flowgram.ai/form-materials 0.4.9 → 0.4.11

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-tag.tsx

@@ -13,9 +13,9 @@ import {
   Scope,
   useCurrentScope,
 } from '@flowgram.ai/editor';
+import { useInjector } from '@flowgram.ai/coze-editor/react';
 import { Popover } from '@douyinfe/semi-ui';
 import { IconIssueStroked } from '@douyinfe/semi-icons';
-import { useInjector } from '@coze-editor/editor/react';
 import {
   Decoration,
   DecorationSet,

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

@@ -5,19 +5,25 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { Popover, Tree } from '@douyinfe/semi-ui';
 import {
   Mention,
   MentionOpenChangeEvent,
   getCurrentMentionReplaceRange,
   useEditor,
   PositionMirror,
-} from '@coze-editor/editor/react';
-import { EditorAPI } from '@coze-editor/editor/preset-prompt';
+} from '@flowgram.ai/coze-editor/react';
+import { EditorAPI } from '@flowgram.ai/coze-editor/preset-prompt';
+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/db-condition-row/types.ts

@@ -5,7 +5,7 @@
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 
-import { IFlowConstantRefValue } from '@/typings';
+import { IFlowConstantRefValue } from '@/shared';
 
 export interface OpConfig {
   label: string;

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

@@ -8,7 +8,7 @@ import React, { useMemo } from 'react';
 import { JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { useScopeAvailable } from '@flowgram.ai/editor';
 
-import { IFlowValue } from '@/typings';
+import { IFlowValue } from '@/shared';
 import { FlowValueUtils } from '@/shared';
 import { DisplaySchemaTag } from '@/components/display-schema-tag';
 

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

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

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

@@ -14,7 +14,7 @@ import {
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
-import { IFlowConstantRefValue, IFlowConstantValue } from '@/typings';
+import { IFlowConstantRefValue, IFlowConstantValue } from '@/shared';
 import { createInjectMaterial } from '@/shared';
 import { InjectVariableSelector } from '@/components/variable-selector';
 import { TypeSelector } from '@/components/type-selector';

package/src/components/index.ts

@@ -3,28 +3,58 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './variable-selector';
-export * from './type-selector';
-export * from './json-schema-editor';
-export * from './batch-variable-selector';
-export * from './constant-input';
-export * from './dynamic-value-input';
-export * from './condition-row';
-export * from './db-condition-row';
-export * from './batch-outputs';
-export * from './prompt-editor';
-export * from './prompt-editor-with-variables';
-export * from './prompt-editor-with-inputs';
-export * from './code-editor';
-export * from './code-editor-mini';
-export * from './json-editor-with-variables';
-export * from './inputs-values';
-export * from './display-schema-tree';
-export * from './display-outputs';
-export * from './display-schema-tag';
-export * from './display-flow-value';
-export * from './display-inputs-values';
-export * from './assign-rows';
-export * from './assign-row';
-export * from './blur-input';
-export * from './inputs-values-tree';
+export { AssignRow, type AssignValueType } from './assign-row';
+export { AssignRows } from './assign-rows';
+export { BatchOutputs } from './batch-outputs';
+export { BatchVariableSelector } from './batch-variable-selector';
+export { BlurInput } from './blur-input';
+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,
+  type DBConditionRowValueType,
+} from './db-condition-row';
+export { DisplayFlowValue } from './display-flow-value';
+export { DisplayInputsValueAllInTag, DisplayInputsValues } from './display-inputs-values';
+export { DisplayOutputs } from './display-outputs';
+export { DisplaySchemaTag } from './display-schema-tag';
+export { DisplaySchemaTree } from './display-schema-tree';
+export { DynamicValueInput, InjectDynamicValueInput } from './dynamic-value-input';
+export { InputsValues } from './inputs-values';
+export { InputsValuesTree } from './inputs-values-tree';
+export {
+  JsonEditorWithVariables,
+  type JsonEditorWithVariablesProps,
+} from './json-editor-with-variables';
+export { JsonSchemaEditor } from './json-schema-editor';
+export { PromptEditor, type PromptEditorPropsType } from './prompt-editor';
+export {
+  PromptEditorWithInputs,
+  type PromptEditorWithInputsProps,
+} from './prompt-editor-with-inputs';
+export {
+  PromptEditorWithVariables,
+  type PromptEditorWithVariablesProps,
+} from './prompt-editor-with-variables';
+export {
+  InjectTypeSelector,
+  TypeSelector,
+  getTypeSelectValue,
+  parseTypeSelectValue,
+  type TypeSelectorProps,
+} from './type-selector';
+export {
+  InjectVariableSelector,
+  VariableSelector,
+  VariableSelectorProvider,
+  useVariableTree,
+  type VariableSelectorProps,
+} from './variable-selector';

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

@@ -9,7 +9,7 @@ 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 { IFlowConstantRefValue, IFlowValue } from '@/shared';
 import { useObjectList } from '@/hooks';
 import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
 import { BlurInput } from '@/components/blur-input';

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

@@ -5,7 +5,7 @@
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 
-import { IFlowValue } from '@/typings';
+import { IFlowValue } from '@/shared';
 import { ConstantInputStrategy } from '@/components/constant-input';
 
 export interface PropsType {

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

@@ -9,7 +9,7 @@ import { I18n } from '@flowgram.ai/editor';
 import { IconButton, Input } from '@douyinfe/semi-ui';
 import { IconChevronDown, IconChevronRight, IconDelete } from '@douyinfe/semi-icons';
 
-import { IFlowConstantValue } from '@/typings';
+import { IFlowConstantValue } from '@/shared';
 import { ConstantInputStrategy } from '@/components/constant-input';
 
 import { PropsType } from './types';

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

@@ -6,13 +6,13 @@
 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 { 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/editor.tsx

@@ -10,8 +10,8 @@ import {
   EditorProvider,
   ActiveLinePlaceholder,
   InferValues,
-} from '@coze-editor/editor/react';
-import preset, { EditorAPI } from '@coze-editor/editor/preset-prompt';
+} from '@flowgram.ai/coze-editor/react';
+import preset, { EditorAPI } from '@flowgram.ai/coze-editor/preset-prompt';
 
 import { PropsType } from './types';
 import { UIContainer } from './styles';

package/src/components/prompt-editor/extensions/jinja.tsx

@@ -5,8 +5,8 @@
 
 import { useLayoutEffect } from 'react';
 
-import { useInjector } from '@coze-editor/editor/react';
-import { astDecorator } from '@coze-editor/editor';
+import { useInjector } from '@flowgram.ai/coze-editor/react';
+import { astDecorator } from '@flowgram.ai/coze-editor';
 import { EditorView } from '@codemirror/view';
 
 function JinjaHighlight() {

package/src/components/prompt-editor/extensions/language-support.tsx

@@ -5,8 +5,8 @@
 
 import { useLayoutEffect } from 'react';
 
-import { useInjector } from '@coze-editor/editor/react';
-import { languageSupport } from '@coze-editor/editor/preset-prompt';
+import { useInjector } from '@flowgram.ai/coze-editor/react';
+import { languageSupport } from '@flowgram.ai/coze-editor/preset-prompt';
 
 function LanguageSupport() {
   const injector = useInjector();

package/src/components/prompt-editor/extensions/markdown.tsx

@@ -5,8 +5,8 @@
 
 import { useLayoutEffect } from 'react';
 
-import { useInjector } from '@coze-editor/editor/react';
-import { astDecorator } from '@coze-editor/editor';
+import { useInjector } from '@flowgram.ai/coze-editor/react';
+import { astDecorator } from '@flowgram.ai/coze-editor';
 import { EditorView } from '@codemirror/view';
 
 function MarkdownHighlight() {

package/src/components/prompt-editor/types.tsx

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { IFlowTemplateValue } from '@/typings';
+import { IFlowTemplateValue } from '@/shared';
 
 export type PropsType = React.PropsWithChildren<{
   value?: IFlowTemplateValue;

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/variable-selector/index.tsx

@@ -73,6 +73,8 @@ export const VariableSelector = ({
     return icon;
   };
 
+  console.log('debugger treeValue', treeValue);
+
   return (
     <>
       <UITreeSelect

package/src/effects/auto-rename-ref/index.ts

@@ -10,7 +10,7 @@ import {
   VariableFieldKeyRenameService,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue, IFlowTemplateValue } from '@/typings';
+import { IFlowRefValue, IFlowTemplateValue } from '@/shared';
 import { FlowValueUtils } from '@/shared';
 
 /**

package/src/effects/index.ts

@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './provide-batch-input';
-export * from './auto-rename-ref';
-export * from './provide-json-schema-outputs';
-export * from './sync-variable-title';
-export * from './validate-when-variable-sync';
-export * from './listen-ref-value-change';
-export * from './listen-ref-schema-change';
+export { autoRenameRefEffect } from './auto-rename-ref';
+export { listenRefSchemaChange } from './listen-ref-schema-change';
+export { listenRefValueChange } from './listen-ref-value-change';
+export { provideBatchInputEffect } from './provide-batch-input';
+export { provideJsonSchemaOutputs } from './provide-json-schema-outputs';
+export { syncVariableTitle } from './sync-variable-title';
+export { validateWhenVariableSync } from './validate-when-variable-sync';

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 '@/shared';
 
 /**
  * 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 '@/shared';
 
 /**
  * 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 '@/shared';
 
 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 '@/shared';
 
 export const provideBatchOutputsEffect: EffectOptions[] = createEffectFromVariableProvider({
   parse: (value: Record<string, IFlowRefValue>, ctx) => [

package/src/form-plugins/index.ts

@@ -3,6 +3,6 @@
  * SPDX-License-Identifier: MIT
  */
 
-export * from './batch-outputs-plugin';
-export * from './infer-inputs-plugin';
-export * from './infer-assign-plugin';
+export { createBatchOutputsFormPlugin, provideBatchOutputsEffect } from './batch-outputs-plugin';
+export { createInferAssignPlugin } from './infer-assign-plugin';
+export { createInferInputsPlugin } from './infer-inputs-plugin';

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 '@/shared';
 
 type AssignValueType =
   | {

package/src/hooks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { useObjectList } from './use-object-list';