@flowgram-vue/type-editor 0.2.0

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

@@ -0,0 +1,173 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { nanoid } from 'nanoid';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { TypeEditorSpecialConfig } from '../../types';
+import { disableFixIndexFormatter, emptyKeyFormatter } from './formatter';
+import { SUFFIX, COMPONENT_ID_PREFIX } from './common';
+
+const genNewTypeSchema = <TypeSchema extends Partial<IJsonSchema>>(
+  index: number
+): [string, TypeSchema] => {
+  const newKey = genEmptyKey();
+  return [
+    newKey,
+    {
+      type: 'string',
+      extra: {
+        index,
+      },
+    } as TypeSchema,
+  ];
+};
+
+const traverseIJsonSchema = <TypeSchema extends Partial<IJsonSchema>>(
+  root: TypeSchema | undefined,
+  cb: (type: TypeSchema) => void
+): void => {
+  if (root) {
+    cb(root);
+    if (root.items) {
+      traverseIJsonSchema(root.items as TypeSchema, cb);
+    }
+    if (root.additionalProperties) {
+      traverseIJsonSchema(root.additionalProperties as TypeSchema, cb);
+    }
+    if (root.properties) {
+      Object.values(root.properties).forEach((v) => {
+        traverseIJsonSchema(v as TypeSchema, cb);
+      });
+    }
+  }
+};
+
+export const jsonParse = (jsonString?: string) => {
+  try {
+    return JSON.parse(jsonString || '');
+  } catch {
+    return undefined;
+  }
+};
+
+const sortProperties = <TypeSchema extends Partial<IJsonSchema>>(typeSchema: TypeSchema) => {
+  const { properties = {} } = typeSchema;
+  const originKeys = Object.keys(properties);
+  const sortKeys = originKeys.sort(
+    (a, b) => (properties[a].extra?.index || 0) - (properties[b].extra?.index || 0)
+  );
+  for (let i = 0; i < sortKeys.length; i++) {
+    const key = sortKeys[i];
+    fixFlowIndex(properties[key]);
+    properties[key].extra!.index = i;
+  }
+};
+
+const fixFlowIndex = <TypeSchema extends Partial<IJsonSchema>>(type: TypeSchema, idx = 0): void => {
+  if (!type) {
+    return;
+  }
+  if (!type.extra) {
+    type.extra = {};
+  }
+  if (type.extra.index === undefined) {
+    type.extra.index = idx;
+  }
+};
+
+const getInitialSchema = <TypeSchema extends Partial<IJsonSchema>>(): TypeSchema =>
+  ({
+    type: 'object',
+    properties: {},
+  }) as TypeSchema;
+
+const clone = <T>(val: T): T => (val ? JSON.parse(JSON.stringify(val)) : val);
+
+const isTempState = <TypeSchema extends Partial<IJsonSchema>>(
+  type: TypeSchema,
+  customValidateName?: (value: string) => string
+): boolean => {
+  let error = false;
+  traverseIJsonSchema(type, (c) => {
+    if (c.properties) {
+      Object.keys(c.properties).forEach((key) => {
+        const res = isEmptyKey(key) || customValidateName?.(key);
+        if (res) {
+          error = true;
+        }
+      });
+    }
+  });
+  return error;
+};
+
+const genEmptyKey = () => SUFFIX + nanoid();
+const isEmptyKey = (key: string) => key.startsWith(SUFFIX);
+const formateKey = (key: string) => (isEmptyKey(key) ? '' : key);
+const deFormateKey = (key: string, originKey?: string) => (!key ? originKey || genEmptyKey() : key);
+
+const formateTypeSchema = <TypeSchema extends Partial<IJsonSchema>>(
+  typeSchema: TypeSchema,
+  config: TypeEditorSpecialConfig<TypeSchema>
+): TypeSchema => {
+  const newSchema = JSON.parse(JSON.stringify(typeSchema));
+  const formatters = [emptyKeyFormatter];
+  if (config.disableFixIndex) {
+    formatters.push(disableFixIndexFormatter);
+  }
+  traverseIJsonSchema(newSchema, (type) => {
+    formatters.forEach((formatter) => {
+      formatter(type);
+    });
+  });
+  return newSchema;
+};
+
+const valueToTypeSchema = <TypeSchema extends Partial<IJsonSchema>>(value: unknown): TypeSchema => {
+  switch (typeof value) {
+    case 'string':
+      return { type: 'string' } as TypeSchema;
+    case 'bigint':
+    case 'number':
+      return { type: 'number' } as TypeSchema;
+    case 'boolean':
+      return { type: 'boolean' } as TypeSchema;
+    case 'object': {
+      if (value) {
+        if (Array.isArray(value)) {
+          return { type: 'array', items: valueToTypeSchema(value[0]) } as TypeSchema;
+        }
+        const object: IJsonSchema = { type: 'object', properties: {} };
+        Object.keys(value as object).forEach((k) => {
+          object.properties![k] = valueToTypeSchema((value as Record<string, unknown>)[k]);
+        });
+        return object as TypeSchema;
+      }
+      break;
+    }
+    default:
+      break;
+  }
+  return { type: 'string' } as TypeSchema;
+};
+
+export const typeEditorUtils = {
+  genNewTypeSchema,
+  sortProperties,
+  traverseIJsonSchema,
+  fixFlowIndex,
+  genEmptyKey,
+  jsonParse,
+  clone,
+  formateTypeSchema,
+  isTempState,
+  valueToTypeSchema,
+  deFormateKey,
+  formateKey,
+  getInitialSchema,
+};
+
+export const getComponentId = (id: string): string => `${COMPONENT_ID_PREFIX}-${id}`;

