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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.1.0-alpha.12",
+  "version": "0.1.0-alpha.14",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -24,21 +24,22 @@
     "@douyinfe/semi-icons": "^2.80.0",
     "@douyinfe/semi-illustrations": "^2.80.0",
     "@douyinfe/semi-ui": "^2.80.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "nanoid": "^4.0.2",
     "commander": "^11.0.0",
     "chalk": "^5.3.0",
     "inquirer": "^9.2.7",
     "immer": "~10.1.1",
-    "@coze-editor/editor": "0.1.0-alpha.879fbb",
+    "@coze-editor/editor": "0.1.0-alpha.5a549c",
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "typescript": "^5.8.3",
-    "@flowgram.ai/editor": "0.1.0-alpha.12",
-    "@flowgram.ai/json-schema": "0.1.0-alpha.12"
+    "zod": "^3.24.4",
+    "@flowgram.ai/editor": "0.1.0-alpha.14",
+    "@flowgram.ai/json-schema": "0.1.0-alpha.14"
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.137",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^18",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -51,8 +52,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.1.0-alpha.12",
-    "@flowgram.ai/ts-config": "0.1.0-alpha.12"
+    "@flowgram.ai/eslint-config": "0.1.0-alpha.14",
+    "@flowgram.ai/ts-config": "0.1.0-alpha.14"
   },
   "peerDependencies": {
     "react": ">=16.8",

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

@@ -9,11 +9,11 @@ import { IconButton } from '@douyinfe/semi-ui';
 import { IconMinus } from '@douyinfe/semi-icons';
 
 import { IFlowConstantRefValue } from '@/typings';
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
 
 import { AssignRowProps } from './types';
 import { BlurInput } from './components/blur-input';
-import { VariableSelector } from '../variable-selector';
-import { DynamicValueInput } from '../dynamic-value-input';
 
 export function AssignRow(props: AssignRowProps) {
   const {
@@ -29,7 +29,7 @@ export function AssignRow(props: AssignRowProps) {
     <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
       <div style={{ width: 150, minWidth: 150, maxWidth: 150 }}>
         {value?.operator === 'assign' ? (
-          <VariableSelector
+          <InjectVariableSelector
             style={{ width: '100%', height: 26 }}
             value={value?.left?.content}
             config={{ placeholder: 'Select Left' }}
@@ -56,7 +56,7 @@ export function AssignRow(props: AssignRowProps) {
         )}
       </div>
       <div style={{ flexGrow: 1 }}>
-        <DynamicValueInput
+        <InjectDynamicValueInput
           readonly={readonly}
           value={value?.right as IFlowConstantRefValue | undefined}
           onChange={(v) =>

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

@@ -9,7 +9,7 @@ import { FieldArray, FieldArrayRenderProps } from '@flowgram.ai/editor';
 import { Button } from '@douyinfe/semi-ui';
 import { IconPlus } from '@douyinfe/semi-icons';
 
-import { AssignRow, AssignValueType } from '../assign-row';
+import { AssignRow, AssignValueType } from '@/components/assign-row';
 
 interface AssignRowsProps {
   name: string;

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

@@ -5,12 +5,14 @@
 
 import React from 'react';
 
+import { I18n } from '@flowgram.ai/editor';
 import { Button, Input } from '@douyinfe/semi-ui';
 import { IconDelete, IconPlus } from '@douyinfe/semi-icons';
 
+import { useObjectList } from '@/hooks';
+import { InjectVariableSelector } from '@/components/variable-selector';
+
 import { PropsType } from './types';
-import { VariableSelector } from '../variable-selector';
-import { useObjectList } from '../../hooks';
 import { UIRow, UIRows } from './styles';
 
 export function BatchOutputs(props: PropsType) {
@@ -30,7 +32,7 @@ export function BatchOutputs(props: PropsType) {
               value={item.key}
               onChange={(v) => updateKey(item.id, v)}
             />
-            <VariableSelector
+            <InjectVariableSelector
               style={{ flexGrow: 1 }}
               readonly={readonly}
               value={item.value?.content}
@@ -45,8 +47,8 @@ export function BatchOutputs(props: PropsType) {
           </UIRow>
         ))}
       </UIRows>
-      <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={add}>
-        Add
+      <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={() => add()}>
+        {I18n.t('Add')}
       </Button>
     </div>
   );

package/src/components/batch-outputs/types.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue } from '@/typings';
 
 export type ValueType = Record<string, IFlowRefValue | undefined>;
 

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

@@ -8,7 +8,7 @@ import React from 'react';
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { PrivateScopeProvider } from '@flowgram.ai/editor';
 
-import { VariableSelector, VariableSelectorProps } from '../variable-selector';
+import { VariableSelector, VariableSelectorProps } from '@/components/variable-selector';
 
 const batchVariableSchema: IJsonSchema = {
   type: 'array',

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

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useEffect, useRef } from 'react';
+
+import {
+  ActiveLinePlaceholder,
+  createRenderer,
+  EditorProvider,
+  InferValues,
+} from '@coze-editor/editor/react';
+import preset, { type EditorAPI } from '@coze-editor/editor/preset-code';
+import { EditorView } from '@codemirror/view';
+
+import { getSuffixByLanguageId } from './utils';
+
+import './theme';
+import './language-features';
+
+const OriginCodeEditor = createRenderer(preset, [
+  EditorView.theme({
+    '&.cm-focused': {
+      outline: 'none',
+    },
+  }),
+]);
+
+type Preset = typeof preset;
+type Options = Partial<InferValues<Preset[number]>>;
+
+export interface CodeEditorPropsType extends React.PropsWithChildren<{}> {
+  value?: string;
+  onChange?: (value: string) => void;
+  languageId: 'python' | 'typescript' | 'shell' | 'json';
+  theme?: 'dark' | 'light';
+  placeholder?: string;
+  activeLinePlaceholder?: string;
+  readonly?: boolean;
+  options?: Options;
+}
+
+export function CodeEditor({
+  value,
+  onChange,
+  languageId = 'python',
+  theme = 'light',
+  children,
+  placeholder,
+  activeLinePlaceholder,
+  options,
+  readonly,
+}: CodeEditorPropsType) {
+  const editorRef = useRef<EditorAPI | null>(null);
+
+  useEffect(() => {
+    // listen to value change
+    if (editorRef.current?.getValue() !== value) {
+      editorRef.current?.setValue(String(value || ''));
+    }
+  }, [value]);
+
+  return (
+    <EditorProvider>
+      <OriginCodeEditor
+        defaultValue={String(value || '')}
+        options={{
+          uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
+          languageId,
+          theme,
+          placeholder,
+          readOnly: readonly,
+          editable: !readonly,
+          ...(options || {}),
+        }}
+        didMount={(editor: EditorAPI) => {
+          editorRef.current = editor;
+        }}
+        onChange={(e) => onChange?.(e.value)}
+      >
+        {activeLinePlaceholder && (
+          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
+        )}
+        {children}
+      </OriginCodeEditor>
+    </EditorProvider>
+  );
+}

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

@@ -3,94 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useEffect, useRef } from 'react';
+import { lazySuspense } from '@/shared';
 
-import {
-  ActiveLinePlaceholder,
-  createRenderer,
-  EditorProvider,
-  InferValues,
-} from '@coze-editor/editor/react';
-import preset, { type EditorAPI } from '@coze-editor/editor/preset-code';
-import { EditorView } from '@codemirror/view';
+export const CodeEditor = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.CodeEditor }))
+);
 
