@flowgram.ai/form-materials 0.1.0-alpha.19 → 0.1.0-alpha.21

package/dist/esm/components/json-schema-creator/json-input-modal.mjs

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Modal, Typography } from "@douyinfe/semi-ui";
+import { jsonToSchema } from "./utils/json-to-schema.mjs";
+import { JsonCodeEditor } from "../code-editor/index.mjs";
+const { Text } = Typography;
+function JsonInputModal({ visible, onClose, onConfirm }) {
+    const [jsonInput, setJsonInput] = useState('');
+    const [error, setError] = useState('');
+    const handleConfirm = ()=>{
+        try {
+            const schema = jsonToSchema(jsonInput);
+            onConfirm(schema);
+            setJsonInput('');
+            setError('');
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+    return /*#__PURE__*/ jsxs(Modal, {
+        visible: visible,
+        onCancel: onClose,
+        onOk: handleConfirm,
+        title: I18n.t('JSON to JSONSchema'),
+        okText: I18n.t('Generate'),
+        cancelText: I18n.t('Cancel'),
+        width: 600,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                style: {
+                    marginBottom: 8
+                },
+                children: /*#__PURE__*/ jsxs(Text, {
+                    children: [
+                        I18n.t('Paste JSON data'),
+                        "："
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                style: {
+                    minHeight: 300
+                },
+                children: /*#__PURE__*/ jsx(JsonCodeEditor, {
+                    value: jsonInput,
+                    onChange: (value)=>setJsonInput(value || '')
+                })
+            }),
+            error && /*#__PURE__*/ jsx("div", {
+                style: {
+                    marginTop: 8
+                },
+                children: /*#__PURE__*/ jsx(Text, {
+                    type: "danger",
+                    children: error
+                })
+            })
+        ]
+    });
+}
+export { JsonInputModal };

package/dist/esm/components/json-schema-creator/json-schema-creator.mjs

@@ -0,0 +1,26 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { I18n } from "@flowgram.ai/editor";
+import { Button } from "@douyinfe/semi-ui";
+import { JsonInputModal } from "./json-input-modal.mjs";
+function JsonSchemaCreator({ onSchemaCreate }) {
+    const [visible, setVisible] = useState(false);
+    const handleCreate = (schema)=>{
+        onSchemaCreate?.(schema);
+        setVisible(false);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                onClick: ()=>setVisible(true),
+                children: I18n.t('JSON to JSONSchema')
+            }),
+            /*#__PURE__*/ jsx(JsonInputModal, {
+                visible: visible,
+                onClose: ()=>setVisible(false),
+                onConfirm: handleCreate
+            })
+        ]
+    });
+}
+export { JsonSchemaCreator };

package/dist/esm/components/json-schema-creator/utils/json-to-schema.mjs

@@ -0,0 +1,33 @@
+function jsonToSchema(jsonString) {
+    const data = JSON.parse(jsonString);
+    return generateSchema(data);
+}
+function generateSchema(value) {
+    if (null === value) return {
+        type: 'string'
+    };
+    if (Array.isArray(value)) {
+        const schema = {
+            type: 'array'
+        };
+        if (value.length > 0) schema.items = generateSchema(value[0]);
+        return schema;
+    }
+    if ('object' == typeof value) {
+        const schema = {
+            type: 'object',
+            properties: {},
+            required: []
+        };
+        for (const [key, val] of Object.entries(value)){
+            schema.properties[key] = generateSchema(val);
+            schema.required.push(key);
+        }
+        return schema;
+    }
+    const type = typeof value;
+    return {
+        type: type
+    };
+}
+export { jsonToSchema };

package/dist/esm/effects/validate-when-variable-sync/index.mjs

