@flowgram.ai/form-materials 0.1.0-alpha.15 → 0.1.0-alpha.16

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

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { CodeEditorFactory } from './factory';
+import { loadTypescriptLanguage } from './editor-ts';
+import { loadSqlLanguage } from './editor-sql';
+import { loadShellLanguage } from './editor-shell';
+import { loadPythonLanguage } from './editor-python';
+import { loadJsonLanguage } from './editor-json';
+
+const languageLoaders: Record<string, (languageId: string) => Promise<any>> = {
+  json: loadJsonLanguage,
+  python: loadPythonLanguage,
+  sql: loadSqlLanguage,
+  typescript: loadTypescriptLanguage,
+  shell: loadShellLanguage,
+};
+
+/**
+ * @deprecated CodeEditor will bundle all languages features, use XXXCodeEditor instead for better bundle experience
+ */
+export const CodeEditor = CodeEditorFactory<false>(
+  (languageId) => languageLoaders[languageId]?.(languageId),
+  {
+    displayName: 'CodeEditor',
+    fixLanguageId: undefined,
+  }
+);

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

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { languages } from '@flowgram.ai/coze-editor/preset-code';
+import { mixLanguages } from '@flowgram.ai/coze-editor';
+
+import { CodeEditorFactory } from './factory';
+
+export const loadJsonLanguage = () =>
+  import('@flowgram.ai/coze-editor/language-json').then((module) => {
+    languages.register('json', {
+      // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
+      language: mixLanguages({
+        outerLanguage: module.json.language,
+      }),
+      languageService: module.json.languageService,
+    });
+  });
+
+export const JsonCodeEditor = CodeEditorFactory<true>(loadJsonLanguage, {
+  displayName: 'JsonCodeEditor',
+  fixLanguageId: 'json',
+});

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

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { languages } from '@flowgram.ai/coze-editor/preset-code';
+
+import { CodeEditorFactory } from './factory';
+
+export const loadPythonLanguage = () =>
+  import('@flowgram.ai/coze-editor/language-python').then((module) =>
+    languages.register('python', module.python)
+  );
+
+export const PythonCodeEditor = CodeEditorFactory<true>(loadPythonLanguage, {
+  displayName: 'PythonCodeEditor',
+  fixLanguageId: 'python',
+});

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

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { languages } from '@flowgram.ai/coze-editor/preset-code';
+
+import { CodeEditorFactory } from './factory';
+
+export const loadShellLanguage = () =>
+  import('@flowgram.ai/coze-editor/language-shell').then((module) =>
+    languages.register('shell', module.shell)
+  );
+
+export const ShellCodeEditor = CodeEditorFactory<true>(loadShellLanguage, {
+  displayName: 'ShellCodeEditor',
+  fixLanguageId: 'shell',
+});

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

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { languages } from '@flowgram.ai/coze-editor/preset-code';
+import { mixLanguages } from '@flowgram.ai/coze-editor';
+
+import { CodeEditorFactory } from './factory';
+
+export const loadSqlLanguage = () =>
+  import('@flowgram.ai/coze-editor/language-sql').then((module) => {
+    languages.register('sql', {
+      ...module.sql,
+      language: mixLanguages({
+        outerLanguage: module.sql.language,
+      }),
+    });
+  });
+
+export const SQLCodeEditor = CodeEditorFactory<true>(loadSqlLanguage, {
+  displayName: 'SQLCodeEditor',
+  fixLanguageId: 'sql',
+});

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

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { languages } from '@flowgram.ai/coze-editor/preset-code';
+
+import { CodeEditorFactory } from './factory';
+
+export const loadTypescriptLanguage = () =>
+  import('@flowgram.ai/coze-editor/language-typescript').then((module) => {
+    languages.register('typescript', module.typescript);
+
+    // Init TypeScript language service
+    const tsWorker = new Worker(
+      new URL(`@flowgram.ai/coze-editor/language-typescript/worker`, import.meta.url),
+      { type: 'module' }
+    );
+    module.typescript.languageService.initialize(tsWorker, {
+      compilerOptions: {
+        // eliminate Promise error
+        lib: ['es2015', 'dom'],
+        noImplicitAny: false,
+      },
+    });
+  });
+
+export const TypeScriptCodeEditor = CodeEditorFactory<true>(loadTypescriptLanguage, {
+  displayName: 'TypeScriptCodeEditor',
+  fixLanguageId: 'typescript',
+});

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

@@ -5,6 +5,7 @@
 
 import React, { useEffect, useRef } from 'react';
 
