vue-editify 0.1.46 → 0.1.48

package/src/core/rule.ts

@@ -1,7 +1,9 @@
-import { AlexEditor, AlexElement } from 'alex-editor'
+import { AlexEditor, AlexElement, AlexElementCreateConfigType } from 'alex-editor'
 import { LanguagesItemType, getHljsHtml } from '../hljs'
 import { isList, isTask, getTableSize, getCellSpanNumber } from './function'
 import { common as DapCommon } from 'dap-util'
+import { isPanel } from '../plugins/panel'
+import { isInfoBlock } from '../plugins/infoBlock'
 
 /**
  * 自动补全表格行和列
@@ -27,17 +29,19 @@ const autocompleteTableCells = (editor: AlexEditor, rowElements: AlexElement[],
 				let i = 1
 				//补全的数量小于需要补全的数量并且列总数量小于理论数量
 				while (i < colspan && item.parent!.children!.length < columnNumber) {
-					const column = new AlexElement(
-						'inblock',
-						'td',
-						{
+					const column = AlexElement.create({
+						type: 'inblock',
+						parsedom: 'td',
+						marks: {
 							'data-editify-merged': 'true'
 						},
-						null,
-						null
-					)
-					const breakElement = new AlexElement('closed', 'br', null, null, null)
-					editor.addElementTo(breakElement, column)
+						children: [
+							{
+								type: 'closed',
+								parsedom: 'br'
+							}
+						]
+					})
 					editor.addElementAfter(column, item)
 					i++
 				}
@@ -55,17 +59,19 @@ const autocompleteTableCells = (editor: AlexEditor, rowElements: AlexElement[],
 					const nextCell = nextRow.children![index]
 					//根据当前单元格的跨列数补充符合跨列数的隐藏单元格
 					for (let j = 0; j < colspan; j++) {
-						const column = new AlexElement(
-							'inblock',
-							'td',
-							{
+						const column = AlexElement.create({
+							type: 'inblock',
+							parsedom: 'td',
+							marks: {
 								'data-editify-merged': 'true'
 							},
-							null,
-							null
-						)
-						const breakElement = new AlexElement('closed', 'br', null, null, null)
-						editor.addElementTo(breakElement, column)
+							children: [
+								{
+									type: 'closed',
+									parsedom: 'br'
+								}
+							]
+						})
 						if (nextCell) {
 							editor.addElementBefore(column, nextCell)
 						} else {
@@ -84,9 +90,16 @@ const autocompleteTableCells = (editor: AlexEditor, rowElements: AlexElement[],
 		const number = rowElement.children!.length
 		if (number < columnNumber) {
 			for (let i = 0; i < columnNumber - number; i++) {
-				const column = new AlexElement('inblock', 'td', null, null, null)
-				const breakElement = new AlexElement('closed', 'br', null, null, null)
-				editor.addElementTo(breakElement, column)
+				const column = AlexElement.create({
+					type: 'inblock',
+					parsedom: 'td',
+					children: [
+						{
+							type: 'closed',
+							parsedom: 'br'
+						}
+					]
+				})
 				editor.addElementTo(column, rowElement, rowElement.children!.length)
 			}
 		}
@@ -96,13 +109,24 @@ const autocompleteTableCells = (editor: AlexEditor, rowElements: AlexElement[],
 	//判断总行数是否小于实际行数则补全行
 	if (length < rowNumber) {
 		for (let i = 0; i < rowNumber - length; i++) {
-			const row = new AlexElement('inblock', 'tr', null, null, null)
+			const children: AlexElementCreateConfigType[] = []
 			for (let j = 0; j < columnNumber; j++) {
-				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)
+				children.push({
+					type: 'inblock',
+					parsedom: 'td',
+					children: [
+						{
+							type: 'closed',
+							parsedom: 'br'
+						}
+					]
+				})
 			}
+			const row = AlexElement.create({
+				type: 'inblock',
+				parsedom: 'tr',
+				children
+			})
 			rowElements.push(row)
 		}
 	}
@@ -398,41 +422,44 @@ export const tableFormatHandle = (editor: AlexEditor, element: AlexElement) => {
 			const length = colgroup.children!.length
 			if (length < columnNumber) {
 				for (let i = 0; i < columnNumber - length; i++) {
-					const col = new AlexElement(
-						'closed',
-						'col',
-						{
+					const col = AlexElement.create({
+						type: 'closed',
+						parsedom: 'col',
+						marks: {
 							width: 'auto'
-						},
-						null,
-						null
-					)
+						}
+					})
 					editor.addElementTo(col, colgroup, colgroup.children!.length)
 				}
 			}
 		}
 		//如果colgroup元素不存在则新建
 		else {
-			colgroup = new AlexElement('inblock', 'colgroup', null, null, null)
+			const children: AlexElementCreateConfigType[] = []
 			for (let i = columnNumber - 1; i >= 0; i--) {
-				const col = new AlexElement(
-					'closed',
-					'col',
-					{
+				children.push({
+					type: 'closed',
+					parsedom: 'col',
+					marks: {
 						width: 'auto'
-					},
-					null,
-					null
-				)
-				editor.addElementTo(col, colgroup)
+					}
+				})
 			}
+			colgroup = AlexElement.create({
+				type: 'inblock',
+				parsedom: 'colgroup',
+				children
+			})
 		}
 		//自动补全表格的单元格
 		autocompleteTableCells(editor, rows, rowNumber, columnNumber)
 		//清空表格
 		element.children = []
 		//创建tbody元素
-		const tbody = new AlexElement('inblock', 'tbody', null, null, null)
+		const tbody = AlexElement.create({
+			type: 'inblock',
+			parsedom: 'tbody'
+		})
 		//将rows全部加入表格中
 		rows.forEach(row => {
 			const index = tbody.hasChildren() ? tbody.children!.length : 0
@@ -587,7 +614,10 @@ export const preHandle = (editor: AlexEditor, element: AlexElement, highlight: b
 				updateRangeInPre(editor, element, originalTextElements, newElements)
 			} else {
 				//将换行元素加入到pre子元素数组中
-				const breakElement = new AlexElement('closed', 'br', null, null, null)
+				const breakElement = AlexElement.create({
+					type: 'closed',
+					parsedom: 'br'
+				})
 				element.children = [breakElement]
 				breakElement.parent = element
 				if (editor.range) {
@@ -607,7 +637,7 @@ export const preHandle = (editor: AlexEditor, element: AlexElement, highlight: b
 export const specialInblockHandle = (editor: AlexEditor, element: AlexElement) => {
 	if (element.hasChildren()) {
 		element.children!.forEach(el => {
-			if (isList(el, true) || isList(el, false) || isTask(el) || ['blockquote', 'pre', 'table', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'].includes(el.parsedom!)) {
+			if (isList(el, true) || isList(el, false) || isTask(el) || ['blockquote', 'pre', 'table', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'].includes(el.parsedom!) || isPanel(el) || isInfoBlock(el)) {
 				const newEl = el.clone()
 				newEl.type = 'block'
 				const block = element.getBlock()

package/src/editify/editify.less

@@ -404,7 +404,58 @@
 
 			&:hover {
 				cursor: pointer;
-				background: @background-dark;
+				background: @background-darker;
+			}
+		}
+
+		//面板样式
+		:deep(div[data-editify-panel]) {
+			display: block;
+			position: relative;
+			width: 100%;
+			background-color: @background-dark;
+			color: @font-color;
+			border-radius: 4px;
+			margin-bottom: 15px;
+			padding: 10px 10px 1px 10px;
+			border: 1px solid @border-color;
+
+			& > div {
+				margin: 0 0 10px 0;
+				font-size: @font-size;
+
+				&:first-child {
+					margin: 0 0 15px 0;
+					font-size: 18px;
+					border-bottom: 1px solid @border-color;
+					padding-bottom: 8px;
+				}
+			}
+		}
+
+		//信息块样式
+		:deep(div[data-editify-info]) {
+			display: block;
+			position: relative;
+			width: 100%;
+			border-radius: 4px;
+			margin-bottom: 15px;
+			padding: 10px 10px 10px 40px;
+			font-size: @font-size;
+
+			&::before {
+				position: absolute;
+				left: 0;
+				top: 50%;
+				height: 100%;
+				transform: translateY(-50%);
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				content: '\e610';
+				font-family: 'editify-icon' !important;
+				font-size: 1.25em;
+				padding: 0 10px;
 			}
 		}
 

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, tableThTdHandle, tableFormatHandle, tableRangeMergedHandle, preHandle, specialInblockHandle } from '../core/rule'
-import { isTask, elementToParagraph, getMatchElementsByRange, hasTableInRange, hasLinkInRange, hasPreInRange, hasImageInRange, hasVideoInRange } from '../core/function'
+import { isTask, elementToParagraph, getMatchElementByRange, 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,15 +180,15 @@ const handleToolbar = () => {
 	}
 	hideToolbar()
 	nextTick(() => {
-		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' })
+		const table = getMatchElementByRange(editor.value!, dataRangeCaches.value, { parsedom: 'table' })
+		const pre = getMatchElementByRange(editor.value!, dataRangeCaches.value, { parsedom: 'pre' })
+		const link = getMatchElementByRange(editor.value!, dataRangeCaches.value, { parsedom: 'a' })
+		const image = getMatchElementByRange(editor.value!, dataRangeCaches.value, { parsedom: 'img' })
+		const video = getMatchElementByRange(editor.value!, dataRangeCaches.value, { parsedom: 'video' })
 		//显示链接工具条
-		if (links.length == 1) {
+		if (link) {
 			toolbarOptions.value.type = 'link'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${links[0].key}"]`
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${link.key}"]`
 			if (toolbarOptions.value.show) {
 				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
 			} else {
@@ -196,9 +196,9 @@ const handleToolbar = () => {
 			}
 		}
 		//显示图片工具条
-		else if (images.length == 1) {
+		else if (image) {
 			toolbarOptions.value.type = 'image'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${images[0].key}"]`
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${image.key}"]`
 			if (toolbarOptions.value.show) {
 				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
 			} else {
@@ -206,9 +206,9 @@ const handleToolbar = () => {
 			}
 		}
 		//显示视频工具条
-		else if (videos.length == 1) {
+		else if (video) {
 			toolbarOptions.value.type = 'video'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${videos[0].key}"]`
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${video.key}"]`
 			if (toolbarOptions.value.show) {
 				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
 			} else {
@@ -216,9 +216,9 @@ const handleToolbar = () => {
 			}
 		}
 		//显示表格工具条
-		else if (tables.length == 1) {
+		else if (table) {
 			toolbarOptions.value.type = 'table'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${tables[0].key}"]`
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${table.key}"]`
 			if (toolbarOptions.value.show) {
 				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
 			} else {
@@ -226,9 +226,9 @@ const handleToolbar = () => {
 			}
 		}
 		//显示代码块工具条
-		else if (pres.length == 1) {
+		else if (pre) {
 			toolbarOptions.value.type = 'codeBlock'
-			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${pres[0].key}"]`
+			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${pre.key}"]`
 			if (toolbarOptions.value.show) {
 				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
 			} else {
@@ -410,11 +410,11 @@ const documentMouseMove = (e: Event) => {
 	}
 	//表格列宽拖拽
 	if (resizeParams.value.element.parsedom == 'td') {
-		const tables = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'table' })
-		if (tables.length != 1) {
+		const table = getMatchElementByRange(editor.value!, dataRangeCaches.value, { parsedom: 'table' })
+		if (!table) {
 			return
 		}
-		const colgroup = tables[0].children!.find(item => {
+		const colgroup = table.children!.find(item => {
 			return item.parsedom == 'colgroup'
 		})!
 		const index = resizeParams.value.element.parent!.children!.findIndex(el => {
@@ -453,11 +453,11 @@ const documentMouseUp = () => {
 	}
 	//表格列宽拖拽
 	if (resizeParams.value.element.parsedom == 'td') {
-		const tables = getMatchElementsByRange(editor.value!, dataRangeCaches.value, { parsedom: 'table' })
-		if (tables.length != 1) {
+		const table = getMatchElementByRange(editor.value!, dataRangeCaches.value, { parsedom: 'table' })
+		if (!table) {
 			return
 		}
-		const colgroup = tables[0].children!.find(item => {
+		const colgroup = table.children!.find(item => {
 			return item.parsedom == 'colgroup'
 		})!
 		const index = resizeParams.value.element.parent!.children!.findIndex(el => {
@@ -663,14 +663,13 @@ const handleCustomHtmlPaste = async (elements: AlexElement[]) => {
 	}
 	//默认粘贴html
 	else {
-		for (let i = 0; i < elements.length; i++) {
-			//第一个元素会在当前光标所在根级块元素只有一个换行符时进行覆盖
-			if (i == 0) {
-				editor.value!.insertElement(elements[i])
-			} else {
-				editor.value!.insertElement(elements[i], false)
-			}
+		//第一个元素会在当前光标所在根级块元素只有一个换行符时进行覆盖
+		editor.value!.insertElement(elements[0])
+		for (let i = elements.length - 1; i >= 1; i--) {
+			editor.value!.addElementAfter(elements[i], elements[0])
 		}
+		editor.value!.range!.anchor.moveToEnd(elements[elements.length - 1])
+		editor.value!.range!.focus.moveToEnd(elements[elements.length - 1])
 	}
 }
 //重新定义编辑器合并元素的逻辑
@@ -865,6 +864,7 @@ const handleRangeUpdate = () => {
 }
 //编辑器部分删除情景(在编辑器起始处)
 const handleDeleteInStart = (element: AlexElement) => {
+	//根级块转为段落
 	if (element.isBlock()) {
 		elementToParagraph(element)
 	}

package/src/icon/iconfont.css

@@ -1,3 +1,11 @@
+.editify-icon-info:before {
+	content: '\e610';
+}
+
+.editify-icon-panel:before {
+	content: '\e6c0';
+}
+
 .editify-icon-merge-cells-up:before {
 	content: '\e73e';
 }

package/src/index.ts

@@ -12,14 +12,14 @@ export type { MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuI
 export type { ElementMatchConfigType } 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, insertSeparator } from './core/function'
+export { elementIsMatch, getMatchElementByElement, getMatchElementByRange, isList, isTask, elementIsInList, elementIsInTask, hasPreInRange, hasQuoteInRange, hasListInRange, hasTaskInRange, hasLinkInRange, hasTableInRange, hasImageInRange, hasVideoInRange, isRangeInQuote, isRangeInList, isRangeInTask, queryTextStyle, queryTextMark, getRangeText, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setTextStyle, setTextMark, removeTextStyle, removeTextMark, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock, insertSeparator } from './core/function'
 
 //安装函数
 const install: FunctionPlugin = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
 //版本号
-const version = '0.1.46'
+const version = '0.1.48'
 
 //导出AlexElement元素
 export { AlexElement } from 'alex-editor'
@@ -31,6 +31,12 @@ export { attachment, isAttachment, hasAttachmentInRange } from './plugins/attach
 //导出mathformula插件相关的方法和类型
 export type { MathformulaOptionsType } from './plugins/mathformula'
 export { mathformula, isMathformula, isUnderMathformula, getMathformulaElement, hasMathformulaInRange, getMathformulaElementByRange } from './plugins/mathformula'
+//导出panel插件相关的方法和类型
+export type { PanelOptionsType } from './plugins/panel'
+export { panel, isPanel, isUnderPanel, getPanelElement, hasPanelInRange, getPanelElementByRange } from './plugins/panel'
+//导出infoBlock插件相关的方法和类型
+export type { InfoBlockOptionsType } from './plugins/infoBlock'
+export { infoBlock, isInfoBlock, isUnderInfoBlock, getInfoBlockElement, hasInfoBlockInRange, getInfoBlockElementByRange } from './plugins/infoBlock'
 
 //导出组件和安装函数
 export { install as default, install, Editify, version }

package/src/locale/en_US.ts

@@ -104,5 +104,13 @@ export const en_US: ObjectType = {
 	//数学公式插件语言配置
 	insertMathformula: 'Insert mathematical formula',
 	editMathformula: 'Edit mathematical formula',
-	mathformulaPlaceholder: 'Please enter LaTex syntax'
+	mathformulaPlaceholder: 'Please enter LaTex syntax',
+
+	//面板插件语言配置
+	insertPanel: 'Insert Panel',
+	panelTitle: 'Here is the title',
+	panelContent: 'Here is the content',
+
+	//信息插件语言配置
+	insertInfoBlock: 'Insert Information Block'
 }

package/src/locale/zh_CN.ts

@@ -104,5 +104,13 @@ export const zh_CN: ObjectType = {
 	//数学公式插件语言配置
 	insertMathformula: '插入数学公式',
 	editMathformula: '编辑数学公式',
-	mathformulaPlaceholder: '请输入LaTex语法'
+	mathformulaPlaceholder: '请输入LaTex语法',
+
+	//面板插件语言配置
+	insertPanel: '插入面板',
+	panelTitle: '这里是标题',
+	panelContent: '这里是内容',
+
+	//信息插件语言配置
+	insertInfoBlock: '插入信息块'
 }

package/src/plugins/attachment/index.ts

@@ -7,7 +7,7 @@ import Icon from '../../components/icon/icon.vue'
 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 { hasPreInRange } from '../../core/function'
 import { hasMathformulaInRange } from '../mathformula'
 
 export type AttachmentOptionsType = {
@@ -78,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 = 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)
+			isDisabled = hasMathformulaInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasPreInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
 		}
 		return {
 			name: 'attachment',
@@ -88,8 +88,8 @@ export const attachment = (options?: AttachmentOptionsType) => {
 			menu: {
 				sequence: options!.sequence || 100,
 				extraDisabled: (name: string) => {
-					//如果光标选区内有附件则禁用链接菜单、引用菜单、代码块菜单
-					if (name == 'link' || name == 'quote' || name == 'codeBlock') {
+					//如果光标选区内有附件则禁用链接菜单、代码块菜单
+					if (name == 'link' || name == 'codeBlock') {
 						return hasAttachmentInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
 					}
 					return false
@@ -132,7 +132,11 @@ export const attachment = (options?: AttachmentOptionsType) => {
 											'data-editify-attachment-name': name || editTrans('attachmentDefaultName')
 										}
 										//创建元素
-										const attachmentElement = new AlexElement('closed', 'span', marks, null, null)
+										const attachmentElement = AlexElement.create({
+											type: 'closed',
+											parsedom: 'span',
+											marks
+										})
 										//插入编辑器
 										editor.insertElement(attachmentElement)
 										//移动光标到新插入的元素