vue-editify 0.2.13 → 0.2.15

package/src/core/function.ts

@@ -2,9 +2,9 @@
  * 这里的方法都是对编辑器内容元素进行判断或者操作的方法，不涉及到格式化、dom渲染和光标渲染
  */
 import { common as DapCommon } from 'dap-util'
-import { AlexElement, AlexElementsRangeType, AlexEditor, AlexElementCreateConfigType } from 'alex-editor'
+import { AlexEditor, AlexElement, AlexElementsRangeType, AlexElementCreateConfigType } from 'alex-editor'
+import { ButtonOptionsItemType } from '@/components/button'
 import { cloneData, queryHasValue, getButtonOptionsConfig, ObjectType } from './tool'
-import { ButtonOptionsItemType } from '@/components/button/props'
 
 export type ElementMatchConfigType = {
 	parsedom?: string
@@ -239,13 +239,13 @@ export const elementIsMatch = (element: AlexElement, config: ElementMatchConfigT
  * @returns
  */
 export const getMatchElementByElement = (element: AlexElement, config: ElementMatchConfigType): AlexElement | null => {
-	if (element.isBlock()) {
-		return elementIsMatch(element, config) ? element : null
-	}
 	if (elementIsMatch(element, config)) {
 		return element
 	}
-	return getMatchElementByElement(element.parent!, config)
+	if (element.parent) {
+		return getMatchElementByElement(element.parent, config)
+	}
+	return null
 }
 
 /**
@@ -293,258 +293,448 @@ export const getMatchElementByRange = (editor: AlexEditor, dataRangeCaches: Alex
 }
 
 /**
- * Open API：判断元素是否有序或者无序列表
+ * Open API：判断元素是否有序或者无序列表，不做空元素判断
  * @param element
  * @param ordered
  * @returns
  */
-export const isList = (element: AlexElement, ordered: boolean | undefined = false) => {
-	if (element.isEmpty()) {
-		return false
-	}
-	return element.parsedom == 'div' && element.hasMarks() && element.marks!['data-editify-list'] == (ordered ? 'ol' : 'ul')
+export const elementIsList = (element: AlexElement, ordered: boolean | undefined = false) => {
+	return elementIsMatch(element, {
+		parsedom: 'div',
+		marks: {
+			'data-editify-list': ordered ? 'ol' : 'ul'
+		}
+	})
 }
 
 /**
- * Open API：判断元素是否任务列表
+ * Open API：判断元素是否在有序列表或者无序列表下，是的话返回有序列表或者无序列表元素，否则返回null
  * @param element
+ * @param ordered
  * @returns
  */
-export const isTask = (element: AlexElement) => {
-	if (element.isEmpty()) {
+export const getListByElement = (element: AlexElement, ordered: boolean): AlexElement | null => {
+	return getMatchElementByElement(element, {
+		parsedom: 'div',
+		marks: {
+			'data-editify-list': ordered ? 'ol' : 'ul'
+		}
+	})
+}
+
+/**
+ * Open API：选区是否含有有序列表或者无序列表，不一定是同一个有序列表或者序列表，只要含有有序列表或者序列表即返回true
+ * @param editor
+ * @param dataRangeCaches
+ * @param ordered
+ * @returns
+ */
+export const hasListInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered: boolean | undefined = false) => {
+	if (!editor.range) {
 		return false
 	}
-	return element.parsedom == 'div' && element.hasMarks() && element.marks!.hasOwnProperty('data-editify-task')
+	if (editor.range.anchor.isEqual(editor.range.focus)) {
+		return !!getListByElement(editor.range.anchor.element, ordered)
+	}
+	return dataRangeCaches.flatList.some(item => {
+		return !!getListByElement(item.element, ordered)
+	})
 }
 
 /**
- * Open API：判断元素是否在有序列表或者无序列表下
- * @param element
+ * Open API：选区是否全部在有序列表或者无序列表内，不一定是同一个有序列表或者无序列表
+ * @param editor
+ * @param dataRangeCaches
  * @param ordered
  * @returns
  */
-export const elementIsInList = (element: AlexElement, ordered: boolean): boolean => {
-	if (isList(element, ordered)) {
-		return true
+export const rangeIsInList = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered: boolean | undefined = false) => {
+	if (!editor.range) {
+		return false
 	}
-	if (element.parent) {
-		return elementIsInList(element.parent, ordered)
+	if (editor.range.anchor.isEqual(editor.range.focus)) {
+		return !!getListByElement(editor.range.anchor.element, ordered)
 	}
-	return false
+	return dataRangeCaches.list.every(item => {
+		return !!getListByElement(item.element, ordered)
+	})
+}
+
+/**
+ * Open API：判断元素是否任务列表，不做空元素判断
+ * @param element
+ * @returns
+ */
+export const elementIsTask = (element: AlexElement) => {
+	return elementIsMatch(element, {
+		parsedom: 'div',
+		marks: {
+			'data-editify-task': true
+		}
+	})
 }
 
 /**
- * Open API：判断元素是否在任务列表下
+ * Open API：判断元素是否在任务列表下，是的话返回任务列表元素，否则返回null
  * @param element
  * @returns
  */
-export const elementIsInTask = (element: AlexElement): boolean => {
-	if (isTask(element)) {
-		return true
+export const getTaskByElement = (element: AlexElement): AlexElement | null => {
+	return getMatchElementByElement(element, {
+		parsedom: 'div',
+		marks: {
+			'data-editify-task': true
+		}
+	})
+}
+
+/**
+ * Open API：选区是否含有任务列表，不一定是同一个任务列表，只要含有任务列表即返回true
+ * @param editor
+ * @param dataRangeCaches
+ * @returns
+ */
+export const hasTaskInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+	if (!editor.range) {
+		return false
 	}
-	if (element.parent) {
-		return elementIsInTask(element.parent)
+	if (editor.range.anchor.isEqual(editor.range.focus)) {
+		return !!getTaskByElement(editor.range.anchor.element)
 	}
-	return false
+	return dataRangeCaches.flatList.some(item => {
+		return !!getTaskByElement(item.element)
+	})
 }
 
 /**
- * Open API：选区是否含有代码块
+ * Open API：选区是否全部在任务列表里，不一定是同一个任务列表
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export const hasPreInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const rangeIsInTask = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'pre' })
+		return !!getTaskByElement(editor.range.anchor.element)
+	}
+	return dataRangeCaches.list.every(item => {
+		return !!getTaskByElement(item.element)
+	})
+}
+
+/**
+ * Open API：判断元素是否附件，不做空元素判断
+ * @param element
+ * @returns
+ */
+export const elementIsAttachment = (element: AlexElement) => {
+	return elementIsMatch(element, {
+		parsedom: 'span',
+		marks: {
+			'data-editify-attachment': true
+		}
+	})
+}
+
+/**
+ * Open API：选区是否含有附件，不一定是同一个附件，只要含有附件即返回true
+ * @param editor
+ * @param dataRangeCaches
+ * @returns
+ */
+export const hasAttachmentInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+	if (!editor.range) {
+		return false
+	}
+	if (editor.range.anchor.isEqual(editor.range.focus)) {
+		return elementIsAttachment(editor.range.anchor.element)
 	}
 	return dataRangeCaches.flatList.some(item => {
-		return !!getMatchElementByElement(item.element, { parsedom: 'pre' })
+		return elementIsAttachment(item.element)
+	})
+}
+
+/**
+ * Open API：判断元素是否数学公式，不做空元素判断
+ * @param element
+ * @returns
+ */
+export const elementIsMathformula = (element: AlexElement) => {
+	return elementIsMatch(element, {
+		parsedom: 'span',
+		marks: {
+			'data-editify-mathformula': true
+		}
 	})
 }
 
 /**
- * Open API：选区是否含有引用
+ * Open API：判断元素是否在数学公式下，是的话返回数学公式元素，否则返回null
+ * @param element
+ * @returns
+ */
+export const getMathformulaByElement = (element: AlexElement): AlexElement | null => {
+	return getMatchElementByElement(element, {
+		parsedom: 'span',
+		marks: {
+			'data-editify-mathformula': true
+		}
+	})
+}
+
+/**
+ * Open API：选区是否含有数学公式，不一定是同一个数学公式，只要含有数学公式即返回true
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export const hasQuoteInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const hasMathformulaInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'blockquote' })
+		return !!getMathformulaByElement(editor.range.anchor.element)
 	}
 	return dataRangeCaches.flatList.some(item => {
-		return !!getMatchElementByElement(item.element, { parsedom: 'blockquote' })
+		return !!getMathformulaByElement(item.element)
 	})
 }
 
 /**
- * Open API：选区是否含有有序列表或者无序列表
+ * Open API：判断元素是否面板，不做空元素判断
+ * @param el
+ * @returns
+ */
+export const elementIsPanel = (element: AlexElement) => {
+	return elementIsMatch(element, {
+		parsedom: 'div',
+		marks: {
+			'data-editify-panel': true
+		}
+	})
+}
+
+/**
+ * Open API：判断元素是否在面板内，是的话返回面板元素，否则返回null
+ * @param el
+ * @returns
+ */
+export const getPanelByElement = (element: AlexElement): AlexElement | null => {
+	return getMatchElementByElement(element, {
+		parsedom: 'div',
+		marks: {
+			'data-editify-panel': true
+		}
+	})
+}
+
+/**
+ * Open API：选区是否含有面板，不一定是同一个面板，只要含有面板即返回true
  * @param editor
  * @param dataRangeCaches
- * @param ordered
  * @returns
  */
-export const hasListInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered: boolean | undefined = false) => {
+export const hasPanelInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return elementIsInList(editor.range.anchor.element, ordered)
+		return !!getPanelByElement(editor.range.anchor.element)
 	}
 	return dataRangeCaches.flatList.some(item => {
-		return elementIsInList(item.element, ordered)
+		return !!getPanelByElement(item.element)
+	})
+}
+
+/**
+ * Open API：判断元素是否信息块，不做空元素判断
+ * @param el
+ * @returns
+ */
+export const elementIsInfoBlock = (element: AlexElement) => {
+	return elementIsMatch(element, {
+		parsedom: 'div',
+		marks: {
+			'data-editify-info': true
+		}
+	})
+}
+
+/**
+ * Open API：判断元素是否在信息块内，是的话返回信息块元素，否则返回null
+ * @param el
+ * @returns
+ */
+export const getInfoBlockByElement = (element: AlexElement): AlexElement | null => {
+	return getMatchElementByElement(element, {
+		parsedom: 'div',
+		marks: {
+			'data-editify-info': true
+		}
 	})
 }
 
 /**
- * Open API：选区是否含有任务列表
+ * Open API：选区是否含有信息块，不一定是同一个信息块，只要含有信息块即返回true
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export const hasTaskInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const hasInfoBlockInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return elementIsInTask(editor.range.anchor.element)
+		return !!getInfoBlockByElement(editor.range.anchor.element)
 	}
 	return dataRangeCaches.flatList.some(item => {
-		return elementIsInTask(item.element)
+		return !!getInfoBlockByElement(item.element)
 	})
 }
 
 /**
- * Open API：选区是否含有链接
+ * Open API：选区是否全部在信息块里，不一定是同一个信息块
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export const hasLinkInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const rangeIsInInfoBlock = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'a' })
+		return !!getInfoBlockByElement(editor.range.anchor.element)
+	}
+	return dataRangeCaches.flatList.every(item => {
+		return !!getInfoBlockByElement(item.element)
+	})
+}
+
+/**
+ * Open API：选区是否含有代码块，不一定是同一个代码块，只要含有代码块即返回true
+ * @param editor
+ * @param dataRangeCaches
+ * @returns
+ */
+export const hasPreInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+	if (!editor.range) {
+		return false
+	}
+	if (editor.range.anchor.isEqual(editor.range.focus)) {
+		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'pre' })
 	}
 	return dataRangeCaches.flatList.some(item => {
-		return !!getMatchElementByElement(item.element, { parsedom: 'a' })
+		return !!getMatchElementByElement(item.element, { parsedom: 'pre' })
 	})
 }
 
 /**
- * Open API：选区是否含有表格
+ * Open API：选区是否含有引用，不一定是同一个引用，只要含有引用即返回true
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export const hasTableInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const hasQuoteInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'table' })
+		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'blockquote' })
 	}
 	return dataRangeCaches.flatList.some(item => {
-		return !!getMatchElementByElement(item.element, { parsedom: 'table' })
+		return !!getMatchElementByElement(item.element, { parsedom: 'blockquote' })
 	})
 }
 
 /**
- * Open API：选区是否含有图片
+ * Open API：选区是否含有链接，不一定是同一个链接，只要含有链接即返回true
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export const hasImageInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const hasLinkInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'img' })
+		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'a' })
 	}
 	return dataRangeCaches.flatList.some(item => {
-		return !!getMatchElementByElement(item.element, { parsedom: 'img' })
+		return !!getMatchElementByElement(item.element, { parsedom: 'a' })
 	})
 }
 
 /**
- * Open API：选区是否含有视频
+ * Open API：选区是否含有表格，不一定是同一个表格，只要含有表格即返回true
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export const hasVideoInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const hasTableInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'video' })
+		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'table' })
 	}
 	return dataRangeCaches.flatList.some(item => {
-		return !!getMatchElementByElement(item.element, { parsedom: 'video' })
+		return !!getMatchElementByElement(item.element, { parsedom: 'table' })
 	})
 }
 
 /**
- * Open API：选区是否全部在引用内
+ * Open API：选区是否含有图片，不一定是同一个图片，只要含有图片即返回true
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export const isRangeInQuote = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const hasImageInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'blockquote' })
+		return elementIsMatch(editor.range.anchor.element, { parsedom: 'img' })
 	}
-	return dataRangeCaches.list.every(item => {
-		return !!getMatchElementByElement(item.element, { parsedom: 'blockquote' })
+	return dataRangeCaches.flatList.some(item => {
+		return elementIsMatch(item.element, { parsedom: 'img' })
 	})
 }
 
 /**
- * Open API：选区是否全部在有序列表或者无序列表内
+ * Open API：选区是否含有视频，不一定是同一个视频，只要含有视频即返回true
  * @param editor
  * @param dataRangeCaches
- * @param ordered
  * @returns
  */
-export const isRangeInList = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, ordered: boolean | undefined = false) => {
+export const hasVideoInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return elementIsInList(editor.range.anchor.element, ordered)
+		return elementIsMatch(editor.range.anchor.element, { parsedom: 'video' })
 	}
-	return dataRangeCaches.list.every(item => {
-		return elementIsInList(item.element, ordered)
+	return dataRangeCaches.flatList.some(item => {
+		return elementIsMatch(item.element, { parsedom: 'video' })
 	})
 }
 
 /**
- * Open API：选区是否全部在任务列表里
+ * Open API：选区是否全部在引用内，不一定是同一个引用
  * @param editor
  * @param dataRangeCaches
  * @returns
  */
-export const isRangeInTask = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+export const rangeIsInQuote = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
 	if (!editor.range) {
 		return false
 	}
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
-		return elementIsInTask(editor.range.anchor.element)
+		return !!getMatchElementByElement(editor.range.anchor.element, { parsedom: 'blockquote' })
 	}
 	return dataRangeCaches.list.every(item => {
-		return elementIsInTask(item.element)
+		return !!getMatchElementByElement(item.element, { parsedom: 'blockquote' })
 	})
 }
 