package/src/components/type-selector/index.ts

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h, ref } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { TypeEditorProvider } from '../../contexts';
+import TypeSelectorInner from './type-selector.vue';
+import type { DisableTypeInfo } from '../../types';
+import type { TypeRegistryCreatorsAdapter } from '../../contexts';
+
+export const TypeSelector = defineComponent({
+  name: 'TypeSelector',
+  props: {
+    value: Object as () => IJsonSchema,
+    disableTypes: Array as () => DisableTypeInfo[],
+    defaultOpen: Boolean,
+    disabled: Boolean,
+    typeRegistryCreators: Array as () => TypeRegistryCreatorsAdapter<IJsonSchema>[],
+  },
+  emits: ['change', 'dropdownVisibleChange', 'blur'],
+  setup(props, { emit }) {
+    const ready = ref(false);
+    return () =>
+      h(
+        TypeEditorProvider,
+        {
+          typeRegistryCreators: props.typeRegistryCreators,
+          onInit: () => {
+            ready.value = true;
+          },
+        },
+        () =>
+          ready.value
+            ? h(TypeSelectorInner, {
+                value: props.value,
+                disableTypes: props.disableTypes,
+                defaultOpen: props.defaultOpen,
+                disabled: props.disabled,
+                typeRegistryCreators: props.typeRegistryCreators,
+                onChange: (val: IJsonSchema | undefined, ctx: { source: string }) =>
+                  emit('change', val, ctx),
+                onDropdownVisibleChange: (v: boolean) => emit('dropdownVisibleChange', v),
+                onBlur: () => emit('blur'),
+              })
+            : null
+      );
+  },
+});

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

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { computed, onMounted, ref } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { useTypeDefinitionManager } from '../../contexts';
+import type { DisableTypeInfo } from '../../types';
+import type { TypeRegistryCreatorsAdapter } from '../../contexts';
+
+defineOptions({ name: 'TypeSelector' });
+
+const props = defineProps<{
+  value?: IJsonSchema;
+  disableTypes?: DisableTypeInfo[];
+  defaultOpen?: boolean;
+  disabled?: boolean;
+  typeRegistryCreators?: TypeRegistryCreatorsAdapter<IJsonSchema>[];
+}>();
+
+const emit = defineEmits<{
+  change: [val: IJsonSchema | undefined, ctx: { source: 'type-selector' | 'custom-panel' }];
+  'dropdown-visible-change': [visible: boolean];
+  blur: [];
+}>();
+
+const typeService = useTypeDefinitionManager();
+const open = ref(!!props.defaultOpen);
+const query = ref('');
+
+const options = computed(() => {
+  const disabled = new Map((props.disableTypes || []).map((d) => [d.type, d.reason]));
+  return typeService.getTypeRegistriesWithParentType().map((config) => ({
+    type: config.type,
+    label: config.label,
+    icon: config.icon,
+    disabled: disabled.get(config.type),
+    schema: config.getDefaultSchema?.() || { type: config.type },
+  }));
+});
+
+const filtered = computed(() => {
+  const q = query.value.toLowerCase();
+  if (!q) {
+    return options.value;
+  }
+  return options.value.filter((o) => o.label.toLowerCase().includes(q) || o.type.includes(q));
+});
+
+const currentLabel = computed(() => {
+  if (!props.value) {
+    return '';
+  }
+  return typeService.getComplexText(props.value);
+});
+
+onMounted(() => {
+  if (props.defaultOpen) {
+    emit('dropdown-visible-change', true);
+  }
+});
+
+const select = (opt: (typeof options.value)[number]) => {
+  if (opt.disabled) {
+    return;
+  }
+  emit('change', opt.schema as IJsonSchema, { source: 'type-selector' });
+  open.value = false;
+  emit('dropdown-visible-change', false);
+};
+</script>
+
+<template>
+  <div class="fg-type-selector">
+    <input
+      class="fg-type-input"
+      :disabled="props.disabled"
+      :placeholder="currentLabel"
+      :value="query"
+      @focus="open = true; emit('dropdown-visible-change', true)"
+      @blur="emit('blur')"
+      @input="query = ($event.target as HTMLInputElement).value"
+    />
+    <div v-if="open && !props.disabled" class="fg-type-selector-panel">
+      <div
+        v-for="opt in filtered"
+        :key="opt.type"
+        class="fg-type-selector-item"
+        :class="{ 'is-disabled': !!opt.disabled }"
+        :title="opt.disabled"
+        @mousedown.prevent="select(opt)"
+      >
+        <component :is="() => opt.icon" />
+        <span>{{ opt.label }}</span>
+      </div>
+    </div>
+  </div>
+</template>

