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

package/src/components/json-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/json-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/json-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 { CodeEditor, type CodeEditorPropsType } from '../code-editor';
+
+export function JsonEditorWithVariables(props: Omit<CodeEditorPropsType, 'languageId'>) {
+  return (
+    <CodeEditor languageId="json" activeLinePlaceholder="Press '@' to Select variable" {...props}>
+      <VariableTree />
+      <VariableTagInject />
+    </CodeEditor>
+  );
+}

package/src/components/json-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/json-schema-editor/components/blur-input.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useEffect, useState } from 'react';
+
+import Input, { InputProps } from '@douyinfe/semi-ui/lib/es/input';
+
+export function BlurInput(props: InputProps) {
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    setValue(props.value as string);
+  }, [props.value]);
+
+  return (
+    <Input
+      {...props}
+      value={value}
+      onChange={(value) => {
+        setValue(value);
+      }}
+      onBlur={(e) => props.onChange?.(value, e)}
+    />
+  );
+}

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

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

package/src/components/json-schema-editor/default-value.tsx

@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import React, { useRef, useState, useCallback } from 'react';
+
+import { IconButton, JsonViewer, Tooltip } from '@douyinfe/semi-ui';
+import { IconBrackets } from '@douyinfe/semi-icons';
+
+import { getValueType } from './utils';
+import {
+  ConstantInputWrapper,
+  JSONHeader,
+  JSONHeaderLeft,
+  JSONHeaderRight,
+  JSONViewerWrapper,
+} from './styles';
+import { ConstantInput } from '../constant-input';
+import { IJsonSchema } from '../../typings';
+
+/**
+ * 根据不同的数据类型渲染对应的默认值输入组件。
+ * @param props - 组件属性，包括 value, type, placeholder, onChange。
+ * @returns 返回对应类型的输入组件或 null。
+ */
+export function DefaultValue(props: {
+  value: any;
+  schema?: IJsonSchema;
+  name?: string;
+  type?: string;
+  placeholder?: string;
+  jsonFormatText?: string;
+  onChange: (value: any) => void;
+}) {
+  const { value, schema, type, onChange, placeholder, jsonFormatText } = props;
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const JsonViewerRef = useRef<JsonViewer>(null);
+
+  // 为 JsonViewer 添加状态管理
+  const [internalJsonValue, setInternalJsonValue] = useState<string>(
+    getValueType(value) === 'string' ? value : ''
+  );
+
+  // 使用 useCallback 创建稳定的回调函数
+  const handleJsonChange = useCallback((val: string) => {
+    // 只在值真正改变时才更新状态
+    if (val !== internalJsonValue) {
+      setInternalJsonValue(val);
+    }
+  }, []);
+
+  // 处理编辑完成事件
+  const handleEditComplete = useCallback(() => {
+    // 只有当存在key，编辑完成时才触发父组件的 onChange
+    onChange(internalJsonValue);
+    // 确保在更新后移除焦点
+    requestAnimationFrame(() => {
+      // JsonViewerRef.current?.format();
+      wrapperRef.current?.blur();
+    });
+    setJsonReadOnly(true);
+  }, [internalJsonValue, onChange]);
+
+  const [jsonReadOnly, setJsonReadOnly] = useState<boolean>(true);
+
+  const handleFormatJson = useCallback(() => {
+    try {
+      const parsed = JSON.parse(internalJsonValue);
+      const formatted = JSON.stringify(parsed, null, 4);
+      setInternalJsonValue(formatted);
+      onChange(formatted);
+    } catch (error) {
+      console.error('Invalid JSON:', error);
+    }
+  }, [internalJsonValue, onChange]);
+
+  return type === 'object' ? (
+    <>
+      <JSONHeader>
+        <JSONHeaderLeft>json</JSONHeaderLeft>
+        <JSONHeaderRight>
+          <Tooltip content={jsonFormatText ?? 'Format'}>
+            <IconButton
+              icon={<IconBrackets style={{ color: 'var(--semi-color-primary)' }} />}
+              size="small"
+              type="tertiary"
+              theme="borderless"
+              onClick={handleFormatJson}
+            />
+          </Tooltip>
+        </JSONHeaderRight>
+      </JSONHeader>
+
+      <JSONViewerWrapper
+        ref={wrapperRef}
+        tabIndex={-1}
+        onBlur={(e) => {
+          if (wrapperRef.current && !wrapperRef.current?.contains(e.relatedTarget as Node)) {
+            handleEditComplete();
+          }
+        }}
+        onClick={(e: React.MouseEvent) => {
+          setJsonReadOnly(false);
+        }}
+      >
+        <JsonViewer
+          ref={JsonViewerRef}
+          value={getValueType(value) === 'string' ? value : ''}
+          height={120}
+          width="100%"
+          showSearch={false}
+          options={{
+            readOnly: jsonReadOnly,
+            formatOptions: { tabSize: 4, insertSpaces: true, eol: '\n' },
+          }}
+          style={{
+            padding: 0,
+          }}
+          onChange={handleJsonChange}
+        />
+      </JSONViewerWrapper>
+    </>
+  ) : (
+    <ConstantInputWrapper>
+      <ConstantInput
+        value={value}
+        onChange={(_v) => onChange(_v)}
+        schema={schema || { type: 'string' }}
+        placeholder={placeholder ?? 'Default value if parameter is not provided'}
+      />
+    </ConstantInputWrapper>
+  );
+}

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

