@flowgram.ai/form-materials 0.2.21 → 0.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.2.21",
+  "version": "0.2.23",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -30,10 +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",
     "@codemirror/state": "~6.5.2",
-    "@flowgram.ai/editor": "0.2.21"
+    "@flowgram.ai/editor": "0.2.23"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -49,8 +49,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.0.4",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.2.21",
-    "@flowgram.ai/ts-config": "0.2.21"
+    "@flowgram.ai/ts-config": "0.2.23",
+    "@flowgram.ai/eslint-config": "0.2.23"
   },
   "peerDependencies": {
     "react": ">=16.8",

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

@@ -2,7 +2,7 @@
   "name": "code-editor",
   "depMaterials": [],
   "depPackages": [
-    "@coze-editor/editor@0.1.0-alpha.8d7a30",
+    "@coze-editor/editor@0.1.0-alpha.879fbb",
     "@codemirror/view",
     "@codemirror/state"
   ]

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

@@ -3,9 +3,14 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 
-import { createRenderer, EditorProvider } from '@coze-editor/editor/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';
 
@@ -22,11 +27,18 @@ const OriginCodeEditor = createRenderer(preset, [
   }),
 ]);
 
+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({
@@ -35,9 +47,20 @@ export function CodeEditor({
   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
@@ -46,12 +69,19 @@ export function CodeEditor({
           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/theme/light.ts

@@ -30,7 +30,7 @@ export const lightTheme: Extension = createTheme({
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
     lineHighlight: '#f0f0f0',
-    bracketColors: ['#FFEF61', '#DD99FF', '#78B0FF'],
+    bracketColors: ['#FFD700', '#DD99FF', '#78B0FF'],
     tooltip: {
       backgroundColor: '#f0f0f0',
       color: '#000',

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

@@ -5,7 +5,7 @@
     "code-editor"
   ],
   "depPackages": [
-    "@coze-editor/editor@0.1.0-alpha.8d7a30",
+    "@coze-editor/editor@0.1.0-alpha.879fbb",
     "@codemirror/view",
     "styled-components",
     "@douyinfe/semi-ui"

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

@@ -5,13 +5,59 @@
 
 import React from 'react';
 
+import { transformerCreator } from '@coze-editor/editor/preset-code';
+import { Text } from '@coze-editor/editor/language-json';
+
 import { VariableTree } from './extensions/variable-tree';
 import { VariableTagInject } from './extensions/variable-tag';
 import { CodeEditor, type CodeEditorPropsType } from '../code-editor';
 
+type Match = { match: string; range: [number, number] };
+function findAllMatches(inputString: string, regex: RegExp): Match[] {
+  const globalRegex = new RegExp(
+    regex,
+    regex.flags.includes('g') ? regex.flags : regex.flags + 'g'
+  );
+  let match;
+  const matches: Match[] = [];
+
+  while ((match = globalRegex.exec(inputString)) !== null) {
+    if (match.index === globalRegex.lastIndex) {
+      globalRegex.lastIndex++;
+    }
+    matches.push({
+      match: match[0],
+      range: [match.index, match.index + match[0].length],
+    });
+  }
+
+  return matches;
+}
+
+const transformer = transformerCreator((text: Text) => {
+  const originalSource = text.toString();
+  const matches = findAllMatches(originalSource, /\{\{([^\}]*)\}\}/g);
+
+  if (matches.length > 0) {
+    matches.forEach(({ range }) => {
+      text.replaceRange(range[0], range[1], 'null');
+    });
+  }
+
+  return text;
+});
+
 export function JsonEditorWithVariables(props: Omit<CodeEditorPropsType, 'languageId'>) {
   return (
-    <CodeEditor languageId="json" {...props}>
+    <CodeEditor
+      languageId="json"
+      activeLinePlaceholder="Press '@' to Select variable"
+      {...props}
+      options={{
+        transformer,
+        ...(props.options || {}),
+      }}
+    >
       <VariableTree />
       <VariableTagInject />
     </CodeEditor>

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

@@ -1,5 +1,13 @@
 {
   "name": "json-schema-editor",
-  "depMaterials": ["type-selector", "typings/json-schema"],
-  "depPackages": ["@douyinfe/semi-ui", "@douyinfe/semi-icons", "styled-components"]
+  "depMaterials": [
+    "type-selector",
+    "typings/json-schema",
+    "constant-inputs"
+  ],
+  "depPackages": [
+    "@douyinfe/semi-ui",
+    "@douyinfe/semi-icons",
+    "styled-components"
+  ]
 }

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

@@ -2,7 +2,7 @@
   "name": "prompt-editor",
   "depMaterials": [],
   "depPackages": [
-    "@coze-editor/editor@0.1.0-alpha.8d7a30",
+    "@coze-editor/editor@0.1.0-alpha.879fbb",
     "@codemirror/view",
     "styled-components"
   ]

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

@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: MIT
  */
 
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
-import { Renderer, EditorProvider } from '@coze-editor/editor/react';
-import preset from '@coze-editor/editor/preset-prompt';
+import { Renderer, EditorProvider, ActiveLinePlaceholder } from '@coze-editor/editor/react';
+import preset, { EditorAPI } from '@coze-editor/editor/preset-prompt';
 
 import { PropsType } from './types';
 import { UIContainer } from './styles';
@@ -17,22 +17,47 @@ import JinjaHighlight from './extensions/jinja';
 export type PromptEditorPropsType = PropsType;
 
 export function PromptEditor(props: PropsType) {
-  const { value, onChange, readonly, style, hasError, children } = props || {};
+  const {
+    value,
+    onChange,
+    readonly,
+    placeholder,
+    activeLinePlaceholder,
+    style,
+    hasError,
+    children,
+  } = props || {};
+
+  const editorRef = useRef<EditorAPI | null>(null);
+
+  useEffect(() => {
+    // listen to value change
+    if (editorRef.current?.getValue() !== value?.content) {
+      editorRef.current?.setValue(String(value?.content || ''));
+    }
+  }, [value]);
 
   return (
     <UIContainer $hasError={hasError} style={style}>
       <EditorProvider>
         <Renderer
+          didMount={(editor: EditorAPI) => {
+            editorRef.current = editor;
+          }}
           plugins={preset}
           defaultValue={String(value?.content)}
           options={{
             readOnly: readonly,
             editable: !readonly,
+            placeholder,
           }}
           onChange={(e) => {
             onChange({ type: 'template', content: e.value });
           }}
         />
+        {activeLinePlaceholder && (
+          <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
+        )}
         <MarkdownHighlight />
         <LanguageSupport />
         <JinjaHighlight />

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

@@ -12,5 +12,7 @@ export type PropsType = React.PropsWithChildren<{
   onChange: (value?: IFlowTemplateValue) => void;
   readonly?: boolean;
   hasError?: boolean;
+  placeholder?: string;
+  activeLinePlaceholder?: string;
   style?: React.CSSProperties;
 }>;

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

@@ -5,7 +5,7 @@
     "flow-value"
   ],
   "depPackages": [
-    "@coze-editor/editor@0.1.0-alpha.8d7a30",
+    "@coze-editor/editor@0.1.0-alpha.879fbb",
     "@codemirror/view",
     "styled-components",
     "@douyinfe/semi-ui"

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

@@ -5,7 +5,7 @@
     "prompt-editor"
   ],
   "depPackages": [
-    "@coze-editor/editor@0.1.0-alpha.8d7a30",
+    "@coze-editor/editor@0.1.0-alpha.879fbb",
     "@codemirror/view",
     "styled-components",
     "@douyinfe/semi-ui"

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

@@ -3,9 +3,9 @@
  * SPDX-License-Identifier: MIT
  */
 
+import ReactDOM from 'react-dom';
 import React, { useLayoutEffect } from 'react';
 
-import { createRoot, Root } from 'react-dom/client';
 import { isEqual, last } from 'lodash';
 import {
   BaseVariableField,
@@ -35,7 +35,7 @@ class VariableTagWidget extends WidgetType {
 
   scope: Scope;
 
-  root: Root;
+  rootDOM?: HTMLSpanElement;
 
   constructor({ keyPath, scope }: { keyPath?: string[]; scope: Scope }) {
     super();
@@ -52,9 +52,14 @@ class VariableTagWidget extends WidgetType {
     return icon;
   };
 
+  renderReact(jsx: React.ReactElement) {
+    // NOTICE: For React 19, upgrade to 'react-dom/client'
+    ReactDOM.render(jsx, this.rootDOM!);
+  }
+
   renderVariable(v?: BaseVariableField) {
     if (!v) {
-      this.root.render(
+      this.renderReact(
         <UITag prefixIcon={<IconIssueStroked />} color="amber">
           Unknown
         </UITag>
@@ -69,7 +74,7 @@ class VariableTagWidget extends WidgetType {
     );
     const rootIcon = this.renderIcon(rootField?.meta.icon);
 
-    this.root.render(
+    this.renderReact(
       <Popover
         content={
           <UIPopoverContent>
@@ -90,11 +95,12 @@ class VariableTagWidget extends WidgetType {
   toDOM(view: EditorView): HTMLElement {
     const dom = document.createElement('span');
 
-    this.root = createRoot(dom);
+    this.rootDOM = dom;
 
     this.toDispose.push(
       Disposable.create(() => {
-        this.root.unmount();
+        // NOTICE: For React 19, upgrade to 'react-dom/client'
+        ReactDOM.unmountComponentAtNode(this.rootDOM!);
       })
     );