package/src/contexts/index.ts

@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { Container, type interfaces } from 'inversify';
+import { IJsonSchema, JsonSchemaTypeRegistryCreator } from '@flowgram-vue/json-schema';
+import {
+  defineComponent,
+  inject,
+  provide,
+  type InjectionKey,
+  type PropType,
+} from 'vue';
+
+import {
+  getTypeDefinitionAdapter,
+  type ITypeDefinitionAdapter,
+  registryFormatter,
+} from '../utils/registry-adapter';
+import { TypeEditorRegistry } from '../types';
+import { defaultTypeRegistryCreators } from '../type-registry';
+import { TypeEditorRegistryManager } from '../services/type-registry-manager';
+import {
+  ClipboardService,
+  ShortcutsService,
+  TypeEditorOperationService,
+  TypeEditorService,
+} from '../services';
+
+export type TypeRegistryCreatorsAdapter<TypeSchema extends Partial<IJsonSchema>> = (
+  param: Parameters<JsonSchemaTypeRegistryCreator<TypeSchema, TypeEditorRegistry<TypeSchema>>>[0] &
+    ITypeDefinitionAdapter<TypeSchema>
+) => ReturnType<JsonSchemaTypeRegistryCreator<TypeSchema, TypeEditorRegistry<TypeSchema>>>;
+
+export const TypeEditorContext = {
+  typeRegistryCreators: [] as TypeRegistryCreatorsAdapter<IJsonSchema>[],
+};
+
+interface Context {
+  container: Container;
+}
+
+const TypeContextKey: InjectionKey<Context> = Symbol('TypeEditorContainer');
+
+export function useService<T>(identifier: interfaces.ServiceIdentifier<T>): T {
+  const ctx = inject(TypeContextKey);
+  if (!ctx) {
+    throw new Error('useService() must be used inside TypeEditorProvider');
+  }
+  return ctx.container.get(identifier) as T;
+}
+
+export const TypeEditorProvider = defineComponent({
+  name: 'TypeEditorProvider',
+  props: {
+    typeRegistryCreators: {
+      type: Array as PropType<TypeRegistryCreatorsAdapter<IJsonSchema>[]>,
+      default: () => [],
+    },
+    onInit: {
+      type: Function as PropType<() => void>,
+    },
+  },
+  setup(props, { slots }) {
+    const container = new Container();
+    container.bind(TypeEditorService).toSelf().inSingletonScope();
+    container.bind(TypeEditorOperationService).toSelf().inSingletonScope();
+    container.bind(TypeEditorRegistryManager).toSelf().inSingletonScope();
+    container.bind(ShortcutsService).toSelf().inSingletonScope();
+    container.bind(ClipboardService).toSelf().inSingletonScope();
+
+    provide(TypeContextKey, { container });
+
+    const typeManager = container.get<TypeEditorRegistryManager<IJsonSchema>>(
+      TypeEditorRegistryManager
+    );
+
+    defaultTypeRegistryCreators.forEach((creator) => {
+      typeManager.register(
+        creator as unknown as JsonSchemaTypeRegistryCreator<
+          IJsonSchema,
+          TypeEditorRegistry<IJsonSchema>
+        >
+      );
+    });
+
+    const adapter = getTypeDefinitionAdapter(typeManager);
+    (props.typeRegistryCreators || []).forEach((creator) => {
+      typeManager.register(creator({ typeManager, ...adapter }));
+    });
+
+    typeManager.getAllTypeRegistries().forEach((registry) => {
+      const res = registryFormatter(registry, typeManager);
+      typeManager.register(res);
+    });
+
+    typeManager.triggerChanges();
+    props.onInit?.();
+
+    return () => slots.default?.();
+  },
+});
+
+export const useTypeDefinitionManager = <TypeSchema extends Partial<IJsonSchema>>() =>
+  useService<TypeEditorRegistryManager<TypeSchema>>(TypeEditorRegistryManager);

