@flowgram.ai/form-materials 0.2.17 → 0.2.19

package/package.json

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

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

@@ -65,7 +65,12 @@ export function ConditionRow({ style, value, onChange, readonly }: PropTypes) {
               onChange={(v) => onChange({ ...value, right: v })}
             />
           ) : (
-            <Input size="small" disabled value={opConfig?.rightDisplay || 'Empty'} />
+            <Input
+              size="small"
+              disabled
+              style={{ pointerEvents: 'none' }}
+              value={opConfig?.rightDisplay || 'Empty'}
+            />
           )}
         </UIRight>
       </UIValues>

package/src/components/dynamic-value-input/index.tsx

@@ -50,6 +50,7 @@ export function DynamicValueInput({
       // Display Variable Or Delete
       return (
         <VariableSelector
+          style={{ width: '100%' }}
           value={value?.content}
           onChange={(_v) => onChange(_v ? { type: 'ref', content: _v } : undefined)}
           includeSchema={includeSchema}

package/src/components/dynamic-value-input/styles.tsx

@@ -13,6 +13,8 @@ export const UIContainer = styled.div`
 
 export const UIMain = styled.div`
   flex-grow: 1;
+  overflow: hidden;
+  min-width: 0;
 
   & .semi-tree-select,
   & .semi-input-number,

package/src/components/index.ts

@@ -11,3 +11,5 @@ export * from './constant-input';
 export * from './dynamic-value-input';
 export * from './condition-row';
 export * from './batch-outputs';
+export * from './prompt-editor';
+export * from './prompt-editor-with-variables';

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

@@ -0,0 +1,9 @@
+{
+  "name": "prompt-editor",
+  "depMaterials": [],
+  "depPackages": [
+    "@coze-editor/editor@0.1.0-alpha.8d7a30",
+    "@codemirror/view",
+    "styled-components"
+  ]
+}

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

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useLayoutEffect } from 'react';
+
+import { useInjector } from '@coze-editor/editor/react';
+import { astDecorator } from '@coze-editor/editor';
+import { EditorView } from '@codemirror/view';
+
+function JinjaHighlight() {
+  const injector = useInjector();
+
+  useLayoutEffect(
+    () =>
+      injector.inject([
+        astDecorator.whole.of((cursor) => {
+          if (cursor.name === 'JinjaStatementStart' || cursor.name === 'JinjaStatementEnd') {
+            return {
+              type: 'className',
+              className: 'jinja-statement-bracket',
+            };
+          }
+
+          if (cursor.name === 'JinjaComment') {
+            return {
+              type: 'className',
+              className: 'jinja-comment',
+            };
+          }
+
+          if (cursor.name === 'JinjaExpression') {
+            return {
+              type: 'className',
+              className: 'jinja-expression',
+            };
+          }
+        }),
+        EditorView.theme({
+          '.jinja-statement-bracket': {
+            color: '#D1009D',
+          },
+          '.jinja-comment': {
+            color: '#0607094D',
+          },
+          '.jinja-expression': {
+            color: '#4E40E5',
+          },
+        }),
+      ]),
+    [injector]
+  );
+
+  return null;
+}
+
+export default JinjaHighlight;

package/src/components/prompt-editor/extensions/language-support.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useLayoutEffect } from 'react';
+
+import { useInjector } from '@coze-editor/editor/react';
+import { languageSupport } from '@coze-editor/editor/preset-prompt';
+
+function LanguageSupport() {
+  const injector = useInjector();
+
+  useLayoutEffect(() => injector.inject([languageSupport]), [injector]);
+
+  return null;
+}
+
+export default LanguageSupport;

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

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useLayoutEffect } from 'react';
+
+import { useInjector } from '@coze-editor/editor/react';
+import { astDecorator } from '@coze-editor/editor';
+import { EditorView } from '@codemirror/view';
+
+function MarkdownHighlight() {
+  const injector = useInjector();
+
+  useLayoutEffect(
+    () =>
+      injector.inject([
+        astDecorator.whole.of((cursor) => {
+          // # heading
+          if (cursor.name.startsWith('ATXHeading')) {
+            return {
+              type: 'className',
+              className: 'heading',
+            };
+          }
+
+          // *italic*
+          if (cursor.name === 'Emphasis') {
+            return {
+              type: 'className',
+              className: 'emphasis',
+            };
+          }
+
+          // **bold**
+          if (cursor.name === 'StrongEmphasis') {
+            return {
+              type: 'className',
+              className: 'strong-emphasis',
+            };
+          }
+
+          // -
+          // 1.
+          // >
+          if (cursor.name === 'ListMark' || cursor.name === 'QuoteMark') {
+            return {
+              type: 'className',
+              className: 'mark',
+            };
+          }
+        }),
+        EditorView.theme({
+          '.heading': {
+            color: '#00818C',
+            fontWeight: 'bold',
+          },
+          '.emphasis': {
+            fontStyle: 'italic',
+          },
+          '.strong-emphasis': {
+            fontWeight: 'bold',
+          },
+          '.mark': {
+            color: '#4E40E5',
+          },
+        }),
+      ]),
+    [injector]
+  );
+
+  return null;
+}
+
+export default MarkdownHighlight;

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

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { Renderer, EditorProvider } from '@coze-editor/editor/react';
+import preset from '@coze-editor/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';
+
+export type PromptEditorPropsType = PropsType;
+
+export function PromptEditor(props: PropsType) {
+  const { value, onChange, readonly, style, hasError, children } = props || {};
+
+  return (
+    <UIContainer $hasError={hasError} style={style}>
+      <EditorProvider>
+        <Renderer
+          plugins={preset}
+          defaultValue={String(value?.content)}
+          options={{
+            readOnly: readonly,
+            editable: !readonly,
+          }}
+          onChange={(e) => {
+            onChange({ type: 'template', content: e.value });
+          }}
+        />
+        <MarkdownHighlight />
+        <LanguageSupport />
+        <JinjaHighlight />
+        {children}
+      </EditorProvider>
+    </UIContainer>
+  );
+}

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

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled, { css } from 'styled-components';
+
+export const UIContainer = styled.div<{ $hasError?: boolean }>`
+  background-color: var(--semi-color-fill-0);
+  padding-left: 10px;
+  padding-right: 6px;
+
+  ${({ $hasError }) =>
+    $hasError &&
+    css`
+      border: 1px solid var(--semi-color-danger-6);
+    `}
+`;

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

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React from 'react';
+
+import { IFlowTemplateValue } from '../../typings';
+
+export type PropsType = React.PropsWithChildren<{
+  value?: IFlowTemplateValue;
+  onChange: (value?: IFlowTemplateValue) => void;
+  readonly?: boolean;
+  hasError?: boolean;
+  style?: React.CSSProperties;
+}>;

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

