vue-editify 0.2.14 → 0.2.16

package/src/core/rule.ts

@@ -1,9 +1,7 @@
 import { AlexEditor, AlexElement, AlexElementCreateConfigType } from 'alex-editor'
-import { common as DapCommon } from 'dap-util'
+import { common as DapCommon, color as DapColor } from 'dap-util'
 import { LanguagesItemType, getHljsHtml } from '@/hljs'
-import { isList, isTask, getTableSize, getCellSpanNumber } from './function'
-import { isPanel } from '@/plugins/panel'
-import { isInfoBlock } from '@/plugins/infoBlock'
+import { getTableSize, getCellSpanNumber, elementIsList, elementIsTask, elementIsAttachment, elementIsMathformula, elementIsInfoBlock, elementIsPanel } from './function'
 
 /**
  * 自动补全表格行和列
@@ -287,11 +285,11 @@ export const parseList = (editor: AlexEditor, element: AlexElement) => {
  */
 export const orderdListHandle = (editor: AlexEditor, element: AlexElement) => {
 	//有序列表的序号处理
-	if (isList(element, true)) {
+	if (!element.isEmpty() && elementIsList(element, true)) {
 		//获取前一个元素
 		const previousElement = editor.getPreviousElement(element)
 		//如果前一个元素存在并且也是有序列表
-		if (previousElement && isList(previousElement, true)) {
+		if (previousElement && !previousElement.isEmpty() && elementIsList(previousElement, true)) {
 			const previousValue = Number(previousElement.marks!['data-editify-value'])
 			element.marks!['data-editify-value'] = previousValue + 1
 		}
@@ -374,35 +372,25 @@ export const tableThTdHandle = (_editor: AlexEditor, element: AlexElement) => {
  * @param element
  */
 export const tableFormatHandle = (editor: AlexEditor, element: AlexElement) => {
-	if (element.parsedom == 'table') {
-		const marks = {
-			'data-editify-element': element.key
-		}
+	if (element.hasChildren() && element.parsedom == 'table') {
+		//设置key到marks上
 		if (element.hasMarks()) {
-			Object.assign(element.marks!, marks)
-		} else {
-			element.marks = marks
-		}
-		const styles = {
-			'white-space': 'pre-wrap',
-			'word-break': 'break-word'
-		}
-		if (element.hasStyles()) {
-			Object.assign(element.styles!, styles)
+			Object.assign(element.marks!, {
+				'data-editify-element': element.key
+			})
 		} else {
-			element.styles = styles
+			element.marks = {
+				'data-editify-element': element.key
+			}
 		}
+		//扁平化处理子元素
 		const elements = AlexElement.flatElements(element.children!)
 		//所有的行元素
-		const rows = elements.filter(el => {
-			return el.parsedom == 'tr'
-		})
+		const rows = elements.filter(el => el.parsedom == 'tr')
 		//获取表格实际应该的规格
 		const { rowNumber, columnNumber } = getTableSize(rows)
-		//colgroup元素
-		let colgroup = elements.find(el => {
-			return el.parsedom == 'colgroup'
-		})
+		//获取表格的colgroup元素
+		let colgroup = elements.find(el => el.parsedom == 'colgroup')
 		//如果colgroup元素存在
 		if (colgroup) {
 			//遍历每个col元素设置默认的width:'auto
@@ -629,6 +617,97 @@ export const preHandle = (editor: AlexEditor, element: AlexElement, highlight: b
 	}
 }
 
+/**
+ * 元素格式化时处理附件元素
+ * @param editor
+ * @param element
+ * @param $editTrans
+ */
+export const attachmentHandle = (editor: AlexEditor, element: AlexElement, $editTrans: (key: string) => any) => {
+	if (!element.isEmpty() && elementIsAttachment(element)) {
+		//设置title
+		element.marks!['title'] = $editTrans('attachmentDownloadTitle')
+		//如果名称没有则设置名称
+		if (!element.marks!['data-editify-attachment-name']) {
+			element.marks!['data-editify-attachment-name'] = $editTrans('attachmentDefaultName')
+		}
+		//前一个元素
+		const previousElement = editor.getPreviousElement(element)
+		//后一个元素
+		const newTextElement = editor.getNextElement(element)
+		//如果不存在前一个元素或者前一个元素不是空白元素则设置空白元素
+		if (!previousElement || !previousElement.isSpaceText()) {
+			const spaceText = AlexElement.getSpaceElement()
+			editor.addElementBefore(spaceText, element)
+		}
+		//如果不存在后一个元素或者后一个元素不是空白元素则设置空白元素
+		if (!newTextElement || !newTextElement.isSpaceText()) {
+			const spaceText = AlexElement.getSpaceElement()
+			editor.addElementAfter(spaceText, element)
+		}
+		//如果光标在元素上则更新光标位置
+		if (editor.range && element.isContains(editor.range.anchor.element)) {
+			editor.range.anchor.moveToEnd(editor.getNextElement(element)!)
+		}
+		if (editor.range && element.isContains(editor.range.focus.element)) {
+			editor.range.focus.moveToEnd(editor.getNextElement(element)!)
+		}
+	}
+}
+
+/**
+ * 元素格式化时处理数学公式元素
+ * @param editor
+ * @param element
+ */
+export const mathformulaHandle = (editor: AlexEditor, element: AlexElement) => {
+	//给元素设置两侧的空白字符
+	if (!element.isEmpty() && elementIsMathformula(element)) {
+		//前一个元素
+		const previousElement = editor.getPreviousElement(element)
+		//后一个元素
+		const newTextElement = editor.getNextElement(element)
+		//如果不存在前一个元素或者前一个元素不是空白元素则设置空白元素
+		if (!previousElement || !previousElement.isSpaceText()) {
+			const spaceText = AlexElement.getSpaceElement()
+			editor.addElementBefore(spaceText, element)
+		}
+		//如果不存在后一个元素或者后一个元素不是空白元素则设置空白元素
+		if (!newTextElement || !newTextElement.isSpaceText()) {
+			const spaceText = AlexElement.getSpaceElement()
+			editor.addElementAfter(spaceText, element)
+		}
+		//如果光标在元素上则更新光标位置
+		if (editor.range && element.isContains(editor.range.anchor.element)) {
+			editor.range.anchor.moveToEnd(editor.getNextElement(element)!)
+		}
+		if (editor.range && element.isContains(editor.range.focus.element)) {
+			editor.range.focus.moveToEnd(editor.getNextElement(element)!)
+		}
+	}
+}
+
+/**
+ * 元素格式化时处理信息块元素
+ * @param editor
+ * @param element
+ * @param color
+ */
+export const infoBlockHandle = (_editor: AlexEditor, element: AlexElement, color: string) => {
+	if (elementIsInfoBlock(element) && color) {
+		const parseColor = DapColor.hex2rgb(color)
+		if (element.hasStyles()) {
+			element.styles!['background-color'] = `rgba(${parseColor[0]},${parseColor[1]},${parseColor[2]},0.15)`
+			element.styles!['color'] = color
+		} else {
+			element.styles = {
+				'background-color': `rgba(${parseColor[0]},${parseColor[1]},${parseColor[2]},0.15)`,
+				color: color
+			}
+		}
+	}
+}
+
 /**
  * 元素格式化时处理一些特殊的内部块元素，转为根级块元素
  * @param editor
@@ -637,7 +716,7 @@ export const preHandle = (editor: AlexEditor, element: AlexElement, highlight: b
 export const specialInblockHandle = (editor: AlexEditor, element: AlexElement) => {
 	if (element.hasChildren()) {
 		element.children!.forEach(el => {
-			if (isList(el, true) || isList(el, false) || isTask(el) || ['blockquote', 'pre', 'table', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'].includes(el.parsedom!) || isPanel(el) || isInfoBlock(el)) {
+			if (elementIsList(el, true) || elementIsList(el, false) || elementIsTask(el) || elementIsInfoBlock(el) || elementIsPanel(el) || ['blockquote', 'pre', 'table', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'].includes(el.parsedom!)) {
 				const newEl = el.clone()
 				newEl.type = 'block'
 				const block = element.getBlock()