vue-editify 0.1.36 → 0.1.37

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
@@ -825,30 +826,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 +902,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//引用按钮配置
+		//引用
 		quote: {
 			//是否显示此按钮
 			show: true,
@@ -909,6 +911,15 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
+		//分隔线
+		separator: {
+			//是否显示此按钮
+			show: true,
+			//左侧边框是否显示
+			leftBorder: false,
+			//右侧边框是否显示
+			rightBorder: false
+		},
 		//对齐方式
 		align: {
 			//是否显示此工具
@@ -924,7 +935,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//有序列表按钮配置
+		//有序列表
 		orderList: {
 			//是否显示此按钮
 			show: true,
@@ -933,7 +944,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//无序列表按钮配置
+		//无序列表
 		unorderList: {
 			//是否显示此按钮
 			show: true,
@@ -942,7 +953,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//任务列表按钮配置
+		//任务列表
 		task: {
 			//是否显示此按钮
 			show: true,
@@ -951,7 +962,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//粗体按钮配置
+		//粗体
 		bold: {
 			//是否显示此按钮
 			show: true,
@@ -960,7 +971,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//下划线按钮配置
+		//下划线
 		underline: {
 			//是否显示此按钮
 			show: true,
@@ -969,7 +980,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//斜体按钮配置
+		//斜体
 		italic: {
 			//是否显示此按钮
 			show: true,
@@ -978,7 +989,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//删除线按钮配置
+		//删除线
 		strikethrough: {
 			//是否显示此按钮
 			show: true,
@@ -987,7 +998,7 @@ export const getMenuConfig = function (editTrans: (key: string) => any, editLoca
 			//右侧边框是否显示
 			rightBorder: false
 		},
-		//行内代码按钮配置
+		//行内代码
 		code: {
 			//是否显示此按钮
 			show: true,
@@ -1174,7 +1185,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

@@ -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;
 			}

package/src/editify/editify.vue

@@ -23,7 +23,7 @@ import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, pro
 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 { 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'
@@ -261,7 +261,7 @@ const createEditor = () => {
 				orderdListHandle(editor.value!, el)
 			},
 			el => {
-				mediaHandle(editor.value!, el)
+				commonElementHandle(editor.value!, el)
 			},
 			el => {
 				tableHandle(editor.value!, el)
@@ -501,17 +501,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/icon/iconfont.css

@@ -1,3 +1,7 @@
+.editify-icon-separator:before {
+	content: '\e6e5';
+}
+
 .editify-icon-attachment:before {
 	content: '\e689';
 }
@@ -98,14 +102,6 @@
 	content: '\e620';
 }
 
-.editify-icon-width:before {
-	content: '\e674';
-}
-
-.editify-icon-edit:before {
-	content: '\e817';
-}
-
 .editify-icon-table:before {
 	content: '\e6c4';
 }
@@ -166,14 +162,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,12 +18,14 @@ const install: FunctionPlugin = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
 //版本号
-const version = '0.1.36'
+const version = '0.1.37'
 
 //导出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'
 
 //导出组件和安装函数

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',

package/src/locale/zh_CN.ts

@@ -60,6 +60,7 @@ export const zh_CN: ObjectType = {
 	undo: '撤销',
 	redo: '重做',
 	quote: '引用',
+	separator: '分隔线',
 	lineHeight: '行高',
 	indent: '缩进',
 	insertLink: '插入链接',

package/src/plugins/attachment/index.ts

@@ -43,7 +43,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']
 }
 
 /**
@@ -124,23 +124,22 @@ 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()
+										const leftSpace = AlexElement.getSpaceElement()
+										const rightSpace = AlexElement.getSpaceElement()
 										//将空白文本元素插入附件两端
-										editor.addElementAfter(afterText, attachmentElement)
-										editor.addElementBefore(beforeText, attachmentElement)
+										editor.addElementBefore(leftSpace, attachmentElement)
+										editor.addElementAfter(rightSpace, attachmentElement)
 										//移动光标到新插入的元素
-										editor.range!.anchor.moveToStart(afterText)
-										editor.range!.focus.moveToStart(afterText)
+										editor.range!.anchor.moveToEnd(rightSpace)
+										editor.range!.focus.moveToEnd(rightSpace)
 									})
 									//渲染
 									editor.formatElementStack()
@@ -157,12 +156,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 +172,33 @@ 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
+			//span元素粘贴保留data-editify-attachment
 			pasteKeepMarks: {
-				'data-attachment': ['span'],
-				'data-attachment-name': ['span']
+				'data-editify-attachment': ['span'],
+				'data-editify-attachment-name': ['span']
 			},
 			//自定义渲染规范
 			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
 					//前一个元素