@flowgram.ai/form-materials 0.1.0-alpha.18 → 0.1.0-alpha.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowgram.ai/form-materials",
-  "version": "0.1.0-alpha.18",
+  "version": "0.1.0-alpha.19",
   "homepage": "https://flowgram.ai/",
   "repository": "https://github.com/bytedance/flowgram.ai",
   "license": "MIT",
@@ -67,9 +67,9 @@
     "@codemirror/view": "~6.38.0",
     "@codemirror/state": "~6.5.2",
     "zod": "^3.24.4",
-    "@flowgram.ai/json-schema": "0.1.0-alpha.18",
-    "@flowgram.ai/coze-editor": "0.1.0-alpha.18",
-    "@flowgram.ai/editor": "0.1.0-alpha.18"
+    "@flowgram.ai/editor": "0.1.0-alpha.19",
+    "@flowgram.ai/coze-editor": "0.1.0-alpha.19",
+    "@flowgram.ai/json-schema": "0.1.0-alpha.19"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
@@ -77,24 +77,21 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/inquirer": "^9.0.9",
-    "@types/styled-components": "^5",
     "eslint": "^8.54.0",
     "react": "^18",
     "react-dom": "^18",
-    "styled-components": "^5",
     "typescript": "^5.8.3",
     "vitest": "^3.2.4",
     "@rslib/core": "~0.12.4",
     "cross-env": "~7.0.3",
     "@rsbuild/plugin-react": "^1.1.1",
     "date-fns": "~4.1.0",
