@flowgram.ai/form-materials 0.1.0-alpha.10 → 0.1.0-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.11",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -33,7 +33,8 @@
     "@coze-editor/editor": "0.1.0-alpha.879fbb",
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
-    "@flowgram.ai/editor": "0.1.0-alpha.10"
+    "typescript": "^5.8.3",
+    "@flowgram.ai/editor": "0.1.0-alpha.11"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -47,10 +48,10 @@
     "react-dom": "^18",
     "styled-components": "^5",
     "tsup": "^8.0.1",
-    "typescript": "^5.0.4",
+    "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/eslint-config": "0.1.0-alpha.10",
-    "@flowgram.ai/ts-config": "0.1.0-alpha.10"
+    "@flowgram.ai/ts-config": "0.1.0-alpha.11",
+    "@flowgram.ai/eslint-config": "0.1.0-alpha.11"
   },
   "peerDependencies": {
     "react": ">=16.8",

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

@@ -4,6 +4,7 @@
   "depPackages": [
     "@coze-editor/editor@0.1.0-alpha.879fbb",
     "@codemirror/view",
-    "@codemirror/state"
+    "@codemirror/state",
+    "typescript"
   ]
 }

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

@@ -5,7 +5,12 @@
 
 import React, { useEffect, useRef } from 'react';
 