package/src/env.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, unknown>;
+  export default component;
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import './styles.css';
+
+export * from './types';
+export { TypeEditorContext } from './contexts';
+export { columnConfigs as typeEditorColumnConfigs } from './components/type-editor/columns';
+export * from './components';
+export * from './services/type-editor-service';
+export * from './services/type-registry-manager';
+export * from '@flowgram-vue/json-schema';
+export * from './preset';

package/src/json-schema-exports.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ *
+ * Re-export json-schema public types/runtime without `container-module.ts`.
+ * That file currently fails `tsc` (inversify `bind().to()` variance) in
+ * `@flowgram-vue/json-schema`; importing the package barrel would fail this
+ * package's ts-check. Consumers that need `jsonSchemaContainerModule` should
+ * import it from `@flowgram-vue/json-schema` directly after that package is fixed.
+ */
+
+export * from '../../../variable-engine/json-schema/src/json-schema';
+export * from '../../../variable-engine/json-schema/src/base';
+export {
+  useTypeManager,
+  TypePresetProvider,
+  TypePresetKey,
+} from '../../../variable-engine/json-schema/src/composables/use-type-manager';

package/src/preset/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as ObjectTypeEditor } from './object-type-editor.vue';

package/src/preset/object-type-editor.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+import { computed } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { TypeEditorColumnType, type TypeEditorColumnViewConfig } from '../types';
+import { ToolbarKey } from '../components/type-editor/type';
+import TypeEditor from '../components/type-editor/type-editor.vue';
+
+defineOptions({ name: 'ObjectTypeEditor' });
+
+const defaultViewConfigs: TypeEditorColumnViewConfig[] = [
+  { type: TypeEditorColumnType.Key, visible: true },
+  { type: TypeEditorColumnType.Type, visible: true },
+  { type: TypeEditorColumnType.Description, visible: true },
+  { type: TypeEditorColumnType.Required, visible: true },
+  { type: TypeEditorColumnType.Default, visible: true },
+  { type: TypeEditorColumnType.Operate, visible: true },
+];
+
+const props = defineProps<{
+  value?: IJsonSchema;
+  readonly?: boolean;
+  config?: {
+    rootKey?: string;
+    viewConfigs?: TypeEditorColumnViewConfig[];
+  };
+}>();
+
+const emit = defineEmits<{
+  change: [value?: IJsonSchema];
+}>();
+
+const rootKey = computed(() => props.config?.rootKey || 'outputs');
+const viewConfigs = computed(() => props.config?.viewConfigs || defaultViewConfigs);
+
+const wrapValue = computed<IJsonSchema>(() => ({
+  type: 'object',
+  properties: { [rootKey.value]: props.value || { type: 'object' } },
+}));
+
+const disableEditColumn = computed(() => {
+  if (!props.readonly) {
+    return [];
+  }
+  return viewConfigs.value.map((v) => ({
+    column: v.type,
+    reason: 'This field is not editable.',
+  }));
+});
+</script>
+
+<template>
+  <div>
+    <TypeEditor
+      :readonly="props.readonly"
+      mode="type-definition"
+      :toolbar-config="[ToolbarKey.Import, ToolbarKey.UndoRedo]"
+      :root-level="1"
+      :value="wrapValue"
+      :disable-edit-column="disableEditColumn"
+      :view-configs="defaultViewConfigs"
+      :on-change="(v) => emit('change', v?.properties?.[rootKey])"
+      :on-custom-set-value="
+        (newType) => ({
+          type: 'object',
+          properties: { [rootKey]: newType },
+        })
+      "
+      :get-root-schema="(type) => type.properties![rootKey]"
+      :on-edit-row-data-source="
+        (dataSource) => {
+          if (dataSource[0]) {
+            dataSource[0].disableEditColumn = [
+              { column: TypeEditorColumnType.Key, reason: 'This field is not editable.' },
+              { column: TypeEditorColumnType.Type, reason: 'This field is not editable.' },
+              { column: TypeEditorColumnType.Required, reason: 'This field is not editable.' },
+              { column: TypeEditorColumnType.Default, reason: 'This field is not editable.' },
+              { column: TypeEditorColumnType.Operate, reason: 'This field is not editable.' },
+            ];
+            dataSource[0].cannotDrag = true;
+          }
+          return dataSource;
+        }
+      "
+    />
+  </div>
+</template>

