vue-editify 0.2.19 → 0.2.21

package/lib/index.d.ts

@@ -953,5 +953,5 @@ export type * from './editify/menu';
 export type * from './editify/toolbar';
 export { elementIsMatch, getMatchElementByElement, getMatchElementByRange, elementIsList, getListByElement, hasListInRange, rangeIsInList, elementIsTask, getTaskByElement, hasTaskInRange, rangeIsInTask, elementIsAttachment, hasAttachmentInRange, elementIsMathformula, getMathformulaByElement, hasMathformulaInRange, elementIsInfoBlock, getInfoBlockByElement, hasInfoBlockInRange, rangeIsInInfoBlock, hasPreInRange, hasTableInRange, hasQuoteInRange, rangeIsInQuote, hasLinkInRange, hasImageInRange, hasVideoInRange, queryTextStyle, setTextStyle, removeTextStyle, queryTextMark, setTextMark, removeTextMark, getRangeText, addSpaceTextToBothSides, setHeading, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock, insertSeparator, insertAttachment, insertMathformula, insertInfoBlock } from './core/function';
 declare const install: (app: App) => void;
-declare const version = "0.2.19";
+declare const version = "0.2.21";
 export { Editify as default, Editify, install, AlexElement, version };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-editify",
-	"version": "0.2.19",
+	"version": "0.2.21",
 	"private": false,
 	"sideEffects": [
 		"*.css"
@@ -17,7 +17,7 @@
 		"lib": "vue-tsc && vite build"
 	},
 	"dependencies": {
-		"alex-editor": "^1.4.33",
+		"alex-editor": "^1.4.34",
 		"dap-util": "^1.5.8",
 		"highlight.js": "^11.8.0",
 		"katex": "^0.16.10",

package/src/components/button/button.vue

@@ -192,7 +192,8 @@ const handleClick = () => {
 defineExpose({
 	show,
 	status,
-	layerRef
+	layerRef,
+	handleClick
 })
 </script>
 <style scoped src="./button.less"></style>

package/src/core/shortcut.ts

@@ -1,5 +1,5 @@
 import { platform } from 'dap-util'
-import { hasAttachmentInRange, hasImageInRange, hasMathformulaInRange, hasPreInRange, hasTableInRange, hasVideoInRange, insertCodeBlock, insertInfoBlock, queryTextMark, queryTextStyle, removeTextMark, removeTextStyle, setHeading, setIndentDecrease, setIndentIncrease, setList, setQuote, setTask, setTextMark, setTextStyle } from './function'
+import { hasPreInRange, hasTableInRange, setHeading, setIndentDecrease, setIndentIncrease } from './function'
 import { ShortcutType } from './tool'
 
 const { Mac } = platform.os()
@@ -88,299 +88,146 @@ export const config: ShortcutConfigType = {
 	quote: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + E`,
 		define: event => event.key.toLocaleLowerCase() == 'e' && (Mac ? event.metaKey : event.ctrlKey),
-		operation: (editor, dataRangeCaches, isSourceView) => {
-			if (isSourceView.value || hasPreInRange(editor, dataRangeCaches) || hasTableInRange(editor, dataRangeCaches)) {
-				return
-			}
-			setQuote(editor, dataRangeCaches)
-			editor.domRender()
-			editor.rangeRender()
-		}
+		operation: null
 	},
 	separator: {
 		title: '',
-		define: null
+		define: null,
+		operation: null
 	},
 	align: {
 		title: '',
-		define: null
+		define: null,
+		operation: null
 	},
 	orderList: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + O`,
 		define: event => event.key.toLocaleLowerCase() == 'o' && (Mac ? event.metaKey : event.ctrlKey),
-		operation: (editor, dataRangeCaches, isSourceView) => {
-			if (isSourceView.value || hasPreInRange(editor, dataRangeCaches) || hasTableInRange(editor, dataRangeCaches)) {
-				return
-			}
-			setList(editor, dataRangeCaches, true)
-			editor.domRender()
-			editor.rangeRender()
-		}
+		operation: null
 	},
 	unorderList: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + U`,
 		define: event => event.key.toLocaleLowerCase() == 'u' && (Mac ? event.metaKey : event.ctrlKey),
-		operation: (editor, dataRangeCaches, isSourceView) => {
-			if (isSourceView.value || hasPreInRange(editor, dataRangeCaches) || hasTableInRange(editor, dataRangeCaches)) {
-				return
-			}
-			setList(editor, dataRangeCaches, false)
-			editor.domRender()
-			editor.rangeRender()
-		}
+		operation: null
 	},
 	task: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + I`,
 		define: event => event.key.toLocaleLowerCase() == 'i' && (Mac ? event.metaKey : event.ctrlKey),
-		operation: (editor, dataRangeCaches, isSourceView) => {
-			if (isSourceView.value || hasPreInRange(editor, dataRangeCaches) || hasTableInRange(editor, dataRangeCaches)) {
-				return
-			}
-			setTask(editor, dataRangeCaches)
-			editor.domRender()
-			editor.rangeRender()
-		}
+		operation: null
 	},
 	bold: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + B`,
 		define: event => event.key.toLocaleLowerCase() == 'b' && (Mac ? event.metaKey : event.ctrlKey),
-		operation: (editor, dataRangeCaches, isSourceView) => {
-			if (isSourceView.value || hasPreInRange(editor, dataRangeCaches)) {
-				return
-			}
-			const active = queryTextStyle(editor, dataRangeCaches, 'font-weight', 'bold') || queryTextStyle(editor, dataRangeCaches, 'font-weight', '700')
-			if (active) {
-				removeTextStyle(editor, dataRangeCaches, ['font-weight'])
-			} else {
-				setTextStyle(editor, dataRangeCaches, {
-					'font-weight': 'bold'
-				})
-			}
-			editor.domRender()
-			editor.rangeRender()
-		}
+		operation: null
 	},
 	underline: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + G`,
 		define: event => event.key.toLocaleLowerCase() == 'g' && (Mac ? event.metaKey : event.ctrlKey),
-		operation: (editor, dataRangeCaches, isSourceView) => {
-			if (isSourceView.value || hasPreInRange(editor, dataRangeCaches)) {
-				return
-			}
-			const active = queryTextStyle(editor, dataRangeCaches, 'text-decoration', 'underline') || queryTextStyle(editor, dataRangeCaches, 'text-decoration-line', 'underline')
-			if (active) {
-				removeTextStyle(editor, dataRangeCaches, ['text-decoration', 'text-decoration-line'])
-			} else {
-				setTextStyle(editor, dataRangeCaches, {
-					'text-decoration': 'underline'
-				})
-			}
-			editor.domRender()
-			editor.rangeRender()
-		}
+		operation: null
 	},
 	italic: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + H`,
 		define: event => event.key.toLocaleLowerCase() == 'h' && (Mac ? event.metaKey : event.ctrlKey),
-		operation: (editor, dataRangeCaches, isSourceView) => {
-			if (isSourceView.value || hasPreInRange(editor, dataRangeCaches)) {
-				return
-			}
-			const active = queryTextStyle(editor, dataRangeCaches, 'font-style', 'italic')
-			if (active) {
-				removeTextStyle(editor, dataRangeCaches, ['font-style'])
-			} else {
-				setTextStyle(editor, dataRangeCaches, {
-					'font-style': 'italic'
-				})
-			}
-			editor.domRender()
-			editor.rangeRender()
-		}
+		operation: null
 	},
 	strikethrough: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + J`,
