@flowgram.ai/form-materials 0.4.4 → 0.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "@codemirror/state": "~6.5.2",
     "typescript": "^5.8.3",
     "zod": "^3.24.4",
-    "@flowgram.ai/editor": "0.4.4",
-    "@flowgram.ai/json-schema": "0.4.4"
+    "@flowgram.ai/editor": "0.4.5",
+    "@flowgram.ai/json-schema": "0.4.5"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.137",
@@ -52,8 +52,8 @@
     "tsup": "^8.0.1",
     "typescript": "^5.8.3",
     "vitest": "^0.34.6",
-    "@flowgram.ai/ts-config": "0.4.4",
-    "@flowgram.ai/eslint-config": "0.4.4"
+    "@flowgram.ai/ts-config": "0.4.5",
+    "@flowgram.ai/eslint-config": "0.4.5"
   },
   "peerDependencies": {
     "react": ">=16.8",

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

@@ -7,55 +7,56 @@ 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',
+  background: '#0D1117',
+  // syntax - 现代化暗色主题配色
+  comment: '#8B949E',
+  key: '#7DD3FC',
+  variable: '#F472B6',
+  string: '#34D399',
+  number: '#FBBF24',
+  boolean: '#A78BFA',
+  null: '#A78BFA',
+  separator: '#E6EDF3',
 };
 
 export const darkTheme: Extension = createTheme({
   variant: 'dark',
   settings: {
     background: colors.background,
-    foreground: '#fff',
-    caret: '#AEAFAD',
-    selection: '#d9d9d942',
+    foreground: '#E6EDF3',
+    caret: '#7DD3FC',
+    selection: '#264F7833',
     gutterBackground: colors.background,
-    gutterForeground: '#FFFFFF63',
+    gutterForeground: '#6E7681',
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
-    lineHighlight: '#272e3d36',
-    bracketColors: ['#FFEF61', '#DD99FF', '#78B0FF'],
+    lineHighlight: '#21262D',
+    bracketColors: ['#FBBF24', '#A78BFA', '#7DD3FC'],
     tooltip: {
-      backgroundColor: '#363D4D',
-      color: '#fff',
-      border: 'none',
+      backgroundColor: '#21262D',
+      color: '#E6EDF3',
+      border: '1px solid #30363D',
     },
     link: {
-      color: '#4daafc',
+      color: '#58A6FF',
     },
     completionItemHover: {
-      backgroundColor: '#FFFFFF0F',
+      backgroundColor: '#21262D',
     },
     completionItemSelected: {
-      backgroundColor: '#FFFFFF17',
+      backgroundColor: '#1F6EEB',
     },
     completionItemIcon: {
-      color: '#FFFFFFC9',
+      color: '#8B949E',
     },
     completionItemLabel: {
-      color: '#FFFFFFC9',
+      color: '#E6EDF3',
     },
     completionItemInfo: {
-      color: '#FFFFFFC9',
+      color: '#8B949E',
     },
     completionItemDetail: {
-      color: '#FFFFFF63',
+      color: '#6E7681',
     },
   },
   styles: [
@@ -89,31 +90,49 @@ export const darkTheme: Extension = createTheme({
       color: colors.separator,
     },
 
+    // js
+    {
+      tag: [t.definitionKeyword],
+      color: '#C084FC',
+    },
+    {
+      tag: [t.modifier],
+      color: '#C084FC',
+    },
+    {
+      tag: [t.controlKeyword],
+      color: '#C084FC',
+    },
+    {
+      tag: [t.operatorKeyword],
+      color: '#C084FC',
+    },
+
     // markdown
     {
       tag: [t.heading],
-      color: '#6b6bff',
+      color: '#7DD3FC',
     },
     {
       tag: [t.processingInstruction],
-      color: '#6b6bff',
+      color: '#7DD3FC',
     },
 
     // shell
     // curl
     {
       tag: [t.standard(t.variableName)],
-      color: '#3BEB84',
+      color: '#34D399',
     },
     // -X
     {
       tag: [t.attributeName],
-      color: '#FF9933',
+      color: '#FBBF24',
     },
     // url in string (includes quotes), e.g. "https://..."
     {
       tag: [t.special(t.string)],
-      color: '#78B0FF',
+      color: '#7DD3FC',
     },
   ],
 });

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

@@ -7,55 +7,56 @@ 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',
+  background: '#FFFFFF',
+  comment: '#6B7280',
+  key: '#2563EB',
+  variable: '#DC2626',
+  string: '#059669',
+  number: '#EA580C',
+  boolean: '#7C3AED',
+  null: '#7C3AED',
+  separator: '#374151',
 };
 
 export const lightTheme: Extension = createTheme({
   variant: 'light',
   settings: {
-    background: '#fff',
-    foreground: '#000',
-    caret: '#000',
-    selection: '#d9d9d9',
-    gutterBackground: '#f0f0f0',
-    gutterForeground: '#666',
+    background: '#FFFFFF',
+    foreground: '#1F2937',
+    caret: '#2563EB',
+    selection: '#E5E7EB',
+    gutterBackground: '#F9FAFB',
+    gutterForeground: '#6B7280',
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
-    lineHighlight: '#e1e1e180',
-    bracketColors: ['#FFD700', '#DD99FF', '#78B0FF'],
+    lineHighlight: '#F3F4F680',
+    bracketColors: ['#F59E0B', '#8B5CF6', '#06B6D4'],
     tooltip: {
-      backgroundColor: '#f0f0f0',
-      color: '#000',
-      border: '1px solid #ccc',
+      backgroundColor: '#FFFFFF',
+      color: '#1F2937',
+      border: '1px solid #E5E7EB',
+      boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
     },
     link: {
-      color: '#007bff',
+      color: '#2563EB',
     },
     completionItemHover: {
-      backgroundColor: '#f0f0f0',
+      backgroundColor: '#F3F4F6',
     },
     completionItemSelected: {
-      backgroundColor: '#e0e0e0',
+      backgroundColor: '#E5E7EB',
     },
     completionItemIcon: {
-      color: '#333',
+      color: '#4B5563',
     },
     completionItemLabel: {
-      color: '#333',
+      color: '#1F2937',
     },
     completionItemInfo: {
-      color: '#333',
+      color: '#4B5563',
     },
     completionItemDetail: {
-      color: '#666',
+      color: '#6B7280',
     },
   },
   styles: [
@@ -68,6 +69,11 @@ export const lightTheme: Extension = createTheme({
       tag: [t.propertyName],
       color: colors.key,
     },
+    {
+      tag: [t.variableName],
+      color: colors.variable,
+    },
+
     {
       tag: [t.string],
       color: colors.string,
@@ -92,28 +98,46 @@ export const lightTheme: Extension = createTheme({
     // markdown
     {
       tag: [t.heading],
-      color: '#3e76ef',
+      color: '#2563EB',
     },
     {
       tag: [t.processingInstruction],
-      color: '#3e76ef',
+      color: '#2563EB',
+    },
+
+    // js
+    {
+      tag: [t.definitionKeyword],
+      color: '#9333EA',
+    },
+    {
+      tag: [t.modifier],
+      color: '#9333EA',
+    },
+    {
+      tag: [t.controlKeyword],
+      color: '#9333EA',
+    },
+    {
+      tag: [t.operatorKeyword],
+      color: '#9333EA',
     },
 
     // shell
     // curl
     {
       tag: [t.standard(t.variableName)],
-      color: '#00804A',
+      color: '#059669',
     },
     // -X
     {
       tag: [t.attributeName],
-      color: '#C74200',
+      color: '#EA580C',
     },
     // url in string (includes quotes), e.g. "https://..."
     {
       tag: [t.special(t.string)],
-      color: '#2B57D9',
+      color: '#2563EB',
     },
   ],
 });

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

@@ -5,7 +5,6 @@
 
 import React, { useLayoutEffect } from 'react';
 
-import { createRoot, Root } from 'react-dom/client';
 import { isEqual, last } from 'lodash';
 import {
   BaseVariableField,
@@ -26,6 +25,8 @@ import {
   WidgetType,
 } from '@codemirror/view';
 
+import { IPolyfillRoot, polyfillCreateRoot } from '@/shared';
+
 import { UIPopoverContent, UIRootTitle, UITag, UIVarName } from '../styles';
 
 class VariableTagWidget extends WidgetType {
@@ -35,7 +36,7 @@ class VariableTagWidget extends WidgetType {
 
   scope: Scope;
 
-  root: Root;
+  root: IPolyfillRoot;
 
   constructor({ keyPath, scope }: { keyPath?: string[]; scope: Scope }) {
     super();
@@ -90,7 +91,7 @@ class VariableTagWidget extends WidgetType {
   toDOM(view: EditorView): HTMLElement {
     const dom = document.createElement('span');
 
-    this.root = createRoot(dom);
+    this.root = polyfillCreateRoot(dom);
 
     this.toDispose.push(
       Disposable.create(() => {

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

@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: MIT
  */
 
-import ReactDOM from 'react-dom';
 import React, { useLayoutEffect } from 'react';
 
 import { isEqual, last } from 'lodash';
@@ -26,6 +25,8 @@ import {
   WidgetType,
 } from '@codemirror/view';
 
+import { IPolyfillRoot, polyfillCreateRoot } from '@/shared';
+
 import { UIPopoverContent, UIRootTitle, UITag, UIVarName } from '../styles';
 
 class VariableTagWidget extends WidgetType {
@@ -35,7 +36,7 @@ class VariableTagWidget extends WidgetType {
 
   scope: Scope;
 
-  rootDOM?: HTMLSpanElement;
+  root: IPolyfillRoot;
 
   constructor({ keyPath, scope }: { keyPath?: string[]; scope: Scope }) {
     super();
@@ -52,14 +53,9 @@ 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.renderReact(
+      this.root.render(
         <UITag prefixIcon={<IconIssueStroked />} color="amber">
           Unknown
         </UITag>
@@ -67,17 +63,14 @@ class VariableTagWidget extends WidgetType {
       return;
     }
 
-    const rootField = last(v.parentFields) || v;
-    const isRoot = v.parentFields.length === 0;
+    const rootField = last(v.parentFields);
 
     const rootTitle = (
-      <UIRootTitle>
-        {rootField?.meta.title ? `${rootField.meta.title} ${isRoot ? '' : '-'} ` : ''}
-      </UIRootTitle>
+      <UIRootTitle>{rootField?.meta.title ? `${rootField.meta.title} -` : ''}</UIRootTitle>
     );
     const rootIcon = this.renderIcon(rootField?.meta.icon);
 
-    this.renderReact(
+    this.root.render(
       <Popover
         content={
           <UIPopoverContent>
@@ -89,7 +82,7 @@ class VariableTagWidget extends WidgetType {
       >
         <UITag prefixIcon={rootIcon}>
           {rootTitle}
-          {!isRoot && <UIVarName>{v?.key}</UIVarName>}
+          <UIVarName>{v?.key}</UIVarName>
         </UITag>
       </Popover>
     );
@@ -98,12 +91,11 @@ class VariableTagWidget extends WidgetType {
   toDOM(view: EditorView): HTMLElement {
     const dom = document.createElement('span');
 
-    this.rootDOM = dom;
+    this.root = polyfillCreateRoot(dom);
 
     this.toDispose.push(
       Disposable.create(() => {
-        // NOTICE: For React 19, upgrade to 'react-dom/client'
-        ReactDOM.unmountComponentAtNode(this.rootDOM!);
+        this.root.unmount();
       })
     );
 

package/src/shared/index.ts

@@ -6,3 +6,4 @@
 export * from './format-legacy-refs';
 export * from './inject-material';
 export * from './flow-value';
+export * from './polyfill-create-root';

package/src/shared/polyfill-create-root/index.tsx

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import * as ReactDOM from 'react-dom';
+
+export interface IPolyfillRoot {
+  render(children: React.ReactNode): void;
+  unmount(): void;
+}
+
+/**
+ * React 18 polyfill
+ * @param dom
+ * @returns
+ */
+let unstableCreateRoot = (dom: HTMLElement): IPolyfillRoot => ({
+  render(children: JSX.Element) {
+    ReactDOM.render(children, dom);
+  },
+  unmount() {
+    ReactDOM.unmountComponentAtNode(dom);
+  },
+});
+
+export function polyfillCreateRoot(dom: HTMLElement): IPolyfillRoot {
+  return unstableCreateRoot(dom);
+}
+
+export function unstableSetCreateRoot(createRoot: (dom: HTMLElement) => IPolyfillRoot) {
+  unstableCreateRoot = createRoot;
+}