@flowgram.ai/form-materials 0.4.17 → 0.4.19

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,
@@ -12,11 +13,9 @@ import {
   InferValues,
 } from '@flowgram.ai/coze-editor/react';
 import preset, { type EditorAPI } from '@flowgram.ai/coze-editor/preset-code';
-import { Skeleton } from '@douyinfe/semi-ui';
 import { EditorView } from '@codemirror/view';
 
 import { getSuffixByLanguageId } from './utils';
-import { useDynamicLoadLanguage } from './language-features';
 
 const OriginCodeEditor = createRenderer(preset, [
   EditorView.theme({
@@ -26,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',
@@ -50,9 +58,8 @@ export function CodeEditor({
   activeLinePlaceholder,
   options,
   readonly,
+  mini,
 }: CodeEditorPropsType) {
-  const { loaded } = useDynamicLoadLanguage(languageId);
-
   const editorRef = useRef<EditorAPI | null>(null);
 
   useEffect(() => {
@@ -62,33 +69,38 @@ export function CodeEditor({
     }
   }, [value]);
 
-  if (!loaded) {
-    return <Skeleton />;
-  }
-
   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,12 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { lazySuspense } from '@/shared';
-
-export const CodeEditor = lazySuspense(() =>
-  Promise.all([import('./editor'), import('./theme')]).then(([editorModule]) => ({
-    default: editorModule.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/utils.ts

@@ -16,5 +16,9 @@ export function getSuffixByLanguageId(languageId: string) {
   if (languageId === 'json') {
     return '.json';
   }
+  if (languageId === 'sql') {
+    return '.sql';
+  }
+
   return '';
 }

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

@@ -14,6 +14,9 @@ const UIMini = styled.div`
   }
 `;
 
+/**
+ * @deprecated use mini in CodeEditorPropsType instead
+ */
 export function CodeEditorMini(props: CodeEditorPropsType) {
   return (
     <UIMini>

package/src/components/index.ts

@@ -8,14 +8,33 @@ export { AssignRows } from './assign-rows';
 export { BatchOutputs } from './batch-outputs';
 export { BatchVariableSelector } from './batch-variable-selector';
 export { BlurInput } from './blur-input';
-export { CodeEditor, type CodeEditorPropsType } from './code-editor';
+export {
+  BaseCodeEditor,
+  CodeEditor,
+  JsonCodeEditor,
+  PythonCodeEditor,
+  SQLCodeEditor,
+  ShellCodeEditor,
+  TypeScriptCodeEditor,
+  type CodeEditorPropsType,
+} from './code-editor';
 export { CodeEditorMini } from './code-editor-mini';
+export {
+  ConditionPresetOp,
+  ConditionProvider,
+  type ConditionOpConfig,
+  type ConditionOpConfigs,
+  type IConditionRule,
+  type IConditionRuleFactory,
+  useCondition,
+  useConditionContext,
+} from './condition-context';
 export { ConditionRow, type ConditionRowValueType } from './condition-row';
 export { ConstantInput, type ConstantInputStrategy } from './constant-input';
 export {
+  EditorInputsTree,
   EditorVariableTagInject,
   EditorVariableTree,
-  EditorInputsTree,
 } from './coze-editor-extensions';
 export {
   DBConditionRow,
@@ -44,6 +63,10 @@ export {
   PromptEditorWithVariables,
   type PromptEditorWithVariablesProps,
 } from './prompt-editor-with-variables';
+export {
+  SQLEditorWithVariables,
+  type SQLEditorWithVariablesProps,
+} from './sql-editor-with-variables';
 export {
   InjectTypeSelector,
   TypeSelector,

package/src/components/json-editor-with-variables/editor.tsx

@@ -10,7 +10,7 @@ import { transformerCreator } from '@flowgram.ai/coze-editor/preset-code';
 import { Text } from '@flowgram.ai/coze-editor/language-json';
 
 import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
-import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
+import { JsonCodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
 
 const TRIGGER_CHARACTERS = ['@'];
 
@@ -53,8 +53,7 @@ export interface JsonEditorWithVariablesProps extends Omit<CodeEditorPropsType,
 
 export function JsonEditorWithVariables(props: JsonEditorWithVariablesProps) {
   return (
-    <CodeEditor
-      languageId="json"
+    <JsonCodeEditor
       activeLinePlaceholder={I18n.t("Press '@' to Select variable")}
       {...props}
       options={{
@@ -64,6 +63,6 @@ export function JsonEditorWithVariables(props: JsonEditorWithVariablesProps) {
     >
       <EditorVariableTree triggerCharacters={TRIGGER_CHARACTERS} />
       <EditorVariableTagInject />
-    </CodeEditor>
+    </JsonCodeEditor>
   );
 }

package/src/components/sql-editor-with-variables/editor.tsx

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { I18n } from '@flowgram.ai/editor';
+
+import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
+import { SQLCodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
+
+export interface SQLEditorWithVariablesProps extends Omit<CodeEditorPropsType, 'languageId'> {}
+
+export function SQLEditorWithVariables(props: SQLEditorWithVariablesProps) {
+  return (
+    <SQLCodeEditor
+      activeLinePlaceholder={I18n.t("Press '@' to Select variable")}
+      {...props}
+      options={{
+        ...(props.options || {}),
+      }}
+    >
+      <EditorVariableTree />
+      <EditorVariableTagInject />
+    </SQLCodeEditor>
+  );
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { lazySuspense } from '@/shared';
+
+export const SQLEditorWithVariables = lazySuspense(() =>
+  import('./editor').then((module) => ({ default: module.SQLEditorWithVariables }))
+);
+
+export type { SQLEditorWithVariablesProps } from './editor';

package/src/index.ts

@@ -6,11 +6,14 @@
 export {
   AssignRow,
   AssignRows,
+  BaseCodeEditor,
   BatchOutputs,
   BatchVariableSelector,
   BlurInput,
   CodeEditor,
   CodeEditorMini,
+  ConditionPresetOp,
+  ConditionProvider,
   ConditionRow,
   ConstantInput,
   DBConditionRow,
@@ -21,36 +24,49 @@ export {
   DisplaySchemaTag,
   DisplaySchemaTree,
   DynamicValueInput,
+  EditorInputsTree,
+  EditorVariableTagInject,
+  EditorVariableTree,
   InjectDynamicValueInput,
   InjectTypeSelector,
   InjectVariableSelector,
   InputsValues,
   InputsValuesTree,
+  JsonCodeEditor,
   JsonEditorWithVariables,
   JsonSchemaEditor,
   PromptEditor,
   PromptEditorWithInputs,
   PromptEditorWithVariables,
+  PythonCodeEditor,
+  SQLCodeEditor,
+  SQLEditorWithVariables,
+  ShellCodeEditor,
+  TypeScriptCodeEditor,
   TypeSelector,
   VariableSelector,
   VariableSelectorProvider,
-  EditorVariableTagInject,
-  EditorVariableTree,
-  EditorInputsTree,
   getTypeSelectValue,
   parseTypeSelectValue,
   type AssignValueType,
   type CodeEditorPropsType,
+  type ConditionOpConfig,
+  type ConditionOpConfigs,
   type ConditionRowValueType,
   type ConstantInputStrategy,
   type DBConditionOptionType,
   type DBConditionRowValueType,
+  type IConditionRule,
+  type IConditionRuleFactory,
   type JsonEditorWithVariablesProps,
   type PromptEditorPropsType,
   type PromptEditorWithInputsProps,
   type PromptEditorWithVariablesProps,
+  type SQLEditorWithVariablesProps,
   type TypeSelectorProps,
   type VariableSelectorProps,
+  useCondition,
+  useConditionContext,
   useVariableTree,
 } from './components';
 export {

package/src/plugins/json-schema-preset/type-definition/array.tsx

@@ -9,16 +9,16 @@ import React from 'react';
 import { I18n } from '@flowgram.ai/editor';
 
 import { ConditionPresetOp } from '@/components/condition-context/op';
-import { CodeEditorMini } from '@/components/code-editor-mini';
+import { JsonCodeEditor } from '@/components/code-editor';
 
 import { type JsonSchemaTypeRegistry } from '../types';
 
 export const arrayRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'array',
   ConstantRenderer: (props) => (
-    <CodeEditorMini
+    <JsonCodeEditor
+      mini
       value={props.value}
-      languageId="json"
       onChange={(v) => props.onChange?.(v)}
       placeholder={I18n.t('Please Input Array')}
       readonly={props.readonly}

package/src/plugins/json-schema-preset/type-definition/map.tsx

@@ -9,17 +9,17 @@ import React from 'react';
 import { I18n } from '@flowgram.ai/editor';
 
 import { ConditionPresetOp } from '@/components/condition-context/op';
-import { CodeEditorMini } from '@/components/code-editor-mini';
+import { JsonCodeEditor } from '@/components/code-editor';
 
 import { type JsonSchemaTypeRegistry } from '../types';
 
 export const mapRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'map',
   ConstantRenderer: (props) => (
-    <CodeEditorMini
+    <JsonCodeEditor
+      mini
       value={props.value}
       onChange={(v) => props.onChange?.(v)}
-      languageId="json"
       placeholder={I18n.t('Please Input Map')}
       readonly={props.readonly}
     />

package/src/plugins/json-schema-preset/type-definition/object.tsx

@@ -9,17 +9,17 @@ import React from 'react';
 import { I18n } from '@flowgram.ai/editor';
 
 import { ConditionPresetOp } from '@/components/condition-context/op';
-import { CodeEditorMini } from '@/components/code-editor-mini';
+import { JsonCodeEditor } from '@/components/code-editor';
 
 import { type JsonSchemaTypeRegistry } from '../types';
 
 export const objectRegistry: Partial<JsonSchemaTypeRegistry> = {
   type: 'object',
   ConstantRenderer: (props) => (
-    <CodeEditorMini
+    <JsonCodeEditor
+      mini
       value={props.value}
       onChange={(v) => props.onChange?.(v)}
-      languageId="json"
       placeholder={I18n.t('Please Input Object')}
       readonly={props.readonly}
     />