-import { getSuffixByLanguageId } from './utils';
-import { initTsWorker } from './language-features';
-
-import './theme';
-import './language-features';
-
-const OriginCodeEditor = createRenderer(preset, [
-  EditorView.theme({
-    '&.cm-focused': {
-      outline: 'none',
-    },
-  }),
-]);
-
-type Preset = typeof preset;
-type Options = Partial<InferValues<Preset[number]>>;
-
-export interface CodeEditorPropsType extends React.PropsWithChildren<{}> {
-  value?: string;
-  onChange?: (value: string) => void;
-  languageId: 'python' | 'typescript' | 'shell' | 'json';
-  theme?: 'dark' | 'light';
-  placeholder?: string;
-  activeLinePlaceholder?: string;
-  readonly?: boolean;
-  options?: Options;
-}
-
-export function CodeEditor({
-  value,
-  onChange,
-  languageId = 'python',
-  theme = 'light',
-  children,
-  placeholder,
-  activeLinePlaceholder,
-  options,
-  readonly,
-}: CodeEditorPropsType) {
-  const editorRef = useRef<EditorAPI | null>(null);
-
-  useEffect(() => {
-    if (languageId === 'typescript') {
-      initTsWorker();
-    }
-  }, [languageId]);
-
-  useEffect(() => {
-    // listen to value change
-    if (editorRef.current?.getValue() !== value) {
-      editorRef.current?.setValue(String(value || ''));
-    }
-  }, [value]);
-
-  return (
-    <EditorProvider>
-      <OriginCodeEditor
-        defaultValue={value}
-        options={{
-          uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
-          languageId,
-          theme,
-          placeholder,
-          readOnly: readonly,
-          editable: !readonly,
-          ...(options || {}),
-        }}
-        didMount={(editor: EditorAPI) => {
-          editorRef.current = editor;
-        }}
-        onChange={(e) => onChange?.(e.value)}
-      >
-        {activeLinePlaceholder && (
-          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
-        )}
-        {children}
-      </OriginCodeEditor>
-    </EditorProvider>
-  );
-}
+export type { CodeEditorPropsType } from './editor';

