From 614131e8104ea52f14a1fb52a36713c3f6375b1e Mon Sep 17 00:00:00 2001
From: yanmao <55792257+yanmao-cc@users.noreply.github.com>
Date: Fri, 7 Jan 2022 00:13:10 +0800
Subject: [PATCH] update: toolbar popup

---
 examples/react/components/editor/config.tsx   | 154 +++++++++---------
 examples/vue/src/components/config.ts         |  78 +++++++++
 .../toolbar-vue/src/components/button.vue     |   5 +-
 .../src/components/color/color.vue            |  18 +-
 .../toolbar-vue/src/components/dropdown.vue   |   4 +-
 packages/toolbar-vue/src/components/group.vue |   8 +-
 .../toolbar-vue/src/components/toolbar.vue    |   1 +
 .../src/plugin/component/index.css            |   3 +-
 packages/toolbar-vue/src/types.ts             |  18 +-
 packages/toolbar/src/button/index.css         |   3 +-
 packages/toolbar/src/button/index.tsx         |  17 +-
 packages/toolbar/src/color/index.css          |  16 +-
 packages/toolbar/src/color/index.tsx          |   6 +-
 packages/toolbar/src/dropdown/index.css       |   5 +-
 packages/toolbar/src/dropdown/index.tsx       |   5 +-
 packages/toolbar/src/group/index.css          |   2 +
 packages/toolbar/src/group/index.tsx          |  24 ++-
 packages/toolbar/src/index.css                |   1 +
 .../toolbar/src/plugin/component/index.css    |   2 +-
 plugins/file/src/component/index.ts           |  12 +-
 plugins/file/src/index.ts                     |   3 +-
 plugins/file/src/types.ts                     |   5 +
 plugins/image/src/component/index.ts          |   7 +-
 plugins/image/src/index.ts                    |   7 +-
 plugins/image/src/types.ts                    |   6 +-
 plugins/video/src/component/index.ts          |   6 +-
 plugins/video/src/index.ts                    |   9 +-
 plugins/video/src/types.ts                    |   9 +
 28 files changed, 272 insertions(+), 162 deletions(-)
 create mode 100644 plugins/file/src/types.ts
 create mode 100644 plugins/video/src/types.ts

