@flowgram.ai/form-materials 0.5.4 → 0.5.6

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

@@ -21,26 +21,12 @@ import { InjectTypeSelector } from '@/components/type-selector';
 import { BlurInput } from '@/components/blur-input';
 
 import { ConfigType, PropertyValueType } from './types';
-import {
-  IconAddChildren,
-  UIActions,
-  UICollapseTrigger,
-  UICollapsible,
-  UIContainer,
-  UIExpandDetail,
-  UILabel,
-  UITreeItems,
-  UITreeItemLeft,
-  UITreeItemMain,
-  UITreeItemRight,
-  UIRequired,
-  UIType,
-} from './styles';
-import { UIName } from './styles';
-import { DefaultValueWrapper, UIRow } from './styles';
+import { IconAddChildren } from './icon';
 import { usePropertiesEdit } from './hooks';
 import { DefaultValue } from './default-value';
 
+import './styles.css';
+
 const DEFAULT = { type: 'object' };
 
 export function JsonSchemaEditor(props: {
@@ -57,8 +43,8 @@ export function JsonSchemaEditor(props: {
   );
 
   return (
-    <UIContainer className={props.className}>
-      <UITreeItems>
+    <div className="gedit-m-json-schema-editor-container">
+      <div className="gedit-m-json-schema-editor-tree-items">
         {propertyList.map((_property) => (
           <PropertyEdit
             readonly={readonly}
@@ -73,7 +59,7 @@ export function JsonSchemaEditor(props: {
             }}
           />
         ))}
-      </UITreeItems>
+      </div>
       <Button
         disabled={readonly}
         size="small"
@@ -83,7 +69,7 @@ export function JsonSchemaEditor(props: {
       >
         {config?.addButtonText ?? I18n.t('Add')}
       </Button>
-    </UIContainer>
+    </div>
   );
 }
 
@@ -119,17 +105,24 @@ function PropertyEdit(props: {
 
   return (
     <>
-      <UITreeItemLeft $isLast={$isLast} $showLine={$level > 0} $showCollapse={showCollapse}>
+      <div
+        className={`gedit-m-json-schema-editor-tree-item-left ${$level > 0 ? 'show-line' : ''} ${
+          $isLast ? 'is-last' : ''
+        } ${showCollapse ? 'show-collapse' : ''}`}
+      >
         {showCollapse && (
-          <UICollapseTrigger onClick={() => setCollapse((_collapse) => !_collapse)}>
+          <div
+            className="gedit-m-json-schema-editor-collapse-trigger"
+            onClick={() => setCollapse((_collapse) => !_collapse)}
+          >
             {collapse ? <IconChevronDown size="small" /> : <IconChevronRight size="small" />}
-          </UICollapseTrigger>
+          </div>
         )}
-      </UITreeItemLeft>
-      <UITreeItemRight>
-        <UITreeItemMain>
-          <UIRow>
-            <UIName>
+      </div>
+      <div className="gedit-m-json-schema-editor-tree-item-right">
+        <div className="gedit-m-json-schema-editor-tree-item-main">
+          <div className="gedit-m-json-schema-editor-row">
+            <div className="gedit-m-json-schema-editor-name">
               <BlurInput
                 disabled={readonly}
                 placeholder={config?.placeholder ?? I18n.t('Input Variable Name')}
@@ -137,8 +130,8 @@ function PropertyEdit(props: {
                 value={name}
                 onChange={(value) => onChange('name', value)}
               />
-            </UIName>
-            <UIType>
+            </div>
+            <div className="gedit-m-json-schema-editor-type">
               <InjectTypeSelector
                 value={typeSelectorValue}
                 readonly={readonly}
@@ -149,15 +142,15 @@ function PropertyEdit(props: {
                   });
                 }}
               />
-            </UIType>
-            <UIRequired>
+            </div>
+            <div className="gedit-m-json-schema-editor-required">
               <Checkbox
                 disabled={readonly}
                 checked={isPropertyRequired}
                 onChange={(e) => onChange('isPropertyRequired', e.target.checked)}
               />
-            </UIRequired>
-            <UIActions>
+            </div>
+            <div className="gedit-m-json-schema-editor-actions">
               <IconButton
                 disabled={readonly}
                 size="small"
@@ -186,11 +179,13 @@ function PropertyEdit(props: {
                 icon={<IconMinus size="small" />}
                 onClick={onRemove}
               />
-            </UIActions>
-          </UIRow>
+            </div>
+          </div>
           {expand && (
-            <UIExpandDetail>
-              <UILabel>{config?.descTitle ?? I18n.t('Description')}</UILabel>
+            <div className="gedit-m-json-schema-editor-expand-detail">
+              <div className="gedit-m-json-schema-editor-label">
+                {config?.descTitle ?? I18n.t('Description')}
+              </div>
               <BlurInput
                 disabled={readonly}
                 size="small"
@@ -202,25 +197,25 @@ function PropertyEdit(props: {
               />
               {$level === 0 && (
                 <>
-                  <UILabel style={{ marginTop: 10 }}>
+                  <div className="gedit-m-json-schema-editor-label" style={{ marginTop: 10 }}>
                     {config?.defaultValueTitle ?? I18n.t('Default Value')}
-                  </UILabel>
-                  <DefaultValueWrapper>
+                  </div>
+                  <div className="gedit-m-json-schema-editor-default-value-wrapper">
                     <DefaultValue
                       value={defaultValue}
                       schema={value}
                       placeholder={config?.defaultValuePlaceholder ?? I18n.t('Default Value')}
                       onChange={(value) => onChange('default', value)}
                     />
-                  </DefaultValueWrapper>
+                  </div>
                 </>
               )}
-            </UIExpandDetail>
+            </div>
           )}
-        </UITreeItemMain>
+        </div>
         {showCollapse && (
-          <UICollapsible $collapse={collapse}>
-            <UITreeItems $shrink={true}>
+          <div className={`gedit-m-json-schema-editor-collapsible ${collapse ? 'collapse' : ''}`}>
+            <div className="gedit-m-json-schema-editor-tree-items shrink">
               {propertyList.map((_property, index) => (
                 <PropertyEdit
                   readonly={readonly}
@@ -237,10 +232,10 @@ function PropertyEdit(props: {
                   $isLast={index === propertyList.length - 1}
                 />
               ))}
-            </UITreeItems>
-          </UICollapsible>
+            </div>
+          </div>
         )}
-      </UITreeItemRight>
+      </div>
     </>
   );
 }

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

@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-json-schema-editor-container {
+  /* & .semi-input {
+    background-color: #fff;
+    border-radius: 6px;
+    height: 24px;
+  } */
+}
+
+.gedit-m-json-schema-editor-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.gedit-m-json-schema-editor-collapse-trigger {
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.gedit-m-json-schema-editor-expand-detail {
+  display: flex;
+  flex-direction: column;
+}
+
+.gedit-m-json-schema-editor-label {
+  font-size: 12px;
+  color: #999;
+  font-weight: 400;
+  margin-bottom: 2px;
+}
+
+.gedit-m-json-schema-editor-tree-items {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.gedit-m-json-schema-editor-tree-items.shrink {
+  padding-left: 3px;
+  margin-top: 10px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left {
+  grid-column: 1;
+  position: relative;
+  width: 16px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line::before {
+  /* 竖线 */
+  content: "";
+  height: var(--line-height, 100%);
+  position: absolute;
+  left: -14px;
+  top: -16px;
+  width: 1px;
+  background: #d9d9d9;
+  display: block;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line::after {
+  /* 横线 */
+  content: "";
+  position: absolute;
+  left: -14px; /* 横线起点和竖线对齐 */
+  top: 8px; /* 跟随你的行高调整 */
+  width: var(--line-width, 30px); /* 横线长度 */
+  height: 1px;
+  background: #d9d9d9;
+  display: block;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line.is-last::before {
+  height: 24px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line.show-collapse::after {
+  width: 12px;
+}
+
+.gedit-m-json-schema-editor-tree-item-right {
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+}
+
+.gedit-m-json-schema-editor-tree-item-main {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+}
+
+.gedit-m-json-schema-editor-collapsible {
+  display: none;
+}
+
+.gedit-m-json-schema-editor-collapsible.collapse {
+  display: block;
+}
+
+.gedit-m-json-schema-editor-name {
+  flex-grow: 1;
+}
+
+.gedit-m-json-schema-editor-type {
+}
+
+.gedit-m-json-schema-editor-required {
+}
+
+.gedit-m-json-schema-editor-actions {
+  white-space: nowrap;
+}
+
+.gedit-m-json-schema-editor-default-value-wrapper {
+  margin: 0;
+}
+
+.gedit-m-json-schema-editor-constant-input-wrapper {
+  flex-grow: 1;
+
+  & .semi-tree-select,
+  & .semi-input-number,
+  & .semi-select {
+    width: 100%;
+  }
+}

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

@@ -14,11 +14,12 @@ import {
 import preset, { EditorAPI } from '@flowgram.ai/coze-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';
 
+import './styles.css';
+
 type Preset = typeof preset;
 type Options = Partial<InferValues<Preset[number]>>;
 
@@ -42,22 +43,32 @@ export function PromptEditor(props: PromptEditorPropsType) {
 
   const editorRef = useRef<EditorAPI | null>(null);
 
+  const editorValue = String(value?.content || '');
+
   useEffect(() => {
     // listen to value change
-    if (editorRef.current?.getValue() !== value?.content) {
-      editorRef.current?.setValue(String(value?.content || ''));
+    if (editorRef.current?.getValue() !== editorValue) {
+      // apply updates on readonly mode
+      const editorView = editorRef.current?.$view;
+      editorView?.dispatch({
+        changes: {
+          from: 0,
+          to: editorView?.state.doc.length,
+          insert: editorValue,
+        },
+      });
     }
-  }, [value]);
+  }, [editorValue]);
 
   return (
-    <UIContainer $hasError={hasError} style={style}>
+    <div className={`gedit-m-prompt-editor-container ${hasError ? 'has-error' : ''}`} style={style}>
       <EditorProvider>
         <Renderer
           didMount={(editor: EditorAPI) => {
             editorRef.current = editor;
           }}
           plugins={preset}
-          defaultValue={String(value?.content)}
+          defaultValue={editorValue}
           options={{
             readOnly: readonly,
             editable: !readonly,
@@ -76,6 +87,6 @@ export function PromptEditor(props: PromptEditorPropsType) {
         <JinjaHighlight />
         {children}
       </EditorProvider>
-    </UIContainer>
+    </div>
   );
 }

package/src/components/prompt-editor/styles.css

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-prompt-editor-container {
+  background-color: var(--semi-color-fill-0);
+  padding-left: 10px;
+  padding-right: 6px;
+}
+
+.gedit-m-prompt-editor-container.has-error {
+  border: 1px solid var(--semi-color-danger-6);
+}

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

@@ -3,10 +3,23 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { lazySuspense } from '@/shared';
+import React from 'react';
 
-export const PromptEditorWithInputs = lazySuspense(() =>
-  import('./editor').then((module) => ({ default: module.PromptEditorWithInputs }))
-);
+import type { IInputsValues } from '@/shared/flow-value';
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+import { EditorInputsTree } from '@/components/coze-editor-extensions';
 
-export type { PromptEditorWithInputsProps } from './editor';
+export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
+  inputsValues: IInputsValues;
+}
+
+export function PromptEditorWithInputs({
+  inputsValues,
+  ...restProps
+}: PromptEditorWithInputsProps) {
+  return (
+    <PromptEditor {...restProps}>
+      <EditorInputsTree inputsValues={inputsValues} />
+    </PromptEditor>
+  );
+}

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

@@ -3,10 +3,18 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { lazySuspense } from '@/shared';
+import React from 'react';
 
-export const PromptEditorWithVariables = lazySuspense(() =>
-  import('./editor').then((module) => ({ default: module.PromptEditorWithVariables }))
-);
+import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
+import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
 
-export type { PromptEditorWithVariablesProps } from './editor';
+export interface PromptEditorWithVariablesProps extends PromptEditorPropsType {}
+
+export function PromptEditorWithVariables(props: PromptEditorWithVariablesProps) {
+  return (
+    <PromptEditor {...props}>
+      <EditorVariableTree />
+      <EditorVariableTagInject />
+    </PromptEditor>
+  );
+}

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

@@ -5,10 +5,19 @@
 
 import React, { createContext, useContext, useMemo } from 'react';
 
+import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { BaseVariableField } from '@flowgram.ai/editor';
 
+type VariableField = BaseVariableField<{
+  icon?: string | JSX.Element;
+  title?: string;
+  disabled?: boolean;
+}>;
+
 export const VariableSelectorContext = createContext<{
-  skipVariable?: (variable?: BaseVariableField) => boolean;
+  includeSchema?: IJsonSchema | IJsonSchema[];
+  excludeSchema?: IJsonSchema | IJsonSchema[];
+  skipVariable?: (variable: VariableField) => boolean;
 }>({});
 
 export const useVariableSelectorContext = () => useContext(VariableSelectorContext);
@@ -16,11 +25,22 @@ export const useVariableSelectorContext = () => useContext(VariableSelectorConte
 export const VariableSelectorProvider = ({
   children,
   skipVariable,
+  includeSchema,
+  excludeSchema,
 }: {
   skipVariable?: (variable?: BaseVariableField) => boolean;
+  includeSchema?: IJsonSchema | IJsonSchema[];
+  excludeSchema?: IJsonSchema | IJsonSchema[];
   children: React.ReactNode;
 }) => {
-  const context = useMemo(() => ({ skipVariable }), [skipVariable]);
+  const context = useMemo(
+    () => ({
+      skipVariable,
+      includeSchema,
+      excludeSchema,
+    }),
+    [skipVariable, includeSchema, excludeSchema]
+  );
 
   return (
     <VariableSelectorContext.Provider value={context}>{children}</VariableSelectorContext.Provider>

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

@@ -9,15 +9,16 @@ import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { I18n } from '@flowgram.ai/editor';
 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 { Popover, Tag, TreeSelect } from '@douyinfe/semi-ui';
 import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
 import { createInjectMaterial } from '@/shared';
 
 import { useVariableTree } from './use-variable-tree';
-import { UIPopoverContent, UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
 import { useVariableSelectorContext } from './context';
 
+import './styles.css';
+
 export interface VariableSelectorProps {
   value?: string[];
   config?: {
@@ -75,62 +76,71 @@ export const VariableSelector = ({
 
   return (
     <>
-      <UITreeSelect
+      <TreeSelect
+        className={`gedit-m-variable-selector-tree-select ${hasError ? 'error' : ''}`}
         dropdownMatchSelectWidth={false}
         disabled={readonly}
         treeData={treeData}
         size="small"
         value={treeValue}
         clearIcon={null}
-        $error={hasError}
         style={style}
         validateStatus={hasError ? 'error' : undefined}
+        dropdownClassName="gedit-m-variable-selector-dropdown"
         onChange={(_, _config) => {
           onChange((_config as TreeNodeData).keyPath as string[]);
         }}
         renderSelectedItem={(_option: TreeNodeData) => {
           if (!_option?.keyPath) {
             return (
-              <UITag
+              <Tag
+                className="gedit-m-variable-selector-tag"
                 prefixIcon={<IconIssueStroked />}
                 color="amber"
                 closable={!readonly}
                 onClose={() => onChange(undefined)}
               >
                 {config?.notFoundContent ?? 'Undefined'}
-              </UITag>
+              </Tag>
             );
           }
 
           const rootIcon = renderIcon(_option.rootMeta?.icon || _option?.icon);
 
           const rootTitle = (
-            <UIRootTitle>
+            <div className="gedit-m-variable-selector-root-title">
               {_option.rootMeta?.title
                 ? `${_option.rootMeta?.title} ${_option.isRoot ? '' : '-'} `
                 : null}
-            </UIRootTitle>
+            </div>
           );
 
           return (
             <div>
               <Popover
                 content={
-                  <UIPopoverContent>
+                  <div className="gedit-m-variable-selector-tag-pop">
                     {rootIcon}
                     {rootTitle}
-                    <UIVarName>{_option.keyPath.slice(1).join('.')}</UIVarName>
-                  </UIPopoverContent>
+                    <div className="gedit-m-variable-selector-var-name">
+                      {_option.keyPath.slice(1).join('.')}
+                    </div>
+                  </div>
                 }
               >
-                <UITag
+                <Tag
+                  className="gedit-m-variable-selector-tag"
                   prefixIcon={rootIcon}
                   closable={!readonly}
                   onClose={() => onChange(undefined)}
                 >
                   {rootTitle}
-                  {!_option.isRoot && <UIVarName $inSelector>{_option.label}</UIVarName>}
-                </UITag>
+                  {!_option.isRoot && (
+                    <div className="gedit-m-variable-selector-var-name in-selector">
+                      {_option.label}
+                    </div>
+                  )}
+                </Tag>
               </Popover>
             </div>
           );

package/src/components/variable-selector/styles.css

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-variable-selector-root-title {
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+}
+
+.gedit-m-variable-selector-var-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.in-selector {
+    min-width: 50%;
+  }
+}
+
+.gedit-m-variable-selector-tag {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0;
+  height: 22px;
+
+  .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+}
+
+.gedit-m-variable-selector-tree-select {
+  outline: none;
+
+  &.error {
+    outline: 1px solid red;
+  }
+
+  .semi-tree-select-selection {
+    padding: 0px;
+    height: 22px;
+  }
+
+  .semi-tree-select-selection-content {
+    width: 100%;
+  }
+
+  .semi-tree-select-selection-placeholder {
+    padding-left: 10px;
+  }
+}
+
+.gedit-m-variable-selector-tag-pop {
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+}
+
+.gedit-m-variable-selector-dropdown {
+  max-height: 300px;
+  overflow: auto;
+}