vue-editify 0.2.20 → 0.2.22

package/src/feature/codeBlock.ts

@@ -155,17 +155,24 @@ export const CodeBlockToolbar = defineComponent(
  * 菜单栏 - 插入代码块
  */
 export const CodeBlockMenuButton = 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/fontFamily.ts

@@ -30,9 +30,11 @@ export const FontFamilyToolbarButton = defineComponent(
 			})
 			return findFamilyItem ? (DapCommon.isObject(findFamilyItem) ? ((findFamilyItem as ButtonOptionsItemType).value as string) : (findFamilyItem as string)) : (props.config.defaultValue as string)
 		})
+
 		expose({
 			btnRef
 		})
+
 		return () => {
 			return props.config.show
 				? h(Button, {
@@ -79,12 +81,14 @@ export const FontFamilyToolbarButton = defineComponent(
  * 菜单栏 - 字体
  */
 export const FontFamilyMenuButton = 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 selectVal = computed<string>(() => {
 			const findFamilyItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
 				if (DapCommon.isObject(item)) {
@@ -95,9 +99,14 @@ export const FontFamilyMenuButton = defineComponent(
 			return findFamilyItem ? (DapCommon.isObject(findFamilyItem) ? ((findFamilyItem as ButtonOptionsItemType).value as string) : (findFamilyItem as string)) : (props.config.defaultValue as string)
 		})
 
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return props.config.show
 				? h(Button, {
+						ref: btnRef,
 						name: FEATURE_NAME,
 						tooltip: props.tooltip,
 						color: props.color,

package/src/feature/fontSize.ts

@@ -81,12 +81,14 @@ export const FontSizeToolbarButton = defineComponent(
  * 菜单栏 - 字号
  */
 export const FontSizeMenuButton = 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 selectVal = computed<string>(() => {
 			const findFontItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
 				if (DapCommon.isObject(item)) {
@@ -97,9 +99,14 @@ export const FontSizeMenuButton = defineComponent(
 			return findFontItem ? (DapCommon.isObject(findFontItem) ? ((findFontItem as ButtonOptionsItemType).value as string) : (findFontItem as string)) : (props.config.defaultValue as string)
 		})
 
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return props.config.show
 				? h(Button, {
+						ref: btnRef,
 						name: FEATURE_NAME,
 						tooltip: props.tooltip,
 						color: props.color,

package/src/feature/foreColor.ts

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

package/src/feature/formatClear.ts

@@ -69,17 +69,24 @@ export const FormatClearToolbarButton = defineComponent(
  * 菜单栏 - 清除样式
  */
 export const FormatClearMenuButton = 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/fullScreen.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, PropType, Ref } from 'vue'
+import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
 import { AlexEditor } from 'alex-editor'
 import { Button } from '@/components/button'
 import { MenuButtonType } from '@/core/tool'
@@ -13,16 +13,23 @@ const FEATURE_NAME = 'fullScreen'
  * 菜单栏 - 全屏
  */
 export const FullScreenMenuButton = defineComponent(
-	props => {
+	(props, { expose }) => {
 		const editor = inject<Ref<AlexEditor>>('editor')!
 		const $editTrans = inject<(key: string) => any>('$editTrans')!
 		const isFullScreen = inject<Ref<boolean>>('isFullScreen')!
 
+		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/heading.ts

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, inject, PropType, Ref } from 'vue'
+import { computed, defineComponent, h, inject, PropType, ref, Ref } from 'vue'
 import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
 import { common as DapCommon } from 'dap-util'
 import { MenuDisplayButtonType } from '@/core/tool'
@@ -14,13 +14,15 @@ const FEATURE_NAME = 'heading'
  * 菜单栏 - 标题
  */
 export const HeadingMenuButton = 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 rangeKey = inject<Ref<number | null>>('rangeKey')!
 
+		const btnRef = ref<InstanceType<typeof Button> | null>(null)
+
 		const selectVal = computed<string>(() => {
 			const findHeadingItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
 				let val: string | number | ButtonOptionsItemType = item
@@ -40,9 +42,14 @@ export const HeadingMenuButton = defineComponent(
 			return findHeadingItem ? (DapCommon.isObject(findHeadingItem) ? ((findHeadingItem as ButtonOptionsItemType).value as string) : (findHeadingItem as string)) : (props.config.defaultValue as string)
 		})
 
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return props.config.show
 				? h(Button, {
+						ref: btnRef,
 						name: FEATURE_NAME,
 						tooltip: props.tooltip,
 						color: props.color,

package/src/feature/image.ts

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

package/src/feature/indent.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, PropType, Ref } from 'vue'
+import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
 import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
 import { Button } from '@/components/button'
 import { MenuSelectButtonType } from '@/core/tool'
@@ -14,17 +14,24 @@ const FEATURE_NAME = 'indent'
  * 菜单栏 - 缩进
  */
 export const IndentMenuButton = 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/infoBlock.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, PropType, Ref } from 'vue'
+import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
 import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
 import { Button } from '@/components/button'
 import { MenuButtonType } from '@/core/tool'
@@ -14,17 +14,24 @@ const FEATURE_NAME = 'infoBlock'
  * 菜单栏 - 信息块
  */
 export const InfoBlockMenuButton = 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/italic.ts

@@ -78,21 +78,28 @@ export const ItalicToolbarButton = defineComponent(
  * 菜单栏 - 斜体
  */
 export const ItalicMenuButton = 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-style', 'italic')
 		})
 
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return props.config.show
 				? h(
 						Button,
 						{
+							ref: btnRef,
 							name: FEATURE_NAME,
 							tooltip: props.tooltip,
 							color: props.color,

package/src/feature/lineHeight.ts

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, inject, PropType, Ref } from 'vue'
+import { computed, defineComponent, h, inject, PropType, ref, Ref } from 'vue'
 import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
 import { common as DapCommon } from 'dap-util'
 import { MenuDisplayButtonType } from '@/core/tool'
@@ -14,13 +14,15 @@ const FEATURE_NAME = 'lineHeight'
  * 菜单栏 - 行高
  */
 export const LineHeightMenuButton = 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 rangeKey = inject<Ref<number | null>>('rangeKey')!
 
+		const btnRef = ref<InstanceType<typeof Button> | null>(null)
+
 		const selectVal = computed<string>(() => {
 			const findHeightItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
 				let val: string | number | ButtonOptionsItemType = item
@@ -46,9 +48,14 @@ export const LineHeightMenuButton = defineComponent(
 			return findHeightItem ? (DapCommon.isObject(findHeightItem) ? ((findHeightItem as ButtonOptionsItemType).value as string) : (findHeightItem as string)) : (props.config.defaultValue as string)
 		})
 
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return props.config.show
 				? h(Button, {
+						ref: btnRef,
 						name: FEATURE_NAME,
 						tooltip: props.tooltip,
 						color: props.color,

package/src/feature/link.ts

@@ -81,7 +81,7 @@ export const linkToolbar = defineComponent(
  * 菜单栏 - 插入链接
  */
 export const LinkMenuButton = defineComponent(
-	props => {
+	(props, { expose }) => {
 		const editor = inject<Ref<AlexEditor>>('editor')!
 		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
 		const $editTrans = inject<(key: string) => any>('$editTrans')!
@@ -91,6 +91,10 @@ export const LinkMenuButton = defineComponent(
 
 		const presetText = computed<string>(() => getRangeText(dataRangeCaches.value))
 
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return props.config.show
 				? h(

package/src/feature/mathformula.ts

@@ -20,7 +20,7 @@ export const extraKeepTagsForMathformula = ['math', 'mrow', 'mi', 'mo', 'mn', 'm
  * 菜单栏 - 插入数学公式
  */
 export const MathformulaMenuButton = defineComponent(
-	props => {
+	(props, { expose }) => {
 		const editor = inject<Ref<AlexEditor>>('editor')!
 		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
 		const $editTrans = inject<(key: string) => any>('$editTrans')!
@@ -42,6 +42,10 @@ export const MathformulaMenuButton = defineComponent(
 			return ''
 		})
 
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return props.config.show
 				? h(

package/src/feature/orderList.ts

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, inject, PropType, Ref } from 'vue'
+import { computed, defineComponent, h, inject, PropType, ref, Ref } from 'vue'
 import { AlexElementsRangeType, AlexEditor, AlexElement } from 'alex-editor'
 import { MenuButtonType } from '@/core/tool'
 import { elementIsList, getMatchElementByRange, hasPreInRange, hasTableInRange, rangeIsInList, setList } from '@/core/function'
@@ -199,17 +199,24 @@ export const OrderListToolbar = defineComponent(
  * 菜单栏 - 有序列表
  */
 export const OrderListMenuButton = 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/quote.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, PropType, Ref } from 'vue'
+import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
 import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
 import { Button } from '@/components/button'
 import { MenuSelectButtonType } from '@/core/tool'
@@ -14,17 +14,24 @@ const FEATURE_NAME = 'quote'
  * 菜单栏 - 引用
  */
 export const QuoteMenuButton = 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/redo.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, PropType, Ref } from 'vue'
+import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
 import { AlexEditor } from 'alex-editor'
 import { Button } from '@/components/button'
 import { MenuButtonType } from '@/core/tool'
@@ -13,18 +13,25 @@ const FEATURE_NAME = 'redo'
  * 菜单栏 - 重做
  */
 export const RedoMenuButton = defineComponent(
-	props => {
+	(props, { expose }) => {
 		const editor = inject<Ref<AlexEditor>>('editor')!
 		const $editTrans = inject<(key: string) => any>('$editTrans')!
 		const isSourceView = inject<Ref<boolean>>('isSourceView')!
 		const rangeKey = inject<Ref<number | null>>('rangeKey')!
 		const redo = inject<() => void>('redo')!
 
+		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/separator.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, PropType, Ref } from 'vue'
+import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
 import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
 import { Button } from '@/components/button'
 import { MenuSelectButtonType } from '@/core/tool'
@@ -14,17 +14,24 @@ const FEATURE_NAME = 'separator'
  * 菜单栏 - 分隔线
  */
 export const SeparatorMenuButton = 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/sourceView.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, PropType, Ref } from 'vue'
+import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
 import { AlexEditor } from 'alex-editor'
 import { Button } from '@/components/button'
 import { MenuButtonType } from '@/core/tool'
@@ -13,16 +13,23 @@ const FEATURE_NAME = 'sourceView'
  * 菜单栏 - 代码视图
  */
 export const SourceViewMenuButton = defineComponent(
-	props => {
+	(props, { expose }) => {
 		const editor = inject<Ref<AlexEditor>>('editor')!
 		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/strikethrough.ts

@@ -78,21 +78,28 @@ export const StrikethroughToolbarButton = defineComponent(
  * 菜单栏 - 删除线
  */
 export const StrikethroughMenuButton = 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, 'text-decoration', 'line-through') || queryTextStyle(editor.value, dataRangeCaches.value, 'text-decoration-line', 'line-through')
 		})
 
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return props.config.show
 				? h(
 						Button,
 						{
+							ref: btnRef,
 							name: FEATURE_NAME,
 							tooltip: props.tooltip,
 							color: props.color,

package/src/feature/sub.ts

@@ -78,21 +78,28 @@ export const SubToolbarButton = defineComponent(
  * 菜单栏 - 下标
  */
 export const SubMenuButton = 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, 'vertical-align', 'sub')
 		})
 
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return props.config.show
 				? h(
 						Button,
 						{
+							ref: btnRef,
 							name: FEATURE_NAME,
 							tooltip: props.tooltip,
 							color: props.color,

package/src/feature/super.ts

@@ -78,21 +78,28 @@ export const SuperToolbarButton = defineComponent(
  * 菜单栏 - 上标
  */
 export const SuperMenuButton = 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, 'vertical-align', 'super')
 		})
 
+		expose({
+			btnRef
+		})
+
 		return () => {
 			return props.config.show
 				? h(
 						Button,
 						{
+							ref: btnRef,
 							name: FEATURE_NAME,
 							tooltip: props.tooltip,
 							color: props.color,