vue-editify 0.0.51 → 0.1.1

package/src/core/rule.js

@@ -0,0 +1,239 @@
+import { AlexElement } from 'alex-editor'
+import { getHljsHtml } from '../hljs'
+import { getColNumbers } from './tool'
+import { isList, isTask } from './function'
+
+//更新代码块内的光标位置
+const updateRangeInPre = (editor, element, originalTextElements, newElements) => {
+	if (!editor.range) {
+		return
+	}
+	//如果虚拟光标的起点在代码块内对虚拟光标的起点进行重新定位
+	if (editor.range.anchor.element.getBlock().isEqual(element)) {
+		//获取起点所在文本元素的在所有文本元素中的序列
+		const elIndex = originalTextElements.findIndex(el => editor.range.anchor.element.isEqual(el))
+		//起点在整个代码内容中的位置
+		const offset = originalTextElements.filter((el, i) => i < elIndex).reduce((total, item) => total + item.textContent.length, 0) + editor.range.anchor.offset
+		//获取pre下新的子孙元素中全部的文本元素
+		const newTextElements = AlexElement.flatElements(newElements).filter(el => el.isText() && !el.isEmpty())
+		let i = 0
+		let index = 0
+		//遍历
+		while (i < newTextElements.length) {
+			let newIndex = index + newTextElements[i].textContent.length
+			if (offset >= index && offset <= newIndex) {
+				editor.range.anchor.element = newTextElements[i]
+				editor.range.anchor.offset = offset - index
+				break
+			}
+			i++
+			index = newIndex
+		}
+	}
+	//如果虚拟光标的终点在代码块内需要对虚拟光标的终点进行重新定位
+	if (editor.range.focus.element.getBlock().isEqual(element)) {
+		//获取终点所在文本元素的在所有文本元素中的序列
+		const elIndex = originalTextElements.findIndex(el => editor.range.focus.element.isEqual(el))
+		//终点在整个代码内容中的位置
+		const offset = originalTextElements.filter((el, i) => i < elIndex).reduce((total, item) => total + item.textContent.length, 0) + editor.range.focus.offset
+		//获取全部的新文本元素
+		const newTextElements = AlexElement.flatElements(newElements).filter(el => el.isText() && !el.isEmpty())
+		let i = 0
+		let index = 0
+		//遍历
+		while (i < newTextElements.length) {
+			let newIndex = index + newTextElements[i].textContent.length
+			if (offset >= index && offset <= newIndex) {
+				editor.range.focus.element = newTextElements[i]
+				editor.range.focus.offset = offset - index
+				break
+			}
+			i++
+			index = newIndex
+		}
+	}
+}
+
+//元素格式化时转换ol和li标签
+export const parseList = (editor, element) => {
+	//ol标签和ul标签转为div
+	if (element.parsedom == 'ol' || element.parsedom == 'ul') {
+		if (element.hasChildren()) {
+			element.children.forEach((el, index) => {
+				const newEl = el.clone()
+				newEl.parsedom = 'div'
+				newEl.type = element.type
+				if (!newEl.hasMarks()) {
+					newEl.marks = {}
+				}
+				newEl.marks['data-editify-list'] = element.parsedom
+				//插入到该元素之前
+				editor.addElementBefore(newEl, element)
+			})
+		}
+		element.toEmpty()
+	}
+}
+
+//元素格式化时处理有序列表的序号值
+export const orderdListHandle = function (editor, element) {
+	//有序列表的序号处理
+	if (isList(element, true)) {
+		//获取前一个元素
+		const previousElement = editor.getPreviousElement(element)
+		//如果前一个元素存在并且也是有序列表
+		if (previousElement && isList(previousElement, true)) {
+			const previousValue = Number(previousElement.marks['data-editify-value'])
+			element.marks['data-editify-value'] = previousValue + 1
+		}
+		//前一个元素不是有序列表，则从0开始
+		else {
+			element.marks['data-editify-value'] = 1
+		}
+	}
+}
+
+//元素格式化时处理媒体元素和链接
+export const mediaHandle = function (editor, element) {
+	//图片、视频和链接设置marks
+	if (element.parsedom == 'img' || element.parsedom == 'video' || element.parsedom == 'a') {
+		const marks = {
+			'data-editify-element': element.key
+		}
+		if (element.hasMarks()) {
+			Object.assign(element.marks, marks)
+		} else {
+			element.marks = marks
+		}
+	}
+
+	//视频的特殊处理，两侧无元素时在两侧加上空白文本
+	if (element.parsedom == 'video') {
+		const previousElement = editor.getPreviousElement(element)
+		const newTextElement = editor.getNextElement(element)
+		//如果不存在前一个元素
+		if (!previousElement || previousElement.isEmpty()) {
+			const spaceText = AlexElement.getSpaceElement()
+			editor.addElementBefore(spaceText, element)
+		}
+		//如果不存在后一个元素
+		if (!newTextElement || newTextElement.isEmpty()) {
+			const spaceText = AlexElement.getSpaceElement()
+			editor.addElementAfter(spaceText, element)
+		}
+	}
+}
+
+//元素格式化时处理表格
+export const tableHandle = function (editor, element) {
+	if (element.parsedom == 'table') {
+		const marks = {
+			'data-editify-element': element.key
+		}
+		if (element.hasMarks()) {
+			Object.assign(element.marks, marks)
+		} else {
+			element.marks = marks
+		}
+		const elements = AlexElement.flatElements(element.children)
+		const rows = elements.filter(el => {
+			return el.parsedom == 'tr'
+		})
+		let colgroup = elements.find(el => {
+			return el.parsedom == 'colgroup'
+		})
+		if (colgroup) {
+			colgroup.children.forEach(col => {
+				if (!col.hasMarks()) {
+					col.marks = {
+						width: 'auto'
+					}
+				} else if (!col.marks['width']) {
+					col.marks['width'] = 'auto'
+				}
+			})
+		} else {
+			colgroup = new AlexElement('inblock', 'colgroup', null, null, null)
+			const colNumber = getColNumbers(rows[0])
+			for (let i = colNumber - 1; i >= 0; i--) {
+				const col = new AlexElement(
+					'closed',
+					'col',
+					{
+						width: 'auto'
+					},
+					null,
+					null
+				)
+				editor.addElementTo(col, colgroup)
+			}
+		}
+		element.children = []
+		const tbody = new AlexElement('inblock', 'tbody', null, null, null)
+		rows.reverse().forEach(row => {
+			editor.addElementTo(row, tbody)
+		})
+		editor.addElementTo(tbody, element)
+		editor.addElementTo(colgroup, element)
+	}
+	if (element.parsedom == 'th') {
+		element.parsedom = 'td'
+	}
+}
+
+//元素格式化时处理pre，将pre的内容根据语言进行样式处理
+export const preHandle = function (editor, element, highlight, languages) {
+	//如果是代码块进行处理
+	if (element.parsedom == 'pre') {
+		const marks = {
+			'data-editify-element': element.key
+		}
+		if (element.hasMarks()) {
+			Object.assign(element.marks, marks)
+		} else {
+			element.marks = marks
+		}
+		//高亮处理
+		if (highlight && element.hasChildren()) {
+			//获取语言类型
+			let language = element.marks['data-editify-hljs'] || ''
+			if (language && languages && !languages.includes(language)) {
+				language = ''
+			}
+			//获取pre标签下所有的文本元素
+			const originalTextElements = AlexElement.flatElements(element.children).filter(el => el.isText() && !el.isEmpty())
+			//获取pre下的代码文本值
+			const textContent = originalTextElements.reduce((val, item) => {
+				return val + item.textContent
+			}, '')
+			//将文本元素的内容转为经过hljs处理的内容
+			const html = getHljsHtml(textContent, language)
+			if (html) {
+				//将经过hljs处理的内容转为元素数组
+				const newElements = editor.parseHtml(html)
+				//处理光标位置
+				updateRangeInPre(editor, element, originalTextElements, newElements)
+				//将新文本元素全部加入到pre子元素数组中
+				element.children = newElements
+				newElements.forEach(newEl => {
+					newEl.parent = element
+				})
+			}
+		}
+	}
+}
+
+//元素格式化时处理一些特殊的内部块元素，转为根级块元素
+export const specialInblockHandle = function (editor, element) {
+	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)) {
+				const newEl = el.clone()
+				newEl.type = 'block'
+				const block = element.getBlock()
+				editor.addElementAfter(newEl, block)
+				el.toEmpty()
+			}
+		})
+	}
+}