@@ -1,12 +1,12 @@
-import { isEmpty } from "lodash-es";
 import { DataEvent, getNodePrivateScope, getNodeScope } from "@flowgram.ai/editor";
 const validateWhenVariableSync = ({ scope } = {})=>[
         {
             event: DataEvent.onValueInit,
-            effect: ({ context, form })=>{
+            effect: ({ context, form, name })=>{
                 const nodeScope = 'private' === scope ? getNodePrivateScope(context.node) : getNodeScope(context.node);
                 const disposable = nodeScope.available.onListOrAnyVarChange(()=>{
-                    if (!isEmpty(form.state.errors)) form.validate();
+                    const errorKeys = Object.entries(form.state.errors || {}).filter(([_, errors])=>errors?.length > 0).filter(([key])=>key.startsWith(name) || name.startsWith(key)).map(([key])=>key);
+                    if (errorKeys.length > 0) form.validate();
                 });
                 return ()=>disposable.dispose();
             }

package/dist/esm/index.mjs

@@ -1,8 +1,8 @@
-import { AssignRow, AssignRows, BaseCodeEditor, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, ConditionPresetOp, ConditionProvider, ConditionRow, ConstantInput, DBConditionRow, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, EditorInputsTree, EditorVariableTagInject, EditorVariableTree, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonCodeEditor, JsonEditorWithVariables, JsonSchemaEditor, PromptEditor, PromptEditorWithInputs, PromptEditorWithVariables, PythonCodeEditor, SQLCodeEditor, SQLEditorWithVariables, ShellCodeEditor, TypeScriptCodeEditor, TypeSelector, VariableSelector, VariableSelectorProvider, getTypeSelectValue, parseTypeSelectValue, useCondition, useConditionContext, useVariableTree } from "./components/index.mjs";
+import { AssignRow, AssignRows, BaseCodeEditor, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, ConditionPresetOp, ConditionProvider, ConditionRow, ConstantInput, DBConditionRow, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, EditorInputsTree, EditorVariableTagInject, EditorVariableTree, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonCodeEditor, JsonEditorWithVariables, JsonSchemaCreator, JsonSchemaEditor, PromptEditor, PromptEditorWithInputs, PromptEditorWithVariables, PythonCodeEditor, SQLCodeEditor, SQLEditorWithVariables, ShellCodeEditor, TypeScriptCodeEditor, TypeSelector, VariableSelector, VariableSelectorProvider, getTypeSelectValue, parseTypeSelectValue, useCondition, useConditionContext, useVariableTree } from "./components/index.mjs";
 import { autoRenameRefEffect, listenRefSchemaChange, listenRefValueChange, provideBatchInputEffect, provideJsonSchemaOutputs, syncVariableTitle, validateWhenVariableSync } from "./effects/index.mjs";
 import { createBatchOutputsFormPlugin, createInferAssignPlugin, createInferInputsPlugin, provideBatchOutputsEffect } from "./form-plugins/index.mjs";
 import { useObjectList } from "./hooks/index.mjs";
 import { JsonSchemaTypePresetProvider, JsonSchemaUtils, createDisableDeclarationPlugin, createTypePresetPlugin, useTypeManager } from "./plugins/index.mjs";
 import { FlowValueUtils, createInjectMaterial, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, lazySuspense, polyfillCreateRoot, unstableSetCreateRoot, withSuspense } from "./shared/index.mjs";
 import { validateFlowValue } from "./validate/index.mjs";
-export { AssignRow, AssignRows, BaseCodeEditor, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, ConditionPresetOp, ConditionProvider, ConditionRow, ConstantInput, DBConditionRow, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, EditorInputsTree, EditorVariableTagInject, EditorVariableTree, FlowValueUtils, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonCodeEditor, JsonEditorWithVariables, JsonSchemaEditor, JsonSchemaTypePresetProvider, JsonSchemaUtils, PromptEditor, PromptEditorWithInputs, PromptEditorWithVariables, PythonCodeEditor, SQLCodeEditor, SQLEditorWithVariables, ShellCodeEditor, TypeScriptCodeEditor, TypeSelector, VariableSelector, VariableSelectorProvider, autoRenameRefEffect, createBatchOutputsFormPlugin, createDisableDeclarationPlugin, createInferAssignPlugin, createInferInputsPlugin, createInjectMaterial, createTypePresetPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, lazySuspense, listenRefSchemaChange, listenRefValueChange, parseTypeSelectValue, polyfillCreateRoot, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, unstableSetCreateRoot, useCondition, useConditionContext, useObjectList, useTypeManager, useVariableTree, validateFlowValue, validateWhenVariableSync, withSuspense };
+export { AssignRow, AssignRows, BaseCodeEditor, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, ConditionPresetOp, ConditionProvider, ConditionRow, ConstantInput, DBConditionRow, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, EditorInputsTree, EditorVariableTagInject, EditorVariableTree, FlowValueUtils, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonCodeEditor, JsonEditorWithVariables, JsonSchemaCreator, JsonSchemaEditor, JsonSchemaTypePresetProvider, JsonSchemaUtils, PromptEditor, PromptEditorWithInputs, PromptEditorWithVariables, PythonCodeEditor, SQLCodeEditor, SQLEditorWithVariables, ShellCodeEditor, TypeScriptCodeEditor, TypeSelector, VariableSelector, VariableSelectorProvider, autoRenameRefEffect, createBatchOutputsFormPlugin, createDisableDeclarationPlugin, createInferAssignPlugin, createInferInputsPlugin, createInjectMaterial, createTypePresetPlugin, formatLegacyRefOnInit, formatLegacyRefOnSubmit, formatLegacyRefToNewRef, formatNewRefToLegacyRef, getTypeSelectValue, isLegacyFlowRefValueSchema, isNewFlowRefValueSchema, lazySuspense, listenRefSchemaChange, listenRefValueChange, parseTypeSelectValue, polyfillCreateRoot, provideBatchInputEffect, provideBatchOutputsEffect, provideJsonSchemaOutputs, syncVariableTitle, unstableSetCreateRoot, useCondition, useConditionContext, useObjectList, useTypeManager, useVariableTree, validateFlowValue, validateWhenVariableSync, withSuspense };

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/components/index.ts","../src/components/assign-row/index.tsx","../src/components/assign-row/types.ts","../src/components/assign-rows/index.tsx","../src/components/batch-outputs/index.tsx","../src/components/batch-outputs/types.ts","../src/components/batch-variable-selector/index.tsx","../src/components/blur-input/index.tsx","../src/components/code-editor/editor-all.tsx","../src/components/code-editor/editor-json.tsx","../src/components/code-editor/editor-python.tsx","../src/components/code-editor/editor-shell.tsx","../src/components/code-editor/editor-sql.tsx","../src/components/code-editor/editor-ts.tsx","../src/components/code-editor/editor.tsx","../src/components/code-editor/factory.tsx","../src/components/code-editor/index.tsx","../src/components/code-editor/utils.ts","../src/components/code-editor/theme/dark.ts","../src/components/code-editor/theme/index.ts","../src/components/code-editor/theme/light.ts","../src/components/code-editor-mini/index.tsx","../src/components/condition-context/context.tsx","../src/components/condition-context/index.tsx","../src/components/condition-context/op.ts","../src/components/condition-context/types.ts","../src/components/condition-context/hooks/use-condition.tsx","../src/components/condition-row/index.tsx","../src/components/condition-row/types.ts","../src/components/constant-input/index.tsx","../src/components/constant-input/types.ts","../src/components/coze-editor-extensions/index.tsx","../src/components/coze-editor-extensions/extensions/inputs-tree.tsx","../src/components/coze-editor-extensions/extensions/variable-tag.tsx","../src/components/coze-editor-extensions/extensions/variable-tree.tsx","../src/components/db-condition-row/index.tsx","../src/components/db-condition-row/types.ts","../src/components/display-flow-value/index.tsx","../src/components/display-inputs-values/index.tsx","../src/components/display-outputs/index.tsx","../src/components/display-schema-tag/index.tsx","../src/components/display-schema-tree/index.tsx","../src/components/dynamic-value-input/hooks.ts","../src/components/dynamic-value-input/index.tsx","../src/components/inputs-values/index.tsx","../src/components/inputs-values/types.ts","../src/components/inputs-values-tree/icon.tsx","../src/components/inputs-values-tree/index.tsx","../src/components/inputs-values-tree/row.tsx","../src/components/inputs-values-tree/types.ts","../src/components/inputs-values-tree/hooks/use-child-list.tsx","../src/components/json-editor-with-variables/editor.tsx","../src/components/json-editor-with-variables/index.tsx","../src/components/json-schema-editor/default-value.tsx","../src/components/json-schema-editor/hooks.tsx","../src/components/json-schema-editor/icon.tsx","../src/components/json-schema-editor/index.tsx","../src/components/json-schema-editor/types.ts","../src/components/prompt-editor/editor.tsx","../src/components/prompt-editor/index.tsx","../src/components/prompt-editor/types.tsx","../src/components/prompt-editor/extensions/jinja.tsx","../src/components/prompt-editor/extensions/language-support.tsx","../src/components/prompt-editor/extensions/markdown.tsx","../src/components/prompt-editor-with-inputs/index.tsx","../src/components/prompt-editor-with-variables/index.tsx","../src/components/sql-editor-with-variables/editor.tsx","../src/components/sql-editor-with-variables/index.tsx","../src/components/type-selector/index.tsx","../src/components/variable-selector/context.tsx","../src/components/variable-selector/index.tsx","../src/components/variable-selector/use-variable-tree.tsx","../src/effects/index.ts","../src/effects/auto-rename-ref/index.ts","../src/effects/listen-ref-schema-change/index.ts","../src/effects/listen-ref-value-change/index.ts","../src/effects/provide-batch-input/index.ts","../src/effects/provide-json-schema-outputs/index.ts","../src/effects/sync-variable-title/index.ts","../src/effects/validate-when-variable-sync/index.ts","../src/form-plugins/index.ts","../src/form-plugins/batch-outputs-plugin/index.ts","../src/form-plugins/infer-assign-plugin/index.ts","../src/form-plugins/infer-inputs-plugin/index.ts","../src/hooks/index.ts","../src/hooks/use-object-list/index.tsx","../src/plugins/index.ts","../src/plugins/disable-declaration-plugin/create-disable-declaration-plugin.ts","../src/plugins/disable-declaration-plugin/index.tsx","../src/plugins/json-schema-preset/create-type-preset-plugin.tsx","../src/plugins/json-schema-preset/index.tsx","../src/plugins/json-schema-preset/react.tsx","../src/plugins/json-schema-preset/types.ts","../src/plugins/json-schema-preset/type-definition/array.tsx","../src/plugins/json-schema-preset/type-definition/boolean.tsx","../src/plugins/json-schema-preset/type-definition/date-time.tsx","../src/plugins/json-schema-preset/type-definition/index.tsx","../src/plugins/json-schema-preset/type-definition/integer.tsx","../src/plugins/json-schema-preset/type-definition/map.tsx","../src/plugins/json-schema-preset/type-definition/number.tsx","../src/plugins/json-schema-preset/type-definition/object.tsx","../src/plugins/json-schema-preset/type-definition/string.tsx","../src/shared/index.ts","../src/shared/flow-value/index.ts","../src/shared/flow-value/schema.ts","../src/shared/flow-value/types.ts","../src/shared/flow-value/utils.ts","../src/shared/format-legacy-refs/index.ts","../src/shared/inject-material/index.tsx","../src/shared/lazy-suspense/index.tsx","../src/shared/polyfill-create-root/index.tsx","../src/validate/index.ts","../src/validate/validate-flow-value/index.tsx"],"version":"5.9.2"}
+{"root":["../src/index.ts","../src/components/index.ts","../src/components/assign-row/index.tsx","../src/components/assign-row/types.ts","../src/components/assign-rows/index.tsx","../src/components/batch-outputs/index.tsx","../src/components/batch-outputs/types.ts","../src/components/batch-variable-selector/index.tsx","../src/components/blur-input/index.tsx","../src/components/code-editor/editor-all.tsx","../src/components/code-editor/editor-json.tsx","../src/components/code-editor/editor-python.tsx","../src/components/code-editor/editor-shell.tsx","../src/components/code-editor/editor-sql.tsx","../src/components/code-editor/editor-ts.tsx","../src/components/code-editor/editor.tsx","../src/components/code-editor/factory.tsx","../src/components/code-editor/index.tsx","../src/components/code-editor/utils.ts","../src/components/code-editor/theme/dark.ts","../src/components/code-editor/theme/index.ts","../src/components/code-editor/theme/light.ts","../src/components/code-editor-mini/index.tsx","../src/components/condition-context/context.tsx","../src/components/condition-context/index.tsx","../src/components/condition-context/op.ts","../src/components/condition-context/types.ts","../src/components/condition-context/hooks/use-condition.tsx","../src/components/condition-row/index.tsx","../src/components/condition-row/types.ts","../src/components/constant-input/index.tsx","../src/components/constant-input/types.ts","../src/components/coze-editor-extensions/index.tsx","../src/components/coze-editor-extensions/extensions/inputs-tree.tsx","../src/components/coze-editor-extensions/extensions/variable-tag.tsx","../src/components/coze-editor-extensions/extensions/variable-tree.tsx","../src/components/db-condition-row/index.tsx","../src/components/db-condition-row/types.ts","../src/components/display-flow-value/index.tsx","../src/components/display-inputs-values/index.tsx","../src/components/display-outputs/index.tsx","../src/components/display-schema-tag/index.tsx","../src/components/display-schema-tree/index.tsx","../src/components/dynamic-value-input/hooks.ts","../src/components/dynamic-value-input/index.tsx","../src/components/inputs-values/index.tsx","../src/components/inputs-values/types.ts","../src/components/inputs-values-tree/icon.tsx","../src/components/inputs-values-tree/index.tsx","../src/components/inputs-values-tree/row.tsx","../src/components/inputs-values-tree/types.ts","../src/components/inputs-values-tree/hooks/use-child-list.tsx","../src/components/json-editor-with-variables/editor.tsx","../src/components/json-editor-with-variables/index.tsx","../src/components/json-schema-creator/index.tsx","../src/components/json-schema-creator/json-input-modal.tsx","../src/components/json-schema-creator/json-schema-creator.tsx","../src/components/json-schema-creator/utils/json-to-schema.ts","../src/components/json-schema-editor/default-value.tsx","../src/components/json-schema-editor/hooks.tsx","../src/components/json-schema-editor/icon.tsx","../src/components/json-schema-editor/index.tsx","../src/components/json-schema-editor/types.ts","../src/components/prompt-editor/editor.tsx","../src/components/prompt-editor/index.tsx","../src/components/prompt-editor/types.tsx","../src/components/prompt-editor/extensions/jinja.tsx","../src/components/prompt-editor/extensions/language-support.tsx","../src/components/prompt-editor/extensions/markdown.tsx","../src/components/prompt-editor-with-inputs/index.tsx","../src/components/prompt-editor-with-variables/index.tsx","../src/components/sql-editor-with-variables/editor.tsx","../src/components/sql-editor-with-variables/index.tsx","../src/components/type-selector/index.tsx","../src/components/variable-selector/context.tsx","../src/components/variable-selector/index.tsx","../src/components/variable-selector/use-variable-tree.tsx","../src/effects/index.ts","../src/effects/auto-rename-ref/index.ts","../src/effects/listen-ref-schema-change/index.ts","../src/effects/listen-ref-value-change/index.ts","../src/effects/provide-batch-input/index.ts","../src/effects/provide-json-schema-outputs/index.ts","../src/effects/sync-variable-title/index.ts","../src/effects/validate-when-variable-sync/index.ts","../src/form-plugins/index.ts","../src/form-plugins/batch-outputs-plugin/index.ts","../src/form-plugins/infer-assign-plugin/index.ts","../src/form-plugins/infer-inputs-plugin/index.ts","../src/hooks/index.ts","../src/hooks/use-object-list/index.tsx","../src/plugins/index.ts","../src/plugins/disable-declaration-plugin/create-disable-declaration-plugin.ts","../src/plugins/disable-declaration-plugin/index.tsx","../src/plugins/json-schema-preset/create-type-preset-plugin.tsx","../src/plugins/json-schema-preset/index.tsx","../src/plugins/json-schema-preset/react.tsx","../src/plugins/json-schema-preset/types.ts","../src/plugins/json-schema-preset/type-definition/array.tsx","../src/plugins/json-schema-preset/type-definition/boolean.tsx","../src/plugins/json-schema-preset/type-definition/date-time.tsx","../src/plugins/json-schema-preset/type-definition/index.tsx","../src/plugins/json-schema-preset/type-definition/integer.tsx","../src/plugins/json-schema-preset/type-definition/map.tsx","../src/plugins/json-schema-preset/type-definition/number.tsx","../src/plugins/json-schema-preset/type-definition/object.tsx","../src/plugins/json-schema-preset/type-definition/string.tsx","../src/shared/index.ts","../src/shared/flow-value/index.ts","../src/shared/flow-value/schema.ts","../src/shared/flow-value/types.ts","../src/shared/flow-value/utils.ts","../src/shared/format-legacy-refs/index.ts","../src/shared/inject-material/index.tsx","../src/shared/lazy-suspense/index.tsx","../src/shared/polyfill-create-root/index.tsx","../src/validate/index.ts","../src/validate/validate-flow-value/index.tsx"],"version":"5.9.2"}

package/dist/types/components/assign-rows/index.d.ts

@@ -3,9 +3,11 @@
  * SPDX-License-Identifier: MIT
  */
 import React from 'react';
+import { AssignValueType } from '../assign-row';
 interface AssignRowsProps {
     name: string;
     readonly?: boolean;
+    defaultValue?: AssignValueType[];
 }
 export declare function AssignRows(props: AssignRowsProps): React.JSX.Element;
 export {};

package/dist/types/components/display-outputs/index.d.ts

@@ -10,6 +10,7 @@ interface PropsType {
     showIconInTree?: boolean;
     displayFromScope?: boolean;
     typeManager?: JsonSchemaTypeManager;
+    style?: React.CSSProperties;
 }
-export declare function DisplayOutputs({ value, showIconInTree, displayFromScope }: PropsType): React.JSX.Element;
+export declare function DisplayOutputs({ value, showIconInTree, displayFromScope, style }: PropsType): React.JSX.Element;
 export {};

package/dist/types/components/index.d.ts

@@ -23,6 +23,7 @@ export { DynamicValueInput, InjectDynamicValueInput } from './dynamic-value-inpu
 export { InputsValues } from './inputs-values';
 export { InputsValuesTree } from './inputs-values-tree';
 export { JsonEditorWithVariables, type JsonEditorWithVariablesProps, } from './json-editor-with-variables';
+export { JsonSchemaCreator, type JsonSchemaCreatorProps } from './json-schema-creator';
 export { JsonSchemaEditor } from './json-schema-editor';
 export { PromptEditor, type PromptEditorPropsType } from './prompt-editor';
 export { PromptEditorWithInputs, type PromptEditorWithInputsProps, } from './prompt-editor-with-inputs';

package/dist/types/components/json-schema-creator/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+export { JsonSchemaCreator } from './json-schema-creator';
+export type { JsonSchemaCreatorProps } from './json-schema-creator';

package/dist/types/components/json-schema-creator/json-input-modal.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import React from 'react';
+import type { IJsonSchema } from '@flowgram.ai/json-schema';
+interface JsonInputModalProps {
+    visible: boolean;
+    onClose: () => void;
+    onConfirm: (schema: IJsonSchema) => void;
+}
+export declare function JsonInputModal({ visible, onClose, onConfirm }: JsonInputModalProps): React.JSX.Element;
+export {};

package/dist/types/components/json-schema-creator/json-schema-creator.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import React from 'react';
+import type { IJsonSchema } from '@flowgram.ai/json-schema';
+export interface JsonSchemaCreatorProps {
+    /** 生成 schema 后的回调 */
+    onSchemaCreate?: (schema: IJsonSchema) => void;
+}
+export declare function JsonSchemaCreator({ onSchemaCreate }: JsonSchemaCreatorProps): React.JSX.Element;

package/dist/types/components/json-schema-creator/utils/json-to-schema.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import type { IJsonSchema } from '@flowgram.ai/json-schema';
+export declare function jsonToSchema(jsonString: string): IJsonSchema;

package/dist/types/index.d.ts

@@ -2,7 +2,7 @@
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
-export { AssignRow, AssignRows, BaseCodeEditor, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, ConditionPresetOp, ConditionProvider, ConditionRow, ConstantInput, DBConditionRow, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, EditorInputsTree, EditorVariableTagInject, EditorVariableTree, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonCodeEditor, JsonEditorWithVariables, JsonSchemaEditor, PromptEditor, PromptEditorWithInputs, PromptEditorWithVariables, PythonCodeEditor, SQLCodeEditor, SQLEditorWithVariables, ShellCodeEditor, TypeScriptCodeEditor, TypeSelector, VariableSelector, VariableSelectorProvider, getTypeSelectValue, parseTypeSelectValue, type AssignValueType, type CodeEditorPropsType, type ConditionOpConfig, type ConditionOpConfigs, type ConditionRowValueType, type ConstantInputStrategy, type DBConditionOptionType, type DBConditionRowValueType, type IConditionRule, type IConditionRuleFactory, type JsonEditorWithVariablesProps, type PromptEditorPropsType, type PromptEditorWithInputsProps, type PromptEditorWithVariablesProps, type SQLEditorWithVariablesProps, type TypeSelectorProps, type VariableSelectorProps, useCondition, useConditionContext, useVariableTree, } from './components';
+export { AssignRow, AssignRows, BaseCodeEditor, BatchOutputs, BatchVariableSelector, BlurInput, CodeEditor, CodeEditorMini, ConditionPresetOp, ConditionProvider, ConditionRow, ConstantInput, DBConditionRow, DisplayFlowValue, DisplayInputsValueAllInTag, DisplayInputsValues, DisplayOutputs, DisplaySchemaTag, DisplaySchemaTree, DynamicValueInput, EditorInputsTree, EditorVariableTagInject, EditorVariableTree, InjectDynamicValueInput, InjectTypeSelector, InjectVariableSelector, InputsValues, InputsValuesTree, JsonCodeEditor, JsonEditorWithVariables, JsonSchemaCreator, JsonSchemaEditor, PromptEditor, PromptEditorWithInputs, PromptEditorWithVariables, PythonCodeEditor, SQLCodeEditor, SQLEditorWithVariables, ShellCodeEditor, TypeScriptCodeEditor, TypeSelector, VariableSelector, VariableSelectorProvider, getTypeSelectValue, parseTypeSelectValue, type AssignValueType, type CodeEditorPropsType, type ConditionOpConfig, type ConditionOpConfigs, type ConditionRowValueType, type ConstantInputStrategy, type DBConditionOptionType, type DBConditionRowValueType, type IConditionRule, type IConditionRuleFactory, type JsonEditorWithVariablesProps, type JsonSchemaCreatorProps, type PromptEditorPropsType, type PromptEditorWithInputsProps, type PromptEditorWithVariablesProps, type SQLEditorWithVariablesProps, type TypeSelectorProps, type VariableSelectorProps, useCondition, useConditionContext, useVariableTree, } from './components';
 export { autoRenameRefEffect, listenRefSchemaChange, listenRefValueChange, provideBatchInputEffect, provideJsonSchemaOutputs, syncVariableTitle, validateWhenVariableSync, } from './effects';
 export { createBatchOutputsFormPlugin, createInferAssignPlugin, createInferInputsPlugin, provideBatchOutputsEffect, } from './form-plugins';
 export { useObjectList } from './hooks';

package/dist/types/plugins/json-schema-preset/create-type-preset-plugin.d.ts

@@ -2,8 +2,12 @@
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
  */
+import { type PluginCreator } from '@flowgram.ai/editor';
 import { JsonSchemaTypeRegistry } from './types';
-export declare const createTypePresetPlugin: import("@flowgram.ai/core").PluginCreator<{
-    types?: Partial<JsonSchemaTypeRegistry> & Pick<JsonSchemaTypeRegistry, "type">[];
+type TypePresetRegistry = Partial<JsonSchemaTypeRegistry> & Pick<JsonSchemaTypeRegistry, 'type'>;
+interface TypePresetPluginOptions {
+    types?: TypePresetRegistry[];
     unregisterTypes?: string[];
-}>;
+}
+export declare const createTypePresetPlugin: PluginCreator<TypePresetPluginOptions>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.1.0-alpha.19",
+  "version": "0.1.0-alpha.21",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -67,9 +67,9 @@
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "zod": "^3.24.4",
-    "@flowgram.ai/editor": "0.1.0-alpha.19",
-    "@flowgram.ai/coze-editor": "0.1.0-alpha.19",
-    "@flowgram.ai/json-schema": "0.1.0-alpha.19"
+    "@flowgram.ai/editor": "0.1.0-alpha.21",
+    "@flowgram.ai/json-schema": "0.1.0-alpha.21",
+    "@flowgram.ai/coze-editor": "0.1.0-alpha.21"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
@@ -86,8 +86,8 @@
     "cross-env": "~7.0.3",
     "@rsbuild/plugin-react": "^1.1.1",
     "date-fns": "~4.1.0",
-    "@flowgram.ai/eslint-config": "0.1.0-alpha.19",
-    "@flowgram.ai/ts-config": "0.1.0-alpha.19"
+    "@flowgram.ai/ts-config": "0.1.0-alpha.21",
+    "@flowgram.ai/eslint-config": "0.1.0-alpha.21"
   },
   "peerDependencies": {
     "react": ">=16.8",

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

@@ -5,7 +5,7 @@
 
 import React from 'react';
 
-import { FieldArray, FieldArrayRenderProps } from '@flowgram.ai/editor';
+import { FieldArray } from '@flowgram.ai/editor';
 import { Button } from '@douyinfe/semi-ui';
 import { IconPlus } from '@douyinfe/semi-icons';
 
@@ -14,15 +14,16 @@ import { AssignRow, AssignValueType } from '@/components/assign-row';
 interface AssignRowsProps {
   name: string;
   readonly?: boolean;
+  defaultValue?: AssignValueType[];
 }
 
 export function AssignRows(props: AssignRowsProps) {
-  const { name, readonly } = props;
+  const { name, readonly, defaultValue } = props;
 
   return (
-    <FieldArray name={name}>
-      {({ field }: FieldArrayRenderProps<AssignValueType | undefined>) => (
-        <>
+    <FieldArray<AssignValueType | undefined> name={name} defaultValue={defaultValue}>
+      {({ field }) => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
           {field.map((childField, index) => (
             <AssignRow
               key={childField.key}
@@ -52,7 +53,7 @@ export function AssignRows(props: AssignRowsProps) {
               Declaration
             </Button>
           </div>
-        </>
+        </div>
       )}
     </FieldArray>
   );

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

@@ -30,7 +30,10 @@ export function BlurInput(props: InputProps) {
       onChange={(value) => {
         setValue(value);
       }}
-      onBlur={(e) => props.onChange?.(value, e)}
+      onBlur={(e) => {
+        props.onChange?.(value, e);
+        props.onBlur?.(e);
+      }}
     />
   );
 }

package/src/components/condition-context/hooks/use-condition.tsx

@@ -125,6 +125,10 @@ export function useCondition({
 
   // When type of target schema updated, clear it
   useEffect(() => {
+    if (!prevTargetSchemaRef.current) {
+      prevTargetSchemaRef.current = targetSchema;
+      return;
+    }
     if (prevTargetSchemaRef.current?.type !== targetSchema?.type) {
       onClearRight?.();
     }

package/src/components/coze-editor-extensions/extensions/variable-tag.tsx

@@ -107,17 +107,25 @@ class VariableTagWidget extends WidgetType {
       })
     );
 
+    const refresh = () => {
+      this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+    };
+
     this.toDispose.push(
-      this.scope.available.trackByKeyPath(
-        this.keyPath,
-        (v) => {
-          this.renderVariable(v);
-        },
-        { triggerOnInit: false }
-      )
+      this.scope.available.trackByKeyPath(this.keyPath, refresh, { triggerOnInit: false })
     );
 
-    this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+    if (this.keyPath?.[0]) {
+      this.toDispose.push(
+        // listen to root title changed
+        this.scope.available.trackByKeyPath<{ title?: string }>([this.keyPath[0]], refresh, {
+          selector: (curr) => ({ ...curr?.meta }),
+          triggerOnInit: false,
+        })
+      );
+    }
+
+    refresh();
 
     return dom;
   }

package/src/components/coze-editor-extensions/extensions/variable-tree.tsx

@@ -3,8 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
+import { debounce } from 'lodash-es';
 import {
   Mention,
   MentionOpenChangeEvent,
@@ -69,6 +70,11 @@ export function VariableTree({
 
   const treeData = useVariableTree({});
 
+  const debounceUpdatePosKey = useCallback(
+    debounce(() => setPosKey(String(Math.random())), 100),
+    []
+  );
+
   return (
     <>
       <Mention triggerCharacters={triggerCharacters} onOpenChange={handleOpenChange} />
@@ -82,8 +88,9 @@ export function VariableTree({
           <div style={{ width: 300, maxHeight: 300, overflowY: 'auto' }}>
             <Tree
               treeData={treeData}
-              onExpand={(v) => {
-                setPosKey(String(Math.random()));
+              onExpand={() => {
+                // When Expand, an animation is triggered, so we need to update the position by debounce
+                debounceUpdatePosKey();
               }}
               onSelect={(v) => {
                 insert(v);
@@ -96,7 +103,10 @@ export function VariableTree({
         <PositionMirror
           position={position}
           // When Doc scroll, update position
-          onChange={() => setPosKey(String(Math.random()))}
+          onChange={() => {
+            // Update immediately to avoid the popover position lagging behind the cursor
+            setPosKey(String(Math.random()));
+          }}
         />
       </Popover>
     </>

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

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useEffect } from 'react';
+import React, { useLayoutEffect } from 'react';
 
 import { IJsonSchema, JsonSchemaTypeManager, JsonSchemaUtils } from '@flowgram.ai/json-schema';
 import { useCurrentScope, useRefresh } from '@flowgram.ai/editor';
@@ -17,13 +17,14 @@ interface PropsType {
   showIconInTree?: boolean;
   displayFromScope?: boolean;
   typeManager?: JsonSchemaTypeManager;
+  style?: React.CSSProperties;
 }
 
-export function DisplayOutputs({ value, showIconInTree, displayFromScope }: PropsType) {
+export function DisplayOutputs({ value, showIconInTree, displayFromScope, style }: PropsType) {
   const scope = useCurrentScope();
   const refresh = useRefresh();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!displayFromScope || !scope) {
       return () => null;
     }
@@ -50,7 +51,7 @@ export function DisplayOutputs({ value, showIconInTree, displayFromScope }: Prop
   const childEntries = Object.entries(properties || {});
 
   return (
-    <div className="gedit-m-display-outputs-wrapper">
+    <div className="gedit-m-display-outputs-wrapper" style={style}>
       {childEntries.map(([key, schema]) => (
         <DisplaySchemaTag
           key={key}

package/src/components/index.ts

@@ -53,6 +53,7 @@ export {
   JsonEditorWithVariables,
   type JsonEditorWithVariablesProps,
 } from './json-editor-with-variables';
+export { JsonSchemaCreator, type JsonSchemaCreatorProps } from './json-schema-creator';
 export { JsonSchemaEditor } from './json-schema-editor';
 export { PromptEditor, type PromptEditorPropsType } from './prompt-editor';
 export {

package/src/components/json-schema-creator/index.tsx

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { JsonSchemaCreator } from './json-schema-creator';
+export type { JsonSchemaCreatorProps } from './json-schema-creator';

package/src/components/json-schema-creator/json-input-modal.tsx

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useState } from 'react';
+
+import type { IJsonSchema } from '@flowgram.ai/json-schema';
+import { I18n } from '@flowgram.ai/editor';
+import { Modal, Typography } from '@douyinfe/semi-ui';
+
+import { jsonToSchema } from './utils/json-to-schema';
+import { JsonCodeEditor } from '../code-editor';
+
+const { Text } = Typography;
+
+interface JsonInputModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onConfirm: (schema: IJsonSchema) => void;
+}
+
+export function JsonInputModal({ visible, onClose, onConfirm }: JsonInputModalProps) {
+  const [jsonInput, setJsonInput] = useState('');
+  const [error, setError] = useState('');
+
+  const handleConfirm = () => {
+    try {
+      const schema = jsonToSchema(jsonInput);
+      onConfirm(schema);
+      setJsonInput('');
+      setError('');
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      onCancel={onClose}
+      onOk={handleConfirm}
+      title={I18n.t('JSON to JSONSchema')}
+      okText={I18n.t('Generate')}
+      cancelText={I18n.t('Cancel')}
+      width={600}
+    >
+      <div style={{ marginBottom: 8 }}>
+        <Text>{I18n.t('Paste JSON data')}：</Text>
+      </div>
+      <div style={{ minHeight: 300 }}>
+        <JsonCodeEditor value={jsonInput} onChange={(value) => setJsonInput(value || '')} />
+      </div>
+      {error && (
+        <div style={{ marginTop: 8 }}>
+          <Text type="danger">{error}</Text>
+        </div>
+      )}
+    </Modal>
+  );
+}

package/src/components/json-schema-creator/json-schema-creator.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useState } from 'react';
+
+import type { IJsonSchema } from '@flowgram.ai/json-schema';
+import { I18n } from '@flowgram.ai/editor';
+import { Button } from '@douyinfe/semi-ui';
+
+import { JsonInputModal } from './json-input-modal';
+
+export interface JsonSchemaCreatorProps {
+  /** 生成 schema 后的回调 */
+  onSchemaCreate?: (schema: IJsonSchema) => void;
+}
+
+export function JsonSchemaCreator({ onSchemaCreate }: JsonSchemaCreatorProps) {
+  const [visible, setVisible] = useState(false);
+
+  const handleCreate = (schema: IJsonSchema) => {
+    onSchemaCreate?.(schema);
+    setVisible(false);
+  };
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>{I18n.t('JSON to JSONSchema')}</Button>
+      <JsonInputModal
+        visible={visible}
+        onClose={() => setVisible(false)}
+        onConfirm={handleCreate}
+      />
+    </>
+  );
+}