+import styled, { css } from 'styled-components';
 import {
   ActiveLinePlaceholder,
   createRenderer,
@@ -16,9 +17,6 @@ import { EditorView } from '@codemirror/view';
 
 import { getSuffixByLanguageId } from './utils';
 
-import './theme';
-import './language-features';
-
 const OriginCodeEditor = createRenderer(preset, [
   EditorView.theme({
     '&.cm-focused': {
@@ -27,21 +25,30 @@ const OriginCodeEditor = createRenderer(preset, [
   }),
 ]);
 
+const UIContainer = styled.div<{ $mini?: boolean }>`
+  ${({ $mini }) =>
+    $mini &&
+    css`
+      height: 24px;
+    `}
+`;
+
 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';
+  languageId: 'python' | 'typescript' | 'shell' | 'json' | 'sql';
   theme?: 'dark' | 'light';
   placeholder?: string;
   activeLinePlaceholder?: string;
   readonly?: boolean;
   options?: Options;
+  mini?: boolean;
 }
 
-export function CodeEditor({
+export function BaseCodeEditor({
   value,
   onChange,
   languageId = 'python',
@@ -51,6 +58,7 @@ export function CodeEditor({
   activeLinePlaceholder,
   options,
   readonly,
+  mini,
 }: CodeEditorPropsType) {
   const editorRef = useRef<EditorAPI | null>(null);
 
@@ -61,37 +69,38 @@ export function CodeEditor({
     }
   }, [value]);
 
-  useEffect(() => {
-    if (languageId === 'typescript') {
-      import('./init-worker').then((module) => {
-        module.initTsWorker();
-      });
-    }
-  }, [languageId]);
-
   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>
+    <UIContainer $mini={mini}>
+      <EditorProvider>
+        <OriginCodeEditor
+          defaultValue={String(value || '')}
+          options={{
+            uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
+            languageId,
+            theme,
+            placeholder,
+            readOnly: readonly,
+            editable: !readonly,
+            ...(mini
+              ? {
+                  lineNumbersGutter: false,
+                  foldGutter: false,
+                  minHeight: 24,
+                }
+              : {}),
+            ...(options || {}),
+          }}
+          didMount={(editor: EditorAPI) => {
+            editorRef.current = editor;
+          }}
+          onChange={(e) => onChange?.(e.value)}
+        >
+          {activeLinePlaceholder && (
+            <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
+          )}
+          {children}
+        </OriginCodeEditor>
+      </EditorProvider>
+    </UIContainer>
   );
 }

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

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import React from 'react';
+
+import { languages } from '@flowgram.ai/coze-editor/preset-code';
+import { Skeleton } from '@douyinfe/semi-ui';
+
+import { lazySuspense } from '@/shared';
+
+import type { CodeEditorPropsType } from './editor';
+
+export const BaseCodeEditor = lazySuspense(() =>
+  Promise.all([import('./editor'), import('./theme')]).then(([editorModule]) => ({
+    default: editorModule.BaseCodeEditor,
+  }))
+);
+
+interface FactoryParams<FixLanguageId extends boolean> {
+  displayName: string;
+  fixLanguageId: FixLanguageId extends true ? CodeEditorPropsType['languageId'] : undefined;
+}
+
+export const CodeEditorFactory = <FixLanguageId extends boolean>(
+  loadLanguage: (languageId: string) => Promise<any>,
+  { displayName, fixLanguageId }: FactoryParams<FixLanguageId>
+): FixLanguageId extends true
+  ? React.FC<Omit<CodeEditorPropsType, 'languageId'>>
+  : React.FC<CodeEditorPropsType> => {
+  const EditorWithLoad = (props: CodeEditorPropsType) => {
+    const { languageId = fixLanguageId } = props;
+
+    if (!languageId) {
+      throw new Error('CodeEditorFactory: languageId is required');
+    }
+
+    const [loaded, setLoaded] = useState(useMemo(() => !!languages.get(languageId), [languageId]));
+
+    useEffect(() => {
+      if (!loaded && loadLanguage) {
+        loadLanguage(languageId).then(() => {
+          setLoaded(true);
+        });
+      }
+    }, [languageId, loaded]);
+
+    if (!loaded) {
+      return <Skeleton />;
+    }
+
+    return <BaseCodeEditor {...props} languageId={fixLanguageId || languageId} />;
+  };
+  EditorWithLoad.displayName = displayName;
+
+  return EditorWithLoad as FixLanguageId extends true
+    ? React.FC<Omit<CodeEditorPropsType, 'languageId'>>
+    : React.FC<CodeEditorPropsType>;
+};

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

@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { lazySuspense } from '@/shared';
-
-export const CodeEditor = lazySuspense(() =>
-  import('./editor').then((module) => ({ default: module.CodeEditor }))
-);
-
-export type { CodeEditorPropsType } from './editor';
+export { CodeEditor } from './editor-all';
+export { TypeScriptCodeEditor } from './editor-ts';
+export { ShellCodeEditor } from './editor-shell';
+export { JsonCodeEditor } from './editor-json';
+export { SQLCodeEditor } from './editor-sql';
+export { PythonCodeEditor } from './editor-python';
+export { BaseCodeEditor, type CodeEditorPropsType } from './editor';

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

@@ -6,28 +6,45 @@
 import { createTheme, tags as t } from '@flowgram.ai/coze-editor/preset-code';
 import { type Extension } from '@codemirror/state';
 
-const colors = {
-  background: '#0D1117',
-  // syntax - 现代化暗色主题配色
-  comment: '#8B949E',
-  key: '#7DD3FC',
-  variable: '#F472B6',
-  string: '#34D399',
-  number: '#FBBF24',
-  boolean: '#A78BFA',
-  null: '#A78BFA',
-  separator: '#E6EDF3',
+export const colors = {
+  background: '#24292e',
+  foreground: '#d1d5da',
+  selection: '#3392FF44',
+  cursor: '#c8e1ff',
+  dropdownBackground: '#24292e',
+  dropdownBorder: '#1b1f23',
+  activeLine: '#4d566022',
+  matchingBracket: '#888892',
+  keyword: '#9197F1',
+  storage: '#f97583',
+  variable: '#ffab70',
+  variableName: '#D9DCFA',
+  parameter: '#e1e4e8',
+  function: '#FFCA66',
+  string: '#FF9878',
+  constant: '#79b8ff',
+  type: '#79b8ff',
+  class: '#b392f0',
+  number: '#2EC7D9',
+  comment: '#568B2A',
+  heading: '#79b8ff',
+  invalid: '#f97583',
+  regexp: '#9ecbff',
+  propertyName: '#9197F1',
+  separator: '#888892',
+  gutters: '#888892',
+  moduleKeyword: '#CC4FD4',
 };
 
 export const darkTheme: Extension = createTheme({
   variant: 'dark',
   settings: {
     background: colors.background,
-    foreground: '#E6EDF3',
-    caret: '#7DD3FC',
-    selection: '#264F7833',
+    foreground: colors.foreground,
+    caret: colors.cursor,
+    selection: colors.selection,
     gutterBackground: colors.background,
-    gutterForeground: '#6E7681',
+    gutterForeground: colors.foreground,
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
     lineHighlight: '#21262D',
@@ -44,7 +61,8 @@ export const darkTheme: Extension = createTheme({
       backgroundColor: '#21262D',
     },
     completionItemSelected: {
-      backgroundColor: '#1F6EEB',
+      backgroundColor: colors.selection,
+      color: colors.foreground,
     },
     completionItemIcon: {
       color: '#8B949E',
@@ -60,79 +78,46 @@ export const darkTheme: Extension = createTheme({
     },
   },
   styles: [
-    // json
+    { tag: t.keyword, color: colors.keyword },
+    { tag: t.variableName, color: colors.variableName },
     {
-      tag: t.comment,
-      color: colors.comment,
+      tag: [t.name, t.deleted, t.character, t.macroName],
+      color: colors.variable,
     },
+    { tag: [t.propertyName], color: colors.propertyName },
     {
-      tag: [t.propertyName],
-      color: colors.key,
-    },
-    {
-      tag: [t.string],
+      tag: [t.processingInstruction, t.string, t.inserted, t.special(t.string)],
       color: colors.string,
     },
     {
-      tag: [t.number],
-      color: colors.number,
+      tag: [t.function(t.variableName), t.function(t.propertyName), t.labelName],
+      color: colors.function,
     },
     {
-      tag: [t.bool],
-      color: colors.boolean,
+      tag: [t.moduleKeyword, t.controlKeyword],
+      color: colors.moduleKeyword,
     },
     {
-      tag: [t.null],
-      color: colors.null,
+      tag: [t.color, t.constant(t.name), t.standard(t.name)],
+      color: colors.constant,
     },
+    { tag: t.definition(t.name), color: colors.variable },
+    { tag: [t.className], color: colors.class },
     {
-      tag: [t.separator],
-      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: '#7DD3FC',
-    },
-    {
-      tag: [t.processingInstruction],
-      color: '#7DD3FC',
-    },
-
-    // shell
-    // curl
-    {
-      tag: [t.standard(t.variableName)],
-      color: '#34D399',
-    },
-    // -X
-    {
-      tag: [t.attributeName],
-      color: '#FBBF24',
-    },
-    // url in string (includes quotes), e.g. "https://..."
-    {
-      tag: [t.special(t.string)],
-      color: '#7DD3FC',
+      tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
+      color: colors.number,
     },
+    { tag: [t.typeName], color: colors.type, fontStyle: colors.type },
+    { tag: [t.operatorKeyword], color: colors.keyword },
+    { tag: [t.url, t.escape, t.regexp, t.link], color: colors.regexp },
+    { tag: [t.meta, t.comment], color: colors.comment },
+    { tag: t.strong, fontWeight: 'bold' },
+    { tag: t.emphasis, fontStyle: 'italic' },
+    { tag: t.link, textDecoration: 'underline' },
+    { tag: t.heading, fontWeight: 'bold', color: colors.heading },
+    { tag: [t.atom, t.bool, t.special(t.variableName)], color: colors.variable },
+    { tag: t.invalid, color: colors.invalid },
+    { tag: t.strikethrough, textDecoration: 'line-through' },
+    { tag: t.separator, color: colors.separator },
   ],
 });