update: toolbar popup

packages/toolbar-vue/src/components/toolbar.vue

@@ -1,7 +1,8 @@
 <template>
     <div
     ref="toolbarRef"
-    :class="['editor-toolbar', className, {'editor-toolbar-mobile': isMobile }]"
+    :class="['editor-toolbar', className, {'editor-toolbar-mobile': isMobile && !popup,
+				'editor-toolbar-popup': popup,}]"
     :style="isMobile ? { top: `${mobileView.top}px` } : {}"
     data-element="ui"
     @mousedown="triggerMouseDown"
@@ -31,6 +32,7 @@ export default defineComponent({
         AmGroup
     },
     props:toolbarProps,
+    
     setup(props){
         let groups = ref<Array<GroupDataProps>>([])
         const update = () => {
@@ -178,7 +180,7 @@ export default defineComponent({
             }
             updateByTimeout()
         })
-
+        
         onUnmounted(() => {
             props.engine.off("select",updateByTimeout)
             props.engine.off("change",updateByTimeout)

packages/toolbar-vue/src/plugin/component/popup.ts

@@ -63,7 +63,6 @@ export default class Popup {
 		let rootRect: DOMRect | undefined = undefined;
 		this.showContent(() => {
 			rootRect = this.#root.get<HTMLElement>()?.getBoundingClientRect();
-			console.log(rootRect);
 			if (!rootRect) {
 				this.hide();
 				return;
@@ -106,14 +105,16 @@ export default class Popup {
 
 	showContent(callback?: () => void) {
 		const result = this.#editor.trigger('toolbar-render', this.#options);
-		this.#vm = createApp(
-			typeof result === 'object' ? result : Toolbar,
-			this.#options,
-		);
+		if (this.#vm) this.#vm.unmount();
+		this.#vm = createApp(typeof result === 'object' ? result : Toolbar, {
+			...this.#options,
+			engine: this.#editor,
+			popup: true,
+		});
 		this.#vm.mount(this.#root.get<HTMLDivElement>()!);
 		setTimeout(() => {
 			if (callback) callback();
-		}, 100);
+		}, 200);
 	}
 
 	hide() {

packages/toolbar-vue/src/plugin/index.ts

@@ -57,7 +57,9 @@ class ToolbarPlugin<
 		}
 		this.editor.language.add(locales);
 		if (this.options.popup) {
-			new ToolbarPopup(this.editor);
+			new ToolbarPopup(this.editor, {
+				items: this.options.popup.items,
+			});
 		}
 	}
 

packages/toolbar-vue/src/types.ts

@@ -360,6 +360,11 @@ export const toolbarProps = {
 		default: [],
 	},
 	className: String,
+	popup: {
+		type: [Boolean, undefined] as PropType<boolean | undefined>,
+		default: undefined,
+	},
+	onLoad: Function,
 };
 
 export type ToolbarProps = ExtractPropTypes<typeof toolbarProps>;

packages/toolbar/src/plugin/index.ts

@@ -59,7 +59,9 @@ class ToolbarPlugin<T extends ToolbarOptions> extends Plugin<T> {
 		}
 		this.editor.language.add(locales);
 		if (this.options.popup) {
-			new ToolbarPopup(this.editor);
+			new ToolbarPopup(this.editor, {
+				items: this.options.popup.items,
+			});
 		}
 	}