@flowgram.ai/form-materials 0.2.20 → 0.2.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.2.20",
+  "version": "0.2.22",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -30,9 +30,10 @@
     "chalk": "^5.3.0",
     "inquirer": "^9.2.7",
     "immer": "~10.1.1",
-    "@coze-editor/editor": "0.1.0-alpha.8d7a30",
+    "@coze-editor/editor": "0.1.0-alpha.879fbb",
     "@codemirror/view": "~6.38.0",
-    "@flowgram.ai/editor": "0.2.20"
+    "@codemirror/state": "~6.5.2",
+    "@flowgram.ai/editor": "0.2.22"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -48,8 +49,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.0.4",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.2.20",
-    "@flowgram.ai/ts-config": "0.2.20"
+    "@flowgram.ai/eslint-config": "0.2.22",
+    "@flowgram.ai/ts-config": "0.2.22"
   },
   "peerDependencies": {
     "react": ">=16.8",

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

@@ -0,0 +1,9 @@
+{
+  "name": "code-editor",
+  "depMaterials": [],
+  "depPackages": [
+    "@coze-editor/editor@0.1.0-alpha.879fbb",
+    "@codemirror/view",
+    "@codemirror/state"
+  ]
+}

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

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useRef } from 'react';
+
+import { createRenderer, EditorProvider } 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',
+    },
+  }),
+]);
+
+export interface CodeEditorPropsType extends React.PropsWithChildren<{}> {
+  value?: string;
+  onChange?: (value: string) => void;
+  languageId: 'python' | 'typescript' | 'shell' | 'json';
+  theme?: 'dark' | 'light';
+}
+
+export function CodeEditor({
+  value,
+  onChange,
+  languageId = 'python',
+  theme = 'light',
+  children,
+}: CodeEditorPropsType) {
+  const editorRef = useRef<EditorAPI | null>(null);
+
+  return (
+    <EditorProvider>
+      <OriginCodeEditor
+        defaultValue={value}
+        options={{
+          uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
+          languageId,
+          theme,
+        }}
+        didMount={(editor: EditorAPI) => {
+          editorRef.current = editor;
+        }}
+        onChange={(e) => onChange?.(e.value)}
+      >
+        {children}
+      </OriginCodeEditor>
+    </EditorProvider>
+  );
+}

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

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { languages } from '@coze-editor/editor/preset-code';
+// import { typescript } from '@coze-editor/editor/language-typescript';
+import { shell } from '@coze-editor/editor/language-shell';
+import { python } from '@coze-editor/editor/language-python';
+import { json } from '@coze-editor/editor/language-json';
+import { mixLanguages } from '@coze-editor/editor';
+
+languages.register('python', python);
+// languages.register('typescript', typescript);
+
+languages.register('json', {
+  // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
+  language: mixLanguages({
+    outerLanguage: json.language,
+  }),
+  languageService: json.languageService,
+});
+
+languages.register('shell', shell);

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