-		define: event => {
-			return event.key.toLocaleLowerCase() == 'j' && (Mac ? event.metaKey : event.ctrlKey)
-		},
-		operation: (editor, dataRangeCaches, isSourceView) => {
-			if (isSourceView.value || hasPreInRange(editor, dataRangeCaches)) {
-				return
-			}
-			const active = queryTextStyle(editor, dataRangeCaches, 'text-decoration', 'line-through') || queryTextStyle(editor, dataRangeCaches, 'text-decoration-line', 'line-through')
-			if (active) {
-				removeTextStyle(editor, dataRangeCaches, ['text-decoration', 'text-decoration-line'])
-			} else {
-				setTextStyle(editor, dataRangeCaches, {
-					'text-decoration': 'line-through'
-				})
-			}
-			editor.domRender()
-			editor.rangeRender()
-		}
+		define: event => event.key.toLocaleLowerCase() == 'j' && (Mac ? event.metaKey : event.ctrlKey),
+		operation: null
 	},
 	code: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + K`,
-		define: event => {
-			return event.key.toLocaleLowerCase() == 'k' && (Mac ? event.metaKey : event.ctrlKey)
-		},
-		operation: (editor, dataRangeCaches, isSourceView) => {
-			if (isSourceView.value || hasPreInRange(editor, dataRangeCaches)) {
-				return
-			}
-			const active = queryTextMark(editor, dataRangeCaches, 'data-editify-code')
-			if (active) {
-				removeTextMark(editor, dataRangeCaches, ['data-editify-code'])
-			} else {
-				setTextMark(editor, dataRangeCaches, {
-					'data-editify-code': true
-				})
-			}
-			editor.domRender()
-			editor.rangeRender()
-		}
+		define: event => event.key.toLocaleLowerCase() == 'k' && (Mac ? event.metaKey : event.ctrlKey),
+		operation: null
 	},
 	super: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + L`,