@@ -631,7 +821,7 @@ export const queryTextMark = (editor: AlexEditor, dataRangeCaches: AlexElementsR
 }
 
 /**
- * Open API：获取选区内的文字内容，用于预置链接文字
+ * Open API：获取选区内的文字内容
  * @param dataRangeCaches
  * @returns
  */
@@ -734,7 +924,7 @@ export const elementToParagraph = (element: AlexElement) => {
  */
 export const elementToList = (element: AlexElement, ordered: boolean | undefined = false) => {
 	//如果是列表则返回
-	if (isList(element, ordered)) {
+	if (elementIsList(element, ordered)) {
 		return
 	}
 	//先转为段落
@@ -754,7 +944,7 @@ export const elementToList = (element: AlexElement, ordered: boolean | undefined
  */
 export const elementToTask = (element: AlexElement) => {
 	//如果是任务列表则返回
-	if (isTask(element)) {
+	if (elementIsTask(element)) {
 		return
 	}
 	//先转为段落
@@ -908,7 +1098,7 @@ export const setQuote = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeT
 		return
 	}
 	//是否都在引用里
-	const flag = isRangeInQuote(editor, dataRangeCaches)
+	const flag = rangeIsInQuote(editor, dataRangeCaches)
 	//起点和终点在一起
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
 		const block = editor.range.anchor.element.getBlock()
@@ -1014,7 +1204,7 @@ export const setList = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeTy
 		return
 	}
 	//是否都在列表内
-	const flag = isRangeInList(editor, dataRangeCaches, ordered)
+	const flag = rangeIsInList(editor, dataRangeCaches, ordered)
 	//起点和终点在一起
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
 		const block = editor.range.anchor.element.getBlock()
@@ -1054,8 +1244,8 @@ export const setTask = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeTy
 	if (!editor.range) {
 		return
 	}
-	//是否都在任务列表那
-	const flag = isRangeInTask(editor, dataRangeCaches)
+	//是否都在任务列表里
+	const flag = rangeIsInTask(editor, dataRangeCaches)
 	//起点和终点在一起
 	if (editor.range.anchor.isEqual(editor.range.focus)) {
 		const block = editor.range.anchor.element.getBlock()
@@ -1584,20 +1774,22 @@ export const insertCodeBlock = (editor: AlexEditor, dataRangeCaches: AlexElement
 		else {
 			editor.range.anchor.moveToStart(dataRangeCaches.list[0].element.getBlock())
 			editor.range.focus.moveToEnd(dataRangeCaches.list[dataRangeCaches.list.length - 1].element.getBlock())
-			const res = dataRangeCaches.flatList.filter(el => el.element.isText())
-			const obj: ObjectType = {}
-			res.forEach(el => {
-				if (obj[el.element.getBlock().key]) {
-					obj[el.element.getBlock().key].push(el.element.clone())
-				} else {
-					obj[el.element.getBlock().key] = [el.element.clone()]
-				}
-			})
+			const result: ObjectType = {}
+			editor
+				.getElementsByRange()
+				.flatList.filter(el => el.element.isText())
+				.forEach(el => {
+					if (result[`_${el.element.getBlock().key}`]) {
+						result[`_${el.element.getBlock().key}`].push(el.element.clone())
+					} else {
+						result[`_${el.element.getBlock().key}`] = [el.element.clone()]
+					}
+				})
 			const pre = AlexElement.create({
 				type: 'block',
 				parsedom: 'pre'
 			})
-			Object.keys(obj).forEach((key, index) => {
+			Object.keys(result).forEach((key, index) => {
 				if (index > 0) {
 					const text = AlexElement.create({
 						type: 'text',
@@ -1609,7 +1801,7 @@ export const insertCodeBlock = (editor: AlexEditor, dataRangeCaches: AlexElement
 						editor.addElementTo(text, pre)
 					}
 				}
-				obj[key].forEach((el: AlexElement) => {
+				result[key].forEach((el: AlexElement) => {
 					if (pre.hasChildren()) {
 						editor.addElementTo(el, pre, pre.children!.length)
 					} else {