vue-editify 0.1.43 → 0.1.45

package/src/core/rule.ts

@@ -1,8 +1,175 @@
 import { AlexEditor, AlexElement } from 'alex-editor'
 import { LanguagesItemType, getHljsHtml } from '../hljs'
-import { isList, isTask } from './function'
+import { isList, isTask, getTableSize, getCellSpanNumber } from './function'
 import { common as DapCommon } from 'dap-util'
 
+/**
+ * 自动补全表格行和列
+ * @param editor
+ * @param rowElements
+ * @param rowNumber
+ * @param columnNumber
+ */
+const autocompleteTableCells = (editor: AlexEditor, rowElements: AlexElement[], rowNumber: number, columnNumber: number) => {
+	//遍历所有的单元格
+	AlexElement.flatElements(rowElements).forEach(item => {
+		if (item.parsedom == 'td' && item.hasMarks()) {
+			//删除被合并的标识
+			if (item.marks!['data-editify-merged']) {
+				delete item.marks!['data-editify-merged']
+			}
+			//获取colspan
+			const colspan = isNaN(Number(item.marks!['colspan'])) ? 1 : Number(item.marks!['colspan'])
+			//获取rowspan
+			const rowspan = isNaN(Number(item.marks!['rowspan'])) ? 1 : Number(item.marks!['rowspan'])
+			//针对colspan>1的单元格在后面补全隐藏的单元格
+			if (colspan > 1) {
+				let i = 1
+				//补全的数量小于需要补全的数量并且列总数量小于理论数量
+				while (i < colspan && item.parent!.children!.length < columnNumber) {
+					const column = new AlexElement(
+						'inblock',
+						'td',
+						{
+							'data-editify-merged': 'true'
+						},
+						null,
+						null
+					)
+					const breakElement = new AlexElement('closed', 'br', null, null, null)
+					editor.addElementTo(breakElement, column)
+					editor.addElementAfter(column, item)
+					i++
+				}
+			}
+			//针对rowspan>1的单元格在后面的行中对应位置补全隐藏的单元格
+			if (rowspan > 1) {
+				let el = item
+				let i = 1
+				while (i < rowspan && editor.getNextElement(el.parent!) && editor.getNextElement(el.parent!)!.children!.length < columnNumber) {
+					//下一行
+					const nextRow = editor.getNextElement(el.parent!)!
+					//单元格在行中的序列
+					const index = el.parent!.children!.findIndex(item => item.isEqual(el))
+					//下一行对应的单元格
+					const nextCell = nextRow.children![index]
+					//根据当前单元格的跨列数补充符合跨列数的隐藏单元格
+					for (let j = 0; j < colspan; j++) {
+						const column = new AlexElement(
+							'inblock',
+							'td',
+							{
+								'data-editify-merged': 'true'
+							},
+							null,
+							null
+						)
+						const breakElement = new AlexElement('closed', 'br', null, null, null)
+						editor.addElementTo(breakElement, column)
+						if (nextCell) {
+							editor.addElementBefore(column, nextCell)
+						} else {
+							editor.addElementTo(column, nextRow, nextRow.children!.length)
+						}
+					}
+					el = nextRow.children![index]
+					i++
+				}
+			}
+		}
+	})
+	//遍历每一行，如果还缺少列则在后面补全列
+	rowElements.forEach(rowElement => {
+		//遍历该行的单元格获取总列数
+		const number = rowElement.children!.length
+		if (number < columnNumber) {
+			for (let i = 0; i < columnNumber - number; i++) {
+				const column = new AlexElement('inblock', 'td', null, null, null)
+				const breakElement = new AlexElement('closed', 'br', null, null, null)
+				editor.addElementTo(breakElement, column)
+				editor.addElementTo(column, rowElement, rowElement.children!.length)
+			}
+		}
+	})
+	//获取总行数
+	const length = rowElements.length
+	//判断总行数是否小于实际行数则补全行
+	if (length < rowNumber) {
+		for (let i = 0; i < rowNumber - length; i++) {
+			const row = new AlexElement('inblock', 'tr', null, null, null)
+			for (let j = 0; j < columnNumber; j++) {
+				const column = new AlexElement('inblock', 'td', null, null, null)
+				const breakElement = new AlexElement('closed', 'br', null, null, null)
+				editor.addElementTo(breakElement, column)
+				editor.addElementTo(column, row)
+			}
+			rowElements.push(row)
+		}
+	}
+}
+
+/**
+ * 自动隐藏被合并的单元格
+ * @param editor
+ * @param rowElements
+ */
+const autoHideMergedTableCells = (editor: AlexEditor, rowElements: AlexElement[]) => {
+	const cells = AlexElement.flatElements(rowElements).filter(item => item.parsedom == 'td')
+	cells.forEach(cell => {
+		if (cell.hasMarks() && !cell.marks!['data-editify-merged']) {
+			//获取colspan
+			const colspan = isNaN(Number(cell.marks!['colspan'])) ? 1 : Number(cell.marks!['colspan'])
+			//获取rowspan
+			const rowspan = isNaN(Number(cell.marks!['rowspan'])) ? 1 : Number(cell.marks!['rowspan'])
+			//如果是跨列单元格，隐藏该单元格同行后的colspan-1个单元格
+			if (colspan > 1) {
+				let el = cell
+				let i = 1
+				while (i < colspan) {
+					const nextCell = editor.getNextElement(el)!
+					if (nextCell) {
+						if (nextCell.hasMarks()) {
+							nextCell.marks!['data-editify-merged'] = 'true'
+						} else {
+							nextCell.marks = {
+								'data-editify-merged': 'true'
+							}
+						}
+						el = nextCell
+						i++
+					} else {
+						break
+					}
+				}
+			}
+			//如果是跨行单元格，隐藏该单元格同列后的rowspan-1行单元格
+			if (rowspan > 1) {
+				const index = cell.parent!.children!.findIndex(item => item.isEqual(cell))
+				let el = cell
+				let i = 1
+				while (i < rowspan && el && editor.getNextElement(el.parent!)) {
+					const nextRow = editor.getNextElement(el.parent!)!
+					//根据跨行单元格占据的列数，在后的rowspan-1行中隐藏colspan个单元格
+					for (let j = index; j < index + colspan; j++) {
+						const current = nextRow.children![j]
+						if (current) {
+							if (current.hasMarks()) {
+								current.marks!['data-editify-merged'] = 'true'
+							} else {
+								current.marks = {
+									'data-editify-merged': 'true'
+								}
+							}
+						}
+					}
+					el = nextRow.children![index]
+					i++
+				}
+			}
+		}
+	})
+}
+
 /**
  * 更新代码块内的光标位置
  * @param editor
@@ -94,7 +261,7 @@ export const parseList = (editor: AlexEditor, element: AlexElement) => {
  * @param editor
  * @param element
  */