-		define: event => {
-			return event.key.toLocaleLowerCase() == 'l' && (Mac ? event.metaKey : event.ctrlKey)
-		},
-		operation: (editor, dataRangeCaches, isSourceView) => {
-			if (isSourceView.value || hasPreInRange(editor, dataRangeCaches)) {
-				return
-			}
-			const active = queryTextStyle(editor, dataRangeCaches, 'vertical-align', 'super')
-			if (active) {
-				removeTextStyle(editor, dataRangeCaches, ['vertical-align'])
-			} else {
-				setTextStyle(editor, dataRangeCaches, {
-					'vertical-align': 'super'
-				})
-			}
-			editor.domRender()
-			editor.rangeRender()
-		}
+		define: event => event.key.toLocaleLowerCase() == 'l' && (Mac ? event.metaKey : event.ctrlKey),
+		operation: null
 	},
 	sub: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + M`,
-		define: event => {
-			return event.key.toLocaleLowerCase() == 'm' && (Mac ? event.metaKey : event.ctrlKey)
-		},
-		operation: (editor, dataRangeCaches, isSourceView) => {
-			if (isSourceView.value || hasPreInRange(editor, dataRangeCaches)) {
-				return
-			}
-			const active = queryTextStyle(editor, dataRangeCaches, 'vertical-align', 'sub')
-			if (active) {
-				removeTextStyle(editor, dataRangeCaches, ['vertical-align'])
-			} else {
-				setTextStyle(editor, dataRangeCaches, {
-					'vertical-align': 'sub'
-				})
-			}
-			editor.domRender()
-			editor.rangeRender()
-		}
+		define: event => event.key.toLocaleLowerCase() == 'm' && (Mac ? event.metaKey : event.ctrlKey),
+		operation: null
 	},
 	formatClear: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + Enter`,
