vue-editify 0.2.17 → 0.2.19

package/src/editify/toolbar/toolbar.vue

@@ -1,16 +1,20 @@
 <template>
 	<Layer v-model="show" ref="layerRef" :node="node" :scroll-node="scrollNode" border placement="bottom-start" :useRange="type == 'text'" :z-index="zIndex" :inside-elements="insideElements">
 		<div class="editify-toolbar" :style="config.style">
-			<!-- 链接工具条 -->
-			<linkToolbar v-if="type == 'link'" :color="color" />
 			<!-- 图片工具条 -->
-			<ImageToolbar v-else-if="type == 'image'" @reset-toolbar="layerRef!.setPosition()" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
+			<ImageToolbar v-if="type == 'image'" @reset-toolbar="layerRef!.setPosition()" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
 			<!-- 视频工具条 -->
 			<VideoToolbar v-else-if="type == 'video'" @reset-toolbar="layerRef!.setPosition()" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
-			<!-- 表格工具条 -->
-			<TableToolbar v-else-if="type == 'table'" @reset-toolbar="layerRef!.setPosition()" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
 			<!-- 代码块工具条 -->
 			<CodeBlockToolbar v-else-if="type == 'codeBlock'" ref="codeBlockToolbarRef" :language="config.codeBlock!.languages!" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
+			<!-- 链接工具条 -->
+			<linkToolbar v-else-if="type == 'link'" :color="color" />
+			<!-- 表格工具条 -->
+			<TableToolbar v-else-if="type == 'table'" @reset-toolbar="layerRef!.setPosition()" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
+			<!-- 有序列表工具条 -->
+			<OrderListToolbar v-else-if="type == 'orderList'" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
+			<!-- 无序列表工具条 -->
+			<UnorderListToolbar v-else-if="type == 'unorderList'" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
 			<!-- 文本工具条 -->
 			<template v-else-if="type == 'text'">
 				<component v-for="(btn, index) in textToolbarBtns" :ref="el => (textToolbarBtnRefs[index] = (el as BtnComponentPublicInstance))" :is="btn" :color="color" :z-index="zIndex + 1" :config="textButtonConfig(btn.name)" :tooltip="config.tooltip!" />
@@ -28,11 +32,8 @@ import { ImageToolbar } from '@/feature/image'
 import { VideoToolbar } from '@/feature/video'
 import { TableToolbar } from '@/feature/table'
 import { CodeBlockToolbar } from '@/feature/codeBlock'
-import { HeadingToolbarButton } from '@/feature/heading'
-import { AlignToolbarButton } from '@/feature/align'
-import { OrderListToolbarButton } from '@/feature/orderList'
-import { UnorderListToolbarButton } from '@/feature/unorderList'
-import { TaskToolbarButton } from '@/feature/task'
+import { OrderListToolbar } from '@/feature/orderList'
+import { UnorderListToolbar } from '@/feature/unorderList'
 import { BoldToolbarButton } from '@/feature/bold'
 import { ItalicToolbarButton } from '@/feature/italic'
 import { StrikethroughToolbarButton } from '@/feature/strikethrough'
@@ -42,7 +43,6 @@ import { SuperToolbarButton } from '@/feature/super'
 import { SubToolbarButton } from '@/feature/sub'
 import { FontSizeToolbarButton } from '@/feature/fontSize'
 import { FontFamilyToolbarButton } from '@/feature/fontFamily'
-import { LineHeightToolbarButton } from '@/feature/lineHeight'
 import { ForeColorToolbarButton } from '@/feature/foreColor'
 import { BackColorToolbarButton } from '@/feature/backColor'
 import { FormatClearToolbarButton } from '@/feature/formatClear'
