vue-editify 0.1.36 → 0.1.39

package/src/editify/editify.vue

@@ -22,8 +22,8 @@
 import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
 import { AlexEditor, AlexElement, AlexElementRangeType, AlexElementsRangeType } from 'alex-editor'
 import { element as DapElement, event as DapEvent, data as DapData, number as DapNumber, color as DapColor } from 'dap-util'
-import { pasteKeepData, mergeObject, getToolbarConfig, getMenuConfig, MenuConfigType, ObjectType, ToolbarConfigType, PluginResultType } from '../core/tool'
-import { parseList, orderdListHandle, mediaHandle, tableHandle, preHandle, specialInblockHandle } from '../core/rule'
+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 Toolbar from '../components/toolbar/toolbar.vue'
 import Menu from '../components/menu/menu.vue'
@@ -249,6 +249,18 @@ const createEditor = () => {
 			pluginRules.push(pluginResult.renderRule)
 		}
 	})
+	//注册插件：将插件定义的额外保留的标签数组与配置合并
+	let extraKeepTags: string[] = [...props.extraKeepTags]
+	pluginResultList.value.forEach(pluginResult => {
+		if (pluginResult.extraKeepTags && Array.isArray(pluginResult.extraKeepTags)) {
+			pluginResult.extraKeepTags.forEach(tag => {
+				//如果不包含则加入数组
+				if (!extraKeepTags.includes(tag)) {
+					extraKeepTags.push(tag)
+				}
+			})
+		}
+	})
 	//创建编辑器
 	editor.value = new AlexEditor(contentRef.value!, {
 		value: value.value,
@@ -261,7 +273,7 @@ const createEditor = () => {
 				orderdListHandle(editor.value!, el)
 			},
 			el => {
-				mediaHandle(editor.value!, el)
+				commonElementHandle(editor.value!, el)
 			},
 			el => {
 				tableHandle(editor.value!, el)
@@ -285,7 +297,8 @@ const createEditor = () => {
 		customFilePaste: props.customFilePaste,
 		customHtmlPaste: handleCustomHtmlPaste,
 		customMerge: handleCustomMerge,
-		customParseNode: handleCustomParseNode
+		customParseNode: handleCustomParseNode,
+		extraKeepTags: extraKeepTags
 	})
 	//编辑器渲染后会有一个渲染过程，会改变内容，因此重新获取内容的值来设置value
 	internalModify(editor.value.value)
@@ -435,39 +448,111 @@ const documentClick = (e: Event) => {
 }
 //重新定义编辑器粘贴html
 const handleCustomHtmlPaste = async (elements: AlexElement[]) => {
-	let keepStyles = pasteKeepData.styles
-	let keepMarks = pasteKeepData.marks
-	//注册插件：自定义html粘贴保留
-	pluginResultList.value.forEach(pluginResult => {
-		keepStyles = Object.assign(keepStyles, pluginResult.pasteKeepStyles || {})
-		keepMarks = Object.assign(keepMarks, pluginResult.pasteKeepMarks || {})
-	})
-	keepStyles = Object.assign(keepStyles, props.pasteKeepStyles || {})
-	keepMarks = Object.assign(keepMarks, props.pasteKeepMarks || {})
-	//粘贴html时过滤元素的样式和属性
 	AlexElement.flatElements(elements).forEach(el => {
-		let marks: ObjectType = {}
-		let styles: ObjectType = {}
-		//非文本元素
 		if (!el.isText()) {
-			//对标记进行处理
+			let marks: ObjectType = {}
+			let styles: ObjectType = {}
+			//处理需要保留的标记
 			if (el.hasMarks()) {
-				for (let key in keepMarks) {
-					if (el.marks!.hasOwnProperty(key) && ((Array.isArray(keepMarks[key]) && keepMarks[key].includes(el.parsedom)) || keepMarks[key] == '*')) {
-						marks[key] = el.marks![key]
+				//contenteditable属性保留
+				if (el.marks!['contenteditable']) {
+					marks['contenteditable'] = el.marks!['contenteditable']
+				}
+				//name属性保留
+				if (el.marks!['name']) {
+					marks['name'] = el.marks!['name']
+				}
+				//disabled属性保留
+				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']
+				}
+				//视频的autoplay属性保留
+				if (el.parsedom == 'video' && el.marks!['autoplay']) {
+					marks['autoplay'] = el.marks!['autoplay']
+				}
+				//视频的loop属性保留
+				if (el.parsedom == 'video' && el.marks!['loop']) {
+					marks['loop'] = el.marks!['loop']
+				}
+				//视频的muted属性保留
+				if (el.parsedom == 'video' && el.marks!['muted']) {
+					marks['muted'] = el.marks!['muted']
+				}
+				//视频的controls属性保留
+				if (el.parsedom == 'video' && el.marks!['controls']) {
+					marks['controls'] = el.marks!['controls']
+				}
+				//链接的href属性保留
+				if (el.parsedom == 'a' && el.marks!['href']) {
+					marks['href'] = el.marks!['href']
+				}
+				//链接的target属性保留
+				if (el.parsedom == 'a' && el.marks!['target']) {
+					marks['target'] = el.marks!['target']
+				}
+				//有序和无序列表属性保留
+				if (el.parsedom == 'div' && el.marks!['data-editify-list']) {
+					marks['data-editify-list'] = el.marks!['data-editify-list']
+					//有序列表保留序列号标记
+					if (el.marks!['data-editify-value']) {
+						marks['data-editify-value'] = el.marks!['data-editify-value']
 					}
 				}
-				el.marks = marks
+				//行内代码属性保留
+				if (el.parsedom == AlexElement.TEXT_NODE && el.marks!['data-editify-code']) {
+					marks['data-editify-code'] = el.marks!['data-editify-code']
+				}
+				//任务列表属性保留
+				if (el.parsedom == 'div' && el.marks!['data-editify-task']) {
+					marks['data-editify-task'] = el.marks!['data-editify-task']
+				}
 			}
-			//对样式进行处理
+			//处理需要保留的样式
 			if (el.hasStyles()) {
-				for (let key in keepStyles) {
-					if (el.styles!.hasOwnProperty(key) && ((Array.isArray(keepStyles[key]) && keepStyles[key].includes(el.parsedom)) || keepStyles[key] == '*')) {
-						styles[key] = el.styles![key]
-					}
+				//块元素保留text-indent样式
+				if ((el.isBlock() || el.isInblock()) && el.styles!['text-indent']) {
+					styles['text-indent'] = el.styles!['text-indent']
+				}
+				//块元素保留text-align样式
+				if ((el.isBlock() || el.isInblock()) && el.styles!['text-align']) {
+					styles['text-align'] = el.styles!['text-align']
+				}
+				//块元素保留line-height样式
+				if ((el.isBlock() || el.isInblock()) && el.styles!['line-height']) {
+					styles['line-height'] = el.styles!['line-height']
+				}
+			}
+			//注册插件：自定义属性和样式的保留
+			pluginResultList.value.forEach(pluginResult => {
+				if (typeof pluginResult.pasteKeepMarks == 'function') {
+					const keepMarks = pluginResult.pasteKeepMarks(el)
+					marks = mergeObject(marks, keepMarks)!
+				}
+				if (typeof pluginResult.pasteKeepStyles == 'function') {
+					const keepStyles = pluginResult.pasteKeepStyles(el)
+					styles = mergeObject(styles, keepStyles)!
 				}
-				el.styles = styles
+			})
+			//对外的自定义属性和样式保留
+			if (typeof props.pasteKeepMarks == 'function') {
+				const keepMarks = props.pasteKeepMarks(el)
+				marks = mergeObject(marks, keepMarks)!
+			}
+			if (typeof props.pasteKeepStyles == 'function') {
+				const keepStyles = props.pasteKeepStyles(el)
+				styles = mergeObject(styles, keepStyles)!
 			}
+			//将处理后的样式和标记给元素
+			el.marks = marks
+			el.styles = styles
 		}
 	})
 	//如果使用了自定义粘贴html的功能
@@ -501,17 +586,6 @@ const handleCustomMerge = (ele: AlexElement, preEle: AlexElement) => {
 }
 //针对node转为元素进行额外的处理
 const handleCustomParseNode = (ele: AlexElement) => {
-	if (ele.parsedom == 'code') {
-		ele.parsedom = 'span'
-		const marks = {
-			'data-editify-code': true
-		}
-		if (ele.hasMarks()) {
-			Object.assign(ele.marks!, marks)
-		} else {
-			ele.marks = marks
-		}
-	}
 	//注册插件：自定义元素转换处理
 	pluginResultList.value.forEach(pluginResult => {
 		if (pluginResult.customParseNode) {

package/src/editify/props.ts

@@ -119,14 +119,14 @@ export const EditifyProps = {
 		type: Object as PropType<MenuConfigType>,
 		default: null
 	},
-	//粘贴html时额外保留的标记（全部元素生效）
+	//粘贴html时对非文本元素额外保留标记的自定义处理
 	pasteKeepMarks: {
-		type: Object as PropType<ObjectType>,
+		type: Function as PropType<(el: AlexElement) => ObjectType>,
 		default: null
 	},
-	//粘贴html时额外保留的样式（仅在非文本元素生效）
+	//粘贴html时对非文本元素额外保留样式的自定义处理
 	pasteKeepStyles: {
-		type: Object as PropType<ObjectType>,
+		type: Function as PropType<(el: AlexElement) => ObjectType>,
 		default: null
 	},
 	//自定义node转元素时的处理
@@ -134,6 +134,13 @@ export const EditifyProps = {
 		type: Function as PropType<(el: AlexElement) => AlexElement>,
 		default: null
 	},
+	//node转为元素时需要额外保留的标签数组
+	extraKeepTags: {
+		type: Array as PropType<string[]>,
+		default: function () {
+			return []
+		}
+	},
 	//自定义额外的渲染规范
 	renderRules: {
 		type: Array as PropType<((el: AlexElement) => void)[]>,

package/src/icon/iconfont.css

@@ -1,3 +1,11 @@
+.editify-icon-mathformula:before {
+	content: '\e616';
+}
+
+.editify-icon-separator:before {
+	content: '\e6e5';
+}
+
 .editify-icon-attachment:before {
 	content: '\e689';
 }
@@ -98,14 +106,6 @@
 	content: '\e620';
 }
 
-.editify-icon-width:before {
-	content: '\e674';
-}
-
-.editify-icon-edit:before {
-	content: '\e817';
-}
-
 .editify-icon-table:before {
 	content: '\e6c4';
 }
@@ -166,14 +166,6 @@
 	content: '\e7a1';
 }
 
-.editify-icon-paragraph:before {
-	content: '\e7a3';
-}
-
-.editify-icon-separator:before {
-	content: '\e7a4';
-}
-
 .editify-icon-subscript:before {
 	content: '\e7a5';
 }

package/src/index.ts

@@ -9,9 +9,6 @@ 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 { AttachmentOptionsType } from './plugins/attachment'
-export type { InsertAttachmentUploadErrorType } from './plugins/attachment/insertAttachment/props'
 
 //导出编辑器操作方法
 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'
@@ -21,13 +18,18 @@ const install: FunctionPlugin = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
 //版本号
-const version = '0.1.36'
+const version = '0.1.39'
 
 //导出AlexElement元素
 export { AlexElement } from 'alex-editor'
 
-//导出插件和插件相关方法
+//导出attachment插件相关的方法和类型
+export type { AttachmentOptionsType } from './plugins/attachment'
+export type { InsertAttachmentUploadErrorType } from './plugins/attachment/insertAttachment/props'
 export { attachment, isAttachment, hasAttachmentInRange } from './plugins/attachment'
+//导出mathformula插件相关的方法和类型
+export type { MathformulaOptionsType } from './plugins/mathformula'
+export { mathformula, isMathformula, isUnderMathformula, getMathformulaElement } from './plugins/mathformula'
 
 //导出组件和安装函数
 export { install as default, install, Editify, version }

package/src/locale/en_US.ts

@@ -60,6 +60,7 @@ export const en_US: ObjectType = {
 	undo: 'Undo',
 	redo: 'Redo',
 	quote: 'Quote',
+	separator: 'Separator',
 	lineHeight: 'Line height',
 	indent: 'Indent',
 	insertLink: 'Insert Link',
@@ -85,6 +86,7 @@ export const en_US: ObjectType = {
 	defaultLineHeight: 'Default',
 	auto: 'auto',
 	fullScreen: 'Full screen',
+	confirm: 'Confirm',
 
 	//插件语言配置
 	insertAttachment: 'Insert attachment',
@@ -93,5 +95,9 @@ export const en_US: ObjectType = {
 	attachmentNamePlaceholder: 'Please enter the attachment name',
 	attachmentUrlPlaceholder: 'Please enter the attachment address',
 	attachmentDownloadTitle: 'Click to download attachment',
-	attachmentDefaultName: 'attachment'
+	attachmentDefaultName: 'attachment',
+
+	//数学公式插件语言配置
+	insertMathformula: 'Insert mathematical formula',
+	mathformulaPlaceholder: 'Please enter LaTex syntax'
 }

package/src/locale/zh_CN.ts

@@ -60,6 +60,7 @@ export const zh_CN: ObjectType = {
 	undo: '撤销',
 	redo: '重做',
 	quote: '引用',
+	separator: '分隔线',
 	lineHeight: '行高',
 	indent: '缩进',
 	insertLink: '插入链接',
@@ -85,13 +86,18 @@ export const zh_CN: ObjectType = {
 	defaultLineHeight: '默认行高',
 	auto: '自适应',
 	fullScreen: '全屏',
+	confirm: '确定',
 
-	//插件语言配置
+	//附件插件语言配置
 	insertAttachment: '插入附件',
 	uploadAttachment: '上传附件',
 	remoteAttachment: '远程地址',
 	attachmentNamePlaceholder: '请输入附件名称',
 	attachmentUrlPlaceholder: '请输入附件地址',
 	attachmentDownloadTitle: '点击下载附件',
-	attachmentDefaultName: '附件'
+	attachmentDefaultName: '附件',
+
+	//数学公式插件语言配置
+	insertMathformula: '插入数学公式',
+	mathformulaPlaceholder: '请输入LaTex语法'
 }

package/src/plugins/attachment/index.ts

@@ -8,6 +8,7 @@ import InsertAttachment from './insertAttachment/insertAttachment.vue'
 import { InsertAttachmentUploadErrorType } from './insertAttachment/props'
 import { event as DapEvent, common as DapCommon } from 'dap-util'
 import { hasLinkInRange, hasPreInRange, hasQuoteInRange } from '../../core/function'
+import { hasMathformulaInRange } from '../mathformula'
 
 export type AttachmentOptionsType = {
 	//排序
@@ -18,6 +19,8 @@ export type AttachmentOptionsType = {
 	leftBorder?: boolean
 	//按钮是否显示右侧边框
 	rightBorder?: boolean
+	//按钮是否禁用
+	disabled?: boolean
 	//定义可选择的文件类型，默认不限制类型，设定此参数后选择文件时会自动过滤非符合的文件类型
 	accept?: string
 	//支持的类型数组
@@ -43,7 +46,7 @@ export const isAttachment = (element: AlexElement) => {
 	if (element.isEmpty()) {
 		return false
 	}
-	return element.parsedom == 'span' && element.type == 'closed' && element.hasMarks() && element.marks!['data-attachment']
+	return element.parsedom == 'span' && element.type == 'closed' && element.hasMarks() && element.marks!['data-editify-attachment']
 }
 
 /**
@@ -75,9 +78,9 @@ export const attachment = (options?: AttachmentOptionsType) => {
 	}
 	const plugin: PluginType = (editifyInstance: ComponentInternalInstance, editTrans: (key: string) => any) => {
 		let isDisabled = false
-		//如果光标范围内有链接、代码块和引用则禁用
+		//如果光标范围内有数学公式、链接、代码块和引用则禁用
 		if (editifyInstance.exposed!.editor.value) {
-			isDisabled = hasPreInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasLinkInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasQuoteInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
+			isDisabled = hasMathformulaInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasPreInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasLinkInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasQuoteInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
 		}
 		return {
 			name: 'attachment',
@@ -97,7 +100,8 @@ export const attachment = (options?: AttachmentOptionsType) => {
 					leftBorder: options!.leftBorder,
 					rightBorder: options!.rightBorder,
 					hideScroll: true,
-					disabled: isDisabled,
+					active: false,
+					disabled: isDisabled || options!.disabled,
 					default: () => h(Icon, { value: 'attachment' }),
 					layer: (_name: string, btnInstance: InstanceType<typeof Button>) =>
 						h(InsertAttachment, {
@@ -124,23 +128,16 @@ export const attachment = (options?: AttachmentOptionsType) => {
 									//遍历地址数组
 									urls.forEach(url => {
 										const marks: ObjectType = {
-											'data-attachment': url,
-											'data-attachment-name': name || editTrans('attachmentDefaultName'),
-											contenteditable: 'false'
+											'data-editify-attachment': url,
+											'data-editify-attachment-name': name || editTrans('attachmentDefaultName')
 										}
 										//创建元素
 										const attachmentElement = new AlexElement('closed', 'span', marks, null, null)
 										//插入编辑器
 										editor.insertElement(attachmentElement)
-										//创建空文本元素
-										const beforeText = AlexElement.getSpaceElement()
-										const afterText = AlexElement.getSpaceElement()
-										//将空白文本元素插入附件两端
-										editor.addElementAfter(afterText, attachmentElement)
-										editor.addElementBefore(beforeText, attachmentElement)
 										//移动光标到新插入的元素
-										editor.range!.anchor.moveToStart(afterText)
-										editor.range!.focus.moveToStart(afterText)
+										editor.range!.anchor.moveToEnd(attachmentElement)
+										editor.range!.focus.moveToEnd(attachmentElement)
 									})
 									//渲染
 									editor.formatElementStack()
@@ -157,12 +154,12 @@ export const attachment = (options?: AttachmentOptionsType) => {
 			updateView: () => {
 				const editor = <AlexEditor>editifyInstance.exposed!.editor.value
 				AlexElement.flatElements(editor.stack).forEach(el => {
-					if (el.parsedom == 'span' && el.hasMarks() && el.marks!['data-attachment']) {
+					if (el.parsedom == 'span' && el.hasMarks() && el.marks!['data-editify-attachment']) {
 						DapEvent.off(<HTMLElement>el.elm, 'click')
 						//单击下载
 						DapEvent.on(<HTMLElement>el.elm, 'click', async () => {
 							//获取文件地址
-							const url = el.marks!['data-attachment']
+							const url = el.marks!['data-editify-attachment']
 							//使用fetch读取文件地址
 							const res = await fetch(url, {
 								method: 'GET'
@@ -173,29 +170,39 @@ export const attachment = (options?: AttachmentOptionsType) => {
 							const a = document.createElement('a')
 							a.setAttribute('target', '_blank')
 							a.setAttribute('href', URL.createObjectURL(blob))
-							a.setAttribute('download', el.marks!['data-attachment-name'])
+							a.setAttribute('download', el.marks!['data-editify-attachment-name'])
 							a.click()
 						})
 					}
 				})
 			},
-			//span含有data-attachment的元素设为自闭合元素
+			//span含有data-editify-attachment的元素设为自闭合元素
 			customParseNode: (el: AlexElement) => {
-				if (el.hasMarks() && el.marks!['data-attachment'] && el.parsedom == 'span') {
+				if (el.hasMarks() && el.marks!['data-editify-attachment'] && el.parsedom == 'span') {
 					el.type = 'closed'
 				}
 				return el
 			},
-			//span元素粘贴保留data-attachment
-			pasteKeepMarks: {
-				'data-attachment': ['span'],
-				'data-attachment-name': ['span']
+			//附件文件自定义保留的标记
+			pasteKeepMarks: el => {
+				const marks: ObjectType = {}
+				if (el.parsedom == 'span' && el.hasMarks() && el.marks!['data-editify-attachment']) {
+					marks['data-editify-attachment'] = el.marks!['data-editify-attachment']
+					if (el.marks!['data-editify-attachment-name']) {
+						marks['data-editify-attachment-name'] = el.marks!['data-editify-attachment-name']
+					}
+				}
+				return marks
 			},
 			//自定义渲染规范
 			renderRule: (el: AlexElement) => {
-				if (el.type == 'closed' && el.hasMarks() && el.marks!['data-attachment']) {
+				if (el.hasMarks() && el.marks!['data-editify-attachment']) {
 					//设置title
 					el.marks!['title'] = editTrans('attachmentDownloadTitle')
+					//如果名称没有则设置名称
+					if (!el.marks!['data-editify-attachment-name']) {
+						el.marks!['data-editify-attachment-name'] = editTrans('attachmentDefaultName')
+					}
 					//获取editor对象
 					const editor = <AlexEditor>editifyInstance.exposed!.editor.value
 					//前一个元素
@@ -212,6 +219,13 @@ export const attachment = (options?: AttachmentOptionsType) => {
 						const spaceText = AlexElement.getSpaceElement()
 						editor.addElementAfter(spaceText, el)
 					}
+					//如果光标在元素上则更新光标位置
+					if (editor.range && el.isContains(editor.range.anchor.element)) {
+						editor.range.anchor.moveToEnd(editor.getNextElement(el)!)
+					}
+					if (editor.range && el.isContains(editor.range.focus.element)) {
+						editor.range.focus.moveToEnd(editor.getNextElement(el)!)
+					}
 				}
 			}
 		}

package/src/plugins/attachment/insertAttachment/insertAttachment.less

@@ -130,6 +130,7 @@
 			background-color: transparent;
 			outline: none;
 			box-sizing: border-box;
+			font-family: inherit;
 
 			&::-webkit-input-placeholder,
 			&::placeholder {