@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { IJsonSchema } from '../../typings';
+import { PropertyValueType } from './types';
+
+let _id = 0;
+function genId() {
+  return _id++;
+}
+
+function getDrilldownSchema(
+  value?: PropertyValueType,
+  path?: (keyof PropertyValueType)[]
+): { schema?: PropertyValueType | null; path?: (keyof PropertyValueType)[] } {
+  if (!value) {
+    return {};
+  }
+
+  if (value.type === 'array' && value.items) {
+    return getDrilldownSchema(value.items, [...(path || []), 'items']);
+  }
+
+  return { schema: value, path };
+}
+
+export function usePropertiesEdit(
+  value?: PropertyValueType,
+  onChange?: (value: PropertyValueType) => void
+) {
+  // Get drilldown (array.items.items...)
+  const drilldown = useMemo(() => getDrilldownSchema(value), [value, value?.type, value?.items]);
+
+  const isDrilldownObject = drilldown.schema?.type === 'object';
+
+  // Generate Init Property List
+  const initPropertyList = useMemo(
+    () =>
+      isDrilldownObject
+        ? Object.entries(drilldown.schema?.properties || {})
+            .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
+            .map(
+              ([name, _value], index) =>
+                ({
+                  key: genId(),
+                  name,
+                  isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
+                  ..._value,
+                  extra: {
+                    ...(_value.extra || {}),
+                    index,
+                  },
+                } as PropertyValueType)
+            )
+        : [],
+    [isDrilldownObject]
+  );
+
+  const [propertyList, setPropertyList] = useState<PropertyValueType[]>(initPropertyList);
+
+  const mountRef = useRef(false);
+
+  useEffect(() => {
+    // If initRef is true, it means the component has been mounted
+    if (mountRef.current) {
+      // If the value is changed, update the property list
+      setPropertyList((_list) => {
+        const nameMap = new Map<string, PropertyValueType>();
+
+        for (const _property of _list) {
+          if (_property.name) {
+            nameMap.set(_property.name, _property);
+          }
+        }
+        return Object.entries(drilldown.schema?.properties || {})
+          .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
+          .map(([name, _value]) => {
+            const _property = nameMap.get(name);
+            if (_property) {
+              return {
+                key: _property.key,
+                name,
+                isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
+                ..._value,
+              };
+            }
+            return {
+              key: genId(),
+              name,
+              isPropertyRequired: drilldown.schema?.required?.includes(name) || false,
+              ..._value,
+            };
+          });
+      });
+    }
+    mountRef.current = true;
+  }, [drilldown.schema]);
+
+  const updatePropertyList = (updater: (list: PropertyValueType[]) => PropertyValueType[]) => {
+    setPropertyList((_list) => {
+      const next = updater(_list);
+
+      // onChange to parent
+      const nextProperties: Record<string, IJsonSchema> = {};
+      const nextRequired: string[] = [];
+
+      for (const _property of next) {
+        if (!_property.name) {
+          continue;
+        }
+
+        nextProperties[_property.name] = _property;
+
+        if (_property.isPropertyRequired) {
+          nextRequired.push(_property.name);
+        }
+      }
+
+      let drilldownSchema = value || {};
+      if (drilldown.path) {
+        drilldownSchema = drilldown.path.reduce((acc, key) => acc[key], value || {});
+      }
+      drilldownSchema.properties = nextProperties;
+      drilldownSchema.required = nextRequired;
+
+      onChange?.(value || {});
+
+      return next;
+    });
+  };
+
+  const onAddProperty = () => {
+    updatePropertyList((_list) => [
+      ..._list,
+      { key: genId(), name: '', type: 'string', extra: { index: _list.length + 1 } },
+    ]);
+  };
+
+  const onRemoveProperty = (key: number) => {
+    updatePropertyList((_list) => _list.filter((_property) => _property.key !== key));
+  };
+
+  const onEditProperty = (key: number, nextValue: PropertyValueType) => {
+    updatePropertyList((_list) =>
+      _list.map((_property) => (_property.key === key ? nextValue : _property))
+    );
+  };
+
+  useEffect(() => {
+    if (!isDrilldownObject) {
+      setPropertyList([]);
+    }
+  }, [isDrilldownObject]);
+
+  return {
+    propertyList,
+    isDrilldownObject,
+    onAddProperty,
+    onRemoveProperty,
+    onEditProperty,
+  };
+}