fix(material): default constant string (#710)

* fix(material): default constant string

* fix: point events of disabled type selector

* fix: uselss import

* fix(material): replace all bracket when mention a variable

apps/demo-free-layout/src/nodes/default-form-meta.tsx

@@ -3,12 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import {
-  FormRenderProps,
-  FormMeta,
-  ValidateTrigger,
-  getNodeScope,
-} from '@flowgram.ai/free-layout-editor';
+import { FormRenderProps, FormMeta, ValidateTrigger } from '@flowgram.ai/free-layout-editor';
 import {
   autoRenameRefEffect,
   provideJsonSchemaOutputs,

packages/materials/form-materials/src/components/dynamic-value-input/index.tsx

@@ -5,11 +5,16 @@
 
 import React from 'react';
 
-import { JsonSchemaUtils, IJsonSchema } from '@flowgram.ai/json-schema';
+import {
+  JsonSchemaUtils,
+  IJsonSchema,
+  useTypeManager,
+  type JsonSchemaTypeManager,
+} from '@flowgram.ai/json-schema';
 import { IconButton } from '@douyinfe/semi-ui';
 import { IconSetting } from '@douyinfe/semi-icons';
 
-import { IFlowConstantRefValue } from '@/typings';
+import { IFlowConstantRefValue, IFlowConstantValue } from '@/typings';
 import { createInjectMaterial } from '@/shared';
 import { InjectVariableSelector } from '@/components/variable-selector';
 import { TypeSelector } from '@/components/type-selector';
@@ -32,6 +37,12 @@ interface PropsType {
   };
 }
 
+const DEFAULT_VALUE: IFlowConstantValue = {
+  type: 'constant',
+  content: '',
+  schema: { type: 'string' },
+};
+
 export function DynamicValueInput({
   value,
   onChange,
@@ -44,6 +55,8 @@ export function DynamicValueInput({
   const [selectSchema, setSelectSchema] = useSelectSchema(schemaFromProps, constantProps, value);
   const includeSchema = useIncludeSchema(schemaFromProps);
 
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
+
   const renderTypeSelector = () => {
     if (schemaFromProps) {
       return <TypeSelector value={schemaFromProps} readonly={true} />;
@@ -60,24 +73,20 @@ export function DynamicValueInput({
         value={selectSchema}
         onChange={(_v) => {
           setSelectSchema(_v || { type: 'string' });
-          let content;
 
+          const schema = _v || { type: 'string' };
+          let content = typeManager.getDefaultValue(schema);
           if (_v?.type === 'object') {
             content = '{}';
           }
-
           if (_v?.type === 'array') {
             content = '[]';
           }
 
-          if (_v?.type === 'boolean') {
-            content = false;
-          }
-
           onChange({
             type: 'constant',
             content,
-            schema: _v || { type: 'string' },
+            schema,
           });
         }}
         readonly={readonly}
@@ -92,7 +101,7 @@ export function DynamicValueInput({
         <InjectVariableSelector
           style={{ width: '100%' }}
           value={value?.content}
-          onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
+          onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : DEFAULT_VALUE)}
           includeSchema={includeSchema}
           readonly={readonly}
         />
@@ -110,7 +119,7 @@ export function DynamicValueInput({
         fallbackRenderer={() => (
           <InjectVariableSelector
             style={{ width: '100%' }}
-            onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
+            onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : DEFAULT_VALUE)}
             includeSchema={includeSchema}
             readonly={readonly}
           />

packages/materials/form-materials/src/components/inputs-values-tree/hooks/use-child-list.tsx

@@ -23,7 +23,7 @@ export function useChildList(
   canAddField: boolean;
   hasChildren: boolean;
   list: ListItem[];
-  add: (key?: string) => void;
+  add: (defaultValue?: any) => void;
   updateKey: (id: string, key: string) => void;
   updateValue: (id: string, value: any) => void;
   remove: (id: string) => void;

packages/materials/form-materials/src/components/inputs-values-tree/index.tsx

@@ -47,7 +47,13 @@ export function InputsValuesTree(props: PropsType) {
         disabled={readonly}
         icon={<IconPlus />}
         size="small"
-        onClick={add}
+        onClick={() => {
+          add({
+            type: 'constant',
+            content: '',
+            schema: { type: 'string' },
+          });
+        }}
       >
         {I18n.t('Add')}
       </Button>

packages/materials/form-materials/src/components/inputs-values-tree/row.tsx

@@ -125,7 +125,11 @@ export function InputValueRow(
                   theme="borderless"
                   icon={<IconAddChildren />}
                   onClick={() => {
-                    add();
+                    add({
+                      type: 'constant',
+                      content: '',
+                      schema: { type: 'string' },
+                    });
                     setCollapse(true);
                   }}
                 />

packages/materials/form-materials/src/components/inputs-values/index.tsx

@@ -67,7 +67,18 @@ export function InputsValues({
           </UIRow>
         ))}
       </UIRows>
-      <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={() => add()}>
+      <Button
+        disabled={readonly}
+        icon={<IconPlus />}
+        size="small"
+        onClick={() =>
+          add({
+            type: 'constant',
+            content: '',
+            schema: { type: 'string' },
+          })
+        }
+      >
         {I18n.t('Add')}
       </Button>
     </div>

packages/materials/form-materials/src/components/prompt-editor-with-inputs/extensions/inputs-tree.tsx

@@ -32,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 + '}}',

packages/materials/form-materials/src/components/prompt-editor-with-variables/extensions/variable-tree.tsx

@@ -30,8 +30,20 @@ export function VariableTree() {
       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,
+      from,
+      to,
       text: '{{' + variablePath + '}}',
     });
 

packages/materials/form-materials/src/components/type-selector/index.tsx

@@ -86,12 +86,22 @@ export function TypeSelector(props: TypeSelectorProps) {
     []
   );
 
+  const isDisabled = readonly || disabled;
+
   return (
     <Cascader
-      disabled={readonly || disabled}
+      disabled={isDisabled}
       size="small"
       triggerRender={() => (
-        <IconButton size="small" style={style} disabled={readonly || disabled} icon={icon} />
+        <IconButton
+          size="small"
+          style={{
+            ...(isDisabled ? { pointerEvents: 'none' } : {}),
+            ...(style || {}),
+          }}
+          disabled={isDisabled}
+          icon={icon}
+        />
       )}
       treeData={options}
       value={selectValue}

packages/materials/form-materials/src/typings/flow-value/index.ts

@@ -13,7 +13,7 @@ export type FlowValueType = 'constant' | 'ref' | 'expression' | 'template';
 
 export interface IFlowConstantValue {
   type: 'constant';
-  content?: string | number | boolean;
+  content?: any;
   schema?: IJsonSchema;
   extra?: IFlowValueExtra;
 }

packages/variable-engine/json-schema/src/json-schema/json-schema-type-manager.tsx

@@ -138,4 +138,9 @@ export class JsonSchemaTypeManager<
     const registry = this.getTypeBySchema(type);
     return registry?.canAddField(type);
   };
+
+  public getDefaultValue = (type: Schema) => {
+    const registry = this.getTypeBySchema(type);
+    return registry?.getDefaultValue();
+  };
 }