vue-editify 0.1.40 → 0.1.41

package/src/core/rule.ts

@@ -1,6 +1,5 @@
 import { AlexEditor, AlexElement } from 'alex-editor'
 import { LanguagesItemType, getHljsHtml } from '../hljs'
-import { getColNumbers } from './tool'
 import { isList, isTask } from './function'
 import { common as DapCommon } from 'dap-util'
 
@@ -192,25 +191,55 @@ export const tableHandle = function (editor: AlexEditor, element: AlexElement) {
 			element.styles = styles
 		}
 		const elements = AlexElement.flatElements(element.children!)
+		//所有的行元素
 		const rows = elements.filter(el => {
 			return el.parsedom == 'tr'
 		})
+		//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
 			colgroup.children!.forEach(col => {
+				//如果没有任何标记
 				if (!col.hasMarks()) {
 					col.marks = {
 						width: 'auto'
 					}
-				} else if (!col.marks!['width']) {
+				}
+				//如果没有width标记
+				else if (!col.marks!['width']) {
 					col.marks!['width'] = 'auto'
 				}
 			})
-		} else {
+			//对缺少的col元素进行补全
+			const length = colgroup.children!.length
+			if (length < colNumber) {
+				for (let i = 0; i < colNumber - length; i++) {
+					const col = new AlexElement(
+						'closed',
+						'col',
+						{
+							width: 'auto'
+						},
+						null,
+						null
+					)
+					editor.addElementTo(col, colgroup, colgroup.children!.length)
+				}
+			}
+		}
+		//如果colgroup元素不存在则新建
+		else {
 			colgroup = new AlexElement('inblock', 'colgroup', null, null, null)
-			const colNumber = getColNumbers(rows[0])
 			for (let i = colNumber - 1; i >= 0; i--) {
 				const col = new AlexElement(
 					'closed',
@@ -227,6 +256,16 @@ export const tableHandle = function (editor: AlexEditor, element: AlexElement) {
 		element.children = []
 		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)
 		})
 		editor.addElementTo(tbody, element)
@@ -235,6 +274,23 @@ export const tableHandle = function (editor: AlexEditor, element: AlexElement) {
 	if (element.parsedom == 'th') {
 		element.parsedom = 'td'
 	}
+	if (element.parsedom == 'td') {
+		//移除列的rowspan和colspan属性
+		if (element.hasMarks()) {
+			if (element.marks!['rowspan']) {
+				delete element.marks!['rowspan']
+			}
+			if (element.marks!['colspan']) {
+				delete element.marks!['colspan']
+			}
+		}
+		//移除列的display样式
+		if (element.hasStyles()) {
+			if (element.styles!['display']) {
+				delete element.styles!['display']
+			}
+		}
+	}
 }
 
 /**

package/src/core/tool.ts

@@ -300,27 +300,6 @@ export const cloneData = function (data: any) {
 	return data
 }
 
-/**
- * 根据行元素获取colgroup的col数量
- * @param row
- * @returns
- */
-export const getColNumbers = function (row: AlexElement) {
-	const children = row.children || []
-	let num = 0
-	children.forEach(td => {
-		if (td.hasMarks() && td.marks!.hasOwnProperty('colspan')) {
-			const span = Number(td.marks!.colspan)
-			if (!isNaN(span)) {
-				num += span
-			}
-		} else {
-			num += 1
-		}
-	})
-	return num
-}
-
 /**
  * 获取菜单按钮列表数据配置
  * @param editTrans
@@ -766,7 +745,7 @@ export const getToolbarConfig = function (editTrans: (key: string) => any, editL
 				rightBorder: false
 			}
 		},
-		//（只对文本工具条中的按钮生效）添加额外的按钮禁用判定，回调参数为name，this指向组件实例
+		//（只对文本工具条中的按钮生效）添加额外的按钮禁用判定，回调参数为name
 		extraDisabled: null
 	}
 }
@@ -785,7 +764,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 		tooltip: true,
 		//菜单栏显示模式，支持default/inner/fixed
 		mode: 'default',
-		//添加额外的按钮禁用判定，回调参数为name，this指向组件实例
+		//添加额外的按钮禁用判定，回调参数为name
 		extraDisabled: null,
 		//菜单栏的样式自定义
 		style: null,

package/src/editify/editify.less

@@ -357,7 +357,7 @@
 			color: @font-color-link;
 			transition: all 200ms;
 			position: relative;
-			padding: 0 10px;
+			margin: 0 10px;
 			font-size: 14px;
 			vertical-align: baseline;
 
@@ -388,6 +388,13 @@
 			border-radius: 4px;
 			margin: 0 4px;
 			transition: all 200ms;
+			max-width: 100%;
+
+			.katex,
+			math {
+				width: 100%;
+				overflow: hidden;
+			}
 
 			&:hover {
 				cursor: pointer;

package/src/editify/editify.vue

@@ -24,7 +24,7 @@ import { AlexEditor, AlexElement, AlexElementRangeType, AlexElementsRangeType }
 import { element as DapElement, event as DapEvent, data as DapData, number as DapNumber, color as DapColor } from 'dap-util'
 import { mergeObject, getToolbarConfig, getMenuConfig, MenuConfigType, ObjectType, ToolbarConfigType, PluginResultType } from '../core/tool'
 import { parseList, orderdListHandle, commonElementHandle, tableHandle, preHandle, specialInblockHandle } from '../core/rule'
-import { isTask, elementToParagraph, getCurrentParsedomElement, hasTableInRange, hasLinkInRange, hasPreInRange, hasImageInRange, hasVideoInRange } from '../core/function'
+import { isTask, elementToParagraph, getMatchElementsByRange, hasTableInRange, hasLinkInRange, hasPreInRange, hasImageInRange, hasVideoInRange } from '../core/function'
 import Toolbar from '../components/toolbar/toolbar.vue'
 import Menu from '../components/menu/menu.vue'
 import Layer from '../components/layer/layer.vue'
@@ -180,59 +180,70 @@ const handleToolbar = () => {
 	}
 	hideToolbar()
 	nextTick(() => {
-		const table = getCurrentParsedomElement(editor.value!, dataRangeCaches.value, 'table')
-		const pre = getCurrentParsedomElement(editor.value!, dataRangeCaches.value, 'pre')
-		const link = getCurrentParsedomElement(editor.value!, dataRangeCaches.value, 'a')
-		const image = getCurrentParsedomElement(editor.value!, dataRangeCaches.value, 'img')
-		const video = getCurrentParsedomElement(editor.value!, dataRangeCaches.value, 'video')
-		if (link) {
+		const tables = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'table' })
+		const pres = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'pre' })
+		const links = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'a' })
+		const images = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'img' })
+		const videos = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'video' })
+		//显示链接工具条
+		if (links.length == 1) {
 			toolbarOptions.value.type = 'link'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${link.key}"]`
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${links[0].key}"]`
 			if (toolbarOptions.value.show) {
 				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
-		} else if (image) {
+		}
+		//显示图片工具条
+		else if (images.length == 1) {
 			toolbarOptions.value.type = 'image'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${image.key}"]`
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${images[0].key}"]`
 			if (toolbarOptions.value.show) {
 				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
-		} else if (video) {
+		}
+		//显示视频工具条
+		else if (videos.length == 1) {
 			toolbarOptions.value.type = 'video'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${video.key}"]`
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${videos[0].key}"]`
 			if (toolbarOptions.value.show) {
 				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
-		} else if (table) {
+		}
+		//显示表格工具条
+		else if (tables.length == 1) {
 			toolbarOptions.value.type = 'table'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${table.key}"]`
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${tables[0].key}"]`
 			if (toolbarOptions.value.show) {
 				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
-		} else if (pre) {
+		}
+		//显示代码块工具条
+		else if (pres.length == 1) {
 			toolbarOptions.value.type = 'codeBlock'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${pre.key}"]`
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${pres[0].key}"]`
 			if (toolbarOptions.value.show) {
 				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
-		} else {
+		}
+		//显示文本工具条
+		else {
 			const result = dataRangeCaches.value.flatList.filter((item: AlexElementRangeType) => {
 				return item.element.isText()
 			})
 			if (result.length && !hasTableInRange(editor.value!, dataRangeCaches.value) && !hasPreInRange(editor.value!, dataRangeCaches.value) && !hasLinkInRange(editor.value!, dataRangeCaches.value) && !hasImageInRange(editor.value!, dataRangeCaches.value) && !hasVideoInRange(editor.value!, dataRangeCaches.value)) {
 				toolbarOptions.value.type = 'text'
 				if (toolbarOptions.value.show) {
-					;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
+					;(toolbarRef.value!.$refs.layerRef as InstanceType<typeof Layer>).setPosition()
 				} else {
 					toolbarOptions.value.show = true
 				}
@@ -366,11 +377,11 @@ const documentMouseMove = (e: Event) => {
 	if (!tableColumnResizeParams.value.element) {
 		return
 	}
-	const table = getCurrentParsedomElement(editor.value!, dataRangeCaches.value, 'table')
-	if (!table) {
+	const tables = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'table' })
+	if (tables.length != 1) {
 		return
 	}
-	const colgroup = table.children!.find(item => {
+	const colgroup = tables[0].children!.find(item => {
 		return item.parsedom == 'colgroup'
 	})!
 	const index = tableColumnResizeParams.value.element.parent!.children!.findIndex(el => {
@@ -389,11 +400,11 @@ const documentMouseUp = () => {
 	if (!tableColumnResizeParams.value.element) {
 		return
 	}
-	const table = getCurrentParsedomElement(editor.value!, dataRangeCaches.value, 'table')
-	if (!table) {
+	const tables = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'table' })
+	if (tables.length != 1) {
 		return
 	}
-	const colgroup = table.children!.find(item => {
+	const colgroup = tables[0].children!.find(item => {
 		return item.parsedom == 'colgroup'
 	})!
 	const index = tableColumnResizeParams.value.element.parent!.children!.findIndex(el => {
@@ -466,10 +477,6 @@ const handleCustomHtmlPaste = async (elements: AlexElement[]) => {
 				if (el.marks!['disabled']) {
 					marks['disabled'] = el.marks!['disabled']
 				}
-				//td的colspan属性保留
-				if (el.parsedom == 'td' && el.marks!['colspan']) {
-					marks['colspan'] = el.marks!['colspan']
-				}
 				//图片和视频的src属性保留
 				if (['img', 'video'].includes(el.parsedom!) && el.marks!['src']) {
 					marks['src'] = el.marks!['src']
@@ -543,12 +550,10 @@ const handleCustomHtmlPaste = async (elements: AlexElement[]) => {
 			})
 			//对外的自定义属性和样式保留
 			if (typeof props.pasteKeepMarks == 'function') {
-				const keepMarks = props.pasteKeepMarks(el)
-				marks = mergeObject(marks, keepMarks)!
+				marks = mergeObject(marks, props.pasteKeepMarks(el))!
 			}
 			if (typeof props.pasteKeepStyles == 'function') {
-				const keepStyles = props.pasteKeepStyles(el)
-				styles = mergeObject(styles, keepStyles)!
+				styles = mergeObject(styles, props.pasteKeepStyles(el))!
 			}
 			//将处理后的样式和标记给元素
 			el.marks = marks

package/src/index.ts

@@ -9,16 +9,17 @@ export type { ButtonTypeType, ButtonOptionsItemType, ButtonSelectConfigType, But
 export type { InsertImageUploadErrorType } from './components/insertImage/props'
 export type { InsertVideoUploadErrorType } from './components/insertVideo/props'
 export type { MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuImageButtonType, MenuVideoButtonType, MenuTableButtonType, MenuCustomButtonType, CodeBlockToolbarType, TextToolbarType, ToolbarConfigType, MenuSequenceType, MenuModeType, MenuExtendType, MenuConfigType, PluginType, PluginResultType } from './core/tool'
+export type { ElementMatchConfig } from './core/function'
 
 //导出编辑器操作方法
-export { getParsedomElementByElement, getCurrentParsedomElement, elementIsInList, elementIsInTask, isList, isTask, hasPreInRange, isRangeInPre, hasQuoteInRange, isRangeInQuote, hasListInRange, isRangeInList, hasTaskInRange, isRangeInTask, hasLinkInRange, hasTableInRange, hasImageInRange, hasVideoInRange, queryTextStyle, queryTextMark, getRangeText, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setTextStyle, setTextMark, removeTextStyle, removeTextMark, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock } from './core/function'
+export { elementIsMatch, getMatchElementByElement, getMatchElementsByRange, elementIsInList, elementIsInTask, isList, isTask, hasPreInRange, isRangeInPre, hasQuoteInRange, isRangeInQuote, hasListInRange, isRangeInList, hasTaskInRange, isRangeInTask, hasLinkInRange, hasTableInRange, hasImageInRange, hasVideoInRange, queryTextStyle, queryTextMark, getRangeText, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setTextStyle, setTextMark, removeTextStyle, removeTextMark, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock } from './core/function'
 
 //安装函数
 const install: FunctionPlugin = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
 //版本号
-const version = '0.1.40'
+const version = '0.1.41'
 
 //导出AlexElement元素
 export { AlexElement } from 'alex-editor'

package/src/locale/en_US.ts

@@ -99,5 +99,6 @@ export const en_US: ObjectType = {
 
 	//数学公式插件语言配置
 	insertMathformula: 'Insert mathematical formula',
+	editMathformula: 'Edit mathematical formula',
 	mathformulaPlaceholder: 'Please enter LaTex syntax'
 }

package/src/locale/zh_CN.ts

@@ -99,5 +99,6 @@ export const zh_CN: ObjectType = {
 
 	//数学公式插件语言配置
 	insertMathformula: '插入数学公式',
+	editMathformula: '编辑数学公式',
 	mathformulaPlaceholder: '请输入LaTex语法'
 }

package/src/plugins/mathformula/index.ts

@@ -1,7 +1,6 @@
 import { common as DapCommon } from 'dap-util'
 import { ObjectType, PluginType, cloneData } from '../../core/tool'
 import { ComponentInternalInstance, h } from 'vue'
-
 import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
 import 'katex/dist/katex.css'
 import KaTex from 'katex'

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

@@ -1,6 +1,6 @@
 <template>
 	<div class="editify-mathformula">
-		<div class="editify-mathformula-label">{{ $editTrans('insertMathformula') }}</div>
+		<div class="editify-mathformula-label">{{ props.defaultLaTexContent ? $editTrans('editMathformula') : $editTrans('insertMathformula') }}</div>
 		<textarea class="editify-mathformula-textarea" v-model.trim="latexContent" :placeholder="$editTrans('mathformulaPlaceholder')" @focus="handleInputFocus" @blur="handleInputBlur"></textarea>
 		<div class="editify-mathformula-footer">
 			<span :style="{ color: color || '' }" @click="insertMathformula">{{ $editTrans('confirm') }}</span>