-    "@flowgram.ai/eslint-config": "0.1.0-alpha.18",
-    "@flowgram.ai/ts-config": "0.1.0-alpha.18"
+    "@flowgram.ai/eslint-config": "0.1.0-alpha.19",
+    "@flowgram.ai/ts-config": "0.1.0-alpha.19"
   },
   "peerDependencies": {
     "react": ">=16.8",
-    "react-dom": ">=16.8",
-    "styled-components": ">=5"
+    "react-dom": ">=16.8"
   },
   "publishConfig": {
     "access": "public",

package/src/components/batch-outputs/index.tsx

@@ -13,7 +13,7 @@ import { useObjectList } from '@/hooks';
 import { InjectVariableSelector } from '@/components/variable-selector';
 
 import { PropsType } from './types';
-import { UIRow, UIRows } from './styles';
+import './styles.css';
 
 export function BatchOutputs(props: PropsType) {
   const { readonly, style } = props;
@@ -22,9 +22,9 @@ export function BatchOutputs(props: PropsType) {
 
   return (
     <div>
-      <UIRows style={style}>
+      <div className="gedit-m-batch-outputs-rows" style={style}>
         {list.map((item) => (
-          <UIRow key={item.id}>
+          <div className="gedit-m-batch-outputs-row" key={item.id}>
             <Input
               style={{ width: 100 }}
               disabled={readonly}
@@ -44,9 +44,9 @@ export function BatchOutputs(props: PropsType) {
               size="small"
               onClick={() => remove(item.id)}
             />
-          </UIRow>
+          </div>
         ))}
-      </UIRows>
+      </div>
       <Button disabled={readonly} icon={<IconPlus />} size="small" onClick={() => add()}>
         {I18n.t('Add')}
       </Button>

package/src/components/batch-outputs/{styles.tsx → styles.css}

@@ -3,17 +3,15 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-
-export const UIRows = styled.div`
+.gedit-m-batch-outputs-rows {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 10px;
-`;
+}
 
-export const UIRow = styled.div`
+.gedit-m-batch-outputs-row {
   display: flex;
   align-items: center;
   gap: 5px;
-`;
+}

package/src/components/blur-input/index.tsx

@@ -13,7 +13,7 @@ import React, { useEffect, useState } from 'react';
 
 import { Input } from '@douyinfe/semi-ui';
 
-type InputProps = React.ComponentPropsWithoutRef<typeof Input>;
+type InputProps = React.ComponentPropsWithRef<typeof Input>;
 
 export function BlurInput(props: InputProps) {
   const [value, setValue] = useState('');
@@ -24,6 +24,7 @@ export function BlurInput(props: InputProps) {
 
   return (
     <Input
+      ref={props.ref}
       {...props}
       value={value}
       onChange={(value) => {

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

@@ -5,7 +5,6 @@
 
 import React, { useEffect, useRef } from 'react';
 
-import styled, { css } from 'styled-components';
 import {
   ActiveLinePlaceholder,
   createRenderer,
@@ -17,6 +16,8 @@ import { EditorView } from '@codemirror/view';
 
 import { getSuffixByLanguageId } from './utils';
 
+import './styles.css';
+
 const OriginCodeEditor = createRenderer(preset, [
   EditorView.theme({
     '&.cm-focused': {
@@ -25,13 +26,7 @@ const OriginCodeEditor = createRenderer(preset, [
   }),
 ]);
 
-const UIContainer = styled.div<{ $mini?: boolean }>`
-  ${({ $mini }) =>
-    $mini &&
-    css`
-      height: 24px;
-    `}
-`;
+// CSS styles are in styles.css
 
 type Preset = typeof preset;
 type Options = Partial<InferValues<Preset[number]>>;
@@ -62,18 +57,28 @@ export function BaseCodeEditor({
 }: CodeEditorPropsType) {
   const editorRef = useRef<EditorAPI | null>(null);
 
+  const editorValue = String(value || '');
+
   useEffect(() => {
     // listen to value change
-    if (editorRef.current?.getValue() !== value) {
-      editorRef.current?.setValue(String(value || ''));
+    if (editorRef.current?.getValue() !== editorValue) {
+      // apply updates on readonly mode
+      const editorView = editorRef.current?.$view;
+      editorView?.dispatch({
+        changes: {
+          from: 0,
+          to: editorView?.state.doc.length,
+          insert: editorValue,
+        },
+      });
     }
-  }, [value]);
+  }, [editorValue]);
 
   return (
-    <UIContainer $mini={mini}>
+    <div className={`gedit-m-code-editor-container ${mini ? 'mini' : ''}`}>
       <EditorProvider>
         <OriginCodeEditor
-          defaultValue={String(value || '')}
+          defaultValue={editorValue}
           options={{
             uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
             languageId,
@@ -101,6 +106,6 @@ export function BaseCodeEditor({
           {children}
         </OriginCodeEditor>
       </EditorProvider>
-    </UIContainer>
+    </div>
   );
 }

package/src/components/code-editor/styles.css

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-code-editor-container {
+}
+
+.gedit-m-code-editor-container.mini {
+  height: 24px;
+}

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

@@ -47,7 +47,7 @@ export const darkTheme: Extension = createTheme({
     gutterForeground: colors.foreground,
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
-    lineHighlight: '#21262D',
+    lineHighlight: 'transparent',
     bracketColors: ['#FBBF24', '#A78BFA', '#7DD3FC'],
     tooltip: {
       backgroundColor: '#21262D',

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

@@ -42,7 +42,7 @@ export const lightTheme: Extension = createTheme({
     gutterForeground: colors.foreground,
     gutterBorderColor: 'transparent',
     gutterBorderWidth: 0,
-    lineHighlight: colors.background,
+    lineHighlight: 'transparent',
     bracketColors: ['#F59E0B', '#8B5CF6', '#06B6D4'],
     tooltip: {
       backgroundColor: colors.dropdownBackground,

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

@@ -5,21 +5,14 @@
 
 import React from 'react';
 
-import styled from 'styled-components';
-
 import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
 
-const UIMini = styled.div`
-  .ͼ1 .cm-content {
-  }
-`;
-
 /**
  * @deprecated use mini in CodeEditorPropsType instead
  */
 export function CodeEditorMini(props: CodeEditorPropsType) {
   return (
-    <UIMini>
+    <div className="gedit-m-code-editor-mini">
       <CodeEditor
         {...props}
         options={{
@@ -29,6 +22,6 @@ export function CodeEditorMini(props: CodeEditorPropsType) {
           ...(props.options || {}),
         }}
       />
-    </UIMini>
+    </div>
   );
 }

package/src/components/condition-context/hooks/use-condition.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 
-import { useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 
 import { IJsonSchema } from '@flowgram.ai/json-schema';
 import { I18n } from '@flowgram.ai/editor';
@@ -14,10 +14,28 @@ import { IConditionRule, ConditionOpConfigs } from '../types';
 import { useConditionContext } from '../context';
 
 interface HooksParams {
+  /**
+   * Left schema of condition
+   */
   leftSchema?: IJsonSchema;
+
+  /**
+   * Operator of condition
+   */
   operator?: string;
 
   /**
+   * If op is not in opOptionList, clear it
+   */
+  onClearOp?: () => void;
+
+  /**
+   * If targetSchema updated, clear it
+   */
+  onClearRight?: () => void;
+
+  /**
+   * @deprecated use ConditionProvider instead
    * custom rule config
    */
   ruleConfig?: {
@@ -26,26 +44,32 @@ interface HooksParams {
   };
 }
 
-export function useCondition({ leftSchema, operator, ruleConfig }: HooksParams) {
+export function useCondition({
+  leftSchema,
+  operator,
+  onClearOp,
+  onClearRight,
+  ruleConfig,
+}: HooksParams) {
   const typeManager = useTypeManager();
   const { rules: contextRules, ops: contextOps } = useConditionContext();
 
-  // 合并用户规则和上下文规则
+  // Merge user rules and context rules
   const userRules = useMemo(
     () => ruleConfig?.rules || contextRules || {},
     [contextRules, ruleConfig?.rules]
   );
 
-  // 合并用户操作符和上下文操作符
+  // Merge user operators and context operators
   const allOps = useMemo(() => ruleConfig?.ops || contextOps || {}, [contextOps, ruleConfig?.ops]);
 
-  // 获取类型配置
+  // Get type configuration
   const config = useMemo(
     () => (leftSchema ? typeManager.getTypeBySchema(leftSchema) : undefined),
     [leftSchema, typeManager]
   );
 
-  // 计算规则
+  // Calculate rule
   const rule = useMemo(() => {
     if (!config) {
       return undefined;
@@ -59,7 +83,7 @@ export function useCondition({ leftSchema, operator, ruleConfig }: HooksParams)
     return config.conditionRule;
   }, [userRules, leftSchema, config]);
 
-  // 计算操作符选项列表
+  // Calculate operator option list
   const opOptionList = useMemo(
     () =>
       Object.keys(rule || {})
@@ -72,6 +96,16 @@ export function useCondition({ leftSchema, operator, ruleConfig }: HooksParams)
     [rule, allOps]
   );
 
+  // When op not in list, clear it
+  useEffect(() => {
+    if (!operator || !rule) {
+      return;
+    }
+    if (!opOptionList.find((item) => item.value === operator)) {
+      onClearOp?.();
+    }
+  }, [operator, opOptionList, onClearOp]);
+
   // get target schema
   const targetSchema = useMemo(() => {
     const targetType: string | IJsonSchema | null = rule?.[operator || ''] || null;
@@ -87,6 +121,16 @@ export function useCondition({ leftSchema, operator, ruleConfig }: HooksParams)
     return targetType;
   }, [rule, operator]);
 
+  const prevTargetSchemaRef = useRef<IJsonSchema | undefined>(undefined);
+
+  // When type of target schema updated, clear it
+  useEffect(() => {
+    if (prevTargetSchemaRef.current?.type !== targetSchema?.type) {
+      onClearRight?.();
+    }
+    prevTargetSchemaRef.current = targetSchema;
+  }, [targetSchema, onClearRight]);
+
   // get current operator config
   const opConfig = useMemo(() => allOps[operator || ''], [operator, allOps]);
 

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

@@ -15,31 +15,23 @@ import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
 import { IConditionRule, ConditionOpConfigs, useCondition } from '@/components/condition-context';
 
 import { ConditionRowValueType } from './types';
-import { UIContainer, UILeft, UIOperator, UIRight, UIValues } from './styles';
+import './styles.css';
 
 interface PropTypes {
   value?: ConditionRowValueType;
   onChange: (value?: ConditionRowValueType) => void;
   style?: React.CSSProperties;
   readonly?: boolean;
+  /**
+   * @deprecated use ConditionContext instead to pass ruleConfig to multiple
+   */
   ruleConfig?: {
     ops?: ConditionOpConfigs;
     rules?: Record<string, IConditionRule>;
   };
 }
 
-const defaultRuleConfig = {
-  ops: {},
-  rules: {},
-};
-
-export function ConditionRow({
-  style,
-  value,
-  onChange,
-  readonly,
-  ruleConfig = defaultRuleConfig,
-}: PropTypes) {
+export function ConditionRow({ style, value, onChange, readonly, ruleConfig }: PropTypes) {
   const { left, operator, right } = value || {};
 
   const available = useScopeAvailable();
@@ -57,6 +49,19 @@ export function ConditionRow({
   const { rule, opConfig, opOptionList, targetSchema } = useCondition({
     leftSchema,
     operator,
+    ruleConfig,
+    onClearOp() {
+      onChange({
+        ...value,
+        operator: undefined,
+      });
+    },
+    onClearRight() {
+      onChange({
+        ...value,
+        right: undefined,
+      });
+    },
   });
 
   const renderOpSelect = () => (
@@ -81,10 +86,10 @@ export function ConditionRow({
   );
 
   return (
-    <UIContainer style={style}>
-      <UIOperator>{renderOpSelect()}</UIOperator>
-      <UIValues>
-        <UILeft>
+    <div className="gedit-m-condition-row-container" style={style}>
+      <div className="gedit-m-condition-row-operator">{renderOpSelect()}</div>
+      <div className="gedit-m-condition-row-values">
+        <div className="gedit-m-condition-row-left">
           <InjectVariableSelector
             readonly={readonly}
             style={{ width: '100%' }}
@@ -99,8 +104,8 @@ export function ConditionRow({
               })
             }
           />
-        </UILeft>
-        <UIRight>
+        </div>
+        <div className="gedit-m-condition-row-right">
           {targetSchema ? (
             <InjectDynamicValueInput
               readonly={readonly || !rule}
@@ -116,9 +121,9 @@ export function ConditionRow({
               value={opConfig?.rightDisplay || I18n.t('Empty')}
             />
           )}
-        </UIRight>
-      </UIValues>
-    </UIContainer>
+        </div>
+      </div>
+    </div>
   );
 }
 

package/src/components/condition-row/{styles.tsx → styles.css}

@@ -3,28 +3,28 @@
  * SPDX-License-Identifier: MIT
  */
 
-import styled from 'styled-components';
-
-export const UIContainer = styled.div`
+.gedit-m-condition-row-container {
   display: flex;
   align-items: center;
   gap: 4px;
-`;
+}
 
-export const UIOperator = styled.div``;
+.gedit-m-condition-row-operator {
+}
 
-export const UILeft = styled.div`
+.gedit-m-condition-row-left {
   width: 100%;
-`;
+}
 
-export const UIRight = styled.div`
+.gedit-m-condition-row-right {
   width: 100%;
-`;
+}
 
-export const UIValues = styled.div`
+.gedit-m-condition-row-values {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 4px;
-`;
+  overflow: hidden;
+}

package/src/components/coze-editor-extensions/extensions/inputs-tree.tsx

@@ -11,7 +11,7 @@ import {
   ASTMatch,
   type BaseType,
   type BaseVariableField,
-  useScopeAvailable,
+  useCurrentScope,
 } from '@flowgram.ai/editor';
 import {
   Mention,
@@ -24,7 +24,8 @@ import { EditorAPI } from '@flowgram.ai/coze-editor/preset-prompt';
 import { type TreeNodeData } from '@douyinfe/semi-ui/lib/es/tree';
 import { Tree, Popover } from '@douyinfe/semi-ui';
 
-import { IFlowValue, FlowValueUtils } from '@/shared';
+import { IInputsValues } from '@/shared/flow-value/types';
+import { FlowValueUtils } from '@/shared';
 
 type VariableField = BaseVariableField<{ icon?: string | JSX.Element; title?: string }>;
 
@@ -32,10 +33,10 @@ export function InputsPicker({
   inputsValues,
   onSelect,
 }: {
-  inputsValues: any;
+  inputsValues: IInputsValues;
   onSelect: (v: string) => void;
 }) {
-  const available = useScopeAvailable();
+  const scope = useCurrentScope();
 
   const getArrayDrilldown = (type: ArrayType, depth = 1): { type: BaseType; depth: number } => {
     if (ASTMatch.isArray(type.items)) {
@@ -89,7 +90,7 @@ export function InputsPicker({
 
     if (FlowValueUtils.isFlowValue(value)) {
       if (FlowValueUtils.isRef(value)) {
-        const variable = available.getByKeyPath(value.content || []);
+        const variable = scope?.available?.getByKeyPath(value.content || []);
         if (variable) {
           return renderVariable(variable, keyPath);
         }
@@ -130,7 +131,7 @@ export function InputsTree({
   inputsValues,
   triggerCharacters = DEFAULT_TRIGGER_CHARACTERS,
 }: {
-  inputsValues: Record<string, IFlowValue>;
+  inputsValues: IInputsValues;
   triggerCharacters?: string[];
 }) {
   const [posKey, setPosKey] = useState('');

package/src/components/coze-editor-extensions/extensions/variable-tag.tsx

@@ -14,7 +14,7 @@ import {
   useCurrentScope,
 } from '@flowgram.ai/editor';
 import { useInjector } from '@flowgram.ai/coze-editor/react';
-import { Popover } from '@douyinfe/semi-ui';
+import { Popover, Tag } from '@douyinfe/semi-ui';
 import { IconIssueStroked } from '@douyinfe/semi-icons';
 import {
   Decoration,
@@ -27,7 +27,7 @@ import {
 
 import { IPolyfillRoot, polyfillCreateRoot } from '@/shared';
 
-import { UIPopoverContent, UIRootTitle, UITag, UIVarName } from '../styles';
+import '../styles.css';
 
 class VariableTagWidget extends WidgetType {
   keyPath?: string[];
@@ -56,9 +56,10 @@ class VariableTagWidget extends WidgetType {
   renderVariable(v?: BaseVariableField) {
     if (!v) {
       this.root.render(
-        <UITag prefixIcon={<IconIssueStroked />} color="amber">
-          Unknown
-        </UITag>
+        <Tag className="gedit-m-coze-editor-tag" color="amber">
+          <IconIssueStroked style={{ marginRight: '4px' }} />
+          <span>Unknown</span>
+        </Tag>
       );
       return;
     }
@@ -67,26 +68,30 @@ class VariableTagWidget extends WidgetType {
     const isRoot = v === rootField;
 
     const rootTitle = (
-      <UIRootTitle>
+      <span className="gedit-m-coze-editor-root-title">
         {rootField.meta?.title ? `${rootField.meta.title} ${isRoot ? '' : '-'} ` : ''}
-      </UIRootTitle>
+      </span>
     );
     const rootIcon = this.renderIcon(rootField?.meta.icon);
 
     this.root.render(
       <Popover
         content={
-          <UIPopoverContent>
+          <div className="gedit-m-coze-editor-popover-content">
             {rootIcon}
             {rootTitle}
-            <UIVarName>{v?.keyPath.slice(1).join('.')}</UIVarName>
-          </UIPopoverContent>
+            <span className="gedit-m-coze-editor-var-name">{v?.keyPath.slice(1).join('.')}</span>
+          </div>
         }
       >
-        <UITag prefixIcon={rootIcon}>
+        <Tag
+          className="gedit-m-coze-editor-tag"
+          style={{ display: 'inline-flex', alignItems: 'center' }}
+        >
+          {rootIcon}
           {rootTitle}
-          {!isRoot && <UIVarName>{v?.key}</UIVarName>}
-        </UITag>
+          {!isRoot && <span className="gedit-m-coze-editor-var-name">{v?.key}</span>}
+        </Tag>
       </Popover>
     );
   }
@@ -133,7 +138,7 @@ class VariableTagWidget extends WidgetType {
 export function VariableTagInject() {
   const injector = useInjector();
 
-  const scope = useCurrentScope();
+  const scope = useCurrentScope({ strict: true });
 
   // 基于 {{var}} 的正则进行匹配，匹配后进行自定义渲染
   useLayoutEffect(() => {