vue-editify 0.2.17 → 0.2.19

package/src/feature/mathformula.ts

@@ -1,10 +1,8 @@
 import { computed, defineComponent, h, inject, PropType, ref, Ref } from 'vue'
 import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
-import 'katex/dist/katex.css'
-import KaTex from 'katex'
 import { MenuMathformulaButtonType } from '@/core/tool'
 import { Button } from '@/components/button'
-import { getMatchElementByRange, hasLinkInRange, hasPreInRange } from '@/core/function'
+import { getMatchElementByRange, hasLinkInRange, hasPreInRange, insertMathformula } from '@/core/function'
 import { Icon } from '@/components/icon'
 import { InsertMathformula } from '@/components/insertMathformula'
 
@@ -56,7 +54,7 @@ export const MathformulaMenuButton = defineComponent(
 							zIndex: props.zIndex,
 							type: 'select',
 							hideScroll: true,
-							title: $editTrans('insertMathformula'),
+							title: `${$editTrans('insertMathformula')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: !!getMatchElementByRange(editor.value, dataRangeCaches.value, {
@@ -77,53 +75,8 @@ export const MathformulaMenuButton = defineComponent(
 									color: props.color,
 									defaultLaTexContent: defaultLaTexContent.value,
 									onInsert: (content: string) => {
-										//如果公式文本框有内容则进行下一步处理
-										if (content) {
-											//获取选区所在的数学公式元素
-											const mathformulaElement = getMatchElementByRange(editor.value, dataRangeCaches.value, {
-												parsedom: 'span',
-												marks: {
-													'data-editify-mathformula': true
-												}
-											})
-											//如果在数学公式下
-											if (mathformulaElement) {
-												//清除该数学公式
-												mathformulaElement.toEmpty()
-												//移动光标到后一个元素上
-												editor.value.range!.anchor.moveToStart(editor.value.getNextElement(mathformulaElement)!)
-												editor.value.range!.focus.moveToStart(editor.value.getNextElement(mathformulaElement)!)
-											}
-											//定义转换后的mathml内容
-											let mathml: string = ''
-											try {
-												//获取转换后的mathml
-												mathml = KaTex.renderToString(content, {
-													output: 'mathml',
-													throwOnError: true
-												})
-											} catch (error) {
-												mathml = ''
-												if (typeof props.config!.handleError == 'function') {
-													props.config!.handleError(error as Error)
-												}
-											}
-											//如果mathml存在则表示数学公式渲染成功则插入到编辑器
-											if (mathml) {
-												//设置最终的html内容
-												const html = `<span data-editify-mathformula="${content}" contenteditable="false">${mathml}</span>`
-												//html内容转为元素数组
-												const elements = editor.value.parseHtml(html)
-												//插入编辑器
-												editor.value.insertElement(elements[0])
-												//移动光标到新插入的元素
-												editor.value.range!.anchor.moveToEnd(elements[0])
-												editor.value.range!.focus.moveToEnd(elements[0])
-												//渲染
-												editor.value.domRender()
-												editor.value.rangeRender()
-											}
-										}
+										//插入数学公式
+										insertMathformula(editor.value, dataRangeCaches.value, content, props.config.handleError)
 										//关闭浮层
 										btnRef.value!.show = false
 									}

package/src/feature/orderList.ts

@@ -1,7 +1,7 @@
-import { defineComponent, h, inject, PropType, Ref, ref } from 'vue'
-import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
+import { computed, defineComponent, h, inject, PropType, Ref } from 'vue'
+import { AlexElementsRangeType, AlexEditor, AlexElement } from 'alex-editor'
 import { MenuButtonType } from '@/core/tool'
-import { hasPanelInRange, hasPreInRange, hasTableInRange, rangeIsInList, setList } from '@/core/function'
+import { elementIsList, getMatchElementByRange, hasPreInRange, hasTableInRange, rangeIsInList, setList } from '@/core/function'
 import { Button } from '@/components/button'
 import { Icon } from '@/components/icon'
 
@@ -10,47 +10,179 @@ import { Icon } from '@/components/icon'
  */
 const FEATURE_NAME = 'orderList'
 
+type orderType = 'decimal' | 'lower-roman' | 'upper-roman' | 'lower-alpha' | 'upper-alpha' | 'lower-greek' | 'cjk-ideographic'
+
 /**
  * 工具栏 - 有序列表
  */
-export const OrderListToolbarButton = defineComponent(
-	(props, { expose }) => {
+export const OrderListToolbar = defineComponent(
+	props => {
 		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
+		const active = computed<(val: orderType) => boolean>(() => {
+			return val => {
+				const el = getMatchElementByRange(editor.value, dataRangeCaches.value, {
+					parsedom: 'div',
+					marks: {
+						'data-editify-list': 'ol'
+					}
+				})
+				if (el && el.marks!['data-editify-list-style']) {
+					return el.marks!['data-editify-list-style'] == val
+				}
+				return val == 'decimal'
+			}
 		})
 
+		//设置前面列表的序标样式
+		const setPreviouseListStyle = (element: AlexElement, val: orderType) => {
+			element.marks!['data-editify-list-style'] = val
+			const previousElement = editor.value.getPreviousElement(element)
+			if (previousElement && elementIsList(previousElement, true)) {
+				setPreviouseListStyle(previousElement, val)
+			}
+		}
+
+		//设置后面列表的序标样式
+		const setNextListStyle = (element: AlexElement, val: orderType) => {
+			element.marks!['data-editify-list-style'] = val
+			const nextElement = editor.value.getNextElement(element)
+			if (nextElement && elementIsList(nextElement, true)) {
+				setNextListStyle(nextElement, val)
+			}
+		}
+
+		//设置列表序标样式
+		const setListStyle = (val: orderType) => {
+			const el = getMatchElementByRange(editor.value, dataRangeCaches.value, {
+				parsedom: 'div',
+				marks: {
+					'data-editify-list': 'ol'
+				}
+			})!
+			el.marks!['data-editify-list-style'] = val
+			const previousElement = editor.value.getPreviousElement(el)
+			const nextElement = editor.value.getNextElement(el)
+			if (previousElement && elementIsList(previousElement, true)) {
+				setPreviouseListStyle(previousElement, val)
+			}
+			if (nextElement && elementIsList(nextElement, true)) {
+				setNextListStyle(nextElement, val)
+			}
+			editor.value.domRender()
+			editor.value.rangeRender()
+		}
+
 		return () => {
-			return props.config.show
-				? h(
-						Button,
-						{
-							ref: btnRef,
-							name: FEATURE_NAME,
-							title: $editTrans('orderList'),
-							tooltip: props.tooltip,
-							color: props.color,
-							zIndex: props.zIndex,
-							leftBorder: props.config.leftBorder,
-							rightBorder: props.config.rightBorder,
-							active: rangeIsInList(editor.value, dataRangeCaches.value, true),
-							disabled: props.config.disabled,
-							onOperate: () => {
-								setList(editor.value, dataRangeCaches.value, true)
-								editor.value.domRender()
-								editor.value.rangeRender()
-							}
-						},
-						{
-							default: () => h(Icon, { value: 'list-ordered' })
-						}
-				  )
-				: null
+			return [
+				h(
+					Button,
+					{
+						name: 'decimal',
+						title: $editTrans('decimal'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('decimal'),
+						onOperate: () => setListStyle('decimal')
+					},
+					{
+						default: () => h(Icon, { value: 'list-decimal', style: { fontSize: '18px' } })
+					}
+				),
+				h(
+					Button,
+					{
+						name: 'cjk-ideographic',
+						title: $editTrans('cjkIdeographic'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('cjk-ideographic'),
+						onOperate: () => setListStyle('cjk-ideographic')
+					},
+					{
+						default: () => h(Icon, { value: 'list-cjk-ideographic', style: { fontSize: '18px' } })
+					}
+				),
+				h(
+					Button,
+					{
+						name: 'lower-roman',
+						title: $editTrans('lowerRoman'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('lower-roman'),
+						onOperate: () => setListStyle('lower-roman')
+					},
+					{
+						default: () => h(Icon, { value: 'list-lower-roman', style: { fontSize: '18px' } })
+					}
+				),
+				h(
+					Button,
+					{
+						name: 'upper-roman',
+						title: $editTrans('upperRoman'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('upper-roman'),
+						onOperate: () => setListStyle('upper-roman')
+					},
+					{
+						default: () => h(Icon, { value: 'list-upper-roman', style: { fontSize: '18px' } })
+					}
+				),
+				h(
+					Button,
+					{
+						name: 'lower-alpha',
+						title: $editTrans('lowerAlpha'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('lower-alpha'),
+						onOperate: () => setListStyle('lower-alpha')
+					},
+					{
+						default: () => h(Icon, { value: 'list-lower-alpha', style: { fontSize: '18px' } })
+					}
+				),
+				h(
+					Button,
+					{
+						name: 'upper-alpha',
+						title: $editTrans('upperAlpha'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('upper-alpha'),
+						onOperate: () => setListStyle('upper-alpha')
+					},
+					{
+						default: () => h(Icon, { value: 'list-upper-alpha', style: { fontSize: '18px' } })
+					}
+				),
+				h(
+					Button,
+					{
+						name: 'lower-greek',
+						title: $editTrans('lowerGreek'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						active: active.value('lower-greek'),
+						onOperate: () => setListStyle('lower-greek')
+					},
+					{
+						default: () => h(Icon, { value: 'list-lower-greek', style: { fontSize: '18px' } })
+					}
+				)
+			]
 		}
 	},
 	{
@@ -58,7 +190,6 @@ export const OrderListToolbarButton = defineComponent(
 		props: {
 			color: String,
 			zIndex: Number,
-			config: Object as PropType<MenuButtonType>,
 			tooltip: Boolean
 		}
 	}
@@ -83,11 +214,11 @@ export const OrderListMenuButton = defineComponent(
 							tooltip: props.tooltip,
 							color: props.color,
 							zIndex: props.zIndex,
-							title: $editTrans('orderList'),
+							title: `${$editTrans('orderList')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: rangeIsInList(editor.value, dataRangeCaches.value, true),
-							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: () => {
 								setList(editor.value, dataRangeCaches.value, true)
 								editor.value.domRender()

package/src/feature/quote.ts

@@ -3,7 +3,7 @@ import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
 import { Button } from '@/components/button'
 import { MenuSelectButtonType } from '@/core/tool'
 import { Icon } from '@/components/icon'
-import { hasPanelInRange, hasPreInRange, hasTableInRange, rangeIsInQuote, setQuote } from '@/core/function'
+import { hasPreInRange, hasTableInRange, rangeIsInQuote, setQuote } from '@/core/function'
 
 /**
  * feature名称
@@ -29,11 +29,11 @@ export const QuoteMenuButton = defineComponent(
 							tooltip: props.tooltip,
 							color: props.color,
 							zIndex: props.zIndex,
-							title: $editTrans('quote'),
+							title: `${$editTrans('quote')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: rangeIsInQuote(editor.value, dataRangeCaches.value),
-							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: () => {
 								setQuote(editor.value, dataRangeCaches.value)
 								editor.value.domRender()

package/src/feature/redo.ts

@@ -33,7 +33,7 @@ export const RedoMenuButton = defineComponent(
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: false,
-							disabled: props.disabled || isSourceView.value || (rangeKey.value && editor.value.history && !editor.value.history.get(1)) || props.config.disabled,
+							disabled: props.disabled || isSourceView.value || (rangeKey.value && editor.value.history && editor.value.history.redoRecords.length == 0) || props.config.disabled,
 							onOperate: () => redo()
 						},
 						{

package/src/feature/separator.ts

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

package/src/feature/sourceView.ts

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

package/src/feature/strikethrough.ts

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

package/src/feature/sub.ts

@@ -97,7 +97,7 @@ export const SubMenuButton = defineComponent(
 							tooltip: props.tooltip,
 							color: props.color,
 							zIndex: props.zIndex,
-							title: $editTrans('subscript'),
+							title: `${$editTrans('sub')}${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/super.ts

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

package/src/feature/table.ts

@@ -2,7 +2,7 @@ import { computed, defineComponent, h, inject, PropType, ref, Ref } from 'vue'
 import { AlexEditor, AlexElement, AlexElementsRangeType, AlexElementCreateConfigType } from 'alex-editor'
 import { Button } from '@/components/button'
 import { Icon } from '@/components/icon'
-import { getCellMergeElement, getCellSpanNumber, getMatchElementByElement, getMatchElementByRange, getTableSize, hasMathformulaInRange, hasPanelInRange, hasPreInRange, hasTableInRange, insertTable, setTableCellMerged } from '@/core/function'
+import { getCellMergeElement, getCellSpanNumber, getMatchElementByElement, getMatchElementByRange, getTableSize, hasMathformulaInRange, hasPreInRange, hasTableInRange, insertTable, setTableCellMerged } from '@/core/function'
 import { MenuTableButtonType } from '@/core/tool'
 import { InsertTable } from '@/components/insertTable'
 
@@ -940,11 +940,11 @@ export const TableMenuButton = defineComponent(
 							zIndex: props.zIndex,
 							type: 'select',
 							hideScroll: true,
-							title: $editTrans('insertTable'),
+							title: `${$editTrans('insertTable')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: false,
-							disabled: props.disabled || isSourceView.value || hasTableInRange(editor.value, dataRangeCaches.value) || hasPreInRange(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) || hasPreInRange(editor.value, dataRangeCaches.value) || hasMathformulaInRange(editor.value, dataRangeCaches.value) || props.config.disabled
 						},
 						{
 							default: () =>

package/src/feature/task.ts

@@ -1,7 +1,7 @@
-import { defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { defineComponent, h, inject, PropType, Ref } from 'vue'
 import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
 import { MenuButtonType } from '@/core/tool'
-import { hasPanelInRange, hasPreInRange, hasTableInRange, rangeIsInTask, setTask } from '@/core/function'
+import { hasPreInRange, hasTableInRange, rangeIsInTask, setTask } from '@/core/function'
 import { Button } from '@/components/button'
 import { Icon } from '@/components/icon'
 
@@ -10,60 +10,6 @@ import { Icon } from '@/components/icon'
  */
 const FEATURE_NAME = 'task'
 
-/**
- * 工具栏 - 任务列表
- */
-export const TaskToolbarButton = 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,
-							title: $editTrans('task'),
-							tooltip: props.tooltip,
-							color: props.color,
-							zIndex: props.zIndex,
-							leftBorder: props.config.leftBorder,
-							rightBorder: props.config.rightBorder,
-							active: rangeIsInTask(editor.value, dataRangeCaches.value),
-							disabled: props.config.disabled,
-							onOperate: () => {
-								setTask(editor.value, dataRangeCaches.value)
-								editor.value.domRender()
-								editor.value.rangeRender()
-							}
-						},
-						{
-							default: () => h(Icon, { value: 'task' })
-						}
-				  )
-				: null
-		}
-	},
-	{
-		name: `_${FEATURE_NAME}`,
-		props: {
-			color: String,
-			zIndex: Number,
-			config: Object as PropType<MenuButtonType>,
-			tooltip: Boolean
-		}
-	}
-)
-
 /**
  * 菜单栏 - 任务列表
  */