package/src/components/code-editor/language-features.ts

@@ -22,23 +22,23 @@ languages.register('json', {
   languageService: json.languageService,
 });
 
-let tsWorkerInit = false;
+// let tsWorkerInit = false;
 
-export const initTsWorker = () => {
-  if (tsWorkerInit) {
-    return;
-  }
-  tsWorkerInit = true;
+// export const initTsWorker = () => {
+//   if (tsWorkerInit) {
+//     return;
+//   }
+//   tsWorkerInit = true;
 
-  const tsWorker = new Worker(
-    new URL(`@coze-editor/editor/language-typescript/worker`, import.meta.url),
-    { type: 'module' }
-  );
-  typescript.languageService.initialize(tsWorker, {
-    compilerOptions: {
-      // eliminate Promise error
-      lib: ['es2015', 'dom'],
-      noImplicitAny: false,
-    },
-  });
-};
+//   const tsWorker = new Worker(
+//     new URL(`@coze-editor/editor/language-typescript/worker`, import.meta.url),
+//     { type: 'module' }
+//   );
+//   typescript.languageService.initialize(tsWorker, {
+//     compilerOptions: {
+//       // eliminate Promise error
+//       lib: ['es2015', 'dom'],
+//       noImplicitAny: false,
+//     },
+//   });
+// };

package/src/components/code-editor/theme/dark.ts