@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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',
+};
+
+export const darkTheme: Extension = createTheme({
+  variant: 'dark',
+  settings: {
+    background: colors.background,
+    foreground: '#fff',
+    caret: '#AEAFAD',
+    selection: '#d9d9d942',
+    gutterBackground: colors.background,
+    gutterForeground: '#FFFFFF63',
+    gutterBorderColor: 'transparent',
+    gutterBorderWidth: 0,
+    lineHighlight: '#272e3d36',
+    bracketColors: ['#FFEF61', '#DD99FF', '#78B0FF'],
+    tooltip: {
+      backgroundColor: '#363D4D',
+      color: '#fff',
+      border: 'none',
+    },
+    link: {
+      color: '#4daafc',
+    },
+    completionItemHover: {
+      backgroundColor: '#FFFFFF0F',
+    },
+    completionItemSelected: {
+      backgroundColor: '#FFFFFF17',
+    },
+    completionItemIcon: {
+      color: '#FFFFFFC9',
+    },
+    completionItemLabel: {
+      color: '#FFFFFFC9',
+    },
+    completionItemInfo: {
+      color: '#FFFFFFC9',
+    },
+    completionItemDetail: {
+      color: '#FFFFFF63',
+    },
+  },
+  styles: [
+    // json
+    {
+      tag: t.comment,
+      color: colors.comment,
+    },
+    {
+      tag: [t.propertyName],
+      color: colors.key,
+    },
+    {
+      tag: [t.string],
+      color: colors.string,
+    },
+    {
+      tag: [t.number],
+      color: colors.number,
+    },
+    {
+      tag: [t.bool],
+      color: colors.boolean,
+    },
+    {
+      tag: [t.null],
+      color: colors.null,
+    },
+    {
+      tag: [t.separator],
+      color: colors.separator,
+    },
+
+    // markdown
+    {
+      tag: [t.heading],
+      color: '#6b6bff',
+    },
+    {
+      tag: [t.processingInstruction],
+      color: '#6b6bff',
+    },
+
+    // shell
+    // curl
+    {
+      tag: [t.standard(t.variableName)],
+      color: '#3BEB84',
+    },
+    // -X
+    {
+      tag: [t.attributeName],
+      color: '#FF9933',
+    },
+    // url in string (includes quotes), e.g. "https://..."
+    {
+      tag: [t.special(t.string)],
+      color: '#78B0FF',
+    },
+  ],
+});

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

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { themes } from '@coze-editor/editor/preset-code';
+
+import { lightTheme } from './light';
+import { darkTheme } from './dark';
+
+themes.register('dark', darkTheme);
+themes.register('light', lightTheme);

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

@@ -0,0 +1,119 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+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',
+};
+
+export const lightTheme: Extension = createTheme({
+  variant: 'light',
+  settings: {
+    background: '#fff',
+    foreground: '#000',
+    caret: '#000',
+    selection: '#d9d9d9',
+    gutterBackground: '#f0f0f0',
+    gutterForeground: '#666',
+    gutterBorderColor: 'transparent',
+    gutterBorderWidth: 0,
+    lineHighlight: '#f0f0f0',
+    bracketColors: ['#FFEF61', '#DD99FF', '#78B0FF'],
+    tooltip: {
+      backgroundColor: '#f0f0f0',
+      color: '#000',
+      border: '1px solid #ccc',
+    },
+    link: {
+      color: '#007bff',
+    },
+    completionItemHover: {
+      backgroundColor: '#f0f0f0',
+    },
+    completionItemSelected: {
+      backgroundColor: '#e0e0e0',
+    },
+    completionItemIcon: {
+      color: '#333',
+    },
+    completionItemLabel: {
+      color: '#333',
+    },
+    completionItemInfo: {
+      color: '#333',
+    },
+    completionItemDetail: {
+      color: '#666',
+    },
+  },
+  styles: [
+    // JSON
+    {
+      tag: t.comment,
+      color: colors.comment,
+    },
+    {
+      tag: [t.propertyName],
+      color: colors.key,
+    },
+    {
+      tag: [t.string],
+      color: colors.string,
+    },
+    {
+      tag: [t.number],
+      color: colors.number,
+    },
+    {
+      tag: [t.bool],
+      color: colors.boolean,
+    },
+    {
+      tag: [t.null],
+      color: colors.null,
+    },
+    {
+      tag: [t.separator],
+      color: colors.separator,
+    },
+
+    // markdown
+    {
+      tag: [t.heading],
+      color: '#3e76ef',
+    },
+    {
+      tag: [t.processingInstruction],
+      color: '#3e76ef',
+    },
+
+    // shell
+    // curl
+    {
+      tag: [t.standard(t.variableName)],
+      color: '#00804A',
+    },
+    // -X
+    {
+      tag: [t.attributeName],
+      color: '#C74200',
+    },
+    // url in string (includes quotes), e.g. "https://..."
+    {
+      tag: [t.special(t.string)],
+      color: '#2B57D9',
+    },
+  ],
+});

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

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export function getSuffixByLanguageId(languageId: string) {
+  if (languageId === 'python') {
+    return '.py';
+  }
+  if (languageId === 'typescript') {
+    return '.ts';
+  }
+  if (languageId === 'shell') {
+    return '.sh';
+  }
+  if (languageId === 'json') {
+    return '.json';
+  }
+  return '';
+}

