vue-editify 0.1.36 → 0.1.39

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-editify",
-	"version": "0.1.36",
+	"version": "0.1.39",
 	"private": false,
 	"sideEffects": [
 		"*.css"
@@ -17,12 +17,14 @@
 		"lib": "vue-tsc && vite build"
 	},
 	"dependencies": {
-		"alex-editor": "^1.3.36",
+		"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/components/menu/menu.vue

@@ -14,7 +14,7 @@ import InsertVideo from '../insertVideo/insertVideo.vue'
 import InsertTable from '../insertTable/insertTable.vue'
 import { h, getCurrentInstance, ref, computed, inject, ComponentInternalInstance, Ref, ComputedRef, defineComponent } from 'vue'
 import { common as DapCommon } from 'dap-util'
-import { getRangeText, setHeading, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setTextStyle, setTextMark, removeTextStyle, removeTextMark, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock, hasPreInRange, hasTableInRange, hasQuoteInRange, hasLinkInRange, isRangeInQuote, isRangeInList, isRangeInTask, queryTextStyle, queryTextMark, getCurrentParsedomElement, hasImageInRange, hasVideoInRange } from '../../core/function'
+import { getRangeText, setHeading, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setTextStyle, setTextMark, removeTextStyle, removeTextMark, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock, hasPreInRange, hasTableInRange, hasQuoteInRange, hasLinkInRange, isRangeInQuote, isRangeInList, isRangeInTask, queryTextStyle, queryTextMark, getCurrentParsedomElement, hasImageInRange, hasVideoInRange, insertSeparator } from '../../core/function'
 import { MenuProps } from './props'
 import { MenuModeType, ObjectType, PluginResultType, MenuExtendType, MenuSequenceType, mergeObject } from '../../core/tool'
 import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
@@ -88,6 +88,14 @@ const quoteConfig = ref<ObjectType>({
 	active: false,
 	disabled: false
 })
+//分隔线按钮配置
+const separatorConfig = ref<ObjectType>({
+	show: props.config.separator!.show,
+	leftBorder: props.config.separator!.leftBorder,
+	rightBorder: props.config.separator!.rightBorder,
+	active: false,
+	disabled: false
+})
 //对齐方式按钮配置
 const alignConfig = ref<ObjectType>({
 	show: props.config.align!.show,
@@ -440,6 +448,13 @@ const handleOperate = (name: string, val: any) => {
 		editor.value.domRender()
 		editor.value.rangeRender()
 	}
+	//插入分隔线
+	else if (name == 'separator') {
+		insertSeparator(editor.value)
+		editor.value.formatElementStack()
+		editor.value.domRender()
+		editor.value.rangeRender()
+	}
 	//设置对齐方式
 	else if (name == 'align') {
 		setAlign(editor.value, dataRangeCaches.value, <string>val)
@@ -1015,6 +1030,23 @@ const MenuItem = defineComponent(
 					() => h(Icon, { value: 'quote' })
 				)
 			}
+			//分隔线按钮
+			if (itemProps.name == 'separator' && separatorConfig.value.show) {
+				return h(
+					Button,
+					{
+						...itemProps,
+						title: $editTrans('separator'),
+						leftBorder: separatorConfig.value.leftBorder,
+						rightBorder: separatorConfig.value.rightBorder,
+						color: props.color,
+						disabled: separatorConfig.value.disabled || selfProps.disabled || disabled.value,
+						active: separatorConfig.value.active,
+						onOperate: handleOperate
+					},
+					() => h(Icon, { value: 'separator' })
+				)
+			}
 			//对齐方式按钮
 			if (itemProps.name == 'align' && alignConfig.value.show) {
 				return h(

package/src/components/tooltip/tooltip.less

@@ -8,8 +8,8 @@
 
 	.editify-tooltip-content {
 		display: block;
-		padding: 6px 10px;
-		font-size: @font-size;
+		padding: 4px 6px;
+		font-size: @font-size-small;
 		white-space: nowrap;
 	}
 

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)
 }
 
 /**
@@ -1371,3 +1367,19 @@ export const insertCodeBlock = (editor: AlexEditor, dataRangeCaches: AlexElement
 		}
 	}
 }
+
+/**
+ * 插入分隔线
+ * @param editor
+ * @param dataRangeCaches
+ * @returns
+ */
+export const insertSeparator = (editor: AlexEditor) => {
+	if (!editor.range) {
+		return
+	}
+	const separator = new AlexElement('closed', 'hr', null, null, null)
+	editor.insertElement(separator)
+	editor.range.anchor.moveToEnd(separator)
+	editor.range.focus.moveToEnd(separator)
+}

package/src/core/rule.ts

@@ -75,10 +75,13 @@ export const parseList = (editor: AlexEditor, element: AlexElement) => {
 				const newEl = el.clone()
 				newEl.parsedom = 'div'
 				newEl.type = element.type
-				if (!newEl.hasMarks()) {
-					newEl.marks = {}
+				if (newEl.hasMarks()) {
+					newEl.marks!['data-editify-list'] = element.parsedom
+				} else {
+					newEl.marks = {
+						'data-editify-list': element.parsedom
+					}
 				}
-				newEl.marks!['data-editify-list'] = element.parsedom
 				//插入到该元素之前
 				editor.addElementBefore(newEl, element)
 			})
@@ -110,11 +113,11 @@ export const orderdListHandle = function (editor: AlexEditor, element: AlexEleme
 }
 
 /**
- * 元素格式化时处理媒体元素和链接
+ * 元素格式化时处理常规元素（图片、视频、分隔线、行内代码）
  * @param editor
  * @param element
  */
-export const mediaHandle = function (editor: AlexEditor, element: AlexElement) {
+export const commonElementHandle = function (editor: AlexEditor, element: AlexElement) {
 	//图片、视频和链接设置marks
 	if (element.parsedom == 'img' || element.parsedom == 'video' || element.parsedom == 'a') {
 		const marks = {
@@ -127,20 +130,40 @@ export const mediaHandle = function (editor: AlexEditor, element: AlexElement) {
 		}
 	}
 
-	//视频的特殊处理，两侧无元素时在两侧加上空白文本
-	if (element.parsedom == 'video') {
+	//视频或者分隔线的特殊处理，两侧无元素时在两侧加上空白文本
+	if (element.parsedom == 'video' || element.parsedom == 'hr') {
 		const previousElement = editor.getPreviousElement(element)
 		const newTextElement = editor.getNextElement(element)
-		//如果不存在前一个元素
-		if (!previousElement || previousElement.isEmpty()) {
+		//如果不存在前一个元素或者前一个元素不是空白元素则设置空白元素
+		if (!previousElement || !previousElement.isSpaceText()) {
 			const spaceText = AlexElement.getSpaceElement()
 			editor.addElementBefore(spaceText, element)
 		}
-		//如果不存在后一个元素
-		if (!newTextElement || newTextElement.isEmpty()) {
+		//如果不存在后一个元素或者后一个元素不是空白元素则设置空白元素
+		if (!newTextElement || !newTextElement.isSpaceText()) {
 			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]
+	if (element.parsedom == 'code') {
+		element.parsedom = 'span'
+		const marks = {
+			'data-editify-code': true
+		}
+		if (element.hasMarks()) {
+			Object.assign(element.marks!, marks)
+		} else {
+			element.marks = marks
+		}
 	}
 }
 

package/src/core/tool.ts

@@ -167,6 +167,7 @@ export type MenuConfigType = {
 	heading?: MenuDisplayButtonType
 	indent?: MenuSelectButtonType
 	quote?: MenuButtonType
+	separator?: MenuButtonType
 	align?: MenuSelectButtonType
 	orderList?: MenuButtonType
 	unorderList?: MenuButtonType
@@ -209,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
@@ -825,30 +796,31 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			heading: 2,
 			indent: 3,
 			quote: 4,
-			align: 5,
-			orderList: 6,
-			unorderList: 7,
-			task: 8,
-			bold: 9,
-			underline: 10,
-			italic: 11,
-			strikethrough: 12,
-			code: 13,
-			super: 14,
-			sub: 15,
-			formatClear: 16,
-			fontSize: 17,
-			fontFamily: 18,
-			lineHeight: 19,
-			foreColor: 20,
-			backColor: 21,
-			link: 22,
-			image: 23,
-			video: 24,
-			table: 25,
-			codeBlock: 26,
-			sourceView: 27,
-			fullScreen: 28
+			separator: 5,
+			align: 6,
+			orderList: 7,
+			unorderList: 8,
+			task: 9,
+			bold: 10,
+			underline: 11,
+			italic: 12,
+			strikethrough: 13,
+			code: 14,
+			super: 15,
+			sub: 16,
+			formatClear: 17,
+			fontSize: 18,
+			fontFamily: 19,
+			lineHeight: 20,
+			foreColor: 21,
+			backColor: 22,
+			link: 23,
+			image: 24,
+			video: 25,
+			table: 26,
+			codeBlock: 27,
+			sourceView: 28,
+			fullScreen: 29
 		},
 		//撤销按钮配置
 		undo: {
@@ -900,7 +872,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//引用按钮配置
+		//引用
 		quote: {
 			//是否显示此按钮
 			show: true,
@@ -909,6 +881,15 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
+		//分隔线
+		separator: {
+			//是否显示此按钮
+			show: true,
+			//左侧边框是否显示
+			leftBorder: false,
+			//右侧边框是否显示
+			rightBorder: false
+		},
 		//对齐方式
 		align: {
 			//是否显示此工具
@@ -924,7 +905,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//有序列表按钮配置
+		//有序列表
 		orderList: {
 			//是否显示此按钮
 			show: true,
@@ -933,7 +914,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//无序列表按钮配置
+		//无序列表
 		unorderList: {
 			//是否显示此按钮
 			show: true,
@@ -942,7 +923,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//任务列表按钮配置
+		//任务列表
 		task: {
 			//是否显示此按钮
 			show: true,
@@ -951,7 +932,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//粗体按钮配置
+		//粗体
 		bold: {
 			//是否显示此按钮
 			show: true,
@@ -960,7 +941,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//下划线按钮配置
+		//下划线
 		underline: {
 			//是否显示此按钮
 			show: true,
@@ -969,7 +950,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//斜体按钮配置
+		//斜体
 		italic: {
 			//是否显示此按钮
 			show: true,
@@ -978,7 +959,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//删除线按钮配置
+		//删除线
 		strikethrough: {
 			//是否显示此按钮
 			show: true,
@@ -987,7 +968,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//行内代码按钮配置
+		//行内代码
 		code: {
 			//是否显示此按钮
 			show: true,
@@ -1174,7 +1155,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//是否显示此工具
 			show: false,
 			//左侧边框是否显示
-			leftBorder: false,
+			leftBorder: true,
 			//右侧边框是否显示
 			rightBorder: false
 		},

package/src/css/base.less

@@ -2,6 +2,8 @@
 @triangle-size: 6px;
 //编辑器内的默认字体大小
 @font-size: 14px;
+//较小的字体（工具提示等）
+@font-size-small: 12px;
 //字体颜色
 @font-color: #555;
 //较浅的字体颜色（副文本颜色）

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;
@@ -285,6 +285,15 @@
 			color: @font-color-light;
 			border-radius: 0;
 		}
+		//分隔线样式
+		:deep(hr) {
+			display: block;
+			width: 100%;
+			height: 1px;
+			background-color: @font-color-disabled;
+			border: none;
+			margin: 10px 0;
+		}
 		//任务列表样式
 		:deep(div[data-editify-task]) {
 			margin-bottom: 15px;
@@ -343,7 +352,7 @@
 		}
 
 		//附件样式
-		:deep(span[data-attachment]) {
+		:deep(span[data-editify-attachment]) {
 			display: inline;
 			color: @font-color-link;
 			transition: all 200ms;
@@ -360,7 +369,7 @@
 			}
 			//附件名称
 			&::after {
-				content: attr(data-attachment-name);
+				content: attr(data-editify-attachment-name);
 				margin-left: 6px;
 				font-size: inherit;
 			}