vue-editify 0.1.37 → 0.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-editify",
-	"version": "0.1.37",
+	"version": "0.1.40",
 	"private": false,
 	"sideEffects": [
 		"*.css"
@@ -17,12 +17,14 @@
 		"lib": "vue-tsc && vite build"
 	},
 	"dependencies": {
-		"alex-editor": "^1.3.37",
+		"alex-editor": "^1.4.6",
 		"dap-util": "^1.5.4",
 		"highlight.js": "^11.8.0",
+		"katex": "^0.16.10",
 		"vue": "^3.4.19"
 	},
 	"devDependencies": {
+		"@types/katex": "^0.16.7",
 		"@types/node": "^20.11.24",
 		"@vitejs/plugin-vue": "^5.0.4",
 		"less": "^3.0.4",

package/src/components/insertImage/insertImage.less

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

package/src/components/insertLink/insertLink.less

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

package/src/components/insertVideo/insertVideo.less

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

package/src/core/function.ts

@@ -1250,12 +1250,8 @@ export const insertVideo = (editor: AlexEditor, value: string) => {
 		null
 	)
 	editor.insertElement(video)
-	const leftSpace = AlexElement.getSpaceElement()
-	const rightSpace = AlexElement.getSpaceElement()
-	editor.addElementAfter(rightSpace, video)
-	editor.addElementBefore(leftSpace, video)
-	editor.range.anchor.moveToEnd(rightSpace)
-	editor.range.focus.moveToEnd(rightSpace)
+	editor.range.anchor.moveToEnd(video)
+	editor.range.focus.moveToEnd(video)
 }
 
 /**
@@ -1384,10 +1380,6 @@ export const insertSeparator = (editor: AlexEditor) => {
 	}
 	const separator = new AlexElement('closed', 'hr', null, null, null)
 	editor.insertElement(separator)
-	const leftSpace = AlexElement.getSpaceElement()
-	const rightSpace = AlexElement.getSpaceElement()
-	editor.addElementAfter(rightSpace, separator)
-	editor.addElementBefore(leftSpace, separator)
-	editor.range.anchor.moveToEnd(rightSpace)
-	editor.range.focus.moveToEnd(rightSpace)
+	editor.range.anchor.moveToEnd(separator)
+	editor.range.focus.moveToEnd(separator)
 }

package/src/core/rule.ts

@@ -144,6 +144,13 @@ export const commonElementHandle = function (editor: AlexEditor, element: AlexEl
 			const spaceText = AlexElement.getSpaceElement()
 			editor.addElementAfter(spaceText, element)
 		}
+		//如果光标在视频上则更新光标位置
+		if (editor.range && element.isContains(editor.range.anchor.element)) {
+			editor.range.anchor.moveToEnd(editor.getNextElement(element)!)
+		}
+		if (editor.range && element.isContains(editor.range.focus.element)) {
+			editor.range.focus.moveToEnd(editor.getNextElement(element)!)
+		}
 	}
 
 	//将code转为span[data-editify-code]

package/src/core/tool.ts

@@ -210,44 +210,14 @@ export type PluginResultType = {
 	menu?: PluginMenuConfigType
 	updateView?: () => void
 	customParseNode?: (element: AlexElement) => AlexElement
+	extraKeepTags?: string[]
 	renderRule?: (el: AlexElement) => void
-	pasteKeepStyles?: ObjectType
-	pasteKeepMarks?: ObjectType
+	pasteKeepMarks?: (el: AlexElement) => ObjectType
+	pasteKeepStyles?: (el: AlexElement) => ObjectType
 }
 
 export type PluginType = (editifyInstance: ComponentInternalInstance, editTrans: (key: string) => any) => PluginResultType
 
-/**
- * 粘贴html时保留的数据
- */
-export const pasteKeepData: ObjectType = {
-	//粘贴html时元素保留的样式（全部元素）
-	marks: {
-		'data-editify-list': ['div'],
-		'data-editify-value': ['div'],
-		'data-editify-code': ['span'],
-		'data-editify-task': ['div'],
-		contenteditable: '*',
-		src: ['img', 'video'],
-		autoplay: ['video'],
-		loop: ['video'],
-		muted: ['video'],
-		href: ['a'],
-		target: ['a'],
-		alt: ['img'],
-		controls: ['video'],
-		name: '*',
-		disabled: '*',
-		colspan: ['td']
-	},
-	//粘贴html时非文本元素保留的样式
-	styles: {
-		'text-indent': '*',
-		'text-align': '*',
-		'line-height': '*'
-	}
-}
-
 /**
  * 对象平替值方法
  * @param o1

package/src/editify/editify.less

@@ -156,7 +156,7 @@
 			}
 		}
 		//代码样式
-		:deep(span[data-editify-code]) {
+		:deep([data-editify-code]) {
 			display: inline-block;
 			padding: 3px 6px;
 			margin: 0 4px;
@@ -380,6 +380,21 @@
 			}
 		}
 
+		//数学公式样式
+		:deep(span[data-editify-mathformula]) {
+			display: inline-block;
+			border: 1px dashed @border-color;
+			padding: 6px 10px;
+			border-radius: 4px;
+			margin: 0 4px;
+			transition: all 200ms;
+
+			&:hover {
+				cursor: pointer;
+				background: @background-dark;
+			}
+		}
+
 		//禁用样式
 		&.editify-disabled {
 			cursor: auto !important;
@@ -387,16 +402,26 @@
 			&.editify-placeholder::before {
 				cursor: auto;
 			}
-
 			:deep(a) {
 				cursor: pointer;
 			}
-
 			:deep(table) {
 				td:not(:last-child)::after {
 					cursor: auto;
 				}
 			}
+			:deep(span[data-editify-mathformula]) {
+				display: inline-block;
+				border: none;
+				padding: 6px 10px;
+				border-radius: none;
+				margin: 0 4px;
+
+				&:hover {
+					cursor: auto;
+					background: none;
+				}
+			}
 		}
 	}
 

package/src/editify/editify.vue

@@ -22,7 +22,7 @@
 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 { 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'
@@ -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,
@@ -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']
 				}
-				el.styles = styles
+				//块元素保留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)!
+				}
+			})
+			//对外的自定义属性和样式保留
+			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的功能

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,7 @@
+.editify-icon-mathformula:before {
+	content: '\e616';
+}
+
 .editify-icon-separator:before {
 	content: '\e6e5';
 }

package/src/index.ts

@@ -18,7 +18,7 @@ const install: FunctionPlugin = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
 //版本号
-const version = '0.1.37'
+const version = '0.1.40'
 
 //导出AlexElement元素
 export { AlexElement } from 'alex-editor'
@@ -27,6 +27,9 @@ export { AlexElement } from 'alex-editor'
 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, hasMathformulaInRange, getMathformulaElementByRange } from './plugins/mathformula'
 
 //导出组件和安装函数
 export { install as default, install, Editify, version }

package/src/locale/en_US.ts

@@ -86,6 +86,7 @@ export const en_US: ObjectType = {
 	defaultLineHeight: 'Default',
 	auto: 'auto',
 	fullScreen: 'Full screen',
+	confirm: 'Confirm',
 
 	//插件语言配置
 	insertAttachment: 'Insert attachment',
@@ -94,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

@@ -86,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
 	//支持的类型数组
@@ -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, {
@@ -131,15 +135,9 @@ export const attachment = (options?: AttachmentOptionsType) => {
 										const attachmentElement = new AlexElement('closed', 'span', marks, null, null)
 										//插入编辑器
 										editor.insertElement(attachmentElement)
-										//创建空文本元素
-										const leftSpace = AlexElement.getSpaceElement()
-										const rightSpace = AlexElement.getSpaceElement()
-										//将空白文本元素插入附件两端
-										editor.addElementBefore(leftSpace, attachmentElement)
-										editor.addElementAfter(rightSpace, attachmentElement)
 										//移动光标到新插入的元素
-										editor.range!.anchor.moveToEnd(rightSpace)
-										editor.range!.focus.moveToEnd(rightSpace)
+										editor.range!.anchor.moveToEnd(attachmentElement)
+										editor.range!.focus.moveToEnd(attachmentElement)
 									})
 									//渲染
 									editor.formatElementStack()
@@ -185,10 +183,16 @@ export const attachment = (options?: AttachmentOptionsType) => {
 				}
 				return el
 			},
-			//span元素粘贴保留data-editify-attachment
-			pasteKeepMarks: {
-				'data-editify-attachment': ['span'],
-				'data-editify-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) => {
@@ -215,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 {