-		define: event => {
-			return event.key.toLocaleLowerCase() == 'enter' && (Mac ? event.metaKey : event.ctrlKey)
-		},
-		operation: (editor, dataRangeCaches, isSourceView) => {
-			if (isSourceView.value || hasPreInRange(editor, dataRangeCaches)) {
-				return
-			}
-			removeTextStyle(editor, dataRangeCaches)
-			removeTextMark(editor, dataRangeCaches)
-			editor.domRender()
-			editor.rangeRender()
-		}
+		define: event => event.key.toLocaleLowerCase() == 'enter' && (Mac ? event.metaKey : event.ctrlKey),
+		operation: null
 	},
 	fontSize: {
 		title: '',
-		define: null
+		define: null,
+		operation: null
 	},
 	fontFamily: {
 		title: '',
-		define: null
+		define: null,
+		operation: null
 	},
 	lineHeight: {
 		title: '',
-		define: null
+		define: null,
+		operation: null
 	},
 	foreColor: {
 		title: '',
-		define: null
+		define: null,
+		operation: null
 	},
 	backColor: {
 		title: '',
-		define: null
+		define: null,
+		operation: null
 	},
 	link: {
 		title: '',
-		define: null
+		define: null,
+		operation: null
 	},
 	image: {
 		title: '',
-		define: null
+		define: null,
+		operation: null
 	},
 	video: {
 		title: '',
-		define: null
+		define: null,
+		operation: null
 	},
 	table: {
 		title: '',
-		define: null
+		define: null,
+		operation: null
 	},
 	codeBlock: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + P`,
 		define: event => event.key.toLocaleLowerCase() == 'p' && (Mac ? event.metaKey : event.ctrlKey),
-		operation: (editor, dataRangeCaches, isSourceView) => {
-			if (isSourceView.value || hasTableInRange(editor, dataRangeCaches) || hasImageInRange(editor, dataRangeCaches) || hasVideoInRange(editor, dataRangeCaches) || hasAttachmentInRange(editor, dataRangeCaches) || hasMathformulaInRange(editor, dataRangeCaches)) {
-				return
-			}
-			insertCodeBlock(editor, dataRangeCaches)
-			editor.domRender()
-			editor.rangeRender()
-		}
+		operation: null
 	},
 	sourceView: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + 8`,
 		define: event => event.key.toLocaleLowerCase() == '8' && (Mac ? event.metaKey : event.ctrlKey),
