@flowgram-vue/type-editor 0.2.0

package/src/components/type-editor/mode/declare-assign.ts

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { set, get } from 'lodash-es';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { typeEditorUtils } from '../utils';
+import { type ModeValueConfig } from '../type';
+import { TypeEditorColumnType, TypeEditorSchema } from '../../../types';
+
+const traverseIJsonSchema = (
+  root: TypeEditorSchema<IJsonSchema> | undefined,
+  path: string[],
+  cb: (type: TypeEditorSchema<IJsonSchema>, path: string[]) => void
+): void => {
+  if (root) {
+    cb(root, path);
+
+    if (root.properties) {
+      Object.keys(root.properties).forEach((k) => {
+        traverseIJsonSchema(root.properties![k], [...path, k], cb);
+      });
+    }
+  }
+};
+
+export const declareAssignConfig: ModeValueConfig<'declare-assign', IJsonSchema> = {
+  mode: 'declare-assign',
+  convertSchemaToValue: (val) => {
+    const data = {};
+    const newSchema = JSON.parse(JSON.stringify(val));
+
+    traverseIJsonSchema(newSchema, [], (type, path) => {
+      if (type.extra?.value !== undefined) {
+        set(data, path, type.extra?.value);
+      }
+      if (type.extra) {
+        delete type.extra;
+      }
+    });
+
+    return {
+      data,
+      definition: { schema: newSchema },
+    };
+  },
+  convertValueToSchema: (schema) => {
+    const { data } = schema;
+    const newSchema = JSON.parse(JSON.stringify(schema.definition.schema));
+    traverseIJsonSchema(newSchema, [], (type, path) => {
+      const value = get(data, path);
+      if (value !== undefined && type.type !== 'object') {
+        type.extra = { value };
+      }
+    });
+    return newSchema;
+  },
+  commonValueToSubmitValue: (val) => {
+    const type: IJsonSchema = val
+      ? typeEditorUtils.valueToTypeSchema(val)
+      : {
+          type: 'object',
+          properties: {},
+        };
+    return {
+      data: val || {},
+      definition: {
+        schema: type,
+      },
+    };
+  },
+
+  toolConfig: {
+    createByData: {
+      viewConfig: [
+        {
+          type: TypeEditorColumnType.Key,
+          visible: true,
+        },
+        {
+          type: TypeEditorColumnType.Type,
+          visible: true,
+        },
+        {
+          type: TypeEditorColumnType.Value,
+          visible: true,
+        },
+      ],
+      genDefaultValue: () => ({
+        data: {},
+        definition: {
+          schema: {
+            type: 'object',
+            properties: {},
+          },
+        },
+      }),
+    },
+  },
+};

package/src/components/type-editor/mode/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { type ModeValueConfig, type TypeEditorMode } from '../type';
+import { typeDefinitionConfig } from './type-definition';
+import { declareAssignConfig } from './declare-assign';
+
+export const modeValueConfig: ModeValueConfig<TypeEditorMode, IJsonSchema>[] = [
+  declareAssignConfig,
+  typeDefinitionConfig,
+];

package/src/components/type-editor/mode/type-definition.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { typeEditorUtils } from '../utils';
+import { type ModeValueConfig } from '../type';
+import { TypeEditorColumnType } from '../../../types';
+
+export const typeDefinitionConfig: ModeValueConfig<'type-definition', IJsonSchema> = {
+  mode: 'type-definition',
+  convertSchemaToValue: (val) => val,
+  convertValueToSchema: (val) => val,
+  commonValueToSubmitValue: (val) => {
+    if (val) {
+      return typeEditorUtils.valueToTypeSchema(val);
+    }
+    return {
+      type: 'object',
+      properties: {},
+    };
+  },
+
+  toolConfig: {
+    createByData: {
+      viewConfig: [
+        {
+          type: TypeEditorColumnType.Key,
+          visible: true,
+        },
+        {
+          type: TypeEditorColumnType.Type,
+          visible: true,
+        },
+      ],
+      genDefaultValue() {
+        return {
+          type: 'object',
+          properties: {},
+        };
+      },
+    },
+  },
+};