package/src/components/index.ts

@@ -13,3 +13,6 @@ export * from './condition-row';
 export * from './batch-outputs';
 export * from './prompt-editor';
 export * from './prompt-editor-with-variables';
+export * from './prompt-editor-with-inputs';
+export * from './code-editor';
+export * from './json-editor-with-variables';

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

@@ -0,0 +1,13 @@
+{
+  "name": "json-editor-with-variables",
+  "depMaterials": [
+    "variable-selector",
+    "code-editor"
+  ],
+  "depPackages": [
+    "@coze-editor/editor@0.1.0-alpha.879fbb",
+    "@codemirror/view",
+    "styled-components",
+    "@douyinfe/semi-ui"
+  ]
+}

package/src/components/json-editor-with-variables/extensions/variable-tag.tsx

@@ -0,0 +1,173 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useLayoutEffect } from 'react';
+
+import { createRoot, Root } from 'react-dom/client';
+import { isEqual, last } from 'lodash';
+import {
+  BaseVariableField,
+  Disposable,
+  DisposableCollection,
+  Scope,
+  useCurrentScope,
+} from '@flowgram.ai/editor';
+import { Popover } from '@douyinfe/semi-ui';
+import { IconIssueStroked } from '@douyinfe/semi-icons';
+import { useInjector } from '@coze-editor/editor/react';
+import {
+  Decoration,
+  DecorationSet,
+  EditorView,
+  MatchDecorator,
+  ViewPlugin,
+  WidgetType,
+} from '@codemirror/view';
+
+import { UIPopoverContent, UIRootTitle, UITag, UIVarName } from '../styles';
+
+class VariableTagWidget extends WidgetType {
+  keyPath?: string[];
+
+  toDispose = new DisposableCollection();
+
+  scope: Scope;
+
+  root: Root;
+
+  constructor({ keyPath, scope }: { keyPath?: string[]; scope: Scope }) {
+    super();
+
+    this.keyPath = keyPath;
+    this.scope = scope;
+  }
+
+  renderIcon = (icon: string | JSX.Element) => {
+    if (typeof icon === 'string') {
+      return <img style={{ marginRight: 8 }} width={12} height={12} src={icon} />;
+    }
+
+    return icon;
+  };
+
+  renderVariable(v?: BaseVariableField) {
+    if (!v) {
+      this.root.render(
+        <UITag prefixIcon={<IconIssueStroked />} color="amber">
+          Unknown
+        </UITag>
+      );
+      return;
+    }
+
+    const rootField = last(v.parentFields);
+
+    const rootTitle = (
+      <UIRootTitle>{rootField?.meta.title ? `${rootField.meta.title} -` : ''}</UIRootTitle>
+    );
+    const rootIcon = this.renderIcon(rootField?.meta.icon);
+
+    this.root.render(
+      <Popover
+        content={
+          <UIPopoverContent>
+            {rootIcon}
+            {rootTitle}
+            <UIVarName>{v?.keyPath.slice(1).join('.')}</UIVarName>
+          </UIPopoverContent>
+        }
+      >
+        <UITag prefixIcon={rootIcon}>
+          {rootTitle}
+          <UIVarName>{v?.key}</UIVarName>
+        </UITag>
+      </Popover>
+    );
+  }
+
+  toDOM(view: EditorView): HTMLElement {
+    const dom = document.createElement('span');
+
+    this.root = createRoot(dom);
+
+    this.toDispose.push(
+      Disposable.create(() => {
+        this.root.unmount();
+      })
+    );
+
+    this.toDispose.push(
+      this.scope.available.trackByKeyPath(
+        this.keyPath,
+        (v) => {
+          this.renderVariable(v);
+        },
+        { triggerOnInit: false }
+      )
+    );
+
+    this.renderVariable(this.scope.available.getByKeyPath(this.keyPath));
+
+    return dom;
+  }
+
+  eq(other: VariableTagWidget) {
+    return isEqual(this.keyPath, other.keyPath);
+  }
+
+  ignoreEvent(): boolean {
+    return false;
+  }
+
+  destroy(dom: HTMLElement): void {
+    this.toDispose.dispose();
+  }
+}
+
+export function VariableTagInject() {
+  const injector = useInjector();
+
+  const scope = useCurrentScope();
+
+  // 基于 {{var}} 的正则进行匹配，匹配后进行自定义渲染
+  useLayoutEffect(() => {
+    const atMatcher = new MatchDecorator({
+      regexp: /\{\{([^\}]+)\}\}/g,
+      decoration: (match) =>
+        Decoration.replace({
+          widget: new VariableTagWidget({
+            keyPath: match[1]?.split('.') ?? [],
+            scope,
+          }),
+        }),
+    });
+
+    return injector.inject([
+      ViewPlugin.fromClass(
+        class {
+          decorations: DecorationSet;
+
+          constructor(private view: EditorView) {
+            this.decorations = atMatcher.createDeco(view);
+          }
+
+          update() {
+            this.decorations = atMatcher.createDeco(this.view);
+          }
+        },
+        {
+          decorations: (p) => p.decorations,
+          provide(p) {
+            return EditorView.atomicRanges.of(
+              (view) => view.plugin(p)?.decorations ?? Decoration.none
+            );
+          },
+        }
+      ),
+    ]);
+  }, [injector]);
+
+  return null;
+}

