@tmagic/editor 1.0.0-beta.7 → 1.0.0-rc.1

package/dist/types/src/Editor.vue.d.ts

@@ -126,9 +126,9 @@ declare const _default: DefineComponent<{
     "onProps-panel-mounted"?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    componentGroupList: ComponentGroup[];
     menu: MenuBarData;
     modelValue: MApp;
+    componentGroupList: ComponentGroup[];
     propsConfigs: Record<string, FormConfig>;
     propsValues: Record<string, MNode>;
     eventMethodList: Record<string, any>;

package/dist/types/src/components/ToolButton.vue.d.ts

@@ -9,6 +9,10 @@ declare const _default: DefineComponent<{
             display: boolean;
         };
     };
+    eventType: {
+        type: PropType<"mousedown" | "mouseup" | "click">;
+        default: string;
+    };
 }, {
     ZoomIn: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
     ZoomOut: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
@@ -19,7 +23,9 @@ declare const _default: DefineComponent<{
     zoomInHandler: () => void | undefined;
     zoomOutHandler: () => void | undefined;
     dropdownHandler(command: any): void;
-    buttonHandler(item: MenuButton | MenuComponent): void;
+    clickHandler(item: MenuButton | MenuComponent, event: MouseEvent): void;
+    mousedownHandler(item: MenuButton | MenuComponent, event: MouseEvent): void;
+    mouseupHandler(item: MenuButton | MenuComponent, event: MouseEvent): void;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     data: {
         type: PropType<string | MenuButton | MenuComponent>;
@@ -29,7 +35,12 @@ declare const _default: DefineComponent<{
             display: boolean;
         };
     };
+    eventType: {
+        type: PropType<"mousedown" | "mouseup" | "click">;
+        default: string;
+    };
 }>>, {
     data: string | MenuButton | MenuComponent;
+    eventType: "mousedown" | "mouseup" | "click";
 }>;
 export default _default;

package/dist/types/src/fields/UISelect.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DefineComponent, ComputedRef, Ref, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { DefineComponent, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ComputedRef, Ref, ExtractPropTypes } from 'vue';
 declare const _default: DefineComponent<{
     labelWidth: StringConstructor;
     config: ObjectConstructor;
@@ -9,6 +9,9 @@ declare const _default: DefineComponent<{
     };
     name: StringConstructor;
 }, {
+    Delete: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
+    Pointer: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
+    Close: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
     val: ComputedRef<any>;
     uiSelectMode: Ref<boolean>;
     toName: ComputedRef<string>;

package/dist/types/src/index.d.ts

@@ -13,6 +13,7 @@ export { default as uiService } from './services/ui';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
 export { default as LayerPanel } from './layouts/sidebar/LayerPanel.vue';
 export { default as PropsPanel } from './layouts/PropsPanel.vue';
+export { default as ToolButton } from './components/ToolButton.vue';
 declare const _default: {
     install: (app: App, opt?: InstallOptions | undefined) => void;
 };

package/dist/types/src/layouts/CodeEditor.vue.d.ts

@@ -8,13 +8,17 @@ declare const _default: DefineComponent<{
         type: (StringConstructor | ObjectConstructor)[];
     };
     type: {
-        type: StringConstructor[];
+        type: StringConstructor;
         default: () => string;
     };
     language: {
-        type: StringConstructor[];
+        type: StringConstructor;
         default: () => string;
     };
+    options: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }, {
     values: Ref<string>;
     loading: Ref<boolean>;
@@ -30,18 +34,23 @@ declare const _default: DefineComponent<{
         type: (StringConstructor | ObjectConstructor)[];
     };
     type: {
-        type: StringConstructor[];
+        type: StringConstructor;
         default: () => string;
     };
     language: {
-        type: StringConstructor[];
+        type: StringConstructor;
         default: () => string;
     };
+    options: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }>> & {
     onInitd?: ((...args: any[]) => any) | undefined;
     onSave?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;
     language: string;
+    options: Record<string, any>;
 }>;
 export default _default;

package/dist/types/src/layouts/PropsPanel.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DefineComponent, Ref, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
 declare const _default: DefineComponent<{}, {
     values: Ref<{
         [x: string]: any;
@@ -6,6 +6,7 @@ declare const _default: DefineComponent<{}, {
     }>;
     configForm: Ref<any>;
     curFormConfig: any;
+    propsPanelSize: ComputedRef<unknown>;
     submit(): Promise<void>;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, "mounted"[], "mounted", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>> & {
     onMounted?: ((...args: any[]) => any) | undefined;

package/dist/types/src/layouts/sidebar/ComponentListPanel.vue.d.ts

@@ -7,6 +7,7 @@ declare const _default: DefineComponent<{}, {
         items: ComponentItem[];
         title: string;
     }[] | undefined>;
-    appendComponent({ text, type, ...config }: ComponentItem): void;
+    appendComponent({ text, type, data }: ComponentItem): void;
+    dragstartHandler({ text, type, data }: ComponentItem, e: DragEvent): void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/types/src/layouts/sidebar/Sidebar.vue.d.ts

@@ -1,5 +1,5 @@
-import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
-import { SideBarData, SideComponent } from '../../type';
+import type { DefineComponent, Ref, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import { SideBarData } from '../../type';
 declare const _default: DefineComponent<{
     data: {
         type: PropType<SideBarData>;
@@ -11,7 +11,6 @@ declare const _default: DefineComponent<{
     };
 }, {
     activeTabName: Ref<string>;
-    items: ComputedRef<SideComponent[] | Record<string, any>[]>;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     data: {
         type: PropType<SideBarData>;

package/dist/types/src/layouts/sidebar/TabPane.vue.d.ts

@@ -0,0 +1,14 @@
+import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import { SideComponent, SideItem } from '../../type';
+declare const _default: DefineComponent<{
+    data: {
+        type: PropType<SideItem>;
+    };
+}, {
+    config: ComputedRef<SideComponent | undefined>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    data: {
+        type: PropType<SideItem>;
+    };
+}>>, {}>;
+export default _default;

package/dist/types/src/layouts/workspace/PageBar.vue.d.ts

@@ -1,11 +1,18 @@
-import type { DefineComponent, ComputedRef, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
-import type { MNode, MPage } from '@tmagic/schema';
+import type { DefineComponent, Ref, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, ComputedRef } from 'vue';
+import type { MNode, MApp,  MPage } from '@tmagic/schema';
 declare const _default: DefineComponent<{}, {
-    root: ComputedRef<MNode | undefined>;
+    root: ComputedRef<MApp | undefined>;
     page: ComputedRef<MNode | undefined>;
     switchPage(page: MPage): void;
     addPage(): void;
     copy(node: MPage): void;
     remove(node: MPage): void;
+    pageBar: Ref<HTMLDivElement | undefined>;
+    itemsContainer: Ref<HTMLDivElement | undefined>;
+    canScroll: Ref<boolean>;
+    itemsContainerWidth: ComputedRef<number>;
+    scroll: (type: "left" | "right" | "start" | "end") => void;
+    Delete: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
+    DocumentCopy: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/types/src/layouts/workspace/Workspace.vue.d.ts

@@ -1,6 +1,6 @@
-import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
-import type { MComponent, MContainer, MPage } from '@tmagic/schema';
-import type { MoveableOptions, SortEventData } from '@tmagic/stage';
+import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import type { MPage } from '@tmagic/schema';
+import type { MoveableOptions } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
 declare const _default: DefineComponent<{
     runtimeUrl: StringConstructor;
@@ -14,10 +14,8 @@ declare const _default: DefineComponent<{
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
     };
 }, {
+    workspace: Ref<HTMLDivElement | undefined>;
     page: ComputedRef<MPage | undefined>;
-    selectHandler(el: HTMLElement): void;
-    updateNodeHandler(node: MComponent | MContainer | MPage): void;
-    sortNodeHandler(ev: SortEventData): void;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     runtimeUrl: StringConstructor;
     render: {

package/dist/types/src/services/BaseService.d.ts

@@ -50,7 +50,10 @@ import { EventEmitter } from 'events';
 export default class extends EventEmitter {
     private pluginOptionsList;
     private middleware;
-    constructor(methods: string[]);
+    private taskList;
+    private doingTask;
+    constructor(methods?: string[], serialMethods?: string[]);
     use(options: Record<string, Function>): void;
     usePlugin(options: Record<string, Function>): void;
+    private doTask;
 }

package/dist/types/src/services/editor.d.ts

@@ -9,7 +9,7 @@ declare class Editor extends BaseService {
     constructor();
     /**
      * 设置当前指点节点配置
-     * @param name 'root' | 'page' | 'parent' | 'node'
+     * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode'
      * @param value MNode
      * @returns MNode
      */
@@ -41,20 +41,28 @@ declare class Editor extends BaseService {
     /**
      * 只有容器拥有布局
      */
-    getLayout(node: MNode): Promise<Layout>;
+    getLayout(parent: MNode, node?: MNode): Promise<Layout>;
     /**
-     * 选中指点节点（将指点节点设置成当前选中状态）
-     * @param config 指点节点配置或者ID
+     * 选中指定节点（将指定节点设置成当前选中状态）
+     * @param config 指定节点配置或者ID
      * @returns 当前选中的节点配置
      */
-    select(config: MNode | Id): Promise<MNode>;
+    select(config: MNode | Id): Promise<MNode> | never;
+    selectNextNode(): Promise<MNode> | never;
+    selectNextPage(): Promise<MNode> | never;
+    /**
+     * 高亮指定节点
+     * @param config 指定节点配置或者ID
+     * @returns 当前高亮的节点配置
+     */
+    highlight(config: MNode | Id): void;
     /**
      * 向指点容器添加组件节点
      * @param addConfig 将要添加的组件节点配置
      * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
      * @returns 添加后的节点
      */
-    add({ type, ...config }: AddMNode, parent?: MContainer | null): Promise<MNode>;
+    add(addNode: AddMNode, parent?: MContainer | null): Promise<MNode>;
     /**
      * 删除组件
      * @param {Object} node
@@ -110,12 +118,14 @@ declare class Editor extends BaseService {
      * @returns 下一步数据
      */
     redo(): Promise<StepValue | null>;
+    move(left: number, top: number): Promise<void>;
     destroy(): void;
     resetModifiedNodeId(): void;
     private addModifiedNodeId;
     private pushHistoryState;
     private changeHistoryState;
     private toggleFixedPosition;
+    private selectedConfigExceptionHandler;
 }
 export declare type EditorService = Editor;
 declare const _default: Editor;

package/dist/types/src/services/history.d.ts

@@ -37,6 +37,7 @@ declare class History extends BaseService {
         canUndo: boolean;
     };
     constructor();
+    reset(): void;
     changePage(page: MPage): void;
     empty(): void;
     push(state: StepValue): StepValue | null;

package/dist/types/src/services/props.d.ts

@@ -1,5 +1,5 @@
 import type { FormConfig } from '@tmagic/form';
-import type { MComponent, MNode } from '@tmagic/schema';
+import type { MNode } from '@tmagic/schema';
 import BaseService from './BaseService';
 declare class Props extends BaseService {
     private state;
@@ -29,7 +29,7 @@ declare class Props extends BaseService {
      * @param type 组件类型
      * @returns 组件初始值
      */
-    getPropsValue(type: string): Promise<MComponent>;
+    getPropsValue(type: string, defaultValue?: {}): Promise<any>;
 }
 export declare type PropsService = Props;
 declare const _default: Props;

package/dist/types/src/services/ui.d.ts

@@ -19,11 +19,13 @@ declare const state: {
     };
     showGuides: boolean;
     showRule: boolean;
+    propsPanelSize: "small" | "default" | "large";
 };
 declare class Ui extends BaseService {
     constructor();
     set<T = any>(name: keyof UiState, value: T): void;
     get<T>(name: keyof typeof state): T;
+    zoom(zoom: number): void;
     private setColumnWidth;
     private setStageRect;
     private calcZoom;

package/dist/types/src/type.d.ts

@@ -26,8 +26,10 @@ export interface StoreState {
     page: MPage | null;
     parent: MContainer | null;
     node: MNode | null;
+    highlightNode: MNode | null;
     stage: StageCore | null;
     modifiedNodeIds: Map<Id, Id>;
+    pageLength: number;
 }
 export interface PropsState {
     propsConfigMap: Record<string, FormConfig>;
@@ -67,6 +69,8 @@ export interface UiState {
     showGuides: boolean;
     /** 是否显示标尺，true: 显示，false: 不显示，默认为true */
     showRule: boolean;
+    /** 用于控制该属性配置表单内组件的尺寸 */
+    propsPanelSize: 'large' | 'default' | 'small';
 }
 export interface EditorNodeInfo {
     node?: MNode;
@@ -91,6 +95,8 @@ export interface MenuButton {
      * zoom: 放大缩小
      */
     type: 'button' | 'dropdown' | 'text' | 'divider' | 'zoom';
+    /** 当type为divider时有效，分割线方向, 默认vertical */
+    direction?: 'horizontal' | 'vertical';
     /** 展示的文案 */
     text?: string;
     /** 鼠标悬浮是显示的气泡中的文案 */
@@ -102,14 +108,9 @@ export interface MenuButton {
     /** 是否显示，默认为true */
     display?: boolean | ((data?: Services) => boolean);
     /** type为button/dropdown时点击运行的方法 */
-    handler?: (data?: Services) => Promise<any> | any;
-    /** type为dropdown时，下拉的菜单列表 */
-    items?: {
-        /** 展示的文案 */
-        text: string;
-        /** 点击运行的方法 */
-        handler(data: Services): any;
-    }[];
+    handler?: (data: Services, event: MouseEvent) => Promise<any> | any;
+    /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
+    items?: MenuButton[];
 }
 export interface MenuComponent {
     type: 'component';
@@ -168,7 +169,9 @@ export interface ComponentItem {
     type: string;
     /** element-plus icon class */
     icon?: string | Component;
-    [key: string]: any;
+    data?: {
+        [key: string]: any;
+    };
 }
 export interface ComponentGroup {
     /** 显示文案 */
@@ -176,6 +179,10 @@ export interface ComponentGroup {
     /** 组内列表 */
     items: ComponentItem[];
 }
+export interface UpdateData {
+    id: Id;
+    [key: string]: any;
+}
 export declare enum LayerOffset {
     TOP = "top",
     BOTTOM = "bottom"

package/dist/types/src/utils/editor.d.ts

@@ -1,4 +1,5 @@
-import { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
 import { Layout } from '../type';
 export declare const COPY_STORAGE_KEY = "$MagicEditorCopyData";
 export declare const generateId: (type: string | number) => string;
@@ -36,9 +37,9 @@ export declare const setNewItemId: (config: MNode, parent?: MPage | undefined) =
  * @returns {boolean}
  */
 export declare const isFixed: (node: MNode) => boolean;
-export declare const getNodeIndex: (node: MNode, parent: MContainer) => number;
+export declare const getNodeIndex: (node: MNode, parent: MContainer | MApp) => number;
 export declare const toRelative: (node: MNode) => MNode;
-export declare const initPosition: (node: MNode, layout: Layout) => MNode;
+export declare const initPosition: (node: MNode, layout: Layout, parentNode: MNode, stage: StageCore) => MNode;
 export declare const setLayout: (node: MNode, layout: Layout) => MNode;
 export declare const change2Fixed: (node: MNode, root: MApp) => MNode;
-export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (node: MNode) => Promise<Layout>) => Promise<MNode>;
+export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (parent: MNode, node?: MNode | undefined) => Promise<Layout>) => Promise<MNode>;

package/package.json

@@ -1,7 +1,10 @@
 {
-  "version": "1.0.0-beta.7",
+  "version": "1.0.0-rc.1",
   "name": "@tmagic/editor",
-  "sideEffects": false,
+  "sideEffects": [
+    "dist/*",
+    "src/theme/*"
+  ],
   "main": "dist/tmagic-editor.umd.js",
   "module": "dist/tmagic-editor.es.js",
   "style": "dist/style.css",
@@ -14,10 +17,14 @@
     "./dist/style.css": {
       "import": "./dist/style.css",
       "require": "./dist/style.css"
-    }
+    },
+    "./*": "./*"
   },
+  "license": "Apache-2.0",
   "scripts": {
-    "build": "vite build"
+    "build": "vite build",
+    "test": "jest --maxWorkers=8",
+    "test:coverage": "jest --maxWorkers=16 --coverage"
   },
   "engines": {
     "node": ">=14"
@@ -26,16 +33,27 @@
     "type": "git",
     "url": "https://github.com/Tencent/tmagic-editor.git"
   },
+  "homepage": "https://tencent.github.io/tmagic-editor/docs/",
+  "keywords": [
+    "editor",
+    "drag",
+    "resize",
+    "vue",
+    "vue3",
+    "typescript"
+  ],
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-beta.6",
-    "@tmagic/form": "^1.0.0-beta.6",
-    "@tmagic/schema": "^1.0.0-beta.6",
-    "@tmagic/stage": "^1.0.0-beta.7",
-    "@tmagic/utils": "^1.0.0-beta.6",
+    "@tmagic/core": "^1.0.0-rc.1",
+    "@tmagic/form": "^1.0.0-rc.1",
+    "@tmagic/schema": "^1.0.0-rc.1",
+    "@tmagic/stage": "^1.0.0-rc.1",
+    "@tmagic/utils": "^1.0.0-rc.1",
+    "buffer": "^6.0.3",
     "color": "^3.1.3",
-    "element-plus": "^2.0.2",
+    "element-plus": "^2.2.0",
     "events": "^3.3.0",
+    "keycon": "^1.1.2",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.32.1",
     "serialize-javascript": "^6.0.0",
@@ -43,17 +61,24 @@
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
+    "@types/jest": "^26.0.23",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
     "@vitejs/plugin-vue": "^1.2.3",
     "@vitejs/plugin-vue-jsx": "^1.1.6",
     "@vue/compiler-sfc": "^3.2.0",
-    "@vue/test-utils": "^2.0.0-rc.12",
+    "@vue/test-utils": "^2.0.0-rc.20",
+    "@vue/vue3-jest": "^27.0.0-alpha.4",
+    "jest": "^27.5.1",
+    "jest-serializer-vue": "^2.0.2",
+    "jest-transform-stub": "^2.0.0",
     "sass": "^1.35.1",
+    "ts-jest": "^27.1.4",
     "typescript": "^4.3.4",
     "vite": "^2.3.7",
     "vite-plugin-dts": "^0.9.6",
     "vue-tsc": "^0.0.24"
-  }
+  },
+  "gitHead": "3b647794d087888bfec9772f54356fa48c0b6d90"
 }

package/src/components/ContentMenu.vue

@@ -0,0 +1,107 @@
+<template>
+  <div v-if="menuData.length" v-show="visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
+    <div>
+      <tool-button
+        v-for="(item, index) in menuData"
+        event-type="mouseup"
+        :data="item"
+        :key="index"
+        @mouseup="hide"
+        @mouseenter="showSubMenu(item)"
+      ></tool-button>
+    </div>
+    <teleport to="body">
+      <content-menu class="sub-menu" ref="subMenu" :menu-data="subMenuData"></content-menu>
+    </teleport>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, onMounted, PropType, ref } from 'vue';
+
+import { MenuButton, MenuItem } from '@editor/type';
+
+import ToolButton from './ToolButton.vue';
+
+export default defineComponent({
+  components: { ToolButton },
+
+  props: {
+    menuData: {
+      type: Array as PropType<MenuItem[]>,
+      default: () => [],
+    },
+  },
+
+  setup() {
+    const menu = ref<HTMLDivElement>();
+    const subMenu = ref<any>();
+    const visible = ref(false);
+    const subMenuData = ref<MenuItem[]>([]);
+    const menuStyle = ref({
+      left: '0',
+      top: '0',
+    });
+
+    const hide = () => {
+      visible.value = false;
+    };
+
+    onMounted(() => {
+      globalThis.addEventListener(
+        'mousedown',
+        (e: MouseEvent) => {
+          if (!visible.value || (e.target && menu.value?.contains(e.target as HTMLElement))) {
+            return;
+          }
+          hide();
+        },
+        true,
+      );
+    });
+
+    return {
+      menu,
+      subMenu,
+      visible,
+      menuStyle,
+      subMenuData,
+
+      hide,
+
+      show(e: MouseEvent) {
+        visible.value = true;
+
+        nextTick(() => {
+          const menuHeight = menu.value?.clientHeight || 0;
+
+          let top = e.clientY;
+          if (menuHeight + e.clientY > document.body.clientHeight) {
+            top = document.body.clientHeight - menuHeight;
+          }
+
+          menuStyle.value = {
+            top: `${top}px`,
+            left: `${e.clientX}px`,
+          };
+        });
+      },
+
+      showSubMenu(item: MenuItem) {
+        const menuItem = item as MenuButton;
+        if (typeof item !== 'object' || !menuItem.items?.length) {
+          return;
+        }
+
+        subMenuData.value = menuItem.items;
+        if (menu.value) {
+          subMenu.value.show({
+            clientX: menu.value.offsetLeft + menu.value.clientWidth,
+            clientY: menu.value.offsetTop,
+          });
+        }
+      },
+    };
+  },
+});
+</script>

package/src/components/ScrollViewer.vue

@@ -55,7 +55,7 @@ export default defineComponent({
       style: computed(
         () => `
         width: ${props.width}px;
-        height: ${props.height}px;
+        height: ${(props.height || 0) - 40}px;
         position: absolute;
         margin-top: 30px;
       `,