package/src/core/{index.js → tool.js}

@@ -1,6 +1,5 @@
-import { AlexElement } from 'alex-editor'
-import { getHljsHtml, languages } from '../hljs'
-import Dap from 'dap-util'
+import { common as DapCommon, string as DapString, color as DapColor } from 'dap-util'
+import { languages } from '../hljs'
 
 //粘贴html时保留的数据
 export const pasteKeepData = {
@@ -72,16 +71,6 @@ export const editorProps = {
 		type: Boolean,
 		default: false
 	},
-	//编辑内容高度
-	height: {
-		type: [String, Boolean],
-		default: '600px'
-	},
-	//是否自适应高度
-	autoheight: {
-		type: Boolean,
-		default: false
-	},
 	//是否显示边框
 	border: {
 		type: Boolean,
@@ -92,7 +81,7 @@ export const editorProps = {
 		type: String,
 		default: '#03a8f3',
 		validator(value) {
-			return Dap.common.matchingText(value, 'hex')
+			return DapCommon.matchingText(value, 'hex')
 		}
 	},
 	//视频宽高比
@@ -125,11 +114,6 @@ export const editorProps = {
 		type: Object,
 		default: null
 	},
-	//dom转换时的额外处理
-	customParseNode: {
-		type: Function,
-		default: null
-	},
 	//粘贴html时额外保留的标记（全部元素生效）
 	pasteKeepMarks: {
 		type: Object,
@@ -140,7 +124,12 @@ export const editorProps = {
 		type: Object,
 		default: null
 	},
-	//自定义渲染规则
+	//自定义node转元素时的处理
+	customParseNoe: {
+		type: Function,
+		default: null
+	},
+	//自定义额外的渲染规范
 	renderRules: {
 		type: Array,
 		default: function () {
@@ -149,31 +138,14 @@ export const editorProps = {
 	}
 }
 
-//获取colgroup的col数量
-export const getColNumbers = row => {
-	const children = row?.children || []
-	let num = 0
-	children.forEach(td => {
-		if (td.hasMarks() && td.marks.hasOwnProperty('colspan')) {
-			const span = Number(td.marks.colspan)
-			if (!isNaN(span)) {
-				num += span
-			}
-		} else {
-			num += 1
-		}
-	})
-	return num
-}
-
 //对象平替值方法
-export const mergeObject = (o1, o2) => {
-	if (!Dap.common.isObject(o1) && Dap.common.isObject(o2)) {
+export const mergeObject = function (o1, o2) {
+	if (!DapCommon.isObject(o1) && DapCommon.isObject(o2)) {
 		return null
 	}
 	for (let key in o2) {
 		//如果o1和o2的相同属性都是对象并且不是数组，则继续merge
-		if (Dap.common.isObject(o2[key]) && !Array.isArray(o2[key]) && Dap.common.isObject(o1[key]) && !Array.isArray(o1[key])) {
+		if (DapCommon.isObject(o2[key]) && !Array.isArray(o2[key]) && DapCommon.isObject(o1[key]) && !Array.isArray(o1[key])) {
 			o1[key] = mergeObject(o1[key], o2[key])
 		}
 		//否则直接将o2的值给o1
@@ -184,275 +156,74 @@ export const mergeObject = (o1, o2) => {
 	return o1
 }
 
-//判断是否列表
-export const blockIsList = (element, ordered = false) => {
-	return element.type == 'block' && element.parsedom == 'div' && element.hasMarks() && element.marks['data-editify-list'] == (ordered ? 'ol' : 'ul')
-}
-
-//判断是否任务列表
-export const blockIsTask = element => {
-	return element.type == 'block' && element.parsedom == 'div' && element.hasMarks() && element.marks.hasOwnProperty('data-editify-task')
-}
-
-//将某个块元素转为段落
-export const blockToParagraph = element => {
-	element.marks = null
-	element.styles = null
-	element.parsedom = AlexElement.BLOCK_NODE
-}
-
-//其他元素转为列表
-export const blockToList = (element, ordered = false) => {
-	//如果是列表则返回
-	if (blockIsList(element, ordered)) {
-		return
+//判断对象是否含有某个属性或者属性值是否一致
+export const queryHasValue = function (obj, name, value) {
+	//如果value不存在则判断是否拥有属性name
+	if (value == null || value == undefined) {
+		return obj.hasOwnProperty(name)
 	}
-	//先转为段落
-	blockToParagraph(element)
-	//然后转为列表
-	element.parsedom = 'div'
-	if (!element.hasMarks()) {
-		element.marks = {}
+	//固有的值
+	let ownValue = obj[name]
+	//如果ownValue不存在则直接返回false
+	if (ownValue == null || ownValue == undefined) {
+		return false
 	}
-	element.marks['data-editify-list'] = ordered ? 'ol' : 'ul'
-}
-
-//其他元素转为任务列表
-export const blockToTask = element => {
-	//如果是任务列表则返回
-	if (blockIsTask(element)) {
-		return
+	//如果value是字符串，则先将值转为小写
+	if (typeof value == 'string') {
+		value = value.toLocaleLowerCase()
 	}
-	//先转为段落
-	blockToParagraph(element)
-	//然后转为任务列表
-	element.parsedom = 'div'
-	if (!element.hasMarks()) {
-		element.marks = {}
+	//如果ownValue是字符串，则先将值转为小写
+	if (typeof ownValue == 'string') {
+		ownValue = ownValue.toLocaleLowerCase()
 	}
-	element.marks['data-editify-task'] = 'uncheck'
-}
-
-//元素格式化时转换ol和li标签
-export const parseList = function (element) {
-	//ol标签和ul标签转为div
-	if (element.parsedom == 'ol' || element.parsedom == 'ul') {
-		if (element.hasChildren()) {
-			element.children.forEach((el, index) => {
-				const newEl = el.clone()
-				newEl.parsedom = 'div'
-				newEl.type = 'block'
-				if (!newEl.hasMarks()) {
-					newEl.marks = {}
-				}
-				newEl.marks['data-editify-list'] = element.parsedom
-				if (element.parsedom == 'ol') {
-					newEl.marks['data-editify-value'] = index + 1
-				}
-				//插入到该元素之后
-				this.addElementAfter(newEl, element)
-			})
-		}
-		element.toEmpty()
+	//如果value是rgb或者rgba格式，则去除空格
+	if (typeof value == 'string' && value && (DapCommon.matchingText(value, 'rgb') || DapCommon.matchingText(value, 'rgba'))) {
+		value = DapString.trim(value, true)
 	}
-	//有序列表的序号处理
-	if (element.type == 'block' && element.hasMarks() && element.marks['data-editify-list'] == 'ol') {
-		//获取前一个元素
-		const previousElement = this.getPreviousElement(element)
-		//如果前一个元素存在并且也是有序列表
-		if (previousElement && previousElement.hasMarks() && previousElement.marks['data-editify-list'] == 'ol') {
-			const previousValue = Number(previousElement.marks['data-editify-value'])
-			element.marks['data-editify-value'] = previousValue + 1
-		}
-		//前一个元素不是有序列表，则从0开始
-		else {
-			element.marks['data-editify-value'] = 1
-		}
+	//如果ownValue是rgb或者rgba格式，则去除空格
+	if (typeof ownValue == 'string' && ownValue && (DapCommon.matchingText(ownValue, 'rgb') || DapCommon.matchingText(ownValue, 'rgba'))) {
+		ownValue = DapString.trim(ownValue, true)
 	}
-}
-
-//元素格式化时处理媒体元素和链接
-export const mediaHandle = function (element) {
-	//图片、视频和链接设置marks
-	if (element.parsedom == 'img' || element.parsedom == 'video' || element.parsedom == 'a') {
-		const marks = {
-			'data-editify-element': element.key
-		}
-		if (element.hasMarks()) {
-			Object.assign(element.marks, marks)
-		} else {
-			element.marks = marks
-		}
+	//如果是十六进制值，转为rgb值
+	if (typeof value == 'string' && value && DapCommon.matchingText(value, 'hex')) {
+		const arr = DapColor.hex2rgb(value)
+		value = `rgb(${arr[0]},${arr[1]},${arr[2]})`
 	}
-
-	//视频的特殊处理，两侧无元素时在两侧加上空白文本
-	if (element.parsedom == 'video') {
-		const previousElement = this.getPreviousElement(element)
-		const newTextElement = this.getNextElement(element)
-		//如果不存在前一个元素
-		if (!previousElement || previousElement.isEmpty()) {
-			const spaceText = AlexElement.getSpaceElement()
-			this.addElementBefore(spaceText, element)
-		}
-		//如果不存在后一个元素
-		if (!newTextElement || newTextElement.isEmpty()) {
-			const spaceText = AlexElement.getSpaceElement()
-			this.addElementAfter(spaceText, element)
-		}
+	//如果是十六进制值，转为rgb值
+	if (typeof ownValue == 'string' && ownValue && DapCommon.matchingText(ownValue, 'hex')) {
+		const arr = DapColor.hex2rgb(ownValue)
+		ownValue = `rgb(${arr[0]},${arr[1]},${arr[2]})`
 	}
+	return ownValue == value
 }
 
-//元素格式化时处理表格
-export const tableHandle = function (element) {
-	if (element.parsedom == 'table') {
-		const marks = {
-			'data-editify-element': element.key
-		}
-		if (element.hasMarks()) {
-			Object.assign(element.marks, marks)
-		} else {
-			element.marks = marks
-		}
-		const elements = AlexElement.flatElements(element.children)
-		const rows = elements.filter(el => {
-			return el.parsedom == 'tr'
-		})
-		let colgroup = elements.find(el => {
-			return el.parsedom == 'colgroup'
-		})
-		if (colgroup) {
-			colgroup.children.forEach(col => {
-				if (!col.hasMarks()) {
-					col.marks = {
-						width: 'auto'
-					}
-				} else if (!col.marks['width']) {
-					col.marks['width'] = 'auto'
-				}
-			})
-		} else {
-			colgroup = new AlexElement('inblock', 'colgroup', null, null, null)
-			const colNumber = getColNumbers(rows[0])
-			for (let i = colNumber - 1; i >= 0; i--) {
-				const col = new AlexElement(
-					'closed',
-					'col',
-					{
-						width: 'auto'
-					},
-					null,
-					null
-				)
-				this.addElementTo(col, colgroup)
-			}
-		}
-		element.children = []
-		const tbody = new AlexElement('inblock', 'tbody', null, null, null)
-		rows.reverse().forEach(row => {
-			this.addElementTo(row, tbody)
-		})
-		this.addElementTo(tbody, element)
-		this.addElementTo(colgroup, element)
-	} else if (element.parsedom == 'th') {
-		element.parsedom = 'td'
+//深拷贝函数
+export const cloneData = function (data) {
+	if (DapCommon.isObject(data) || Array.isArray(data)) {
+		return JSON.parse(JSON.stringify(data))
 	}
+	return data
 }
 
-//更新代码块内的光标位置
-const updateRangeInPre = function (element, originalTextElements, newElements) {
-	if (!this.range) {
-		return
-	}
-	//如果虚拟光标的起点在代码块内对虚拟光标的起点进行重新定位
-	if (this.range.anchor.element.getBlock().isEqual(element)) {
-		//获取起点所在文本元素的在所有文本元素中的序列
-		const elIndex = originalTextElements.findIndex(el => this.range.anchor.element.isEqual(el))
-		//起点在整个代码内容中的位置
-		const offset = originalTextElements.filter((el, i) => i < elIndex).reduce((total, item, i) => total + item.textContent.length, 0) + this.range.anchor.offset
-		//获取pre下新的子孙元素中全部的文本元素
-		const newTextElements = AlexElement.flatElements(newElements).filter(el => el.isText() && !el.isEmpty())
-		let i = 0
-		let index = 0
-		//遍历
-		while (i < newTextElements.length) {
-			let newIndex = index + newTextElements[i].textContent.length
-			if (offset >= index && offset <= newIndex) {
-				this.range.anchor.element = newTextElements[i]
-				this.range.anchor.offset = offset - index
-				break
-			}
-			i++
-			index = newIndex
-		}
-	}
-	//如果虚拟光标的终点在代码块内需要对虚拟光标的终点进行重新定位
-	if (this.range.focus.element.getBlock().isEqual(element)) {
-		//获取终点所在文本元素的在所有文本元素中的序列
-		const elIndex = originalTextElements.findIndex(el => this.range.focus.element.isEqual(el))
-		//终点在整个代码内容中的位置
-		const offset = originalTextElements.filter((el, i) => i < elIndex).reduce((total, item, i) => total + item.textContent.length, 0) + this.range.focus.offset
-		//获取全部的新文本元素
-		const newTextElements = AlexElement.flatElements(newElements).filter(el => el.isText() && !el.isEmpty())
-		let i = 0
-		let index = 0
-		//遍历
-		while (i < newTextElements.length) {
-			let newIndex = index + newTextElements[i].textContent.length
-			if (offset >= index && offset <= newIndex) {
-				this.range.focus.element = newTextElements[i]
-				this.range.focus.offset = offset - index
-				break
+//根据行元素获取colgroup的col数量
+export const getColNumbers = function (row) {
+	const children = row?.children || []
+	let num = 0
+	children.forEach(td => {
+		if (td.hasMarks() && td.marks.hasOwnProperty('colspan')) {
+			const span = Number(td.marks.colspan)
+			if (!isNaN(span)) {
+				num += span
 			}
-			i++
-			index = newIndex
-		}
-	}
-}
-
-//元素格式化时处理pre，将pre的内容根据语言进行样式处理
-export const preHandle = function (element, highlight, languages) {
-	//如果是代码块进行处理
-	if ((element.isBlock() || element.isInblock()) && element.isPreStyle()) {
-		const marks = {
-			'data-editify-element': element.key
-		}
-		if (element.hasMarks()) {
-			Object.assign(element.marks, marks)
 		} else {
-			element.marks = marks
-		}
-		//高亮处理
-		if (highlight && element.hasChildren()) {
-			//获取语言类型
-			let language = element.marks['data-editify-hljs'] || ''
-			if (language && languages && !languages.includes(language)) {
-				language = ''
-			}
-			//获取pre标签下所有的文本元素
-			const originalTextElements = AlexElement.flatElements(element.children).filter(el => el.isText() && !el.isEmpty())
-			//获取pre下的代码文本值
-			const textContent = originalTextElements.reduce((val, item) => {
-				return val + item.textContent
-			}, '')
-			//将文本元素的内容转为经过hljs处理的内容
-			const html = getHljsHtml(textContent, language)
-			if (html) {
-				//将经过hljs处理的内容转为元素数组
-				const newElements = this.parseHtml(html)
-				//处理光标位置
-				updateRangeInPre.apply(this, [element, originalTextElements, newElements])
-				//将新文本元素全部加入到pre子元素数组中
-				element.children = newElements
-				newElements.forEach(newEl => {
-					newEl.parent = element
-				})
-			}
+			num += 1
 		}
-	}
+	})
+	return num
 }
 
 //获取菜单按钮列表数据配置
-export const getButtonOptionsConfig = function (editTrans, editLocale) {
+export const getButtonOptionsConfig = function (editTrans) {
 	return {
 		//标题配置
 		heading: [
@@ -771,7 +542,7 @@ export const getToolbarConfig = function (editTrans, editLocale) {
 			//下划线
 			underline: {
 				//是否显示此工具
-				show: false,
+				show: true,
 				//左侧边框是否显示
 				leftBorder: false,
 				//右侧边框是否显示

package/src/index.js

@@ -7,7 +7,7 @@ import './icon/iconfont.css'
 //引入国际化
 import i18n from './locale'
 //版本号
-const version = '0.0.51'
+const version = '0.1.1'
 //安装函数
 const install = (app, props) => {
 	const locale = (props ? props.locale : 'zh_CN') || 'zh_CN'