diff --git a/examples/react/components/editor/config.tsx b/examples/react/components/editor/config.tsx
index 9d20067e..80e24e19 100644
--- a/examples/react/components/editor/config.tsx
+++ b/examples/react/components/editor/config.tsx
@@ -311,84 +311,82 @@ export const lineHeightOptions: LineHeightOptions = {
 };
 
 export const toolbarOptions: ToolbarOptions = {
-	// 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: 'ordered-list',
-	// 				},
-	// 				{
-	// 					type: 'button',
-	// 					name: 'unordered-list',
-	// 					icon: 'unordered-list',
-	// 				},
-	// 				{
-	// 					type: 'button',
-	// 					name: 'hr',
-	// 					icon: 'hr',
-	// 				},
-	// 				{
-	// 					type: 'button',
-	// 					name: 'quote',
-	// 					icon: 'quote',
-	// 				},
-	// 			],
-	// 		},
-	// 	]
-	// }
+	popup: {
+		items: [
+			['undo', 'redo'],
+			{
+				icon: 'text',
+				items: [
+					'bold',
+					'italic',
+					'strikethrough',
+					'underline',
+					'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: 'ordered-list',
+					},
+					{
+						type: 'button',
+						name: 'unordered-list',
+						icon: 'unordered-list',
+					},
+					{
+						type: 'button',
+						name: 'hr',
+						icon: 'hr',
+					},
+					{
+						type: 'button',
+						name: 'quote',
+						icon: 'quote',
+					},
+				],
+			},
+		],
+	},
 };
 
 export const pluginConfig: Record<string, PluginOptions> = {
diff --git a/examples/vue/src/components/config.ts b/examples/vue/src/components/config.ts
index dd2a73a4..a1bee22f 100644
--- a/examples/vue/src/components/config.ts
+++ b/examples/vue/src/components/config.ts
@@ -111,6 +111,84 @@ export const cards: Array<CardEntry> = [
 ];
 
 export const pluginConfig: { [key: string]: PluginOptions } = {
+	[ToolbarPlugin.pluginName]: {
+		popup: {
+			items: [
+				['undo', 'redo'],
+				{
+					icon: 'text',
+					items: [
+						'bold',
+						'italic',
+						'strikethrough',
+						'underline',
+						'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: 'ordered-list',
+						},
+						{
+							type: 'button',
+							name: 'unordered-list',
+							icon: 'unordered-list',
+						},
+						{
+							type: 'button',
+							name: 'hr',
+							icon: 'hr',
+						},
+						{
+							type: 'button',
+							name: 'quote',
+							icon: 'quote',
+						},
+					],
+				},
+			],
+		},
+	},
 	[Italic.pluginName]: {
 		// 默认为 _ 下划线，这里修改为单个 * 号
 		markdown: '*',
diff --git a/packages/toolbar-vue/src/components/button.vue b/packages/toolbar-vue/src/components/button.vue
index 6e4f1868..5f2ff6f9 100644
--- a/packages/toolbar-vue/src/components/button.vue
+++ b/packages/toolbar-vue/src/components/button.vue
@@ -99,7 +99,7 @@ export default defineComponent({
 </script>
 <style css>
 .editor-toolbar .toolbar-button {
-    display: inline-flex;
+    display: inline-block;
     align-items: center;
     justify-content: center;
     width: auto;
@@ -116,12 +116,13 @@ export default defineComponent({
     outline: none;
     line-height: 32px;
 }
+
 .editor-toolbar.editor-toolbar-popup .toolbar-button {
     min-width: 24px;
     line-height: 24px;
     border-radius: 4px;
-    margin: 0 4px;
 }
+
 .editor-toolbar:not(.editor-toolbar-mobile) .toolbar-button {
     padding: 0 4px;
 }
diff --git a/packages/toolbar-vue/src/components/color/color.vue b/packages/toolbar-vue/src/components/color/color.vue
index 12142821..0ed5f5ea 100644
--- a/packages/toolbar-vue/src/components/color/color.vue
+++ b/packages/toolbar-vue/src/components/color/color.vue
@@ -11,6 +11,7 @@
             :title="buttonTitle"
             :on-click="triggerClick"
             :disabled="disabled"
+            :placement="placement"
             >
                 <span v-html="buttonContent"></span>
             </am-button>
@@ -20,6 +21,7 @@
             :title="dropdownTitle"
             :on-click="toggleDropdown"
             :disabled="disabled"
+            :placement="placement"
             >
                 <template #icon>
                     <span class="colorpicker-button-dropdown-empty" />
@@ -151,24 +153,36 @@ export default defineComponent({
 }
 
 .colorpicker-button-group .colorpicker-button-text {
-    height: 32px;
     margin-right: 0;
     min-width: 26px;
     border-radius: 3px 0 0 3px;
 }
 
+.editor-toolbar.editor-toolbar-popup .colorpicker-button-group .colorpicker-button-text {
+    margin: 0;
+    border-radius: 3px 0 0 3px;
+}
+
 .colorpicker-button-group .colorpicker-button-text:active {
     background-color: #e8e8e8;
 }
 
 .colorpicker-button-group .colorpicker-button-dropdown {
-    height: 32px;
     margin-left: -1px;
     min-width: 17px;
     text-align: center;
     padding: 0 0;
     border-radius: 0 3px 3px 0;
 }
+
+.editor-toolbar.editor-toolbar-popup .colorpicker-button-group .colorpicker-button-dropdown {
+    line-height: 24px;
+    min-width: 17px;
+    padding: 0 4px;
+    margin: 0;
+    margin-left: -1px;
+    border-radius: 0 3px 3px 0;
+}
   
 .colorpicker-button-group .colorpicker-button-dropdown:hover,
 .colorpicker-button-group .colorpicker-button-dropdown:active {
diff --git a/packages/toolbar-vue/src/components/dropdown.vue b/packages/toolbar-vue/src/components/dropdown.vue
index 2a41892f..4f4717aa 100644
--- a/packages/toolbar-vue/src/components/dropdown.vue
+++ b/packages/toolbar-vue/src/components/dropdown.vue
@@ -16,6 +16,7 @@
             :title="title"
             :active="visible"
             :disabled="disabled"
+            :placement="placement"
             >
                 <template #default>
                     <slot :item="content">
@@ -144,11 +145,9 @@ export default defineComponent({
 <style>
 .toolbar-dropdown {
     position: relative;
-    display: inline-flex;
 }
 
 .toolbar-dropdown .toolbar-dropdown-trigger {
-    display: inline-flex;
     align-items: center;
 }
 
@@ -158,6 +157,7 @@ export default defineComponent({
 
 .toolbar-dropdown .toolbar-dropdown-trigger-arrow .toolbar-button{
     padding-right: 20px;
+    margin: 0;
 }
 
 .toolbar-dropdown .toolbar-dropdown-trigger-arrow .data-icon-arrow {
diff --git a/packages/toolbar-vue/src/components/group.vue b/packages/toolbar-vue/src/components/group.vue
index af3be3ad..edf5fc26 100644
--- a/packages/toolbar-vue/src/components/group.vue
+++ b/packages/toolbar-vue/src/components/group.vue
@@ -11,9 +11,9 @@
                 <div :class="['editor-toolbar', {'editor-toolbar-mobile': isMobile && !popup,
 								'editor-toolbar-popup': popup,}]" data-element="ui">
                     <template v-for="(item , index) in items" :key="index">
-                        <am-button v-if="item.type === 'button'" :key="index" v-bind="item" :engine="engine" />
-                        <am-dropdown v-if="item.type === 'dropdown'" :key="index" v-bind="item" :engine="engine" />
-                        <am-color v-if="item.type === 'color'" :key="index" v-bind="item" :engine="engine" />
+                        <am-button v-if="item.type === 'button'" :key="index" v-bind="item" placement="top" :engine="engine" />
+                        <am-dropdown v-if="item.type === 'dropdown'" :key="index" v-bind="item" placement="top" :engine="engine" />
+                        <am-color v-if="item.type === 'color'" :key="index" v-bind="item" placement="top" :engine="engine" />
                         <am-collapse v-if="item.type === 'collapse'" :key="index" v-bind="item" :engine="engine" />
                     </template>
                 </div>
@@ -67,6 +67,8 @@ export default defineComponent({
     padding: 4px 8px;
     width: auto;
     border-left: 1px solid #e8e8e8;
+    display: flex;
+    align-items: center;
 }
 
 .editor-toolbar .editor-toolbar-group:nth-child(1) {
diff --git a/packages/toolbar-vue/src/components/toolbar.vue b/packages/toolbar-vue/src/components/toolbar.vue
index b2049839..dc098509 100644
--- a/packages/toolbar-vue/src/components/toolbar.vue
+++ b/packages/toolbar-vue/src/components/toolbar.vue
@@ -298,6 +298,7 @@ export {
     border: 0 none;
     left: 0;
     top: 0;
+    display: flex;
 }
 
 .editor-toolbar-popover {
diff --git a/packages/toolbar-vue/src/plugin/component/index.css b/packages/toolbar-vue/src/plugin/component/index.css
index 0a9bd71e..45898e01 100644
--- a/packages/toolbar-vue/src/plugin/component/index.css
+++ b/packages/toolbar-vue/src/plugin/component/index.css
@@ -33,7 +33,6 @@
     overflow: auto;
 }
 /** ------------------- popup ---------------------- **/
-/** ------------------- popup ---------------------- **/
 .data-toolbar-popup-wrapper {
     position: absolute;
     z-index: 9999;
@@ -49,7 +48,7 @@
 }
 
 .data-toolbar-popup-wrapper .editor-toolbar-popover .ant-popover-inner-content {
-    padding: 4px 0;
+    padding: 4px;
     background-color: #fff;
     border-radius: 4px;
     border: 1px solid #dee0e3;
diff --git a/packages/toolbar-vue/src/types.ts b/packages/toolbar-vue/src/types.ts
index 6cc722fd..dc4d8767 100644
--- a/packages/toolbar-vue/src/types.ts
+++ b/packages/toolbar-vue/src/types.ts
@@ -1,4 +1,4 @@
-import { EngineInterface } from '@aomao/engine';
+import type { EngineInterface, Placement } from '@aomao/engine';
 import { ExtractPropTypes, PropType, VNode } from 'vue';
 import { omit } from 'lodash';
 
@@ -7,20 +7,6 @@ export type Command =
 	| { name: string; args: Array<any> }
 	| Array<any>
 	| undefined;
-//tooltip 位置
-export type Placement =
-	| 'top'
-	| 'left'
-	| 'right'
-	| 'bottom'
-	| 'topLeft'
-	| 'topRight'
-	| 'bottomLeft'
-	| 'bottomRight'
-	| 'leftTop'
-	| 'leftBottom'
-	| 'rightTop'
-	| 'rightBottom';
 //按钮
 export const buttonProps = {
 	engine: Object as PropType<EngineInterface | undefined>,
@@ -116,6 +102,7 @@ export const dropdownProps = {
 		default: [],
 	} as const,
 	icon: String,
+	placement: String as PropType<Placement>,
 	content: [String, Function] as PropType<string | (() => string)>,
 	title: String,
 	disabled: {
@@ -195,6 +182,7 @@ export const colorPickerProps = {
 	} as const,
 	setStroke: colorPickerGroupProps.setStroke,
 	onSelect: colorPickerItemProps.onSelect,
+	placement: String as PropType<Placement>,
 };
 export type ColorPickerProps = ExtractPropTypes<typeof colorPickerProps>;
 //color
diff --git a/packages/toolbar/src/button/index.css b/packages/toolbar/src/button/index.css
index 78b0b582..22f4cc13 100644
--- a/packages/toolbar/src/button/index.css
+++ b/packages/toolbar/src/button/index.css
@@ -1,5 +1,5 @@
 .editor-toolbar .toolbar-button {
-    display: inline-flex;
+    display: inline-block;
     align-items: center;
     justify-content: center;
     width: auto;
@@ -21,7 +21,6 @@
     min-width: 24px;
     line-height: 24px;
     border-radius: 4px;
-    margin: 0 4px;
 }
 
 .editor-toolbar:not(.editor-toolbar-mobile) .toolbar-button {
diff --git a/packages/toolbar/src/button/index.tsx b/packages/toolbar/src/button/index.tsx
index a191ca55..28ad4b29 100644
--- a/packages/toolbar/src/button/index.tsx
+++ b/packages/toolbar/src/button/index.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import Tooltip from 'antd/es/tooltip';
 import classnames from 'classnames-es-ts';
-import { EngineInterface, formatHotkey, isMobile } from '@aomao/engine';
+import { formatHotkey, isMobile } from '@aomao/engine';
+import type { EngineInterface, Placement } from '@aomao/engine';
 import { autoGetHotkey } from '../utils';
 import 'antd/es/tooltip/style';
 import './index.css';
@@ -12,19 +13,7 @@ export type ButtonProps = {
 	icon?: React.ReactNode;
 	content?: React.ReactNode | (() => React.ReactNode);
 	title?: string;
-	placement?:
-		| 'right'
-		| 'top'
-		| 'left'
-		| 'bottom'
-		| 'topLeft'
-		| 'topRight'
-		| 'bottomLeft'
-		| 'bottomRight'
-		| 'leftTop'
-		| 'leftBottom'
-		| 'rightTop'
-		| 'rightBottom';
+	placement?: Placement;
 	hotkey?: boolean | string;
 	command?: { name: string; args: Array<any> } | Array<any>;
 	autoExecute?: boolean;
diff --git a/packages/toolbar/src/color/index.css b/packages/toolbar/src/color/index.css
index 4e107233..83c02c29 100644
--- a/packages/toolbar/src/color/index.css
+++ b/packages/toolbar/src/color/index.css
@@ -9,7 +9,11 @@
 .colorpicker-button-group .colorpicker-button-text {
     margin-right: 0;
     min-width: 26px;
-    height: 32px;
+    border-radius: 3px 0 0 3px;
+}
+
+.editor-toolbar.editor-toolbar-popup .colorpicker-button-group .colorpicker-button-text {
+    margin: 0;
     border-radius: 3px 0 0 3px;
 }
 
@@ -20,11 +24,19 @@
 .colorpicker-button-group .colorpicker-button-dropdown {
     margin-left: -1px;
     min-width: 17px;
-    height: 32px;
     text-align: center;
     padding: 0 0;
     border-radius: 0 3px 3px 0;
 }
+
+.editor-toolbar.editor-toolbar-popup .colorpicker-button-group .colorpicker-button-dropdown {
+    line-height: 24px;
+    min-width: 17px;
+    padding: 0 4px;
+    margin: 0;
+    margin-left: -1px;
+    border-radius: 0 3px 3px 0;
+}
   
 .colorpicker-button-group .colorpicker-button-dropdown:hover,
 .colorpicker-button-group .colorpicker-button-dropdown:active {
diff --git a/packages/toolbar/src/color/index.tsx b/packages/toolbar/src/color/index.tsx
index 89d334ff..424b5827 100644
--- a/packages/toolbar/src/color/index.tsx
+++ b/packages/toolbar/src/color/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from 'react';
 import classNames from 'classnames-es-ts';
-import { EngineInterface } from '@aomao/engine';
+import type { EngineInterface, Placement } from '@aomao/engine';
 import { useRight } from '../hooks';
 import Button from '../button';
 import ColorPicker, { ColorPickerProps, Palette } from './picker';
@@ -21,6 +21,7 @@ export type ColorButtonProps = {
 	autoExecute?: boolean;
 	engine?: EngineInterface;
 	disabled?: boolean;
+	placement?: Placement;
 } & ColorPickerProps;
 
 const ColorButton: React.FC<ColorButtonProps> = ({
@@ -37,6 +38,7 @@ const ColorButton: React.FC<ColorButtonProps> = ({
 	defaultColor,
 	onSelect,
 	setStroke,
+	placement,
 }) => {
 	const [pickerVisible, setPickerVisible] = useState(false);
 	const [buttonContent, setButtonContent] = useState(
@@ -137,6 +139,7 @@ const ColorButton: React.FC<ColorButtonProps> = ({
 					content={buttonContent}
 					disabled={disabled}
 					onClick={(event) => triggerSelect(currentColor, event)}
+					placement={placement}
 				/>
 				<Button
 					className="colorpicker-button-dropdown toolbar-dropdown-trigger-arrow"
@@ -148,6 +151,7 @@ const ColorButton: React.FC<ColorButtonProps> = ({
 					}
 					content={<span className="data-icon data-icon-arrow" />}
 					onClick={toggleDropdown}
+					placement={placement}
 				/>
 			</div>
 			{pickerVisible && (
diff --git a/packages/toolbar/src/dropdown/index.css b/packages/toolbar/src/dropdown/index.css
index 3270ea29..b0ecf304 100644
--- a/packages/toolbar/src/dropdown/index.css
+++ b/packages/toolbar/src/dropdown/index.css
@@ -1,10 +1,8 @@
 .toolbar-dropdown {
     position: relative;
-    display: inline-flex;
 }
 
 .toolbar-dropdown .toolbar-dropdown-trigger {
-    display: inline-flex;
     align-items: center;
 }
 
@@ -14,6 +12,7 @@
 
 .toolbar-dropdown .toolbar-dropdown-trigger-arrow .toolbar-button{
     padding-right: 20px;
+    margin: 0;
 }
 
 .toolbar-dropdown .toolbar-dropdown-trigger-arrow .data-icon-arrow {
@@ -64,7 +63,7 @@
     color: #595959;
     text-align: left;
     position: relative;
-    display: block;
+    display: flex;
     white-space: nowrap;
 }
 
diff --git a/packages/toolbar/src/dropdown/index.tsx b/packages/toolbar/src/dropdown/index.tsx
index e9d3a6de..24480f72 100644
--- a/packages/toolbar/src/dropdown/index.tsx
+++ b/packages/toolbar/src/dropdown/index.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import classnames from 'classnames-es-ts';
-import { EngineInterface } from '@aomao/engine';
+import type { EngineInterface, Placement } from '@aomao/engine';
 import Button from '../button';
 import DropdownList, { DropdownListItem } from './list';
 import { useRight } from '../hooks';
@@ -11,6 +11,7 @@ export type DropdownProps = {
 	items: Array<DropdownListItem>;
 	values?: string | Array<string>;
 	engine?: EngineInterface;
+	placement?: Placement;
 	icon?: React.ReactNode;
 	content?: React.ReactNode | (() => React.ReactNode);
 	title?: string;
@@ -40,6 +41,7 @@ const Dropdown: React.FC<DropdownProps> = ({
 	hasArrow,
 	renderContent,
 	hasDot,
+	placement,
 }) => {
 	const [visible, setVisible] = useState(false);
 
@@ -144,6 +146,7 @@ const Dropdown: React.FC<DropdownProps> = ({
 					title={title}
 					active={visible}
 					disabled={disabled}
+					placement={placement}
 				/>
 			</div>
 			{visible && (
diff --git a/packages/toolbar/src/group/index.css b/packages/toolbar/src/group/index.css
index 04d3e994..6d1c9837 100644
--- a/packages/toolbar/src/group/index.css
+++ b/packages/toolbar/src/group/index.css
@@ -2,6 +2,8 @@
     padding: 4px 8px;
     width: auto;
     border-left: 1px solid #e8e8e8;
+    display: flex;
+    align-items: center;
 }
 
 .editor-toolbar .editor-toolbar-group:nth-child(1) {
diff --git a/packages/toolbar/src/group/index.tsx b/packages/toolbar/src/group/index.tsx
index c4602258..562e414f 100644
--- a/packages/toolbar/src/group/index.tsx
+++ b/packages/toolbar/src/group/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames-es-ts';
-import { EngineInterface, isMobile } from '@aomao/engine';
+import { isMobile } from '@aomao/engine';
+import type { Placement, EngineInterface } from '@aomao/engine';
 import Popover from 'antd/es/popover';
 import Button, { ButtonProps } from '../button';
 import Dropdown, { DropdownProps } from '../dropdown';
@@ -42,14 +43,26 @@ const ToolbarGroup: React.FC<GroupProps> = ({
 	content,
 	popup,
 }) => {
-	const renderItems = () => {
+	const renderItems = (placement?: Placement) => {
 		return items.map((item, index) => {
 			switch (item.type) {
 				case 'button':
-					return <Button engine={engine} key={item.name} {...item} />;
+					return (
+						<Button
+							engine={engine}
+							key={item.name}
+							{...item}
+							placement={placement}
+						/>
+					);
 				case 'dropdown':
 					return (
-						<Dropdown engine={engine} key={item.name} {...item} />
+						<Dropdown
+							engine={engine}
+							key={item.name}
+							{...item}
+							placement={placement}
+						/>
 					);
 				case 'color':
 					return (
@@ -57,6 +70,7 @@ const ToolbarGroup: React.FC<GroupProps> = ({
 							engine={engine}
 							key={item.name}
 							{...item}
+							placement={placement}
 						/>
 					);
 				case 'collapse':
@@ -83,7 +97,7 @@ const ToolbarGroup: React.FC<GroupProps> = ({
 							})}
 							data-element="ui"
 						>
-							{renderItems()}
+							{renderItems('top')}
 						</div>
 					}
 					arrowPointAtCenter
diff --git a/packages/toolbar/src/index.css b/packages/toolbar/src/index.css
index 2c3db508..c0cfb2a2 100644
--- a/packages/toolbar/src/index.css
+++ b/packages/toolbar/src/index.css
@@ -65,6 +65,7 @@
     border: 0 none;
     left: 0;
     top: 0;
+    display: flex;
 }
 
 .editor-toolbar-popover {
diff --git a/packages/toolbar/src/plugin/component/index.css b/packages/toolbar/src/plugin/component/index.css
index 84abf6dd..45898e01 100644
--- a/packages/toolbar/src/plugin/component/index.css
+++ b/packages/toolbar/src/plugin/component/index.css
@@ -48,7 +48,7 @@
 }
 
 .data-toolbar-popup-wrapper .editor-toolbar-popover .ant-popover-inner-content {
-    padding: 4px 0;
+    padding: 4px;
     background-color: #fff;
     border-radius: 4px;
     border: 1px solid #dee0e3;
diff --git a/plugins/file/src/component/index.ts b/plugins/file/src/component/index.ts
index f2702470..2749fcaf 100644
--- a/plugins/file/src/component/index.ts
+++ b/plugins/file/src/component/index.ts
@@ -1,3 +1,4 @@
+import type { FileOptions } from '../types';
 import {
 	$,
 	Card,
@@ -71,8 +72,6 @@ export default class FileCard<V extends FileValue = FileValue> extends Card<V> {
 
 	private container?: NodeInterface;
 
-	private maxWidth: number = 752;
-
 	getLocales() {
 		return this.editor.language.get<{ [key: string]: string }>('file');
 	}
@@ -83,20 +82,20 @@ export default class FileCard<V extends FileValue = FileValue> extends Card<V> {
 	};
 
 	onWindowResize = () => {
-		this.maxWidth = this.getMaxWidth();
 		this.updateMaxWidth();
 	};
 
 	updateMaxWidth = () => {
+		const maxWidth = this.getMaxWidth();
 		this.root
 			.find('.data-file-title')
-			.css('max-width', this.maxWidth - 100 + 'px');
+			.css('max-width', maxWidth - 100 + 'px');
 	};
 
 	onBeforeRender = (action: 'preview' | 'download', url: string) => {
-		const filePlugin = this.editor.plugin.components['file'];
+		const filePlugin = this.editor.plugin.findPlugin<FileOptions>('file');
 		if (filePlugin) {
-			const { onBeforeRender } = (filePlugin['options'] || {}) as any;
+			const { onBeforeRender } = filePlugin.options || {};
 			if (onBeforeRender) return onBeforeRender(action, url);
 		}
 		return url;
@@ -259,7 +258,6 @@ export default class FileCard<V extends FileValue = FileValue> extends Card<V> {
 			this.bindErrorEvent(this.root);
 		}
 		this.container?.find('.percent').html(`${value.percent}%`);
-		this.maxWidth = this.getMaxWidth();
 		this.updateMaxWidth();
 		window.addEventListener('resize', this.onWindowResize);
 	}
diff --git a/plugins/file/src/index.ts b/plugins/file/src/index.ts
index 8e12612f..47c9ddb2 100644
--- a/plugins/file/src/index.ts
+++ b/plugins/file/src/index.ts
@@ -19,8 +19,7 @@ import type { FileValue } from './component';
 import FileUploader from './uploader';
 import type { FileUploaderOptions } from './uploader';
 import locales from './locales';
-
-export interface FileOptions extends PluginOptions {}
+import { FileOptions } from './types';
 
 export default class<T extends FileOptions = FileOptions> extends Plugin<T> {
 	static get pluginName() {
diff --git a/plugins/file/src/types.ts b/plugins/file/src/types.ts
new file mode 100644
index 00000000..2ab19bc5
--- /dev/null
+++ b/plugins/file/src/types.ts
@@ -0,0 +1,5 @@
+import { PluginOptions } from '@aomao/engine';
+
+export interface FileOptions extends PluginOptions {
+	onBeforeRender?: (action: 'preview' | 'download', url: string) => string;
+}
diff --git a/plugins/image/src/component/index.ts b/plugins/image/src/component/index.ts
index 1e0d511a..16b1d3b8 100644
--- a/plugins/image/src/component/index.ts
+++ b/plugins/image/src/component/index.ts
@@ -1,3 +1,4 @@
+import type { ImageOptions } from '@/types';
 import {
 	Card,
 	CardToolbarItemOptions,
@@ -262,10 +263,10 @@ class ImageComponent<T extends ImageValue = ImageValue> extends Card<T> {
 				percent: value.percent,
 				message: value.message,
 				onBeforeRender: (status, src) => {
-					const imagePlugin = this.editor.plugin.components['image'];
+					const imagePlugin =
+						this.editor.plugin.findPlugin<ImageOptions>('image');
 					if (imagePlugin) {
-						const { onBeforeRender } = (imagePlugin['options'] ||
-							{}) as any;
+						const { onBeforeRender } = imagePlugin.options || {};
 						if (onBeforeRender) return onBeforeRender(status, src);
 					}
 					return src;
diff --git a/plugins/image/src/index.ts b/plugins/image/src/index.ts
index bb0e7257..7d5c08c4 100644
--- a/plugins/image/src/index.ts
+++ b/plugins/image/src/index.ts
@@ -1,6 +1,5 @@
 import {
 	$,
-	CardEntry,
 	CardInterface,
 	CardType,
 	CARD_KEY,
@@ -10,17 +9,13 @@ import {
 	NodeInterface,
 	Plugin,
 	PluginEntry,
-	PluginOptions,
 	READY_CARD_KEY,
 } from '@aomao/engine';
 import ImageComponent, { ImageValue } from './component';
 import ImageUploader from './uploader';
 import { ImageUploaderOptions } from './uploader';
 import locales from './locales';
-
-export interface ImageOptions extends PluginOptions {
-	onBeforeRender?: (status: 'uploading' | 'done', src: string) => string;
-}
+import { ImageOptions } from './types';
 
 export default class<T extends ImageOptions = ImageOptions> extends Plugin<T> {
 	static get pluginName() {
diff --git a/plugins/image/src/types.ts b/plugins/image/src/types.ts
index 932dd1d4..96f264d3 100644
--- a/plugins/image/src/types.ts
+++ b/plugins/image/src/types.ts
@@ -1,4 +1,4 @@
-import { NodeInterface } from '@aomao/engine';
+import { NodeInterface, PluginOptions } from '@aomao/engine';
 import { EventEmitter2 } from 'eventemitter2';
 
 export interface PswpInterface extends EventEmitter2 {
@@ -27,3 +27,7 @@ export interface PswpInterface extends EventEmitter2 {
 	close(): void;
 	destroy(): void;
 }
+
+export interface ImageOptions extends PluginOptions {
+	onBeforeRender?: (status: 'uploading' | 'done', src: string) => string;
+}
diff --git a/plugins/video/src/component/index.ts b/plugins/video/src/component/index.ts
index ffc71368..0a2951b7 100644
--- a/plugins/video/src/component/index.ts
+++ b/plugins/video/src/component/index.ts
@@ -1,3 +1,4 @@
+import { VideoOptions } from '@/types';
 import type {
 	CardToolbarItemOptions,
 	ToolbarItemOptions,
@@ -190,9 +191,10 @@ class VideoComponent<T extends VideoValue = VideoValue> extends Card<T> {
 	}
 
 	onBeforeRender = (action: 'query' | 'download' | 'cover', url: string) => {
-		const videoPlugin = this.editor.plugin.components['video'];
+		const videoPlugin =
+			this.editor.plugin.findPlugin<VideoOptions>('video');
 		if (videoPlugin) {
-			const { onBeforeRender } = (videoPlugin['options'] || {}) as any;
+			const { onBeforeRender } = videoPlugin.options || {};
 			if (onBeforeRender) return onBeforeRender(action, url);
 		}
 		return url;
diff --git a/plugins/video/src/index.ts b/plugins/video/src/index.ts
index 904ebd50..fbe56572 100644
--- a/plugins/video/src/index.ts
+++ b/plugins/video/src/index.ts
@@ -20,14 +20,7 @@ import type { VideoValue, VideoStatus } from './component';
 import VideoUploader from './uploader';
 import type { VideoUploaderOptions } from './uploader';
 import locales from './locales';
-
-export interface VideoOptions extends PluginOptions {
-	onBeforeRender?: (
-		action: 'download' | 'query' | 'cover',
-		url: string,
-	) => string;
-	showTitle?: boolean;
-}
+import { VideoOptions } from './types';
 
 export default class VideoPlugin<
 	T extends VideoOptions = VideoOptions,
diff --git a/plugins/video/src/types.ts b/plugins/video/src/types.ts
new file mode 100644
index 00000000..9bffb5c9
--- /dev/null
+++ b/plugins/video/src/types.ts
@@ -0,0 +1,9 @@
+import { PluginOptions } from '@aomao/engine';
+
+export interface VideoOptions extends PluginOptions {
+	onBeforeRender?: (
+		action: 'download' | 'query' | 'cover',
+		url: string,
+	) => string;
+	showTitle?: boolean;
+}