@@ -83,11 +29,11 @@ export const TaskMenuButton = defineComponent(
 							tooltip: props.tooltip,
 							color: props.color,
 							zIndex: props.zIndex,
-							title: $editTrans('task'),
+							title: `${$editTrans('task')}${props.config.shortcut?.title ? `【${props.config.shortcut?.title}】` : ''}`,
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: rangeIsInTask(editor.value, dataRangeCaches.value),
-							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: () => {
 								setTask(editor.value, dataRangeCaches.value)
 								editor.value.domRender()

package/src/feature/underline.ts

@@ -97,7 +97,7 @@ export const UnderlineMenuButton = defineComponent(
 							tooltip: props.tooltip,
 							color: props.color,
 							zIndex: props.zIndex,
-							title: $editTrans('underline'),
+							title: `${$editTrans('underline')}${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/undo.ts

@@ -33,7 +33,7 @@ export const UndoMenuButton = defineComponent(
 							leftBorder: props.config.leftBorder,
 							rightBorder: props.config.rightBorder,
 							active: false,
-							disabled: props.disabled || isSourceView.value || (rangeKey.value && editor.value.history && !editor.value.history.get(-1)) || props.config.disabled,
+							disabled: props.disabled || isSourceView.value || (rangeKey.value && editor.value.history && editor.value.history.records.length <= 1) || props.config.disabled,
 							onOperate: () => undo()
 						},
 						{