-export const orderdListHandle = function (editor: AlexEditor, element: AlexElement) {
+export const orderdListHandle = (editor: AlexEditor, element: AlexElement) => {
 	//有序列表的序号处理
 	if (isList(element, true)) {
 		//获取前一个元素
@@ -116,7 +283,7 @@ export const orderdListHandle = function (editor: AlexEditor, element: AlexEleme
  * @param editor
  * @param element
  */
-export const commonElementHandle = function (editor: AlexEditor, element: AlexElement) {
+export const commonElementHandle = (editor: AlexEditor, element: AlexElement) => {
 	//图片、视频和链接设置marks
 	if (element.parsedom == 'img' || element.parsedom == 'video' || element.parsedom == 'a') {
 		const marks = {
@@ -167,11 +334,22 @@ export const commonElementHandle = function (editor: AlexEditor, element: AlexEl
 }
 
 /**
- * 元素格式化时处理表格
+ * 元素格式化时处理表格：th转为td
+ * @param editor
+ * @param element
+ */
+export const tableThTdHandle = (_editor: AlexEditor, element: AlexElement) => {
+	if (element.parsedom == 'th') {
+		element.parsedom = 'td'
+	}
+}
+
+/**
+ * 元素格式化时处理表格：格式化表格
  * @param editor
  * @param element
  */
-export const tableHandle = function (editor: AlexEditor, element: AlexElement) {
+export const tableFormatHandle = (editor: AlexEditor, element: AlexElement) => {
 	if (element.parsedom == 'table') {
 		const marks = {
 			'data-editify-element': element.key
@@ -195,16 +373,12 @@ export const tableHandle = function (editor: AlexEditor, element: AlexElement) {
 		const rows = elements.filter(el => {
 			return el.parsedom == 'tr'
 		})
+		//获取表格实际应该的规格
+		const { rowNumber, columnNumber } = getTableSize(rows)
 		//colgroup元素
 		let colgroup = elements.find(el => {
 			return el.parsedom == 'colgroup'
 		})
-		//理论上的col的数量：取最多列数
-		const colNumber = Math.max(
-			...rows.map(row => {
-				return row.children!.length
-			})
-		)
 		//如果colgroup元素存在
 		if (colgroup) {
 			//遍历每个col元素设置默认的width:'auto
@@ -222,8 +396,8 @@ export const tableHandle = function (editor: AlexEditor, element: AlexElement) {
 			})
 			//对缺少的col元素进行补全
 			const length = colgroup.children!.length
-			if (length < colNumber) {
-				for (let i = 0; i < colNumber - length; i++) {
+			if (length < columnNumber) {
+				for (let i = 0; i < columnNumber - length; i++) {
 					const col = new AlexElement(
 						'closed',
 						'col',
@@ -240,7 +414,7 @@ export const tableHandle = function (editor: AlexEditor, element: AlexElement) {
 		//如果colgroup元素不存在则新建
 		else {
 			colgroup = new AlexElement('inblock', 'colgroup', null, null, null)
-			for (let i = colNumber - 1; i >= 0; i--) {
+			for (let i = columnNumber - 1; i >= 0; i--) {
 				const col = new AlexElement(
 					'closed',
 					'col',
@@ -253,41 +427,106 @@ export const tableHandle = function (editor: AlexEditor, element: AlexElement) {
 				editor.addElementTo(col, colgroup)
 			}
 		}
+		//自动补全表格的单元格
+		autocompleteTableCells(editor, rows, rowNumber, columnNumber)
+		//清空表格
 		element.children = []
+		//创建tbody元素
 		const tbody = new AlexElement('inblock', 'tbody', null, null, null)
-		rows.reverse().forEach(row => {
-			//对缺少的列进行补全
-			const length = row.children!.length
-			if (length < colNumber) {
-				for (let i = 0; i < colNumber - length; i++) {
-					const column = new AlexElement('inblock', 'td', null, null, null)
-					const breakElement = new AlexElement('closed', 'br', null, null, null)
-					editor.addElementTo(breakElement, column)
-					editor.addElementTo(column, row, row.children!.length)
-				}
-			}
-			editor.addElementTo(row, tbody)
+		//将rows全部加入表格中
+		rows.forEach(row => {
+			const index = tbody.hasChildren() ? tbody.children!.length : 0
+			editor.addElementTo(row, tbody, index)
 		})
 		editor.addElementTo(tbody, element)
 		editor.addElementTo(colgroup, element)
+		//对表格单元格合并状态进行处理
+		autoHideMergedTableCells(editor, rows)
 	}
-	if (element.parsedom == 'th') {
-		element.parsedom = 'td'
-	}
-	if (element.parsedom == 'td') {
-		//移除列的rowspan和colspan属性
-		if (element.hasMarks()) {
-			if (element.marks!['rowspan']) {
-				delete element.marks!['rowspan']
+}
+
+/**
+ * 元素格式化时处理表格：处理光标在表格隐藏单元格内的情况
+ * @param editor
+ * @param element
+ */
+export const tableRangeMergedHandle = (editor: AlexEditor, element: AlexElement) => {
+	//如果元素是被隐藏的单元格，并且光标在该单元格内
+	if (element.parsedom == 'td' && element.hasMarks() && element.marks!['data-editify-merged'] && editor.range) {
+		//单元格向左查找设置焦点
+		const queryLeftSetRange = (_element: AlexElement, callback: (ele: AlexElement) => void) => {
+			//是否已查找到
+			let success = false
+			//获取前一个单元格
+			let el = editor.getPreviousElement(_element)
+			let tempIndex = 1
+			//如果前一个单元格存在则循环
+			while (el) {
+				//获取单元格的colspan
+				const { colspan } = getCellSpanNumber(el)
+				//如果单元格是跨列的并且是跨当前单元格的
+				if (el.hasMarks() && !el.marks!['data-editify-merged'] && colspan > tempIndex) {
+					success = true
+					callback(el)
+					break
+				}
+				//不是则继续向上查找
+				else {
+					el = editor.getPreviousElement(el)
+					tempIndex++
+				}
+			}
+			return success
+		}
+		//单元格向上查找设置焦点
+		const queryUpSetRange = (_element: AlexElement, callback: (ele: AlexElement) => void) => {
+			//是否已查找到
+			let success = false
+			//单元格在行中的序列
+			const index = _element.parent!.children!.findIndex(item => item.isEqual(_element))
+			//获取前一行元素
+			let el = editor.getPreviousElement(_element.parent!)
+			let tempIndex = 1
+			//如果前一行元素存在则循环
+			while (el) {
+				//获取前一行中同列的单元格
+				const previousColumn = el.children![index]
+				//获取单元格的rowspan
+				const { rowspan } = getCellSpanNumber(previousColumn)
+				//如果单元格是跨行的并且是跨当前单元格的
+				if (previousColumn.hasMarks() && !previousColumn.marks!['data-editify-merged'] && rowspan > tempIndex) {
+					success = true
+					callback(previousColumn)
+					break
+				}
+				//不是则继续向上查找
+				else {
+					el = editor.getPreviousElement(el)
+					tempIndex++
+				}
 			}
-			if (element.marks!['colspan']) {
-				delete element.marks!['colspan']
+			return success
+		}
+		//起点在该单元格下
+		if (element.isContains(editor.range.anchor.element)) {
+			const success = queryLeftSetRange(element, ele => {
+				editor.range!.anchor.moveToEnd(ele)
+			})
+			if (!success) {
+				queryUpSetRange(element, ele => {
+					editor.range!.anchor.moveToEnd(ele)
+				})
 			}
 		}
-		//移除列的display样式
-		if (element.hasStyles()) {
-			if (element.styles!['display']) {
-				delete element.styles!['display']
+		//终点在该单元格下
+		if (element.isContains(editor.range.focus.element)) {
+			const success = queryLeftSetRange(element, ele => {
+				editor.range!.focus.moveToEnd(ele)
+			})
+			if (!success) {
+				queryUpSetRange(element, ele => {
+					editor.range!.focus.moveToEnd(ele)
+				})
 			}
 		}
 	}
@@ -300,7 +539,7 @@ export const tableHandle = function (editor: AlexEditor, element: AlexElement) {
  * @param highlight
  * @param languages
  */
-export const preHandle = function (editor: AlexEditor, element: AlexElement, highlight: boolean, languages: (string | LanguagesItemType)[]) {
+export const preHandle = (editor: AlexEditor, element: AlexElement, highlight: boolean, languages: (string | LanguagesItemType)[]) => {
 	//如果是代码块进行处理
 	if (element.parsedom == 'pre') {
 		const marks = {
@@ -365,7 +604,7 @@ export const preHandle = function (editor: AlexEditor, element: AlexElement, hig
  * @param editor
  * @param element
  */
-export const specialInblockHandle = function (editor: AlexEditor, element: AlexElement) {
+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!)) {

package/src/core/tool.ts

@@ -224,7 +224,7 @@ export type PluginType = (editifyInstance: ComponentInternalInstance, editTrans:
  * @param o2
  * @returns
  */
-export const mergeObject = function (o1: ObjectType, o2: ObjectType) {
+export const mergeObject = (o1: ObjectType, o2: ObjectType) => {
 	if (!DapCommon.isObject(o1) && DapCommon.isObject(o2)) {
 		return null
 	}
@@ -248,7 +248,7 @@ export const mergeObject = function (o1: ObjectType, o2: ObjectType) {
  * @param value
  * @returns
  */
-export const queryHasValue = function (obj: ObjectType, name: string, value?: string | number) {
+export const queryHasValue = (obj: ObjectType, name: string, value?: string | number) => {
 	//如果value不存在则判断是否拥有属性name
 	if (value == null || value == undefined) {
 		return obj.hasOwnProperty(name)
@@ -293,7 +293,7 @@ export const queryHasValue = function (obj: ObjectType, name: string, value?: st
  * @param data
  * @returns
  */
-export const cloneData = function (data: any) {
+export const cloneData = (data: any) => {
 	if (DapCommon.isObject(data) || Array.isArray(data)) {
 		return JSON.parse(JSON.stringify(data))
 	}
@@ -305,7 +305,7 @@ export const cloneData = function (data: any) {
  * @param editTrans
  * @returns
  */
-export const getButtonOptionsConfig = function (editTrans: (key: string) => any): ButtonOptionsConfigType {
+export const getButtonOptionsConfig = (editTrans: (key: string) => any): ButtonOptionsConfigType => {
 	return {
 		//标题配置
 		heading: [
@@ -506,7 +506,7 @@ export const getButtonOptionsConfig = function (editTrans: (key: string) => any)
  * @param editLocale
  * @returns
  */
-export const getToolbarConfig = function (editTrans: (key: string) => any, editLocale: LocaleType): ToolbarConfigType {
+export const getToolbarConfig = (editTrans: (key: string) => any, editLocale: LocaleType): ToolbarConfigType => {
 	return {
 		//是否使用工具条
 		use: true,
@@ -756,7 +756,7 @@ export const getToolbarConfig = function (editTrans: (key: string) => any, editL
  * @param editLocale
  * @returns
  */
-export const getMenuConfig = function (editTrans: (key: string) => any, editLocale: LocaleType): MenuConfigType {
+export const getMenuConfig = (editTrans: (key: string) => any, editLocale: LocaleType): MenuConfigType => {
 	return {
 		//是否使用菜单栏
 		use: true,

package/src/editify/editify.less

@@ -232,6 +232,10 @@
 							cursor: col-resize;
 							user-select: none;
 						}
+
+						&[data-editify-merged] {
+							display: none;
+						}
 					}
 				}
 			}
@@ -261,6 +265,11 @@
 			vertical-align: text-bottom;
 			margin: 0 2px;
 			max-width: 100%;
+			min-width: 100px;
+
+			&:hover {
+				cursor: pointer;
+			}
 		}
 		//视频样式
 		:deep(video) {
@@ -273,6 +282,7 @@
 			object-fit: contain;
 			margin: 0 2px;
 			max-width: 100%;
+			min-width: 100px;
 		}
 		//引用样式
 		:deep(blockquote) {