update: toolbar popup

examples/react/components/editor/config.tsx

@@ -86,6 +86,7 @@ import {
 	ToolbarComponent,
 	fontFamilyDefaultData,
 } from '@aomao/toolbar';
+
 import ReactDOM from 'react-dom';
 import Loading from '../loading';
 import Empty from 'antd/es/empty';
@@ -309,6 +310,86 @@ export const lineHeightOptions: LineHeightOptions = {
 };
 
 export const pluginConfig: Record<string, PluginOptions> = {
+	[ToolbarPlugin.pluginName]: {
+		// popup: {
+		// 	items: [
+		// 		['undo', 'redo'],
+		// 		{
+		// 			icon: 'text',
+		// 			items: [
+		// 				'bold',
+		// 				'italic',
+		// 				'strikethrough',
+		// 				'underline',
+		// 				'fontsize',
+		// 				'fontcolor',
+		// 				'backcolor',
+		// 				'moremark',
+		// 			],
+		// 		},
+		// 		[
+		// 			{
+		// 				type: 'button',
+		// 				name: 'image-uploader',
+		// 				icon: 'image',
+		// 			},
+		// 			'link',
+		// 			'tasklist',
+		// 			'heading',
+		// 		],
+		// 		{
+		// 			icon: 'more',
+		// 			items: [
+		// 				{
+		// 					type: 'button',
+		// 					name: 'video-uploader',
+		// 					icon: 'video',
+		// 				},
+		// 				{
+		// 					type: 'button',
+		// 					name: 'file-uploader',
+		// 					icon: 'attachment',
+		// 				},
+		// 				{
+		// 					type: 'button',
+		// 					name: 'table',
+		// 					icon: 'table',
+		// 				},
+		// 				{
+		// 					type: 'button',
+		// 					name: 'math',
+		// 					icon: 'math',
+		// 				},
+		// 				{
+		// 					type: 'button',
+		// 					name: 'codeblock',
+		// 					icon: 'codeblock',
+		// 				},
+		// 				{
+		// 					type: 'button',
+		// 					name: 'orderedlist',
+		// 					icon: 'orderedlist',
+		// 				},
+		// 				{
+		// 					type: 'button',
+		// 					name: 'unorderedlist',
+		// 					icon: 'unorderedlist',
+		// 				},
+		// 				{
+		// 					type: 'button',
+		// 					name: 'hr',
+		// 					icon: 'hr',
+		// 				},
+		// 				{
+		// 					type: 'button',
+		// 					name: 'quote',
+		// 					icon: 'quote',
+		// 				},
+		// 			],
+		// 		},
+		// 	]
+		// }
+	},
 	[Table.pluginName]: tableOptions,
 	[MarkRange.pluginName]: markRangeOptions,
 	[Italic.pluginName]: italicOptions,

packages/toolbar-vue/src/index.ts

@@ -6,6 +6,8 @@ import {
 	fontfamily,
 } from './config';
 import ToolbarPlugin, { ToolbarComponent } from './plugin';
+import type { ToolbarOptions } from './plugin';
+import type { ToolbarProps, GroupItemProps, ToolbarItemProps } from './types';
 
 Toolbar.install = (app: App) => {
 	app.component(Toolbar.name, Toolbar);
@@ -19,3 +21,4 @@ export {
 	fontFamilyDefaultData,
 	fontfamily,
 };
+export type { ToolbarOptions, ToolbarProps, GroupItemProps, ToolbarItemProps };

packages/toolbar/src/index.ts

@@ -1,9 +1,10 @@
 import { fontFamilyDefaultData, fontfamily } from './config/toolbar';
 import ToolbarPlugin, { ToolbarComponent } from './plugin';
+import type { ToolbarOptions } from './plugin';
 import Toolbar from './Toolbar';
 import type { ToolbarProps, GroupItemProps, ToolbarItemProps } from './Toolbar';
 import './index.css';
 
 export default Toolbar;
 export { ToolbarPlugin, ToolbarComponent, fontFamilyDefaultData, fontfamily };
-export type { ToolbarProps, GroupItemProps, ToolbarItemProps };
+export type { ToolbarProps, GroupItemProps, ToolbarItemProps, ToolbarOptions };

packages/toolbar/src/plugin/component/popup.tsx

@@ -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;