package/src/services/clipboard-service.ts

@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { injectable } from 'inversify';
+import { Event, Emitter } from '@flowgram-vue/utils';
+
+@injectable()
+export class ClipboardService {
+  public readonly onClipboardChangedEmitter = new Emitter<string>();
+
+  readonly onClipboardChanged: Event<string> = this.onClipboardChangedEmitter.event;
+
+  /**
+   * 读取浏览器数据
+   */
+  private get data(): Promise<string> {
+    return navigator.clipboard.readText();
+  }
+
+  private async saveReadData(): Promise<{
+    error?: string;
+    data?: string;
+  }> {
+    try {
+      const data = await this.data;
+      return {
+        data,
+      };
+    } catch (error) {
+      return {
+        error: error as string,
+      };
+    }
+  }
+
+  /**
+   * 设置剪切板数据
+   */
+  public async writeData(newStrData: string): Promise<void> {
+    const oldSaveData = await this.saveReadData();
+
+    // 读取错误可能是没有读取权限，此时不校验是否相等，直接写入剪切板
+    if (oldSaveData.error || oldSaveData.data !== newStrData) {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(newStrData);
+        const event = document.createEvent('Event');
+        event.initEvent('onchange');
+        (event as unknown as { value: string }).value = newStrData;
+        navigator.clipboard.dispatchEvent(event);
+      } else {
+        const textarea = document.createElement('textarea');
+        textarea.value = newStrData;
+
+        // 视区以外渲染 dom，无法 display none，否则无文本 copy
+        textarea.style.display = 'absolute';
+        textarea.style.left = '-99999999px';
+
+        document.body.prepend(textarea);
+
+        // highlight the content of the textarea element
+        textarea.select();
+
+        try {
+          document.execCommand('copy');
+        } catch (err) {
+          console.log(err);
+        } finally {
+          textarea.remove();
+        }
+      }
+
+      this.onClipboardChangedEmitter.fire(newStrData);
+    }
+  }
+
+  /**
+   * 获取剪切板数据
+   */
+
+  public async readData(): Promise<string> {
+    const res = await this.saveReadData();
+    if (res.error) {
+      throw Error(res.error);
+    }
+    return res.data || '';
+  }
+
+  public clearData(): void {
+    this.writeData('');
+  }
+}

package/src/services/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import 'reflect-metadata';
+export * from './type-editor-service';
+export * from './shortcut-service';
+export * from './clipboard-service';
+export * from './type-operation-service';
+export * from './type-registry-manager';

package/src/services/shortcut-service.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { injectable } from 'inversify';
+
+@injectable()
+export class ShortcutsService {}