vue-editify 0.1.42 → 0.1.44

package/src/core/function.ts

@@ -6,23 +6,199 @@ import { common as DapCommon } from 'dap-util'
 import { cloneData, queryHasValue, getButtonOptionsConfig, ObjectType } from './tool'
 import { ButtonOptionsItemType } from '../components/button/props'
 
-export type ElementMatchConfig = {
+export type ElementMatchConfigType = {
 	parsedom?: string
 	marks?: ObjectType
 	styles?: ObjectType
 }
 
+export type CellMergeTypeResultType = {
+	crossRow: boolean
+	crossColumn: boolean
+	rowspan?: number
+	colspan?: number
+}
+
+/**
+ * 清空单元格的内容并隐藏
+ * @param editor
+ * @param cell
+ */
+export const setTableCellMerged = (cell: AlexElement) => {
+	const breakEl = new AlexElement('closed', 'br', null, null, null)
+	cell.children = [breakEl]
+	breakEl.parent = cell
+	if (cell.hasMarks()) {
+		cell.marks!['data-editify-merged'] = 'true'
+	} else {
+		cell.marks = {
+			'data-editify-merged': 'true'
+		}
+	}
+}
+
+/**
+ * 判断被隐藏的单元格是属于跨行的单元格还是跨列的单元格，返回跨行或者跨列的单元格
+ * @param editor
+ * @param cell
+ * @returns
+ */
+export const getCellMergeElement = (editor: AlexEditor, cell: AlexElement) => {
+	const queryLeft = () => {
+		//跨列的单元格
+		let crossColumnElement = null
+		//获取前一个单元格
+		let el = editor.getPreviousElement(cell)
+		let temIndex = 1
+		//如果前一个单元格存在
+		while (el) {
+			const { colspan } = getCellSpanNumber(el)
+			//是否隐藏的单元格
+			const isMergedCell = el.hasMarks() && el.marks!['data-editify-merged']
+			//不是隐藏的单元格并且是跨列的单元格
+			if (!isMergedCell && colspan > temIndex) {
+				crossColumnElement = el
+				break
+			}
+			//否则继续向左查询
+			else {
+				el = editor.getPreviousElement(el)
+				temIndex++
+			}
+		}
+		return crossColumnElement
+	}
+	const queryUp = () => {
+		//跨行的单元格
+		let crossRowElement = null
+		//单元格在行中的序列
+		const index = cell.parent!.children!.findIndex(item => item.isEqual(cell))
+		//获取前一行
+		let el = editor.getPreviousElement(cell.parent!)
+		let temIndex = 1
+		//如果前一行存在
+		while (el) {
+			//获取前一行对应序列的单元格
+			const column = el.children![index]
+			const { rowspan } = getCellSpanNumber(column)
+			//是否隐藏的单元格
+			const isMergedCell = column.hasMarks() && column.marks!['data-editify-merged']
+			//不是隐藏的单元格并且是跨行的单元格
+			if (!isMergedCell && rowspan > temIndex) {
+				crossRowElement = column
+				break
+			}
+			//否则继续向上查询
+			else {
+				el = editor.getPreviousElement(el)
+				temIndex++
+			}
+		}
+		return crossRowElement
+	}
+	return {
+		crossRowElement: queryUp(),
+		crossColumnElement: queryLeft()
+	}
+}
+
+/**
+ * 获取某个单元格的rowspan和colspan值
+ * @param cell
+ * @returns
+ */
+export const getCellSpanNumber = (cell: AlexElement) => {
+	let rowspan = 1
+	let colspan = 1
+	if (cell.hasMarks()) {
+		if (cell.marks!['rowspan']) {
+			const num = Number(cell.marks!['rowspan'])
+			rowspan = isNaN(num) ? 1 : num
+		}
+		if (cell.marks!['colspan']) {
+			const num = Number(cell.marks!['colspan'])
+			colspan = isNaN(num) ? 1 : num
+		}
+	}
+	return {
+		rowspan,
+		colspan
+	}
+}
+
+/**
+ * 获取表格规格：行数和列数
+ * @param rowElements
+ * @returns
+ */
+export const getTableSize = (rowElements: AlexElement[]) => {
+	//将单元格按照同列进行整理
+	const columns: AlexElement[][] = []
+	//将单元格按照同行进行整理
+	const rows: AlexElement[][] = []
+	//遍历行
+	rowElements.forEach((rowElement, rowIndex) => {
+		//遍历行的每一个单元格
+		rowElement.children!.forEach((colElement, colIndex) => {
+			if (Array.isArray(rows[rowIndex])) {
+				rows[rowIndex].push(colElement)
+			} else {
+				rows[rowIndex] = [colElement]
+			}
+			if (Array.isArray(columns[colIndex])) {
+				columns[colIndex].push(colElement)
+			} else {
+				columns[colIndex] = [colElement]
+			}
+		})
+	})
+	//遍历每一列单元格获取每列占据的行数
+	const rowNumbers = columns.map(item => {
+		return item.reduce((total: number, current: AlexElement) => {
+			if (current.hasMarks()) {
+				if (!!current.marks!['data-editify-merged']) {
+					return total + 0
+				}
+				if (!!current.marks!['rowspan']) {
+					const num = Number(current.marks!['rowspan'])
+					return total + (isNaN(num) ? 1 : num)
+				}
+			}
+			return total + 1
+		}, 0)
+	})
+	//遍历每一行单元格获取每行占据的列数
+	const columnNumbers = rows.map(item => {
+		return item.reduce((total: number, current: AlexElement) => {
+			if (current.hasMarks()) {
+				if (!!current.marks!['data-editify-merged']) {
+					return total + 0
+				}
+				if (!!current.marks!['colspan']) {
+					const num = Number(current.marks!['colspan'])
+					return total + (isNaN(num) ? 1 : num)
+				}
+			}
+			return total + 1
+		}, 0)
+	})
+	return {
+		rowNumber: Math.max(...rowNumbers),
+		columnNumber: Math.max(...columnNumbers)
+	}
+}
+
 /**
- * 判断元素是否符合指定的条件
+ * Open API：判断元素是否符合指定的条件
  * @param element
  * @param config
  * @returns
  */
-export const elementIsMatch = (element: AlexElement, config: ElementMatchConfig) => {
+export const elementIsMatch = (element: AlexElement, config: ElementMatchConfigType) => {
 	//默认是符合的
 	let isMatch = true
 	//如果存在parsedom判断并且parsedom不一样
-	if (config.parsedom && element.parsedom && config.parsedom != element.parsedom) {
+	if (config.parsedom && (element.isText() || config.parsedom != element.parsedom)) {
 		isMatch = false
 	}
 	//如果存在marks判断
@@ -49,12 +225,12 @@ export const elementIsMatch = (element: AlexElement, config: ElementMatchConfig)
 }
 
 /**
- * 判断元素是否在符合条件的元素下，如果是返回符合条件的元素，否则返回null
+ * Open API：判断元素是否在符合条件的元素下，如果是返回符合条件的元素，否则返回null
  * @param element
  * @param config
  * @returns
  */
-export const getMatchElementByElement = (element: AlexElement, config: ElementMatchConfig): AlexElement | null => {
+export const getMatchElementByElement = (element: AlexElement, config: ElementMatchConfigType): AlexElement | null => {
 	if (element.isBlock()) {
 		return elementIsMatch(element, config) ? element : null
 	}
@@ -65,13 +241,13 @@ export const getMatchElementByElement = (element: AlexElement, config: ElementMa
 }
 
 /**
- * 判断光标范围内的元素是否在符合条件的元素下，如果是所有的返回符合条件的元素，否则返回[]
+ * Open API：判断光标范围内的元素是否在符合条件的元素下，如果是所有的返回符合条件的元素，否则返回[]
  * @param editor
  * @param dataRangeCaches
  * @param config
  * @returns
  */
-export const getMatchElementsByRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, config: ElementMatchConfig) => {
+export const getMatchElementsByRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType, config: ElementMatchConfigType) => {
 	let elements: AlexElement[] = []
 	if (!editor.range) {
 		return elements
@@ -93,7 +269,7 @@ export const getMatchElementsByRange = (editor: AlexEditor, dataRangeCaches: Ale
 }
 
 /**
- * 判断元素是否在有序列表或者无序列表下
+ * Open API：判断元素是否在有序列表或者无序列表下
  * @param element
  * @param ordered
  * @returns
@@ -109,7 +285,7 @@ export const elementIsInList = (element: AlexElement, ordered: boolean): boolean
 }
 
 /**
- * 判断元素是否在任务列表下
+ * Open API：判断元素是否在任务列表下
  * @param element
  * @returns
  */
@@ -124,7 +300,7 @@ export const elementIsInTask = (element: AlexElement): boolean => {
 }
 
 /**
- * 判断元素是否有序或者无序列表
+ * Open API：判断元素是否有序或者无序列表
  * @param element
  * @param ordered
  * @returns
@@ -137,7 +313,7 @@ export const isList = (element: AlexElement, ordered: boolean | undefined = fals
 }
 
 /**
- * 判断元素是否任务列表
+ * Open API：判断元素是否任务列表
  * @param element
  * @returns
  */
@@ -149,7 +325,7 @@ export const isTask = (element: AlexElement) => {
 }
 
 /**
- * 选区是否含有代码块
+ * Open API：选区是否含有代码块
  * @param editor
  * @param dataRangeCaches
  * @returns
@@ -167,7 +343,7 @@ export const hasPreInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsR
 }
 
 /**
- * 选区是否全部在代码块内
+ * Open API：选区是否全部在代码块内
  * @param editor
  * @param dataRangeCaches
  * @returns
@@ -185,7 +361,7 @@ export const isRangeInPre = (editor: AlexEditor, dataRangeCaches: AlexElementsRa
 }
 
 /**
- * 选区是否含有引用
+ * Open API：选区是否含有引用
  * @param editor
  * @param dataRangeCaches
  * @returns
@@ -203,7 +379,7 @@ export const hasQuoteInRange = (editor: AlexEditor, dataRangeCaches: AlexElement
 }
 
 /**
- * 选区是否全部在引用内
+ * Open API：选区是否全部在引用内
  * @param editor
  * @param dataRangeCaches
  * @returns
@@ -221,7 +397,7 @@ export const isRangeInQuote = (editor: AlexEditor, dataRangeCaches: AlexElements
 }
 
 /**
- * 选区是否含有有序列表或者无序列表
+ * Open API：选区是否含有有序列表或者无序列表
  * @param editor
  * @param dataRangeCaches
  * @param ordered
@@ -240,7 +416,7 @@ export const hasListInRange = (editor: AlexEditor, dataRangeCaches: AlexElements
 }
 
 /**
- * 选区是否全部在有序列表或者无序列表内
+ * Open API：选区是否全部在有序列表或者无序列表内
  * @param editor
  * @param dataRangeCaches
  * @param ordered
@@ -259,7 +435,7 @@ export const isRangeInList = (editor: AlexEditor, dataRangeCaches: AlexElementsR
 }
 
 /**
- * 选区是否含有任务列表
+ * Open API：选区是否含有任务列表
  * @param editor
  * @param dataRangeCaches
  * @returns
@@ -277,7 +453,7 @@ export const hasTaskInRange = (editor: AlexEditor, dataRangeCaches: AlexElements
 }
 
 /**
- * 选区是否全部在任务列表里
+ * Open API：选区是否全部在任务列表里
  * @param editor
  * @param dataRangeCaches
  * @returns
@@ -295,7 +471,7 @@ export const isRangeInTask = (editor: AlexEditor, dataRangeCaches: AlexElementsR
 }
 
 /**
- * 选区是否含有链接
+ * Open API：选区是否含有链接
  * @param editor
  * @param dataRangeCaches
  * @returns
@@ -313,7 +489,7 @@ export const hasLinkInRange = (editor: AlexEditor, dataRangeCaches: AlexElements
 }
 
 /**
- * 选区是否含有表格
+ * Open API：选区是否含有表格
  * @param editor
  * @param dataRangeCaches
  * @returns
@@ -331,7 +507,7 @@ export const hasTableInRange = (editor: AlexEditor, dataRangeCaches: AlexElement
 }
 
 /**
- * 选区是否含有图片
+ * Open API：选区是否含有图片
  * @param editor
  * @param dataRangeCaches
  * @returns
@@ -349,7 +525,7 @@ export const hasImageInRange = (editor: AlexEditor, dataRangeCaches: AlexElement
 }
 
 /**
- * 选区是否含有视频
+ * Open API：选区是否含有视频
  * @param editor
  * @param dataRangeCaches
  * @returns
@@ -367,7 +543,7 @@ export const hasVideoInRange = (editor: AlexEditor, dataRangeCaches: AlexElement
 }
 
 /**
- * 查询光标所在的文本元素是否具有某个样式
+ * Open API：查询光标所在的文本元素是否具有某个样式
  * @param editor
  * @param dataRangeCaches
  * @param name
@@ -408,7 +584,7 @@ export const queryTextStyle = (editor: AlexEditor, dataRangeCaches: AlexElements
 }
 
 /**
- * 查询光标所在的文本元素是否具有某个标记
+ * Open API：查询光标所在的文本元素是否具有某个标记
  * @param editor
  * @param dataRangeCaches
  * @param name
@@ -449,7 +625,7 @@ export const queryTextMark = (editor: AlexEditor, dataRangeCaches: AlexElementsR
 }
 
 /**
- * 获取选区内的文字内容，用于预置链接文字
+ * Open API：获取选区内的文字内容，用于预置链接文字
  * @param dataRangeCaches
  * @returns
  */
@@ -624,7 +800,7 @@ export const setHeading = (editor: AlexEditor, dataRangeCaches: AlexElementsRang
 }
 
 /**
- * 根级块元素或者内部块元素增加缩进
+ * Open API：根级块元素或者内部块元素增加缩进
  * @param editor
  * @param dataRangeCaches
  * @returns
@@ -674,7 +850,7 @@ export const setIndentIncrease = (editor: AlexEditor, dataRangeCaches: AlexEleme
 }
 
 /**
- * 根级块元素或者内部块元素减少缩进
+ * Open API：根级块元素或者内部块元素减少缩进
  * @param editor
  * @param dataRangeCaches
  * @returns
@@ -716,7 +892,7 @@ export const setIndentDecrease = (editor: AlexEditor, dataRangeCaches: AlexEleme
 }
 
 /**
- * 插入或者取消引用
+ * Open API：插入或者取消引用
  * @param editor
  * @param dataRangeCaches
  * @returns
@@ -755,7 +931,7 @@ export const setQuote = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeT
 }
 
 /**
- * 设置对齐方式，参数取值justify/left/right/center
+ * Open API：设置对齐方式，参数取值justify/left/right/center
  * @param editor
  * @param dataRangeCaches
  * @param value
@@ -821,7 +997,7 @@ export const setAlign = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeT
 }
 
 /**
- * 插入或者取消 有序或者无序列表 ordered为true表示有序列表
+ * Open API：插入或者取消 有序或者无序列表 ordered为true表示有序列表
  * @param editor
  * @param dataRangeCaches
  * @param ordered
@@ -863,7 +1039,7 @@ export const setList = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeTy
 }
 
 /**
- * 插入或者取消任务列表
+ * Open API：插入或者取消任务列表
  * @param editor
  * @param dataRangeCaches
  * @returns
@@ -904,7 +1080,7 @@ export const setTask = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeTy
 }
 
 /**
- * 设置文本元素的样式，styles为{ 'font-weight':'bold' }这类格式
+ * Open API：设置文本元素的样式，styles为{ 'font-weight':'bold' }这类格式
  * @param editor
  * @param dataRangeCaches
  * @param styles
@@ -963,7 +1139,7 @@ export const setTextStyle = (editor: AlexEditor, dataRangeCaches: AlexElementsRa
 }
 
 /**
- * 设置文本元素的标记，marks为{ 'class':'a' }这类格式
+ * Open API：设置文本元素的标记，marks为{ 'class':'a' }这类格式
  * @param editor
  * @param dataRangeCaches
  * @param marks
@@ -1025,7 +1201,7 @@ export const setTextMark = (editor: AlexEditor, dataRangeCaches: AlexElementsRan
 }
 
 /**
- * 移除文本元素的样式，styleNames是样式名称数组，如果不存在则移除全部样式
+ * Open API：移除文本元素的样式，styleNames是样式名称数组，如果不存在则移除全部样式
  * @param editor
  * @param dataRangeCaches
  * @param styleNames
@@ -1084,7 +1260,7 @@ export const removeTextStyle = (editor: AlexEditor, dataRangeCaches: AlexElement
 }
 
 /**
- * 移除文本元素的标记，markNames是标记名称数组，如果不存在则移除全部标记
+ * Open API：移除文本元素的标记，markNames是标记名称数组，如果不存在则移除全部标记
  * @param editor
  * @param dataRangeCaches
  * @param markNames
@@ -1143,7 +1319,7 @@ export const removeTextMark = (editor: AlexEditor, dataRangeCaches: AlexElements
 }
 
 /**
- * 设置块元素或者根级块元素的行高
+ * Open API：设置块元素或者根级块元素的行高
  * @param editor
  * @param dataRangeCaches
  * @param value
@@ -1209,7 +1385,7 @@ export const setLineHeight = (editor: AlexEditor, dataRangeCaches: AlexElementsR
 }
 
 /**
- * 插入链接
+ * Open API：插入链接
  * @param editor
  * @param text
  * @param url
@@ -1236,7 +1412,7 @@ export const insertLink = (editor: AlexEditor, text: string, url: string, newOpe
 }
 
 /**
- * 插入图片
+ * Open API：插入图片
  * @param editor
  * @param value
  * @returns
@@ -1258,7 +1434,7 @@ export const insertImage = (editor: AlexEditor, value: string) => {
 }
 
 /**
- * 插入视频
+ * Open API：插入视频
  * @param editor
  * @param value
  * @returns
@@ -1282,7 +1458,7 @@ export const insertVideo = (editor: AlexEditor, value: string) => {
 }
 
 /**
- * 插入表格
+ * Open API：插入表格
  * @param editor
  * @param rowLength
  * @param colLength
@@ -1316,7 +1492,7 @@ export const insertTable = (editor: AlexEditor, rowLength: number, colLength: nu
 }
 
 /**
- * 插入或者取消代码块
+ * Open API：插入或者取消代码块
  * @param editor
  * @param dataRangeCaches
  * @returns
@@ -1396,7 +1572,7 @@ export const insertCodeBlock = (editor: AlexEditor, dataRangeCaches: AlexElement
 }
 
 /**
- * 插入分隔线
+ * Open API：插入分隔线
  * @param editor
  * @param dataRangeCaches
  * @returns