@@ -62,7 +62,7 @@ type BtnComponentPublicInstance = ComponentPublicInstance & { btnRef: InstanceTy
 //代码块语言选择按钮实例
 const codeBlockToolbarRef = ref<BtnComponentPublicInstance | null>(null)
 //文本工具条按钮数组
-const textToolbarBtns = shallowRef([HeadingToolbarButton, AlignToolbarButton, OrderListToolbarButton, UnorderListToolbarButton, TaskToolbarButton, BoldToolbarButton, ItalicToolbarButton, StrikethroughToolbarButton, UnderlineToolbarButton, CodeToolbarButton, SuperToolbarButton, SubToolbarButton, FontSizeToolbarButton, FontFamilyToolbarButton, LineHeightToolbarButton, ForeColorToolbarButton, BackColorToolbarButton, FormatClearToolbarButton])
+const textToolbarBtns = shallowRef([BoldToolbarButton, ItalicToolbarButton, StrikethroughToolbarButton, UnderlineToolbarButton, CodeToolbarButton, SuperToolbarButton, SubToolbarButton, FontSizeToolbarButton, FontFamilyToolbarButton, ForeColorToolbarButton, BackColorToolbarButton, FormatClearToolbarButton])
 //文本工具条按钮实例
 const textToolbarBtnRefs = ref<BtnComponentPublicInstance[]>([])
 

package/src/feature/align.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { defineComponent, h, inject, PropType, Ref } from 'vue'
 import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
 import { MenuSelectButtonType } from '@/core/tool'
 import { hasPreInRange, setAlign } from '@/core/function'
@@ -10,66 +10,6 @@ import { Icon } from '@/components/icon'
  */
 const FEATURE_NAME = 'align'
 
-/**
- * 工具栏 - 对齐方式
- */
-export const AlignToolbarButton = defineComponent(
-	(props, { expose }) => {
-		const editor = inject<Ref<AlexEditor>>('editor')!
-		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
-		const $editTrans = inject<(key: string) => any>('$editTrans')!
-
-		const btnRef = ref<InstanceType<typeof Button> | null>(null)
-
-		expose({
-			btnRef
-		})
-
-		return () => {
-			return props.config.show
-				? h(
-						Button,
-						{
-							ref: btnRef,
-							name: FEATURE_NAME,
-							type: 'select',
-							title: $editTrans('align'),
-							tooltip: props.tooltip,
-							color: props.color,
-							zIndex: props.zIndex,
-							leftBorder: props.config.leftBorder,
-							rightBorder: props.config.rightBorder,
-							active: false,
-							disabled: props.config.disabled,
-							selectConfig: {
-								options: props.config.options,
-								width: props.config.width,
-								maxHeight: props.config.maxHeight
-							},
-							onOperate: (_name: string, val: 'left' | 'right' | 'center' | 'justify') => {
-								setAlign(editor.value, dataRangeCaches.value, val)
-								editor.value.domRender()
-								editor.value.rangeRender()
-							}
-						},
-						{
-							default: () => h(Icon, { value: 'align-left' })
-						}
-				  )
-				: null
-		}
-	},
-	{
-		name: `_${FEATURE_NAME}`,
-		props: {
-			color: String,
-			zIndex: Number,
-			config: Object as PropType<MenuSelectButtonType>,
-			tooltip: Boolean
-		}
-	}
-)
-
 /**
  * 菜单栏 - 对齐方式
  */
@@ -90,7 +30,7 @@ export const AlignMenuButton = defineComponent(
 							color: props.color,
 							zIndex: props.zIndex,
 							type: 'select',
-							title: $editTrans('align'),
+							title: `${$editTrans('align')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							selectConfig: {
 								options: props.config.options,
 								width: props.config.width,

package/src/feature/attachment.ts

@@ -1,8 +1,8 @@
 import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
-import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
-import { MenuAttachmentButtonType, ObjectType } from '@/core/tool'
+import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
+import { MenuAttachmentButtonType } from '@/core/tool'
 import { Button } from '@/components/button'
-import { hasMathformulaInRange, hasPreInRange } from '@/core/function'
+import { hasMathformulaInRange, hasPreInRange, insertAttachment } from '@/core/function'
 import { Icon } from '@/components/icon'
 import { InsertAttachment } from '@/components/insertAttachment'
 
@@ -35,7 +35,7 @@ export const AttachmentMenuButton = defineComponent(
 							zIndex: props.zIndex,
 							type: 'select',
 							hideScroll: true,
-							title: $editTrans('insertAttachment'),
+							title: `${$editTrans('insertAttachment')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: false,
@@ -62,30 +62,17 @@ export const AttachmentMenuButton = defineComponent(
 										urls = urls.filter(url => {
 											return !!url
 										})
-										//如果有地址存在
-										if (urls.length) {
-											//遍历地址数组
-											urls.forEach(url => {
-												const marks: ObjectType = {
-													'data-editify-attachment': url,
-													'data-editify-attachment-name': name || $editTrans('attachmentDefaultName')
-												}
-												//创建元素
-												const attachmentElement = AlexElement.create({
-													type: 'closed',
-													parsedom: 'span',
-													marks
-												})
-												//插入编辑器
-												editor.value.insertElement(attachmentElement)
-												//移动光标到新插入的元素
-												editor.value.range!.anchor.moveToEnd(attachmentElement)
-												editor.value.range!.focus.moveToEnd(attachmentElement)
-											})
-											//渲染
-											editor.value.domRender()
-											editor.value.rangeRender()
+										//如果数组为0
+										if (urls.length == 0) {
+											return
 										}
+										//遍历地址数组
+										urls.forEach(url => {
+											insertAttachment(editor.value, url, name || $editTrans('attachmentDefaultName'))
+										})
+										//渲染
+										editor.value.domRender()
+										editor.value.rangeRender()
 										//关闭浮层
 										btnRef.value!.show = false
 									}

package/src/feature/backColor.ts

@@ -127,7 +127,7 @@ export const BackColorMenuButton = defineComponent(
 								options: props.config.options
 							},
 							hideScroll: true,
-							title: $editTrans('backColor'),
+							title: `${$editTrans('backColor')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: false,
@@ -139,6 +139,7 @@ export const BackColorMenuButton = defineComponent(
 								return h(Colors, {
 									tooltip: props.tooltip,
 									color: props.color,
+									zIndex: props.zIndex + 2,
 									value: selectVal.value,
 									data: options,
 									onChange: (val: string) => {

package/src/feature/bold.ts

@@ -97,7 +97,7 @@ export const BoldMenuButton = defineComponent(
 							tooltip: props.tooltip,
 							color: props.color,
 							zIndex: props.zIndex,
-							title: $editTrans('bold'),
+							title: `${$editTrans('bold')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: active.value,

package/src/feature/code.ts

@@ -97,7 +97,7 @@ export const CodeMenuButton = defineComponent(
 							tooltip: props.tooltip,
 							color: props.color,
 							zIndex: props.zIndex,
-							title: $editTrans('code'),
+							title: `${$editTrans('code')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: active.value,

package/src/feature/codeBlock.ts

@@ -2,7 +2,7 @@ import { computed, defineComponent, h, inject, PropType, ref, Ref } from 'vue'
 import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
 import { Button } from '@/components/button'
 import { Icon } from '@/components/icon'
-import { getMatchElementByRange, hasAttachmentInRange, hasImageInRange, hasMathformulaInRange, hasPanelInRange, hasTableInRange, hasVideoInRange, insertCodeBlock } from '@/core/function'
+import { getMatchElementByRange, hasAttachmentInRange, hasImageInRange, hasMathformulaInRange, hasTableInRange, hasVideoInRange, insertCodeBlock } from '@/core/function'
 import { MenuButtonType, MenuDisplayButtonType } from '@/core/tool'
 
 /**
@@ -170,11 +170,11 @@ export const CodeBlockMenuButton = defineComponent(
 							tooltip: props.tooltip,
 							color: props.color,
 							zIndex: props.zIndex,
-							title: $editTrans('inserCodeBlock'),
+							title: `${$editTrans('inserCodeBlock')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: !!getMatchElementByRange(editor.value, dataRangeCaches.value, { parsedom: 'pre' }),
-							disabled: props.disabled || isSourceView.value || hasTableInRange(editor.value, dataRangeCaches.value) || hasImageInRange(editor.value, dataRangeCaches.value) || hasVideoInRange(editor.value, dataRangeCaches.value) || hasAttachmentInRange(editor.value, dataRangeCaches.value) || hasMathformulaInRange(editor.value, dataRangeCaches.value) || hasPanelInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+							disabled: props.disabled || isSourceView.value || hasTableInRange(editor.value, dataRangeCaches.value) || hasImageInRange(editor.value, dataRangeCaches.value) || hasVideoInRange(editor.value, dataRangeCaches.value) || hasAttachmentInRange(editor.value, dataRangeCaches.value) || hasMathformulaInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
 							onOperate: () => {
 								insertCodeBlock(editor.value, dataRangeCaches.value)
 								editor.value.domRender()

package/src/feature/fontFamily.ts

@@ -109,7 +109,7 @@ export const FontFamilyMenuButton = defineComponent(
 							width: props.config.width,
 							maxHeight: props.config.maxHeight
 						},
-						title: $editTrans('fontFamily'),
+						title: `${$editTrans('fontFamily')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 						leftBorder: props.config.leftBorder,
 						rightBorder: props.config.rightBorder,
 						active: false,

package/src/feature/fontSize.ts

@@ -111,7 +111,7 @@ export const FontSizeMenuButton = defineComponent(
 							width: props.config.width,
 							maxHeight: props.config.maxHeight
 						},
-						title: $editTrans('fontSize'),
+						title: `${$editTrans('fontSize')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 						leftBorder: props.config.leftBorder,
 						rightBorder: props.config.rightBorder,
 						disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,

package/src/feature/foreColor.ts

@@ -129,7 +129,7 @@ export const ForeColorMenuButton = defineComponent(
 								options: props.config.options
 							},
 							hideScroll: true,
-							title: $editTrans('foreColor'),
+							title: `${$editTrans('foreColor')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
@@ -141,6 +141,7 @@ export const ForeColorMenuButton = defineComponent(
 								return h(Colors, {
 									tooltip: props.tooltip,
 									color: props.color,
+									zIndex: props.zIndex + 2,
 									value: selectVal.value,
 									data: options,
 									onChange: (val: string) => {

package/src/feature/formatClear.ts

@@ -84,7 +84,7 @@ export const FormatClearMenuButton = defineComponent(
 							tooltip: props.tooltip,
 							color: props.color,
 							zIndex: props.zIndex,
-							title: $editTrans('formatClear'),
+							title: `${$editTrans('formatClear')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: false,

package/src/feature/fullScreen.ts

@@ -27,7 +27,7 @@ export const FullScreenMenuButton = defineComponent(
 							tooltip: props.tooltip,
 							color: props.color,
 							zIndex: props.zIndex,
-							title: $editTrans('fullScreen'),
+							title: `${$editTrans('fullScreen')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: isFullScreen.value,

package/src/feature/heading.ts

@@ -1,8 +1,8 @@
-import { computed, defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { computed, defineComponent, h, inject, PropType, Ref } from 'vue'
 import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
 import { common as DapCommon } from 'dap-util'
 import { MenuDisplayButtonType } from '@/core/tool'
-import { hasPanelInRange, hasPreInRange, hasTableInRange, setHeading } from '@/core/function'
+import { hasPreInRange, hasTableInRange, setHeading } from '@/core/function'
 import { Button, ButtonOptionsItemType } from '@/components/button'
 
 /**
@@ -10,77 +10,6 @@ import { Button, ButtonOptionsItemType } from '@/components/button'
  */
 const FEATURE_NAME = 'heading'
 
-/**
- * 工具栏 - 标题
- */
-export const HeadingToolbarButton = defineComponent(
-	(props, { expose }) => {
-		const editor = inject<Ref<AlexEditor>>('editor')!
-		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
-		const $editTrans = inject<(key: string) => any>('$editTrans')!
-
-		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
-				if (DapCommon.isObject(item)) {
-					val = (item as ButtonOptionsItemType).value!
-				}
-				return dataRangeCaches.value.list.every(el => {
-					if (el.element.isBlock()) {
-						return el.element.parsedom == val
-					}
-					return el.element.getBlock().parsedom == val
-				})
-			})
-			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,
-						type: 'display',
-						title: $editTrans('heading'),
-						tooltip: props.tooltip,
-						color: props.color,
-						zIndex: props.zIndex,
-						leftBorder: props.config.leftBorder,
-						rightBorder: props.config.rightBorder,
-						active: false,
-						disabled: props.config.disabled,
-						displayConfig: {
-							options: props.config.options,
-							value: selectVal.value,
-							width: props.config.width,
-							maxHeight: props.config.maxHeight
-						},
-						onOperate: (_name: string, val: string) => {
-							setHeading(editor.value, dataRangeCaches.value, $editTrans, val)
-							editor.value.domRender()
-							editor.value.rangeRender()
-						}
-				  })
-				: null
-		}
-	},
-	{
-		name: `_${FEATURE_NAME}`,
-		props: {
-			color: String,
-			zIndex: Number,
-			config: Object as PropType<MenuDisplayButtonType>,
-			tooltip: Boolean
-		}
-	}
-)
-
 /**
  * 菜单栏 - 标题
  */
@@ -125,13 +54,13 @@ export const HeadingMenuButton = defineComponent(
 							width: props.config.width,
 							maxHeight: props.config.maxHeight
 						},
-						title: $editTrans('heading'),
+						title: `${$editTrans('heading')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 						leftBorder: props.config.leftBorder,
 						rightBorder: props.config.rightBorder,
 						active: false,
-						disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || hasTableInRange(editor.value, dataRangeCaches.value) || hasPanelInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+						disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || hasTableInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
 						onOperate: (_name: string, val: string) => {
-							setHeading(editor.value, dataRangeCaches.value, $editTrans, val)
+							setHeading(editor.value, dataRangeCaches.value, val)
 							editor.value.domRender()
 							editor.value.rangeRender()
 						}

package/src/feature/image.ts

@@ -163,7 +163,7 @@ export const ImageMenuButton = defineComponent(
 							zIndex: props.zIndex,
 							type: 'select',
 							hideScroll: true,
-							title: $editTrans('insertImage'),
+							title: `${$editTrans('insertImage')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: false,

package/src/feature/indent.ts

@@ -30,7 +30,7 @@ export const IndentMenuButton = defineComponent(
 							color: props.color,
 							zIndex: props.zIndex,
 							type: 'select',
-							title: $editTrans('indent'),
+							title: `${$editTrans('indent')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							selectConfig: {
 								options: props.config.options,
 								width: props.config.width,

package/src/feature/infoBlock.ts

@@ -1,9 +1,9 @@
 import { defineComponent, h, inject, PropType, Ref } from 'vue'
-import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
+import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
 import { Button } from '@/components/button'
 import { MenuButtonType } from '@/core/tool'
 import { Icon } from '@/components/icon'
-import { elementToParagraph, hasPanelInRange, hasPreInRange, hasTableInRange, rangeIsInInfoBlock } from '@/core/function'
+import { hasPreInRange, hasTableInRange, insertInfoBlock, rangeIsInInfoBlock } from '@/core/function'
 
 /**
  * feature名称
@@ -29,45 +29,14 @@ export const InfoBlockMenuButton = defineComponent(
 							tooltip: props.tooltip,
 							color: props.color,
 							zIndex: props.zIndex,
-							title: $editTrans('insertInfoBlock'),
+							title: `${$editTrans('insertInfoBlock')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: rangeIsInInfoBlock(editor.value, dataRangeCaches.value),
-							disabled: props.disabled || isSourceView.value || hasPanelInRange(editor.value, dataRangeCaches.value) || hasTableInRange(editor.value, dataRangeCaches.value) || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+							disabled: props.disabled || isSourceView.value || hasTableInRange(editor.value, dataRangeCaches.value) || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
 							onOperate: () => {
-								//是否都在信息块里
-								const flag = rangeIsInInfoBlock(editor.value, dataRangeCaches.value)
-								//起点和终点在一起
-								if (editor.value.range!.anchor.isEqual(editor.value.range!.focus)) {
-									const block = editor.value.range!.anchor.element.getBlock()
-									elementToParagraph(block)
-									if (!flag) {
-										block.parsedom = 'div'
-										block.marks = {
-											'data-editify-info': 'true'
-										}
-									}
-								}
-								//起点和终点不在一起
-								else {
-									let blocks: AlexElement[] = []
-									dataRangeCaches.value.list.forEach(item => {
-										const block = item.element.getBlock()
-										const exist = blocks.some(el => block.isEqual(el))
-										if (!exist) {
-											blocks.push(block)
-										}
-									})
-									blocks.forEach(block => {
-										elementToParagraph(block)
-										if (!flag) {
-											block.parsedom = 'div'
-											block.marks = {
-												'data-editify-info': 'true'
-											}
-										}
-									})
-								}
+								//插入信息块
+								insertInfoBlock(editor.value, dataRangeCaches.value)
 								//渲染
 								editor.value.domRender()
 								editor.value.rangeRender()

package/src/feature/italic.ts

@@ -97,7 +97,7 @@ export const ItalicMenuButton = defineComponent(
 							tooltip: props.tooltip,
 							color: props.color,
 							zIndex: props.zIndex,
-							title: $editTrans('italic'),
+							title: `${$editTrans('italic')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,

package/src/feature/lineHeight.ts

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { computed, defineComponent, h, inject, PropType, Ref } from 'vue'
 import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
 import { common as DapCommon } from 'dap-util'
 import { MenuDisplayButtonType } from '@/core/tool'
@@ -10,82 +10,6 @@ import { Button, ButtonOptionsItemType } from '@/components/button'
  */
 const FEATURE_NAME = 'lineHeight'
 
-/**
- * 工具栏 - 行高
- */
-export const LineHeightToolbarButton = defineComponent(
-	(props, { expose }) => {
-		const editor = inject<Ref<AlexEditor>>('editor')!
-		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
-		const $editTrans = inject<(key: string) => any>('$editTrans')!
-
-		const btnRef = ref<InstanceType<typeof Button> | null>(null)
-
-		const selectVal = computed<string | number>(() => {
-			const findHeightItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
-				let val: string | number | ButtonOptionsItemType = item
-				if (DapCommon.isObject(item)) {
-					val = (item as ButtonOptionsItemType).value!
-				}
-				return dataRangeCaches.value.list.every(el => {
-					if (el.element.isBlock() || el.element.isInblock()) {
-						return el.element.hasStyles() && el.element.styles!['line-height'] == val
-					}
-					const block = el.element.getBlock()
-					const inblock = el.element.getInblock()
-					if (inblock) {
-						return inblock.hasStyles() && inblock.styles!['line-height'] == val
-					}
-					return block.hasStyles() && block.styles!['line-height'] == val
-				})
-			})
-			return findHeightItem ? (DapCommon.isObject(findHeightItem) ? ((findHeightItem as ButtonOptionsItemType).value as string | number) : (findHeightItem as string | number)) : (props.config.defaultValue as string | number)
-		})
-
-		expose({
-			btnRef
-		})
-
-		return () => {
-			return props.config.show
-				? h(Button, {
-						ref: btnRef,
-						name: FEATURE_NAME,
-						type: 'display',
-						title: $editTrans('lineHeight'),
-						tooltip: props.tooltip,
-						color: props.color,
-						zIndex: props.zIndex,
-						leftBorder: props.config.leftBorder,
-						rightBorder: props.config.rightBorder,
-						active: false,
-						disabled: props.config.disabled,
-						displayConfig: {
-							options: props.config.options,
-							value: selectVal.value,
-							width: props.config.width,
-							maxHeight: props.config.maxHeight
-						},
-						onOperate: (_name: string, val: string) => {
-							setLineHeight(editor.value, dataRangeCaches.value, val)
-							editor.value.domRender()
-							editor.value.rangeRender()
-						}
-				  })
-				: null
-		}
-	},
-	{
-		name: `_${FEATURE_NAME}`,
-		props: {
-			color: String,
-			zIndex: Number,
-			config: Object as PropType<MenuDisplayButtonType>,
-			tooltip: Boolean
-		}
-	}
-)
-
 /**
  * 菜单栏 - 行高
  */
@@ -136,7 +60,7 @@ export const LineHeightMenuButton = defineComponent(
 							width: props.config.width,
 							maxHeight: props.config.maxHeight
 						},
-						title: $editTrans('lineHeight'),
+						title: `${$editTrans('lineHeight')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 						leftBorder: props.config.leftBorder,
 						rightBorder: props.config.rightBorder,
 						disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,

package/src/feature/link.ts

@@ -103,7 +103,7 @@ export const LinkMenuButton = defineComponent(
 							zIndex: props.zIndex,
 							type: 'select',
 							hideScroll: true,
-							title: $editTrans('insertLink'),
+							title: `${$editTrans('insertLink')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: false,