vue-editify 0.1.39 → 0.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-editify",
-	"version": "0.1.39",
+	"version": "0.1.40",
 	"private": false,
 	"sideEffects": [
 		"*.css"

package/src/editify/editify.less

@@ -380,6 +380,21 @@
 			}
 		}
 
+		//数学公式样式
+		:deep(span[data-editify-mathformula]) {
+			display: inline-block;
+			border: 1px dashed @border-color;
+			padding: 6px 10px;
+			border-radius: 4px;
+			margin: 0 4px;
+			transition: all 200ms;
+
+			&:hover {
+				cursor: pointer;
+				background: @background-dark;
+			}
+		}
+
 		//禁用样式
 		&.editify-disabled {
 			cursor: auto !important;
@@ -387,16 +402,26 @@
 			&.editify-placeholder::before {
 				cursor: auto;
 			}
-
 			:deep(a) {
 				cursor: pointer;
 			}
-
 			:deep(table) {
 				td:not(:last-child)::after {
 					cursor: auto;
 				}
 			}
+			:deep(span[data-editify-mathformula]) {
+				display: inline-block;
+				border: none;
+				padding: 6px 10px;
+				border-radius: none;
+				margin: 0 4px;
+
+				&:hover {
+					cursor: auto;
+					background: none;
+				}
+			}
 		}
 	}
 

package/src/index.ts

@@ -18,7 +18,7 @@ const install: FunctionPlugin = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
 //版本号
-const version = '0.1.39'
+const version = '0.1.40'
 
 //导出AlexElement元素
 export { AlexElement } from 'alex-editor'
@@ -29,7 +29,7 @@ export type { InsertAttachmentUploadErrorType } from './plugins/attachment/inser
 export { attachment, isAttachment, hasAttachmentInRange } from './plugins/attachment'
 //导出mathformula插件相关的方法和类型
 export type { MathformulaOptionsType } from './plugins/mathformula'
-export { mathformula, isMathformula, isUnderMathformula, getMathformulaElement } from './plugins/mathformula'
+export { mathformula, isMathformula, isUnderMathformula, getMathformulaElement, hasMathformulaInRange, getMathformulaElementByRange } from './plugins/mathformula'
 
 //导出组件和安装函数
 export { install as default, install, Editify, version }

package/src/plugins/mathformula/index.ts

@@ -1,4 +1,4 @@
-import { common as DapCommon, element as DapElement } from 'dap-util'
+import { common as DapCommon } from 'dap-util'
 import { ObjectType, PluginType, cloneData } from '../../core/tool'
 import { ComponentInternalInstance, h } from 'vue'
 