@@ -0,0 +1,12 @@
+{
+  "name": "prompt-editor",
+  "depMaterials": [
+    "variable-selector"
+  ],
+  "depPackages": [
+    "@coze-editor/editor@0.1.0-alpha.8d7a30",
+    "@codemirror/view",
+    "styled-components",
+    "@douyinfe/semi-ui"
+  ]
+}

package/src/components/prompt-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/prompt-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/prompt-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 { PromptEditor, PromptEditorPropsType } from '../prompt-editor';
+
+export function PromptEditorWithVariables(props: PromptEditorPropsType) {
+  return (
+    <PromptEditor {...props}>
+      <VariableTree />
+      <VariableTagInject />
+    </PromptEditor>
+  );
+}

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

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import styled from 'styled-components';
+import { Tag } from '@douyinfe/semi-ui';
+
+export const UIRootTitle = styled.div`
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+`;
+
+export const UIVarName = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const UITag = styled(Tag)`
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 300px;
+
+  & .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+
+  &.semi-tag {
+    margin: 0 5px;
+  }
+`;
+
+export const UIPopoverContent = styled.div`
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+`;

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

@@ -11,7 +11,7 @@ import { IconChevronDownStroked, IconIssueStroked } from '@douyinfe/semi-icons';
 
 import { IJsonSchema } from '../../typings/json-schema';
 import { useVariableTree } from './use-variable-tree';
-import { UIRootTitle, UITag, UITreeSelect } from './styles';
+import { UIRootTitle, UITag, UITreeSelect, UIVarName } from './styles';
 
 interface PropTypes {
   value?: string[];
@@ -102,7 +102,7 @@ export const VariableSelector = ({
               <UIRootTitle>
                 {_option.rootMeta?.title ? `${_option.rootMeta?.title} -` : null}
               </UIRootTitle>
-              {_option.label}
+              <UIVarName>{_option.label}</UIVarName>
             </UITag>
           );
         }}

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

@@ -6,11 +6,22 @@
 import styled from 'styled-components';
 import { Tag, TreeSelect } from '@douyinfe/semi-ui';
 
-export const UIRootTitle = styled.span`
+export const UIRootTitle = styled.div`
   margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--semi-color-text-2);
 `;
 
+export const UIVarName = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 50%;
+`;
+
 export const UITag = styled(Tag)`
   width: 100%;
   display: flex;