@flowgram.ai/form-materials 0.1.0-alpha.12 → 0.1.0-alpha.14

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

@@ -6,6 +6,7 @@
 import React, { useMemo, useState } from 'react';
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
+import { I18n } from '@flowgram.ai/editor';
 import { Button, Checkbox, IconButton } from '@douyinfe/semi-ui';
 import {
   IconExpand,
@@ -16,7 +17,9 @@ import {
   IconMinus,
 } from '@douyinfe/semi-icons';
 
-import { TypeSelector } from '../type-selector';
+import { InjectTypeSelector } from '@/components/type-selector';
+import { BlurInput } from '@/components/blur-input';
+
 import { ConfigType, PropertyValueType } from './types';
 import {
   IconAddChildren,
@@ -26,10 +29,10 @@ import {
   UIContainer,
   UIExpandDetail,
   UILabel,
-  UIProperties,
-  UIPropertyLeft,
-  UIPropertyMain,
-  UIPropertyRight,
+  UITreeItems,
+  UITreeItemLeft,
+  UITreeItemMain,
+  UITreeItemRight,
   UIRequired,
   UIType,
 } from './styles';
@@ -37,7 +40,8 @@ import { UIName } from './styles';
 import { DefaultValueWrapper, UIRow } from './styles';
 import { usePropertiesEdit } from './hooks';
 import { DefaultValue } from './default-value';
-import { BlurInput } from './components/blur-input';
+
+const DEFAULT = { type: 'object' };
 
 export function JsonSchemaEditor(props: {
   value?: IJsonSchema;
@@ -46,7 +50,7 @@ export function JsonSchemaEditor(props: {
   className?: string;
   readonly?: boolean;
 }) {
-  const { value = { type: 'object' }, config = {}, onChange: onChangeProps, readonly } = props;
+  const { value = DEFAULT, config = {}, onChange: onChangeProps, readonly } = props;
   const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(
     value,
     onChangeProps
@@ -54,14 +58,13 @@ export function JsonSchemaEditor(props: {
 
   return (
     <UIContainer className={props.className}>
-      <UIProperties>
-        {propertyList.map((_property, index) => (
+      <UITreeItems>
+        {propertyList.map((_property) => (
           <PropertyEdit
             readonly={readonly}
             key={_property.key}
             value={_property}
             config={config}
-            $index={index}
             onChange={(_v) => {
               onEditProperty(_property.key!, _v);
             }}
@@ -70,7 +73,7 @@ export function JsonSchemaEditor(props: {
             }}
           />
         ))}
-      </UIProperties>
+      </UITreeItems>
       <Button
         disabled={readonly}
         size="small"
@@ -78,7 +81,7 @@ export function JsonSchemaEditor(props: {
         icon={<IconPlus />}
         onClick={onAddProperty}
       >
-        {config?.addButtonText ?? 'Add'}
+        {config?.addButtonText ?? I18n.t('Add')}
       </Button>
     </UIContainer>
   );
@@ -91,27 +94,9 @@ function PropertyEdit(props: {
   onRemove?: () => void;
   readonly?: boolean;
   $isLast?: boolean;
-  $index?: number;
-  $isFirst?: boolean;
-  $parentExpand?: boolean;
-  $parentType?: string;
-  $showLine?: boolean;
   $level?: number; // 添加层级属性
 }) {
-  const {
-    value,
-    config,
-    readonly,
-    $level = 0,
-    onChange: onChangeProps,
-    onRemove,
-    $index,
-    $isFirst,
-    $isLast,
-    $parentExpand = false,
-    $parentType = '',
-    $showLine,
-  } = props;
+  const { value, config, readonly, $level = 0, onChange: onChangeProps, onRemove, $isLast } = props;
 
   const [expand, setExpand] = useState(false);
   const [collapse, setCollapse] = useState(false);
@@ -120,7 +105,7 @@ function PropertyEdit(props: {
 
   const typeSelectorValue = useMemo(() => ({ type, items }), [type, items]);
 
-  const { propertyList, isDrilldownObject, onAddProperty, onRemoveProperty, onEditProperty } =
+  const { propertyList, canAddField, onAddProperty, onRemoveProperty, onEditProperty } =
     usePropertiesEdit(value, onChangeProps);
 
   const onChange = (key: string, _value: any) => {
@@ -130,45 +115,31 @@ function PropertyEdit(props: {
     });
   };
 
-  const showCollapse = isDrilldownObject && propertyList.length > 0;
+  const showCollapse = canAddField && propertyList.length > 0;
 
   return (
     <>
-      <UIPropertyLeft
-        type={type}
-        $index={$index}
-        $isFirst={$isFirst}
-        $isLast={$isLast}
-        $showLine={$showLine}
-        $isExpand={expand}
-        $parentExpand={$parentExpand}
-        $parentType={$parentType}
-      >
+      <UITreeItemLeft $isLast={$isLast} $showLine={$level > 0} $showCollapse={showCollapse}>
         {showCollapse && (
           <UICollapseTrigger onClick={() => setCollapse((_collapse) => !_collapse)}>
             {collapse ? <IconChevronDown size="small" /> : <IconChevronRight size="small" />}
           </UICollapseTrigger>
         )}
-      </UIPropertyLeft>
-      <UIPropertyRight>
-        <UIPropertyMain
-          $showCollapse={showCollapse}
-          $collapse={collapse}
-          $expand={expand}
-          type={type}
-        >
+      </UITreeItemLeft>
+      <UITreeItemRight>
+        <UITreeItemMain>
           <UIRow>
             <UIName>
               <BlurInput
                 disabled={readonly}
-                placeholder={config?.placeholder ?? 'Input Variable Name'}
+                placeholder={config?.placeholder ?? I18n.t('Input Variable Name')}
                 size="small"
                 value={name}
                 onChange={(value) => onChange('name', value)}
               />
             </UIName>
             <UIType>
-              <TypeSelector
+              <InjectTypeSelector
                 value={typeSelectorValue}
                 readonly={readonly}
                 onChange={(_value) => {
@@ -196,7 +167,7 @@ function PropertyEdit(props: {
                   setExpand((_expand) => !_expand);
                 }}
               />
-              {isDrilldownObject && (
+              {canAddField && (
                 <IconButton
                   disabled={readonly}
                   size="small"
@@ -219,26 +190,26 @@ function PropertyEdit(props: {
           </UIRow>
           {expand && (
             <UIExpandDetail>
-              <UILabel>{config?.descTitle ?? 'Description'}</UILabel>
+              <UILabel>{config?.descTitle ?? I18n.t('Description')}</UILabel>
               <BlurInput
                 disabled={readonly}
                 size="small"
                 value={description}
                 onChange={(value) => onChange('description', value)}
-                placeholder={config?.descPlaceholder ?? 'Help LLM to understand the property'}
+                placeholder={
+                  config?.descPlaceholder ?? I18n.t('Help LLM to understand the property')
+                }
               />
-              {$level === 0 && type && type !== 'array' && (
+              {$level === 0 && (
                 <>
                   <UILabel style={{ marginTop: 10 }}>
-                    {config?.defaultValueTitle ?? 'Default Value'}
+                    {config?.defaultValueTitle ?? I18n.t('Default Value')}
                   </UILabel>
                   <DefaultValueWrapper>
                     <DefaultValue
                       value={defaultValue}
                       schema={value}
-                      type={type}
-                      placeholder={config?.defaultValuePlaceholder}
-                      jsonFormatText={config?.jsonFormatText}
+                      placeholder={config?.defaultValuePlaceholder ?? I18n.t('Default Value')}
                       onChange={(value) => onChange('default', value)}
                     />
                   </DefaultValueWrapper>
@@ -246,10 +217,10 @@ function PropertyEdit(props: {
               )}
             </UIExpandDetail>
           )}
-        </UIPropertyMain>
+        </UITreeItemMain>
         {showCollapse && (
           <UICollapsible $collapse={collapse}>
-            <UIProperties $shrink={true}>
+            <UITreeItems $shrink={true}>
               {propertyList.map((_property, index) => (
                 <PropertyEdit
                   readonly={readonly}
@@ -257,8 +228,6 @@ function PropertyEdit(props: {
                   value={_property}
                   config={config}
                   $level={$level + 1} // 传递递增的层级
-                  $parentExpand={expand}
-                  $parentType={type}
                   onChange={(_v) => {
                     onEditProperty(_property.key!, _v);
                   }}
@@ -266,15 +235,12 @@ function PropertyEdit(props: {
                     onRemoveProperty(_property.key!);
                   }}
                   $isLast={index === propertyList.length - 1}
-                  $isFirst={index === 0}
-                  $index={index}
-                  $showLine={true}
                 />
               ))}
-            </UIProperties>
+            </UITreeItems>
           </UICollapsible>
         )}
-      </UIPropertyRight>
+      </UITreeItemRight>
     </>
   );
 }

package/src/components/json-schema-editor/styles.tsx

@@ -39,37 +39,30 @@ export const UILabel = styled.div`
   margin-bottom: 2px;
 `;
 
-export const UIProperties = styled.div<{ $shrink?: boolean }>`
+export const UITreeItems = styled.div<{ $shrink?: boolean }>`
   display: grid;
   grid-template-columns: auto 1fr;
 
   ${({ $shrink }) =>
     $shrink &&
     css`
-      padding-left: 10px;
+      padding-left: 3px;
       margin-top: 10px;
     `}
 `;
 
-export const UIPropertyLeft = styled.div<{
+export const UITreeItemLeft = styled.div<{
   $isLast?: boolean;
   $showLine?: boolean;
-  $isExpand?: boolean;
-  type?: string;
-  $isFirst?: boolean;
-  $index?: number;
-  $parentExpand?: boolean;
-  $parentType?: string;
+  $showCollapse?: boolean;
 }>`
   grid-column: 1;
   position: relative;
   width: 16px;
 
-  ${({ $showLine, $isLast, $parentType }) => {
-    let height = '100%';
-    if ($parentType && $isLast) {
-      height = '24px';
-    }
+  ${({ $showLine, $isLast, $showCollapse }) => {
+    let height = $isLast ? '24px' : '100%';
+    let width = $showCollapse ? '12px' : '30px';
 
     return (
       $showLine &&
@@ -79,7 +72,7 @@ export const UIPropertyLeft = styled.div<{
           content: '';
           height: ${height};
           position: absolute;
-          left: -22px;
+          left: -14px;
           top: -16px;
           width: 1px;
           background: #d9d9d9;
@@ -90,9 +83,9 @@ export const UIPropertyLeft = styled.div<{
           /* 横线 */
           content: '';
           position: absolute;
-          left: -22px; // 横线起点和竖线对齐
+          left: -14px; // 横线起点和竖线对齐
           top: 8px; // 跟随你的行高调整
-          width: 18px; // 横线长度
+          width: ${width}; // 横线长度
           height: 1px;
           background: #d9d9d9;
           display: block;
@@ -102,7 +95,7 @@ export const UIPropertyLeft = styled.div<{
   }}
 `;
 
-export const UIPropertyRight = styled.div`
+export const UITreeItemRight = styled.div`
   grid-column: 2;
   margin-bottom: 10px;
 
@@ -111,47 +104,11 @@ export const UIPropertyRight = styled.div`
   }
 `;
 
-export const UIPropertyMain = styled.div<{
-  $expand?: boolean;
-  type?: string;
-  $collapse?: boolean;
-  $showCollapse?: boolean;
-}>`
+export const UITreeItemMain = styled.div<{}>`
   display: flex;
   flex-direction: column;
   gap: 10px;
   position: relative;
-
-  ${({ $expand, type, $collapse, $showCollapse }) => {
-    const beforeElement = `
-      &::before {
-        /* 竖线 */
-        content: '';
-        height: 100%;
-        position: absolute;
-        left: -12px;
-        top: 18px;
-        width: 1px;
-        background: #d9d9d9;
-        display: block;
-      }`;
-
-    return (
-      $expand &&
-      css`
-        background-color: #f5f5f5;
-        padding: 10px;
-        border-radius: 4px;
-
-        ${$showCollapse &&
-        $collapse &&
-        (type === 'array' || type === 'object') &&
-        css`
-          ${beforeElement}
-        `}
-      `
-    );
-  }}
 `;
 
 export const UICollapsible = styled.div<{ $collapse?: boolean }>`
@@ -200,35 +157,6 @@ export const DefaultValueWrapper = styled.div`
   margin: 0;
 `;
 
-export const JSONViewerWrapper = styled.div`
-  padding: 0 0 24px;
-  &:first-child {
-    margin-top: 0px;
-  }
-`;
-
-export const JSONHeader = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: var(--semi-color-fill-0);
-  border-radius: 6px 6px 0 0;
-  height: 36px;
-  padding: 0 8px 0 12px;
-`;
-
-export const JSONHeaderLeft = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
-
-export const JSONHeaderRight = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
-
 export const ConstantInputWrapper = styled.div`
   flex-grow: 1;
 

package/src/components/json-schema-editor/types.ts

@@ -22,5 +22,4 @@ export interface ConfigType {
   defaultValueTitle?: string;
   defaultValuePlaceholder?: string;
   addButtonText?: string;
-  jsonFormatText?: string;
 }

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

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useEffect, useRef } from 'react';
+
+import {
+  Renderer,
+  EditorProvider,
+  ActiveLinePlaceholder,
+  InferValues,
+} from '@coze-editor/editor/react';
+import preset, { EditorAPI } from '@coze-editor/editor/preset-prompt';
+
+import { PropsType } from './types';
+import { UIContainer } from './styles';
+import MarkdownHighlight from './extensions/markdown';
+import LanguageSupport from './extensions/language-support';
+import JinjaHighlight from './extensions/jinja';
+
+type Preset = typeof preset;
+type Options = Partial<InferValues<Preset[number]>>;
+
+export interface PromptEditorPropsType extends PropsType {
+  options?: Options;
+}
+
+export function PromptEditor(props: PromptEditorPropsType) {
+  const {
+    value,
+    onChange,
+    readonly,
+    placeholder,
+    activeLinePlaceholder,
+    style,
+    hasError,
+    children,
+    disableMarkdownHighlight,
+    options,
+  } = props || {};
+
+  const editorRef = useRef<EditorAPI | null>(null);
+
+  useEffect(() => {
+    // listen to value change
+    if (editorRef.current?.getValue() !== value?.content) {
+      editorRef.current?.setValue(String(value?.content || ''));
+    }
+  }, [value]);
+
+  return (
+    <UIContainer $hasError={hasError} style={style}>
+      <EditorProvider>
+        <Renderer
+          didMount={(editor: EditorAPI) => {
+            editorRef.current = editor;
+          }}
+          plugins={preset}
+          defaultValue={String(value?.content)}
+          options={{
+            readOnly: readonly,
+            editable: !readonly,
+            placeholder,
+            ...options,
+          }}
+          onChange={(e) => {
+            onChange({ type: 'template', content: e.value });
+          }}
+        />
+        {activeLinePlaceholder && (
+          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
+        )}
+        {!disableMarkdownHighlight && <MarkdownHighlight />}
+        <LanguageSupport />
+        <JinjaHighlight />
+        {children}
+      </EditorProvider>
+    </UIContainer>
+  );
+}

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

@@ -3,67 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useEffect, useRef } from 'react';
+import { lazySuspense } from '@/shared';
 
-import { Renderer, EditorProvider, ActiveLinePlaceholder } from '@coze-editor/editor/react';
-import preset, { EditorAPI } from '@coze-editor/editor/preset-prompt';
+export const PromptEditor = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.PromptEditor }))
+);
 
-import { PropsType } from './types';
-import { UIContainer } from './styles';
-import MarkdownHighlight from './extensions/markdown';
-import LanguageSupport from './extensions/language-support';
-import JinjaHighlight from './extensions/jinja';
-
-export type PromptEditorPropsType = PropsType;
-
-export function PromptEditor(props: PropsType) {
-  const {
-    value,
-    onChange,
-    readonly,
-    placeholder,
-    activeLinePlaceholder,
-    style,
-    hasError,
-    children,
-    disableMarkdownHighlight,
-  } = props || {};
-
-  const editorRef = useRef<EditorAPI | null>(null);
-
-  useEffect(() => {
-    // listen to value change
-    if (editorRef.current?.getValue() !== value?.content) {
-      editorRef.current?.setValue(String(value?.content || ''));
-    }
-  }, [value]);
-
-  return (
-    <UIContainer $hasError={hasError} style={style}>
-      <EditorProvider>
-        <Renderer
-          didMount={(editor: EditorAPI) => {
-            editorRef.current = editor;
-          }}
-          plugins={preset}
-          defaultValue={String(value?.content)}
-          options={{
-            readOnly: readonly,
-            editable: !readonly,
-            placeholder,
-          }}
-          onChange={(e) => {
-            onChange({ type: 'template', content: e.value });
-          }}
-        />
-        {activeLinePlaceholder && (
-          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
-        )}
-        {!disableMarkdownHighlight && <MarkdownHighlight />}
-        <LanguageSupport />
-        <JinjaHighlight />
-        {children}
-      </EditorProvider>
-    </UIContainer>
-  );
-}
+export type { PromptEditorPropsType } from './editor';

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

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

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

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+
+import { InputsTree } from './extensions/inputs-tree';
+
+export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
+  inputsValues: any;
+}
+
+export function PromptEditorWithInputs({
+  inputsValues,
+  ...restProps
+}: PromptEditorWithInputsProps) {
+  return (
+    <PromptEditor {...restProps}>
+      <InputsTree inputsValues={inputsValues} />
+    </PromptEditor>
+  );
+}

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

@@ -15,8 +15,9 @@ import {
 } from '@coze-editor/editor/react';
 import { EditorAPI } from '@coze-editor/editor/preset-prompt';
 
+import { IFlowValue } from '@/typings';
+
 import { InputsPicker } from '../inputs-picker';
-import { IFlowValue } from '../../../typings';
 
 export function InputsTree({ inputsValues }: { inputsValues: Record<string, IFlowValue> }) {
   const [posKey, setPosKey] = useState('');
@@ -31,6 +32,17 @@ export function InputsTree({ inputsValues }: { inputsValues: Record<string, IFlo
       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 + '}}',

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

@@ -3,20 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React from 'react';
+import { lazySuspense } from '@/shared';
 
-import { InputsTree } from './extensions/inputs-tree';
-import { PromptEditor, PromptEditorPropsType } from '../prompt-editor';
-import { IFlowValue } from '../../typings';
+export const PromptEditorWithInputs = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.PromptEditorWithInputs }))
+);
 
-interface PropsType extends PromptEditorPropsType {
-  inputsValues: Record<string, IFlowValue>;
-}
-
-export function PromptEditorWithInputs({ inputsValues, ...restProps }: PropsType) {
-  return (
-    <PromptEditor {...restProps}>
-      <InputsTree inputsValues={inputsValues} />
-    </PromptEditor>
-  );
-}
+export type { PromptEditorWithInputsProps } from './editor';