package/src/components/json-editor-with-variables/extensions/variable-tree.tsx

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import { Popover, Tree } from '@douyinfe/semi-ui';
+import {
+  Mention,
+  MentionOpenChangeEvent,
+  getCurrentMentionReplaceRange,
+  useEditor,
+  PositionMirror,
+} from '@coze-editor/editor/react';
+import { EditorAPI } from '@coze-editor/editor/preset-prompt';
+
+import { useVariableTree } from '../../variable-selector';
+
+export function VariableTree() {
+  const [posKey, setPosKey] = useState('');
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState(-1);
+  const editor = useEditor<EditorAPI>();
+
+  function insert(variablePath: string) {
+    const range = getCurrentMentionReplaceRange(editor.$view.state);
+
+    if (!range) {
+      return;
+    }
+
+    editor.replaceText({
+      ...range,
+      text: '{{' + variablePath + '}}',
+    });
+
+    setVisible(false);
+  }
+
+  function handleOpenChange(e: MentionOpenChangeEvent) {
+    setPosition(e.state.selection.main.head);
+    setVisible(e.value);
+  }
+
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+  }, [editor, visible]);
+
+  const treeData = useVariableTree({});
+
+  return (
+    <>
+      <Mention triggerCharacters={['@']} onOpenChange={handleOpenChange} />
+
+      <Popover
+        visible={visible}
+        trigger="custom"
+        position="topLeft"
+        rePosKey={posKey}
+        content={
+          <div style={{ width: 300 }}>
+            <Tree
+              treeData={treeData}
+              onSelect={(v) => {
+                insert(v);
+              }}
+            />
+          </div>
+        }
+      >
+        {/* PositionMirror allows the Popover to appear at the specified cursor position */}
+        <PositionMirror
+          position={position}
+          // When Doc scroll, update position
+          onChange={() => setPosKey(String(Math.random()))}
+        />
+      </Popover>
+    </>
+  );
+}

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

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { VariableTree } from './extensions/variable-tree';
+import { VariableTagInject } from './extensions/variable-tag';
+import { CodeEditor, type CodeEditorPropsType } from '../code-editor';
+
+export function JsonEditorWithVariables(props: Omit<CodeEditorPropsType, 'languageId'>) {
+  return (
+    <CodeEditor languageId="json" {...props}>
+      <VariableTree />
+      <VariableTagInject />
+    </CodeEditor>
+  );
+}