-import { ActiveLinePlaceholder, 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,6 +27,9 @@ 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;
@@ -29,6 +37,8 @@ export interface CodeEditorPropsType extends React.PropsWithChildren<{}> {
   theme?: 'dark' | 'light';
   placeholder?: string;
   activeLinePlaceholder?: string;
+  readonly?: boolean;
+  options?: Options;
 }
 
 export function CodeEditor({
@@ -39,6 +49,8 @@ export function CodeEditor({
   children,
   placeholder,
   activeLinePlaceholder,
+  options,
+  readonly,
 }: CodeEditorPropsType) {
   const editorRef = useRef<EditorAPI | null>(null);
 
@@ -58,6 +70,9 @@ export function CodeEditor({
           languageId,
           theme,
           placeholder,
+          readOnly: readonly,
+          editable: !readonly,
+          ...(options || {}),
         }}
         didMount={(editor: EditorAPI) => {
           editorRef.current = editor;

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

@@ -4,14 +4,15 @@
  */
 
 import { languages } from '@coze-editor/editor/preset-code';
-// import { typescript } from '@coze-editor/editor/language-typescript';
+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('typescript', typescript);
+languages.register('shell', shell);
 
 languages.register('json', {
   // mixLanguages is used to solve the problem that interpolation also uses parentheses, which causes incorrect highlighting
@@ -20,5 +21,3 @@ languages.register('json', {
   }),
   languageService: json.languageService,
 });
-
-languages.register('shell', shell);

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/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" activeLinePlaceholder="Press '@' to Select variable" {...props}>
+    <CodeEditor
+      languageId="json"
+      activeLinePlaceholder="Press '@' to Select variable"
+      {...props}
+      options={{
+        transformer,
+        ...(props.options || {}),
+      }}
+    >
       <VariableTree />
       <VariableTagInject />
     </CodeEditor>

package/src/components/json-schema-editor/hooks.tsx

@@ -5,6 +5,8 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react';
 
+import { omit } from 'lodash';
+
 import { IJsonSchema } from '../../typings';
 import { PropertyValueType } from './types';
 
@@ -113,7 +115,7 @@ export function usePropertiesEdit(
           continue;
         }
 
-        nextProperties[_property.name] = _property;
+        nextProperties[_property.name] = omit(_property, ['key', 'name', 'isPropertyRequired']);
 
         if (_property.isPropertyRequired) {
           nextRequired.push(_property.name);

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

@@ -26,6 +26,7 @@ export function PromptEditor(props: PropsType) {
     style,
     hasError,
     children,
+    disableMarkdownHighlight,
   } = props || {};
 
   const editorRef = useRef<EditorAPI | null>(null);
@@ -58,7 +59,7 @@ export function PromptEditor(props: PropsType) {
         {activeLinePlaceholder && (
           <ActiveLinePlaceholder>{activeLinePlaceholder}</ActiveLinePlaceholder>
         )}
-        <MarkdownHighlight />
+        {!disableMarkdownHighlight && <MarkdownHighlight />}
         <LanguageSupport />
         <JinjaHighlight />
         {children}

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

@@ -14,5 +14,6 @@ export type PropsType = React.PropsWithChildren<{
   hasError?: boolean;
   placeholder?: string;
   activeLinePlaceholder?: string;
+  disableMarkdownHighlight?: boolean;
   style?: React.CSSProperties;
 }>;

package/src/effects/auto-rename-ref/index.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { isArray, isObject } from 'lodash';
+import { isArray, isObject, uniq } from 'lodash';
 import {
   DataEvent,
   Effect,
@@ -11,7 +11,7 @@ import {
   VariableFieldKeyRenameService,
 } from '@flowgram.ai/editor';
 
-import { IFlowRefValue } from '../../typings';
+import { IFlowRefValue, IFlowTemplateValue } from '../../typings';
 
 /**
  * Auto rename ref when form item's key is renamed
@@ -44,9 +44,34 @@ export const autoRenameRefEffect: EffectOptions[] = [
 
         // traverse rename refs inside form item 'name'
         traverseRef(name, form.getValueIn(name), (_drilldownName, _v) => {
-          if (isRefMatch(_v, beforeKeyPath)) {
-            _v.content = [...afterKeyPath, ...(_v.content || [])?.slice(beforeKeyPath.length)];
-            form.setValueIn(_drilldownName, _v);
+          if (_v.type === 'ref') {
+            // ref auto rename
+            if (isKeyPathMatch(_v.content, beforeKeyPath)) {
+              _v.content = [...afterKeyPath, ...(_v.content || [])?.slice(beforeKeyPath.length)];
+              form.setValueIn(_drilldownName, _v);
+            }
+          } else if (_v.type === 'template') {
+            // template auto rename
+            const templateKeyPaths = getTemplateKeyPaths(_v);
+            let hasMatch = false;
+
+            templateKeyPaths.forEach((_keyPath) => {
+              if (isKeyPathMatch(_keyPath, beforeKeyPath)) {
+                hasMatch = true;
+                const nextKeyPath = [
+                  ...afterKeyPath,
+                  ...(_keyPath || [])?.slice(beforeKeyPath.length),
+                ];
+                _v.content = _v.content?.replace(
+                  `{{${_keyPath.join('.')}}`,
+                  `{{${nextKeyPath.join('.')}}`
+                );
+              }
+            });
+
+            if (hasMatch) {
+              form.setValueIn(_drilldownName, { ..._v });
+            }
           }
         });
       });
@@ -64,8 +89,21 @@ export const autoRenameRefEffect: EffectOptions[] = [
  * @param targetKeyPath
  * @returns
  */
-function isRefMatch(value: IFlowRefValue, targetKeyPath: string[]) {
-  return targetKeyPath.every((_key, index) => _key === value.content?.[index]);
+function isKeyPathMatch(keyPath: string[] = [], targetKeyPath: string[]) {
+  return targetKeyPath.every((_key, index) => _key === keyPath[index]);
+}
+
+/**
+ * get template key paths
+ * @param value
+ * @returns
+ */
+function getTemplateKeyPaths(value: IFlowTemplateValue) {
+  // find all keyPath wrapped in {{}}
+  const keyPathReg = /{{(.*?)}}/g;
+  return uniq(value.content?.match(keyPathReg) || []).map((_keyPath) =>
+    _keyPath.slice(2, -2).split('.')
+  );
 }
 
 /**
@@ -79,19 +117,32 @@ function isRef(value: any): value is IFlowRefValue {
   );
 }
 
+function isTemplate(value: any): value is IFlowTemplateValue {
+  return value?.type === 'template' && typeof value?.content === 'string';
+}
+
 /**
  * Traverse value to find ref
  * @param value
  * @param options
  * @returns
  */
-function traverseRef(name: string, value: any, cb: (name: string, _v: IFlowRefValue) => void) {
+function traverseRef(
+  name: string,
+  value: any,
+  cb: (name: string, _v: IFlowRefValue | IFlowTemplateValue) => void
+) {
   if (isObject(value)) {
     if (isRef(value)) {
       cb(name, value);
       return;
     }
 
+    if (isTemplate(value)) {
+      cb(name, value);
+      return;
+    }
+
     Object.entries(value).forEach(([_key, _value]) => {
       traverseRef(`${name}.${_key}`, _value, cb);
     });