-		operation: (editor, _dataRangeCaches, isSourceView) => {
-			isSourceView.value = !isSourceView.value
-			if (!isSourceView.value) {
-				editor.rangeRender()
-			}
-		}
+		operation: null
 	},
 	fullScreen: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + 9`,
 		define: event => event.key.toLocaleLowerCase() == '9' && (Mac ? event.metaKey : event.ctrlKey),
-		operation: (editor, _dataRangeCaches, _isSourceView, isFullScreen) => {
-			isFullScreen.value = !isFullScreen.value
-			editor.rangeRender()
-		}
+		operation: null
 	},
 	attachment: {
 		title: '',
-		define: null
+		define: null,
+		operation: null
 	},
 	mathformula: {
 		title: '',
-		define: null
+		define: null,
+		operation: null
 	},
 	infoBlock: {
 		title: `${Mac ? 'Command' : 'Ctrl'} + 0`,
 		define: event => event.key.toLocaleLowerCase() == '0' && (Mac ? event.metaKey : event.ctrlKey),
-		operation: (editor, dataRangeCaches, isSourceView) => {
-			if (isSourceView.value || hasTableInRange(editor, dataRangeCaches) || hasPreInRange(editor, dataRangeCaches)) {
-				return
-			}
-			insertInfoBlock(editor, dataRangeCaches)
-			editor.domRender()
-			editor.rangeRender()
-		}
+		operation: null
 	}
 }

package/src/core/tool.ts

@@ -26,7 +26,7 @@ export type ButtonOptionsConfigType = {
 export type ShortcutType = {
 	title: string
 	define: ((event: KeyboardEvent) => boolean | { [code: string]: boolean }) | null
-	operation?: (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, isSourceView: Ref<boolean>, isFullScreen: Ref<boolean>, code?: string) => void
+	operation: ((editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, isSourceView: Ref<boolean>, isFullScreen: Ref<boolean>, code?: string) => void) | null
 }
 
 export interface MenuButtonType {

package/src/editify/editify.vue

@@ -763,7 +763,11 @@ const handleEditorKeydown = (val: string, e: KeyboardEvent) => {
 						e.preventDefault()
 						//没有被禁用则执行对应的操作
 						if (!item.disabled) {
-							shortcut.operation?.(editor.value!, dataRangeCaches.value, isSourceView, isFullScreen)
+							if (typeof shortcut.operation == 'function') {
+								shortcut.operation(editor.value!, dataRangeCaches.value, isSourceView, isFullScreen)
+							} else {
+								menuRef.value?.menuItemRefs[extendKey].btnRef.handleClick()
+							}
 						}
 					}
 					//如果是对象，则表示有多个快捷键操作
@@ -776,7 +780,11 @@ const handleEditorKeydown = (val: string, e: KeyboardEvent) => {
 								e.preventDefault()
 								//没有被禁用则执行对应的操作
 								if (!item.disabled) {
-									shortcut.operation?.(editor.value!, dataRangeCaches.value, isSourceView, isFullScreen, code)
+									if (typeof shortcut.operation == 'function') {
+										shortcut.operation(editor.value!, dataRangeCaches.value, isSourceView, isFullScreen, code)
+									} else {
+										menuRef.value?.menuItemRefs[extendKey].btnRef.handleClick()
+									}
 								}
 							}
 						})
@@ -801,7 +809,11 @@ const handleEditorKeydown = (val: string, e: KeyboardEvent) => {
 						e.preventDefault()
 						//没有被禁用则执行对应的操作
 						if (!item.disabled) {
-							shortcut.operation?.(editor.value!, dataRangeCaches.value, isSourceView, isFullScreen)
+							if (typeof shortcut.operation == 'function') {
+								shortcut.operation(editor.value!, dataRangeCaches.value, isSourceView, isFullScreen)
+							} else {
+								menuRef.value?.menuItemRefs[key].btnRef.handleClick()
+							}
 						}
 					}
 					//如果是对象，则表示有多个快捷键操作
@@ -814,7 +826,11 @@ const handleEditorKeydown = (val: string, e: KeyboardEvent) => {
 								e.preventDefault()
 								//没有被禁用则执行对应的操作
 								if (!item.disabled) {
-									shortcut.operation?.(editor.value!, dataRangeCaches.value, isSourceView, isFullScreen, code)
+									if (typeof shortcut.operation == 'function') {
+										shortcut.operation(editor.value!, dataRangeCaches.value, isSourceView, isFullScreen, code)
+									} else {
+										menuRef.value?.menuItemRefs[key].btnRef.handleClick()
+									}
 								}
 							}
 						})

package/src/editify/menu/menu.vue

@@ -2,14 +2,14 @@
 	<div ref="menuRef" class="editify-menu" :class="{ 'editify-border': menuShowBorder, 'editify-source': isSourceView && menuMode == 'inner', 'editify-fullscreen': isFullScreen }" :data-editify-mode="menuMode" :style="{ zIndex: zIndex, ...(config.style || {}) }">
 		<template v-for="item in menuNames">
 			<!-- 内置菜单按钮 -->
-			<component v-if="!!currentDefaultMenu(item)" :is="currentDefaultMenu(item)" :color="color" :z-index="zIndex + 1" :config="(config as any)[item]" :disabled="isDisabled || !rangeKey" :tooltip="config.tooltip!"></component>
+			<component :ref="(el:MenuItemComponentPublicInstance) => (menuItemRefs[item] = el)" v-if="!!currentDefaultMenu(item)" :is="currentDefaultMenu(item)" :color="color" :z-index="zIndex + 1" :config="(config as any)[item]" :disabled="isDisabled || !rangeKey" :tooltip="config.tooltip!"></component>
 			<!-- 拓展菜单按钮 -->
-			<ExtendMenuButton v-else :name="item" />
+			<ExtendMenuButton v-else :ref="el => (menuItemRefs[item] = (el as MenuItemComponentPublicInstance))" :name="item" />
 		</template>
 	</div>
 </template>
 <script setup lang="ts">
-import { ref, computed, inject, Ref, ComputedRef, onMounted, getCurrentInstance, onBeforeUnmount, shallowRef, defineComponent, h } from 'vue'
+import { ref, computed, inject, Ref, ComputedRef, onMounted, getCurrentInstance, onBeforeUnmount, shallowRef, defineComponent, h, ComponentPublicInstance } from 'vue'
 import { event as DapEvent } from 'dap-util'
 import { MenuModeType } from '@/core/tool'
 import { Button } from '@/components/button'
@@ -72,6 +72,9 @@ const isAutoHeight = inject<ComputedRef<boolean>>('isAutoHeight')!
 const menuRef = ref<HTMLElement | null>(null)
 //菜单高度
 const height = ref<number>(0)
+//菜单实例数组
+type MenuItemComponentPublicInstance = ComponentPublicInstance & { btnRef: InstanceType<typeof Button> }
+const menuItemRefs = ref<{ [name: string]: MenuItemComponentPublicInstance }>({})
 
 //菜单名称数组（包括内置的和拓展的）
 const menuNames = computed<string[]>(() => {
@@ -111,21 +114,26 @@ const menuShowBorder = computed<boolean>(() => {
 
 //拓展菜单组件
 const ExtendMenuButton = defineComponent(
-	extendProps => {
+	(extendProps, { expose }) => {
 		//按钮实例
 		const btnRef = ref<InstanceType<typeof Button> | null>(null)
 		//拓展菜单配置
 		const configuration = props.config.extends![extendProps.name]
+
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return configuration
 				? h(
 						Button,
 						{
+							ref: btnRef,
 							name: extendProps.name,
 							tooltip: props.config.tooltip,
 							color: props.color,
 							zIndex: props.zIndex + 1,
-							ref: btnRef,
 							type: configuration.type || 'default',
 							title: `${configuration.title || ''}${configuration.shortcut?.title ? `【${configuration.shortcut?.title}】` : ''}`,
 							leftBorder: configuration.leftBorder || false,
@@ -208,7 +216,8 @@ onBeforeUnmount(() => {
 })
 
 defineExpose({
-	height
+	height,
+	menuItemRefs
 })
 </script>
 <style scoped src="./menu.less"></style>

package/src/editify/toolbar/toolbar.vue

@@ -57,7 +57,7 @@ const emits = defineEmits(['update:modelValue'])
 
 //工具条浮层组件实例
 const layerRef = ref<InstanceType<typeof Layer> | null>(null)
-//文本按钮实例类型
+//按钮实例类型
 type BtnComponentPublicInstance = ComponentPublicInstance & { btnRef: InstanceType<typeof Button> }
 //代码块语言选择按钮实例
 const codeBlockToolbarRef = ref<BtnComponentPublicInstance | null>(null)

package/src/feature/align.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, PropType, Ref } from 'vue'
+import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
 import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
 import { MenuSelectButtonType } from '@/core/tool'
 import { hasPreInRange, setAlign } from '@/core/function'
@@ -14,17 +14,24 @@ const FEATURE_NAME = 'align'
  * 菜单栏 - 对齐方式
  */
 export const AlignMenuButton = defineComponent(
-	props => {
+	(props, { expose }) => {
 		const editor = inject<Ref<AlexEditor>>('editor')!
 		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
 		const $editTrans = inject<(key: string) => any>('$editTrans')!
 		const isSourceView = inject<Ref<boolean>>('isSourceView')!
 
+		const btnRef = ref<InstanceType<typeof Button> | null>(null)
+
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return props.config.show
 				? h(
 						Button,
 						{
+							ref: btnRef,
 							name: FEATURE_NAME,
 							tooltip: props.tooltip,
 							color: props.color,

package/src/feature/attachment.ts

@@ -15,7 +15,7 @@ const FEATURE_NAME = 'attachment'
  * 菜单栏 - 插入附件
  */
 export const AttachmentMenuButton = defineComponent(
-	props => {
+	(props, { expose }) => {
 		const editor = inject<Ref<AlexEditor>>('editor')!
 		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
 		const $editTrans = inject<(key: string) => any>('$editTrans')!
@@ -23,6 +23,10 @@ export const AttachmentMenuButton = defineComponent(
 
 		const btnRef = ref<InstanceType<typeof Button> | null>(null)
 
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return props.config.show
 				? h(

package/src/feature/backColor.ts

@@ -32,9 +32,11 @@ export const BackColorToolbarButton = defineComponent(
 			})
 			return findBackColorItem ? (DapCommon.isObject(findBackColorItem) ? ((findBackColorItem as ButtonOptionsItemType).value as string) : (findBackColorItem as string)) : ''
 		})
+
 		expose({
 			btnRef
 		})
+
 		return () => {
 			return props.config.show
 				? h(
@@ -94,7 +96,7 @@ export const BackColorToolbarButton = defineComponent(
  * 菜单栏 - 背景色
  */
 export const BackColorMenuButton = defineComponent(
-	props => {
+	(props, { expose }) => {
 		const editor = inject<Ref<AlexEditor>>('editor')!
 		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
 		const $editTrans = inject<(key: string) => any>('$editTrans')!
@@ -112,6 +114,10 @@ export const BackColorMenuButton = defineComponent(
 			return findBackColorItem ? (DapCommon.isObject(findBackColorItem) ? ((findBackColorItem as ButtonOptionsItemType).value as string) : (findBackColorItem as string)) : ''
 		})
 
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return props.config.show
 				? h(

package/src/feature/bold.ts

@@ -78,21 +78,28 @@ export const BoldToolbarButton = defineComponent(
  * 菜单栏 - 加粗
  */
 export const BoldMenuButton = defineComponent(
-	props => {
+	(props, { expose }) => {
 		const editor = inject<Ref<AlexEditor>>('editor')!
 		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
 		const $editTrans = inject<(key: string) => any>('$editTrans')!
 		const isSourceView = inject<Ref<boolean>>('isSourceView')!
 
+		const btnRef = ref<InstanceType<typeof Button> | null>(null)
+
 		const active = computed<boolean>(() => {
 			return queryTextStyle(editor.value, dataRangeCaches.value, 'font-weight', 'bold') || queryTextStyle(editor.value, dataRangeCaches.value, 'font-weight', '700')
 		})
 
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return props.config.show
 				? h(
 						Button,
 						{
+							ref: btnRef,
 							name: FEATURE_NAME,
 							tooltip: props.tooltip,
 							color: props.color,

package/src/feature/code.ts

@@ -78,21 +78,28 @@ export const CodeToolbarButton = defineComponent(
  * 菜单栏 - 行内代码
  */
 export const CodeMenuButton = defineComponent(
-	props => {
+	(props, { expose }) => {
 		const editor = inject<Ref<AlexEditor>>('editor')!
 		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
 		const $editTrans = inject<(key: string) => any>('$editTrans')!
 		const isSourceView = inject<Ref<boolean>>('isSourceView')!
 
+		const btnRef = ref<InstanceType<typeof Button> | null>(null)
+
 		const active = computed<boolean>(() => {
 			return queryTextMark(editor.value, dataRangeCaches.value, 'data-editify-code')
 		})
 
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return props.config.show
 				? h(
 						Button,
 						{
+							ref: btnRef,
 							name: FEATURE_NAME,
 							tooltip: props.tooltip,
 							color: props.color,