package/src/components/type-editor/table.vue

@@ -0,0 +1,293 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { computed, onMounted, ref, watch } from 'vue';
+import { isEqual } from 'lodash-es';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import {
+  TypeEditorColumnType,
+  TypeEditorRowData,
+} from '../../types';
+import { TypeEditorOperationService, TypeEditorService } from '../../services';
+import { useService, useTypeDefinitionManager } from '../../contexts';
+import { typeEditorUtils } from './utils';
+import { type TypeEditorMode, type TypeEditorRef, type TypeEditorVueProps } from './type';
+import { useFormatter } from './hooks/formatter-value';
+import { columnConfigs } from './columns';
+import { ROOT_FIELD_ID } from './common';
+
+const props = defineProps<TypeEditorVueProps>();
+
+const extraConfig = computed(() => ({ ...(props.extraConfig || {}) }));
+const { formatter, deFormatter } = useFormatter({
+  mode: props.mode,
+  extraConfig: extraConfig.value,
+});
+
+const typeEditor = useService<TypeEditorService<IJsonSchema>>(TypeEditorService);
+const typeOperator = useService<TypeEditorOperationService<IJsonSchema>>(
+  TypeEditorOperationService
+);
+const typeService = useTypeDefinitionManager();
+
+const tableDom = ref<HTMLTableElement>();
+const unOpenKeys = ref<Record<string, boolean>>({});
+const dragId = ref<string>();
+
+const typeSchema = computed(() => formatter(props.value));
+const initialSchema = ref<IJsonSchema>(
+  typeEditorUtils.clone(typeSchema.value) || typeEditorUtils.getInitialSchema()
+);
+
+typeOperator.storeState(initialSchema.value as IJsonSchema);
+typeEditor.registerConfigs(columnConfigs);
+props.viewConfigs.forEach((config) => {
+  if (config.config) {
+    typeEditor.addConfigProps(config.type, config.config);
+  }
+});
+
+watch(
+  () => typeSchema.value,
+  (next) => {
+    if (
+      !isEqual(next, initialSchema.value) &&
+      next &&
+      (props.forceUpdate ||
+        !typeEditorUtils.isTempState(initialSchema.value, extraConfig.value.customValidateName))
+    ) {
+      initialSchema.value = typeEditorUtils.clone(next);
+    }
+  }
+);
+
+const displayColumn = computed(() => props.viewConfigs.filter((v) => v.visible).map((v) => v.type));
+
+const dataSource = computed(() => {
+  const res: TypeEditorRowData<IJsonSchema>[] = [];
+  let index = -1;
+  const dfs = (
+    schema: IJsonSchema,
+    config: {
+      level: number;
+      parentId?: string;
+      key?: string;
+      parent?: IJsonSchema;
+      path: string[];
+    }
+  ): void => {
+    const { parentId, level = -1, key = ROOT_FIELD_ID, path, parent } = config;
+    const id = [parentId, key || String(Date.now())].join('-');
+    const typeConfig = typeService.getTypeBySchema(schema);
+    const uid = parentId ? id : key;
+    const rowData: TypeEditorRowData<IJsonSchema> = {
+      ...schema,
+      key,
+      index,
+      id: uid,
+      level,
+      self: schema,
+      parentId,
+      parent,
+      deepChildrenCount: 0,
+      isRequired: (parent?.required || []).includes(key),
+      childrenCount: 0,
+      disableEditColumn: [...(props.disableEditColumn || [])],
+      path,
+      extraConfig: { ...extraConfig.value },
+    };
+    index += 1;
+    typeEditor.dataSourceMap[rowData.id] = rowData;
+    res.push(rowData);
+    if (typeConfig) {
+      const children = typeConfig.getTypeSchemaProperties?.(schema);
+      const childrenParent = typeConfig.getPropertiesParent?.(schema);
+      if (children) {
+        rowData.childrenCount = Object.keys(children).length;
+        if (unOpenKeys.value[uid]) {
+          return;
+        }
+        const parentPath = [...path, ...(typeConfig.getJsonPaths?.(schema) || [])];
+        let idx = 0;
+        Object.keys(children)
+          .map((k) => {
+            typeEditorUtils.fixFlowIndex(children[k], idx);
+            idx += 1;
+            return k;
+          })
+          .sort((k1, k2) => (children[k1].extra?.index || 0) - (children[k2].extra?.index || 0))
+          .forEach((k) => {
+            dfs(children[k], {
+              key: k,
+              parentId: id,
+              parent: childrenParent,
+              level: level + 1,
+              path: [...parentPath, k],
+            });
+          });
+      }
+    }
+  };
+  if (initialSchema.value) {
+    dfs(initialSchema.value, { level: -1, path: [] });
+    res.shift();
+    const newData = props.onEditRowDataSource ? props.onEditRowDataSource(res) : res;
+    typeEditor.setDataSource(newData);
+    return newData;
+  }
+  return [];
+});
+
+const handleChange = (type?: IJsonSchema, ctx: { storeState?: boolean } = {}) => {
+  const { storeState = true } = ctx;
+  const newSchema = JSON.parse(JSON.stringify(type || initialSchema.value)) as IJsonSchema;
+  initialSchema.value = { ...newSchema };
+  const final = typeEditorUtils.formateTypeSchema(newSchema, extraConfig.value);
+  if (storeState) {
+    typeOperator.storeState(newSchema);
+  }
+  props.onChange?.(deFormatter(final)!);
+};
+
+typeEditor.onChange = handleChange;
+
+const activePos = ref(typeEditor.activePos);
+typeEditor.onActivePosChange.event((v) => {
+  activePos.value = v;
+});
+
+const instance: TypeEditorRef<TypeEditorMode, IJsonSchema> = {
+  getService: () => typeEditor,
+  getOperator: () => typeOperator,
+  getContainer: () => tableDom.value,
+  getValue: () => deFormatter(typeEditor.rootTypeSchema),
+  setValue(originNewVal) {
+    let newVal = originNewVal;
+    if (props.onCustomSetValue) {
+      newVal = props.onCustomSetValue(newVal);
+    }
+    const newSchema = formatter(newVal)!;
+    initialSchema.value = newSchema;
+    typeOperator.storeState(newSchema);
+    const final = typeEditorUtils.formateTypeSchema(newSchema, extraConfig.value);
+    props.onChange?.(deFormatter(final)!);
+  },
+  undo: () => {
+    typeOperator.undo();
+    typeEditor.onChange(typeOperator.getCurrentState(), { storeState: false });
+  },
+  redo: () => {
+    typeOperator.redo();
+    typeEditor.onChange(typeOperator.getCurrentState(), { storeState: false });
+  },
+};
+
+watch(
+  () => initialSchema.value,
+  (v) => {
+    typeEditor.rootTypeSchema = v;
+  },
+  { immediate: true }
+);
+
+onMounted(() => {
+  props.onInit?.({ current: instance });
+});
+
+defineExpose(instance);
+
+const onDropRow = (target: TypeEditorRowData<IJsonSchema>) => {
+  if (!dragId.value || dragId.value === target.id) {
+    return;
+  }
+  const dragData = typeEditor.dataSourceMap[dragId.value];
+  if (!dragData?.parent?.properties || !target.parent?.properties) {
+    dragId.value = undefined;
+    return;
+  }
+  if (target.parent.properties[dragData.key] && target.parent !== dragData.parent) {
+    dragId.value = undefined;
+    return;
+  }
+  delete dragData.parent.properties[dragData.key];
+  target.parent.properties[dragData.key] = dragData.self;
+  typeEditorUtils.fixFlowIndex(dragData);
+  dragData.extra!.index = (target.extra?.index || 0) + 0.1;
+  typeEditorUtils.sortProperties(target.parent);
+  typeEditorUtils.sortProperties(dragData.parent);
+  handleChange();
+  dragId.value = undefined;
+};
+
+const cellProps = (row: TypeEditorRowData<IJsonSchema>, columnType: TypeEditorColumnType) => ({
+  rowData: row,
+  readonly: props.readonly,
+  typeEditor,
+  unOpenKeys: unOpenKeys.value,
+  error: false,
+  onChange: () => handleChange(),
+  onViewMode: () => typeEditor.clearActivePos(),
+  onEditMode: () => {
+    if (!props.readonly) {
+      typeEditor.setActivePos({
+        x: displayColumn.value.indexOf(columnType),
+        y: row.index,
+      });
+    }
+  },
+  onChildrenVisibleChange: (id: string, val: boolean) => {
+    unOpenKeys.value = { ...unOpenKeys.value, [id]: val };
+  },
+});
+</script>
+
+<template>
+  <div class="fg-type-editor">
+    <table ref="tableDom" :class="['fg-type-table', props.tableClassName]">
+      <thead>
+        <tr>
+          <th
+            v-for="col in displayColumn"
+            :key="col"
+            :style="{ width: typeEditor.getConfigByType(col)?.width ? `${typeEditor.getConfigByType(col)?.width}%` : undefined }"
+          >
+            {{ typeEditor.getConfigByType(col)?.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="dataSource.length === 0">
+          <td :colspan="displayColumn.length">
+            <div class="fg-type-empty">No content. Please add.</div>
+          </td>
+        </tr>
+        <tr
+          v-for="row in dataSource"
+          :key="row.id"
+          class="fg-type-row"
+          :class="{ 'is-dragging': dragId === row.id }"
+          draggable="true"
+          @dragstart="dragId = row.id"
+          @dragover.prevent
+          @drop.prevent="onDropRow(row)"
+        >
+          <td v-for="col in displayColumn" :key="col">
+            <component
+              :is="
+                activePos.x === displayColumn.indexOf(col) &&
+                activePos.y === row.index
+                  ? typeEditor.getConfigByType(col)?.editRender ||
+                    typeEditor.getConfigByType(col)?.viewRender
+                  : typeEditor.getConfigByType(col)?.viewRender
+              "
+              v-bind="cellProps(row, col)"
+            />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/components/type-editor/type-editor.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { computed, ref } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { TypeEditorProvider } from '../../contexts';
+import { typeEditorUtils } from './utils';
+import { modeValueConfig } from './mode';
+import TypeEditorTable from './table.vue';
+import {
+  ToolbarKey,
+  type ToolbarConfig,
+  type TypeEditorMode,
+  type TypeEditorRef,
+  type TypeEditorVueProps,
+} from './type';
+
+defineOptions({ name: 'TypeEditor' });
+
+const props = defineProps<TypeEditorVueProps>();
+const editor = ref<TypeEditorRef<TypeEditorMode, IJsonSchema>>();
+const importVisible = ref(false);
+const importText = ref('{}');
+
+const configMap = computed(() => {
+  const res = new Map<string, ToolbarConfig>();
+  (props.toolbarConfig || []).forEach((tool) => {
+    if (typeof tool === 'string') {
+      res.set(tool, { type: tool });
+    } else {
+      res.set(tool.type, tool);
+    }
+  });
+  return res;
+});
+
+const importConfig = computed(() => configMap.value.get(ToolbarKey.Import));
+const showUndo = computed(() => configMap.value.has(ToolbarKey.UndoRedo));
+
+const onInit = (inst: { current?: TypeEditorRef<TypeEditorMode, IJsonSchema> }) => {
+  editor.value = inst.current;
+  props.onInit?.(inst);
+};
+
+const applyImport = () => {
+  const parsed = typeEditorUtils.jsonParse(importText.value);
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    return;
+  }
+  const modeConfig = modeValueConfig.find((v) => v.mode === props.mode);
+  if (modeConfig && editor.value) {
+    editor.value.setValue(modeConfig.commonValueToSubmitValue(parsed) as never);
+  }
+  importVisible.value = false;
+};
+
+defineExpose({
+  getContainer: () => editor.value?.getContainer(),
+  setValue: ((v) => editor.value?.setValue(v)) as TypeEditorRef<
+    TypeEditorMode,
+    IJsonSchema
+  >['setValue'],
+  getService: () => editor.value?.getService(),
+  undo: () => editor.value?.undo(),
+  redo: () => editor.value?.redo(),
+  getValue: () => editor.value?.getValue(),
+  getOperator: () => editor.value?.getOperator(),
+});
+</script>
+
+<template>
+  <TypeEditorProvider :type-registry-creators="props.typeRegistryCreators">
+    <div class="fg-type-editor">
+      <div v-if="editor && (importConfig || showUndo)" class="fg-type-toolbar">
+        <button
+          v-if="importConfig"
+          type="button"
+          class="fg-type-btn"
+          :disabled="!!importConfig.disabled"
+          @click="importVisible = true"
+        >
+          Import from JSON
+        </button>
+        <button v-if="showUndo" type="button" class="fg-type-btn" @click="editor.undo()">
+          Undo
+        </button>
+        <button v-if="showUndo" type="button" class="fg-type-btn" @click="editor.redo()">
+          Redo
+        </button>
+      </div>
+      <TypeEditorTable v-bind="props" :on-init="onInit" />
+      <div v-if="importVisible" class="fg-type-modal" @click.self="importVisible = false">
+        <div class="fg-type-modal-card">
+          <h3>Import from JSON</h3>
+          <textarea v-model="importText" class="fg-type-textarea" rows="12" />
+          <div class="fg-type-toolbar" style="margin-top: 12px">
+            <button type="button" class="fg-type-btn" @click="importVisible = false">Cancel</button>
+            <button type="button" class="fg-type-btn" @click="applyImport">Import</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </TypeEditorProvider>
+</template>

package/src/components/type-editor/type.ts

@@ -0,0 +1,142 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Component } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import {
+  type TypeEditorSpecialConfig,
+  type TypeEditorColumnViewConfig,
+  type TypeEditorRowData,
+  type TypeChangeContext,
+  type TypeEditorColumnType,
+  type TypeEditorSchema,
+  TypeEditorColumnConfig,
+} from '../../types';
+import { TypeEditorOperationService, type TypeEditorService } from '../../services';
+import { TypeRegistryCreatorsAdapter } from '../../contexts';
+
+export type TypeEditorMode = 'type-definition' | 'declare-assign';
+
+export interface DeclareAssignValueType<TypeSchema extends Partial<IJsonSchema>> {
+  data: unknown;
+  definition: {
+    schema: TypeSchema;
+  };
+}
+
+export type TypeEditorValue<
+  Mode extends TypeEditorMode,
+  TypeSchema extends Partial<IJsonSchema>
+> = Mode extends 'type-definition'
+  ? TypeEditorSchema<TypeSchema>
+  : DeclareAssignValueType<TypeSchema>;
+
+export enum ToolbarKey {
+  Import = 'Import',
+  UndoRedo = 'UndoRedo',
+}
+
+export type ToolbarConfig = {
+  type: ToolbarKey;
+  disabled?: string;
+  customInputRender?: Component<{
+    value: string;
+    onChange: (newVal: string) => void;
+  }>;
+};
+
+export interface TypeEditorProp<
+  Mode extends TypeEditorMode,
+  TypeSchema extends Partial<IJsonSchema>
+> {
+  toolbarConfig?: (ToolbarKey | ToolbarConfig)[];
+  mode: Mode;
+  readonly?: boolean;
+  tableClassName?: string;
+  extraConfig?: TypeEditorSpecialConfig<TypeSchema>;
+  rootLevel?: number;
+  getRootSchema?: (schema: TypeSchema) => TypeSchema;
+  typeRegistryCreators?: TypeRegistryCreatorsAdapter<IJsonSchema>[];
+  viewConfigs: (TypeEditorColumnViewConfig & {
+    config?: Partial<Omit<TypeEditorColumnConfig<TypeSchema>, 'type'>>;
+  })[];
+  onEditRowDataSource?: (data: TypeEditorRowData<TypeSchema>[]) => TypeEditorRowData<TypeSchema>[];
+  forceUpdate?: boolean;
+  onError?: (msg?: string[]) => void;
+  value?: TypeEditorValue<Mode, TypeSchema>;
+  onChange?: (newValue: TypeEditorValue<Mode, TypeSchema>) => void;
+  onPaste?: (typeSchema?: TypeSchema) => TypeSchema | undefined;
+  onInit?: (editor: { current?: TypeEditorRef<Mode, TypeSchema> }) => void;
+  onFieldChange?: (ctx: TypeChangeContext) => void;
+  onCustomSetValue?: (
+    newValue: TypeEditorValue<Mode, TypeSchema>
+  ) => TypeEditorValue<Mode, TypeSchema>;
+  customEmptyNode?: Component;
+  disableEditColumn?: Array<{ column: TypeEditorColumnType; reason: string }>;
+}
+
+/** Vue SFC defineProps-friendly surface (no conditional types). */
+export interface TypeEditorVueProps {
+  mode: TypeEditorMode;
+  readonly?: boolean;
+  tableClassName?: string;
+  extraConfig?: TypeEditorSpecialConfig<IJsonSchema>;
+  rootLevel?: number;
+  getRootSchema?: (schema: IJsonSchema) => IJsonSchema;
+  typeRegistryCreators?: TypeRegistryCreatorsAdapter<IJsonSchema>[];
+  viewConfigs: Array<{
+    type: TypeEditorColumnType;
+    visible: boolean;
+    config?: Record<string, unknown>;
+  }>;
+  onEditRowDataSource?: (
+    data: TypeEditorRowData<IJsonSchema>[]
+  ) => TypeEditorRowData<IJsonSchema>[];
+  forceUpdate?: boolean;
+  onError?: (msg?: string[]) => void;
+  value?: IJsonSchema | DeclareAssignValueType<IJsonSchema>;
+  onChange?: (newValue: IJsonSchema | DeclareAssignValueType<IJsonSchema>) => void;
+  onPaste?: (typeSchema?: IJsonSchema) => IJsonSchema | undefined;
+  onInit?: (editor: { current?: TypeEditorRef<TypeEditorMode, IJsonSchema> }) => void;
+  onFieldChange?: (ctx: TypeChangeContext) => void;
+  onCustomSetValue?: (
+    newValue: IJsonSchema | DeclareAssignValueType<IJsonSchema>
+  ) => IJsonSchema | DeclareAssignValueType<IJsonSchema>;
+  customEmptyNode?: Component;
+  disableEditColumn?: Array<{ column: TypeEditorColumnType; reason: string }>;
+  toolbarConfig?: (ToolbarKey | ToolbarConfig)[];
+}
+
+export interface TypeEditorRef<
+  Mode extends TypeEditorMode,
+  TypeSchema extends Partial<IJsonSchema>
+> {
+  setValue: (newVal: TypeEditorValue<Mode, TypeSchema>) => void;
+  getValue: () => TypeEditorValue<Mode, TypeSchema> | undefined;
+  undo: () => void;
+  redo: () => void;
+  getService: () => TypeEditorService<TypeSchema> | undefined;
+  getOperator: () => TypeEditorOperationService<TypeSchema> | undefined;
+  getContainer: () => HTMLDivElement | undefined;
+}
+
+export interface ModeValueConfig<
+  Mode extends TypeEditorMode,
+  TypeSchema extends Partial<IJsonSchema>
+> {
+  mode: Mode;
+  convertValueToSchema: (val: TypeEditorValue<Mode, TypeSchema>) => TypeSchema;
+  convertSchemaToValue: (val: TypeSchema) => TypeEditorValue<Mode, TypeSchema>;
+  commonValueToSubmitValue: (
+    val: Record<string, unknown> | undefined
+  ) => TypeEditorValue<Mode, TypeSchema>;
+  toolConfig: {
+    createByData: {
+      viewConfig: TypeEditorColumnViewConfig[];
+      genDefaultValue: () => TypeEditorValue<Mode, TypeSchema>;
+    };
+  };
+}