@@ -21,6 +21,8 @@ export type MathformulaOptionsType = {
 	rightBorder?: boolean
 	//按钮是否禁用
 	disabled?: boolean
+	//公式异常处理
+	handleError?: (error: Error) => void
 }
 
 /**
@@ -32,7 +34,11 @@ export const isMathformula = (el: AlexElement) => {
 	return el.parsedom == 'span' && el.hasMarks() && el.marks!['data-editify-mathformula']
 }
 
-//是否在公式元素下
+/**
+ * 判断某个元素是否在公式元素内
+ * @param el
+ * @returns
+ */
 export const isUnderMathformula = (el: AlexElement): boolean => {
 	if (isMathformula(el)) {
 		return true
@@ -43,7 +49,11 @@ export const isUnderMathformula = (el: AlexElement): boolean => {
 	return false
 }
 
-//获取公式元素
+/**
+ * 根据某个元素获取所在的公式元素，如果不在公式元素内则返回null
+ * @param el
+ * @returns
+ */
 export const getMathformulaElement = (el: AlexElement): AlexElement | null => {
 	if (isMathformula(el)) {
 		return el
@@ -72,6 +82,48 @@ export const hasMathformulaInRange = (editor: AlexEditor, dataRangeCaches: AlexE
 	})
 }
 
+/**
+ * 选区是否在某个公式元素下，如果是返回该公式元素否则返回null
+ * @param editor
+ * @param dataRangeCaches
+ * @returns
+ */
+export const getMathformulaElementByRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+	if (!editor.range) {
+		return null
+	}
+	if (editor.range.anchor.element.isEqual(editor.range.focus.element)) {
+		return getMathformulaElement(editor.range.anchor.element)
+	}
+	const arr = dataRangeCaches.list.map(item => {
+		return getMathformulaElement(item.element)
+	})
+	let hasNull = arr.some(el => {
+		return el == null
+	})
+	//如果存在null，则表示有的选区元素不在公式元素下，返回null
+	if (hasNull) {
+		return null
+	}
+	//如果只有一个元素，则返回该元素
+	if (arr.length == 1) {
+		return arr[0]!
+	}
+	//默认数组中的元素都相等
+	let flag = true
+	for (let i = 1; i < arr.length; i++) {
+		if (!arr[i]!.isEqual(arr[0]!)) {
+			flag = false
+			break
+		}
+	}
+	//如果相等，则返回该元素
+	if (flag) {
+		return arr[0]
+	}
+	return null
+}
+
 /**
  * 数学公式插件
  * @param options
@@ -82,18 +134,23 @@ export const mathformula = (options?: MathformulaOptionsType) => {
 		options = {}
 	}
 	const plugin: PluginType = (editifyInstance: ComponentInternalInstance, editTrans: (key: string) => any) => {
-		let isDisabled = false
-		//如果光标范围内有数学公式、链接、代码块则禁用
+		//是否禁用该插件按钮
+		let isDisabled: boolean = false
+		//如果光标范围内有链接、代码块则禁用
 		if (editifyInstance.exposed!.editor.value) {
-			isDisabled = hasMathformulaInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasPreInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasLinkInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
+			isDisabled = hasPreInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasLinkInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
 		}
+		//数学公式文本框内置LaTex文本内容
+		let defaultLaTexContent: string = ''
+
 		return {
+			//插件名称
 			name: 'mathformula',
 			//菜单项配置
 			menu: {
 				sequence: options!.sequence || 101,
 				extraDisabled: (name: string) => {
-					//如果光标选区内有数学公式则禁用链接菜单、代码块菜单
+					//如果光标选区内有数学公式则禁用链接、图片、视频、表格和代码块菜单
 					if (name == 'link' || name == 'image' || name == 'video' || name == 'table' || name == 'codeBlock') {
 						return hasMathformulaInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
 					}
@@ -105,36 +162,67 @@ export const mathformula = (options?: MathformulaOptionsType) => {
 					leftBorder: options!.leftBorder,
 					rightBorder: options!.rightBorder,
 					hideScroll: true,
-					active: false,
+					active: editifyInstance.exposed!.editor.value ? hasMathformulaInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) : false,
 					disabled: isDisabled || options!.disabled,
+					//浮层展开时触发的事件
+					onLayerShow() {
+						//获取选区所在的数学公式元素
+						const mathformulaElement = getMathformulaElementByRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
+						//如果该元素存在，则设置默认的LaTex文本内容
+						if (mathformulaElement) {
+							defaultLaTexContent = mathformulaElement.marks!['data-editify-mathformula'] || ''
+						}
+					},
 					default: () => h(Icon, { value: 'mathformula' }),
 					layer: (_name: string, btnInstance: InstanceType<typeof Button>) => {
 						return h(InsertMathformula, {
 							color: <string | null>editifyInstance.props.color,
+							defaultLaTexContent: defaultLaTexContent,
 							onInsert: (content: string) => {
+								//如果公式文本框有内容则进行下一步处理
 								if (content) {
 									//获取编辑器对象
 									const editor = <AlexEditor>editifyInstance.exposed!.editor.value
-									//渲染LaTex为mathml并转为dom
-									const dom = DapElement.string2dom(
-										KaTex.renderToString(content, {
+									//获取选区所在的数学公式元素
+									const mathformulaElement = getMathformulaElementByRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
+									//如果在数学公式下
+									if (mathformulaElement) {
+										//清除该数学公式
+										mathformulaElement.toEmpty()
+										//移动光标到后一个元素上
+										editor.range!.anchor.moveToStart(editor.getNextElement(mathformulaElement)!)
+										editor.range!.focus.moveToStart(editor.getNextElement(mathformulaElement)!)
+									}
+									//定义转换后的mathml内容
+									let mathml: string = ''
+									try {
+										//获取转换后的mathml
+										mathml = KaTex.renderToString(content, {
 											output: 'mathml',
-											throwOnError: false
+											throwOnError: true
 										})
-									) as HTMLElement
-									//设置最终的html内容
-									const html = `<span data-editify-mathformula="true" class="katex" >${dom.innerHTML}</span>`
-									//html内容转为元素数组
-									const elements = editor.parseHtml(html)
-									//插入编辑器
-									editor.insertElement(elements[0])
-									//移动光标到新插入的元素
-									editor.range!.anchor.moveToEnd(elements[0])
-									editor.range!.focus.moveToEnd(elements[0])
-									//渲染
-									editor.formatElementStack()
-									editor.domRender()
-									editor.rangeRender()
+									} catch (error) {
+										mathml = ''
+										if (typeof options!.handleError == 'function') {
+											options!.handleError(error as Error)
+										}
+									}
+									//如果mathml存在则表示数学公式渲染成功则插入到编辑器
+									if (mathml) {
+										//设置最终的html内容
+										const html = `<span data-editify-mathformula="${content}" contenteditable="false">${mathml}</span>`
+										//html内容转为元素数组
+										const elements = editor.parseHtml(html)
+										//插入编辑器
+										editor.insertElement(elements[0])
+										//移动光标到新插入的元素
+										editor.range!.anchor.moveToEnd(elements[0])
+										editor.range!.focus.moveToEnd(elements[0])
+										//渲染
+										editor.formatElementStack()
+										editor.domRender()
+										editor.rangeRender()
+									}
 								}
 								//关闭浮层
 								btnInstance.show = false

package/src/plugins/mathformula/insertMathformula/insertMathformula.vue

@@ -8,7 +8,7 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { inject, ref, watch } from 'vue'
 import { InsertMathformulaProps } from './props'
 
 defineOptions({
@@ -36,5 +36,15 @@ const handleInputBlur = (e: Event) => {
 const insertMathformula = () => {
 	emits('insert', latexContent.value)
 }
+
+watch(
+	() => props.defaultLaTexContent,
+	newVal => {
+		latexContent.value = newVal
+	},
+	{
+		immediate: true
+	}
+)
 </script>
 <style scoped src="./insertMathformula.less"></style>

package/src/plugins/mathformula/insertMathformula/props.ts

@@ -5,6 +5,11 @@ export const InsertMathformulaProps = {
 	color: {
 		type: String as PropType<string | null>,
 		default: ''
+	},
+	//预置的LaTex文本内容
+	defaultLaTexContent: {
+		type: String,
+		default: ''
 	}
 }