@@ -7,55 +7,56 @@ import { createTheme, tags as t } from '@coze-editor/editor/preset-code';
 import { type Extension } from '@codemirror/state';
 
 const colors = {
-  background: '#151B27',
-  // syntax
-  comment: '#FFFFFF63',
-  key: '#39E5D7',
-  string: '#FF94D2',
-  number: '#FF9933',
-  boolean: '#78B0FF',
-  null: '#78B0FF',
-  separator: '#FFFFFFC9',
+  background: '#0D1117',
+  // syntax - 现代化暗色主题配色
+  comment: '#8B949E',
+  key: '#7DD3FC',
+  variable: '#F472B6',
+  string: '#34D399',
+  number: '#FBBF24',
+  boolean: '#A78BFA',
+  null: '#A78BFA',
+  separator: '#E6EDF3',
 };
 
 export const darkTheme: Extension = createTheme({
   variant: 'dark',
   settings: {
     background: colors.background,
-    foreground: '#fff',
-    caret: '#AEAFAD',
-    selection: '#d9d9d942',
+    foreground: '#E6EDF3',
+    caret: '#7DD3FC',
+    selection: '#264F7833',
     gutterBackground: colors.background,
-    gutterForeground: '#FFFFFF63',
+    gutterForeground: '#6E7681',
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
-    lineHighlight: '#272e3d36',
-    bracketColors: ['#FFEF61', '#DD99FF', '#78B0FF'],
+    lineHighlight: '#21262D',
+    bracketColors: ['#FBBF24', '#A78BFA', '#7DD3FC'],
     tooltip: {
-      backgroundColor: '#363D4D',
-      color: '#fff',
-      border: 'none',
+      backgroundColor: '#21262D',
+      color: '#E6EDF3',
+      border: '1px solid #30363D',
     },
     link: {
-      color: '#4daafc',
+      color: '#58A6FF',
     },
     completionItemHover: {
-      backgroundColor: '#FFFFFF0F',
+      backgroundColor: '#21262D',
     },
     completionItemSelected: {
-      backgroundColor: '#FFFFFF17',
+      backgroundColor: '#1F6EEB',
     },
     completionItemIcon: {
-      color: '#FFFFFFC9',
+      color: '#8B949E',
     },
     completionItemLabel: {
-      color: '#FFFFFFC9',
+      color: '#E6EDF3',
     },
     completionItemInfo: {
-      color: '#FFFFFFC9',
+      color: '#8B949E',
     },
     completionItemDetail: {
-      color: '#FFFFFF63',
+      color: '#6E7681',
     },
   },
   styles: [
@@ -89,31 +90,49 @@ export const darkTheme: Extension = createTheme({
       color: colors.separator,
     },
 
+    // js
+    {
+      tag: [t.definitionKeyword],
+      color: '#C084FC',
+    },
+    {
+      tag: [t.modifier],
+      color: '#C084FC',
+    },
+    {
+      tag: [t.controlKeyword],
+      color: '#C084FC',
+    },
+    {
+      tag: [t.operatorKeyword],
+      color: '#C084FC',
+    },
+
     // markdown
     {
       tag: [t.heading],
-      color: '#6b6bff',
+      color: '#7DD3FC',
     },
     {
       tag: [t.processingInstruction],
-      color: '#6b6bff',
+      color: '#7DD3FC',
     },
 
     // shell
     // curl
     {
       tag: [t.standard(t.variableName)],
-      color: '#3BEB84',
+      color: '#34D399',
     },
     // -X
     {
       tag: [t.attributeName],
-      color: '#FF9933',
+      color: '#FBBF24',
     },
     // url in string (includes quotes), e.g. "https://..."
     {
       tag: [t.special(t.string)],
-      color: '#78B0FF',
+      color: '#7DD3FC',
     },
   ],
 });

package/src/components/code-editor/theme/light.ts

@@ -7,55 +7,56 @@ import { createTheme, tags as t } from '@coze-editor/editor/preset-code';
 import { type Extension } from '@codemirror/state';
 
 const colors = {
-  background: '#F7F7FC',
-  // syntax
-  comment: '#000A298A',
-  key: '#00818C',
-  string: '#D1009D',
-  number: '#C74200',
-  boolean: '#2B57D9',
-  null: '#2B57D9',
-  separator: '#0F1529D1',
+  background: '#FFFFFF',
+  comment: '#6B7280',
+  key: '#2563EB',
+  variable: '#DC2626',
+  string: '#059669',
+  number: '#EA580C',
+  boolean: '#7C3AED',
+  null: '#7C3AED',
+  separator: '#374151',
 };
 
 export const lightTheme: Extension = createTheme({
   variant: 'light',
   settings: {
-    background: '#fff',
-    foreground: '#000',
-    caret: '#000',
-    selection: '#d9d9d9',
-    gutterBackground: '#f0f0f0',
-    gutterForeground: '#666',
+    background: '#FFFFFF',
+    foreground: '#1F2937',
+    caret: '#2563EB',
+    selection: '#E5E7EB',
+    gutterBackground: '#F9FAFB',
+    gutterForeground: '#6B7280',
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
-    lineHighlight: '#e1e1e180',
-    bracketColors: ['#FFD700', '#DD99FF', '#78B0FF'],
+    lineHighlight: '#F3F4F680',
+    bracketColors: ['#F59E0B', '#8B5CF6', '#06B6D4'],
     tooltip: {
-      backgroundColor: '#f0f0f0',
-      color: '#000',
-      border: '1px solid #ccc',
+      backgroundColor: '#FFFFFF',
+      color: '#1F2937',
+      border: '1px solid #E5E7EB',
+      boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
     },
     link: {
-      color: '#007bff',
+      color: '#2563EB',
     },
     completionItemHover: {
-      backgroundColor: '#f0f0f0',
+      backgroundColor: '#F3F4F6',
     },
     completionItemSelected: {
-      backgroundColor: '#e0e0e0',
+      backgroundColor: '#E5E7EB',
     },
     completionItemIcon: {
-      color: '#333',
+      color: '#4B5563',
     },
     completionItemLabel: {
-      color: '#333',
+      color: '#1F2937',
     },
     completionItemInfo: {
-      color: '#333',
+      color: '#4B5563',
     },
     completionItemDetail: {
-      color: '#666',
+      color: '#6B7280',
     },
   },
   styles: [
@@ -68,6 +69,11 @@ export const lightTheme: Extension = createTheme({
       tag: [t.propertyName],
       color: colors.key,
     },
+    {
+      tag: [t.variableName],
+      color: colors.variable,
+    },
+
     {
       tag: [t.string],
       color: colors.string,
@@ -92,28 +98,46 @@ export const lightTheme: Extension = createTheme({
     // markdown
     {
       tag: [t.heading],
-      color: '#3e76ef',
+      color: '#2563EB',
     },
     {
       tag: [t.processingInstruction],
-      color: '#3e76ef',
+      color: '#2563EB',
+    },
+
+    // js
+    {
+      tag: [t.definitionKeyword],
+      color: '#9333EA',
+    },
+    {
+      tag: [t.modifier],
+      color: '#9333EA',
+    },
+    {
+      tag: [t.controlKeyword],
+      color: '#9333EA',
+    },
+    {
+      tag: [t.operatorKeyword],
+      color: '#9333EA',
     },
 
     // shell
     // curl
     {
       tag: [t.standard(t.variableName)],
-      color: '#00804A',
+      color: '#059669',
     },
     // -X
     {
       tag: [t.attributeName],
-      color: '#C74200',
+      color: '#EA580C',
     },
     // url in string (includes quotes), e.g. "https://..."
     {
       tag: [t.special(t.string)],
-      color: '#2B57D9',
+      color: '#2563EB',
     },
   ],
 });

package/src/components/code-editor-mini/index.tsx

@@ -7,11 +7,10 @@ import React from 'react';
 
 import styled from 'styled-components';
 
-import { CodeEditor, CodeEditorPropsType } from '../code-editor';
+import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
 
 const UIMini = styled.div`
   .ͼ1 .cm-content {
-    padding: 0;
   }
 `;
 
@@ -23,6 +22,7 @@ export function CodeEditorMini(props: CodeEditorPropsType) {
         options={{
           lineNumbersGutter: false,
           foldGutter: false,
+          minHeight: 24,
           ...(props.options || {}),
         }}
       />