vue-editify 0.1.47 → 0.1.48

package/src/plugins/infoBlock/index.ts

@@ -0,0 +1,238 @@
+import { common as DapCommon, color as DapColor } from 'dap-util'
+import { PluginType } from '../../core/tool'
+import { ComponentInternalInstance, h } from 'vue'
+import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
+import Icon from '../../components/icon/icon.vue'
+import { elementToParagraph, hasPreInRange, hasTableInRange } from '../../core/function'
+import { hasPanelInRange } from '../panel'
+
+export type InfoBlockOptionsType = {
+	//排序
+	sequence?: number
+	//工具提示内容
+	title?: string
+	//按钮是否显示左侧边框
+	leftBorder?: boolean
+	//按钮是否显示右侧边框
+	rightBorder?: boolean
+	//按钮是否禁用
+	disabled?: boolean
+}
+
+/**
+ * 是否信息元素
+ * @param el
+ * @returns
+ */
+export const isInfoBlock = (el: AlexElement) => {
+	return el.parsedom == 'div' && el.hasMarks() && el.marks!['data-editify-info']
+}
+
+/**
+ * 判断某个元素是否在信息元素内
+ * @param el
+ * @returns
+ */
+export const isUnderInfoBlock = (el: AlexElement): boolean => {
+	if (isInfoBlock(el)) {
+		return true
+	}
+	if (el.parent) {
+		return isUnderInfoBlock(el.parent)
+	}
+	return false
+}
+
+/**
+ * 根据某个元素获取所在的信息元素，如果不在信息元素内则返回null
+ * @param el
+ * @returns
+ */
+export const getInfoBlockElement = (el: AlexElement): AlexElement | null => {
+	if (isInfoBlock(el)) {
+		return el
+	}
+	if (el.parent) {
+		return getInfoBlockElement(el.parent)
+	}
+	return null
+}
+
+/**
+ * 选区是否含有信息元素
+ * @param editor
+ * @param dataRangeCaches
+ * @returns
+ */
+export const hasInfoBlockInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+	if (!editor.range) {
+		return false
+	}
+	if (editor.range.anchor.isEqual(editor.range.focus)) {
+		return isUnderInfoBlock(editor.range.anchor.element)
+	}
+	return dataRangeCaches.flatList.some(item => {
+		return isUnderInfoBlock(item.element)
+	})
+}
+
+/**
+ * 选区是否都在信息块内
+ * @param editor
+ * @param dataRangeCaches
+ * @returns
+ */
+export const isRangeInInfoBlock = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+	if (!editor.range) {
+		return false
+	}
+	if (editor.range.anchor.isEqual(editor.range.focus)) {
+		return isUnderInfoBlock(editor.range.anchor.element)
+	}
+	return dataRangeCaches.flatList.every(item => {
+		return isUnderInfoBlock(item.element)
+	})
+}
+
+/**
+ * 选区是否在某个信息元素下，如果是返回该信息元素否则返回null
+ * @param editor
+ * @param dataRangeCaches
+ * @returns
+ */
+export const getInfoBlockElementByRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+	if (!editor.range) {
+		return null
+	}
+	if (editor.range.anchor.element.isEqual(editor.range.focus.element)) {
+		return getInfoBlockElement(editor.range.anchor.element)
+	}
+	const arr = dataRangeCaches.list.map(item => {
+		return getInfoBlockElement(item.element)
+	})
+	let hasNull = arr.some(el => {
+		return el == null
+	})
+	//如果存在null，则表示有的选区元素不在公式元素下，返回null
+	if (hasNull) {
+		return null
+	}
+	//如果只有一个元素，则返回该元素
+	if (arr.length == 1) {
+		return arr[0]!
+	}
+	//默认数组中的元素都相等
+	let flag = true
+	for (let i = 1; i < arr.length; i++) {
+		if (!arr[i]!.isEqual(arr[0]!)) {
+			flag = false
+			break
+		}
+	}
+	//如果相等，则返回该元素
+	if (flag) {
+		return arr[0]
+	}
+	return null
+}
+
+/**
+ * 信息插件
+ * @param options
+ * @returns
+ */
+export const infoBlock = (options?: InfoBlockOptionsType) => {
+	if (!DapCommon.isObject(options)) {
+		options = {}
+	}
+	const plugin: PluginType = (editifyInstance: ComponentInternalInstance, editTrans: (key: string) => any) => {
+		let isDisabled: boolean = false
+		//光标在表格、代码块和面板中则禁用
+		if (editifyInstance.exposed!.editor.value) {
+			isDisabled = hasTableInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasPreInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasPanelInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
+		}
+		return {
+			//插件名称
+			name: 'infoBlock',
+			//菜单项配置
+			menu: {
+				sequence: options!.sequence || 103,
+				extend: {
+					type: 'default',
+					title: options!.title || editTrans('insertInfoBlock'),
+					leftBorder: options!.leftBorder,
+					rightBorder: options!.rightBorder,
+					hideScroll: true,
+					active: editifyInstance.exposed!.editor.value ? isRangeInInfoBlock(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) : false,
+					disabled: isDisabled || options!.disabled,
+					default: () => h(Icon, { value: 'info' }),
+					onOperate: () => {
+						const editor = <AlexEditor>editifyInstance.exposed!.editor.value
+						const dataRangeCaches = <AlexElementsRangeType>editifyInstance.exposed!.dataRangeCaches.value
+						//是否都在引用里
+						const flag = isRangeInInfoBlock(editor, dataRangeCaches)
+						//起点和终点在一起
+						if (editor.range!.anchor.isEqual(editor.range!.focus)) {
+							const block = editor.range!.anchor.element.getBlock()
+							elementToParagraph(block)
+							if (!flag) {
+								block.parsedom = 'div'
+								block.marks = {
+									'data-editify-info': 'true'
+								}
+							}
+						}
+						//起点和终点不在一起
+						else {
+							let blocks: AlexElement[] = []
+							dataRangeCaches.list.forEach(item => {
+								const block = item.element.getBlock()
+								const exist = blocks.some(el => block.isEqual(el))
+								if (!exist) {
+									blocks.push(block)
+								}
+							})
+							blocks.forEach(block => {
+								elementToParagraph(block)
+								if (!flag) {
+									block.parsedom = 'div'
+									block.marks = {
+										'data-editify-info': 'true'
+									}
+								}
+							})
+						}
+						//渲染
+						editor.formatElementStack()
+						editor.domRender()
+						editor.rangeRender()
+					}
+				}
+			},
+			//粘贴保留的属性
+			pasteKeepMarks: (element: AlexElement) => {
+				if (isInfoBlock(element)) {
+					return {
+						'data-editify-info': 'true'
+					}
+				}
+				return {}
+			},
+			renderRule: (el: AlexElement) => {
+				if (isInfoBlock(el)) {
+					const color = DapColor.hex2rgb(editifyInstance.props.color as string)
+					if (el.hasStyles()) {
+						el.styles!['background-color'] = `rgba(${color[0]},${color[1]},${color[2]},0.15)`
+						el.styles!['color'] = editifyInstance.props.color
+					} else {
+						el.styles = {
+							'background-color': `rgba(${color[0]},${color[1]},${color[2]},0.15)`,
+							color: editifyInstance.props.color
+						}
+					}
+				}
+			}
+		}
+	}
+	return plugin
+}

package/src/plugins/mathformula/index.ts

@@ -133,7 +133,6 @@ export const mathformula = (options?: MathformulaOptionsType) => {
 		options = {}
 	}
 	const plugin: PluginType = (editifyInstance: ComponentInternalInstance, editTrans: (key: string) => any) => {
-		//是否禁用该插件按钮
 		let isDisabled: boolean = false
 		//如果光标范围内有链接、代码块则禁用
 		if (editifyInstance.exposed!.editor.value) {
@@ -141,7 +140,6 @@ export const mathformula = (options?: MathformulaOptionsType) => {
 		}
 		//数学公式文本框内置LaTex文本内容
 		let defaultLaTexContent: string = ''
-
 		return {
 			//插件名称
 			name: 'mathformula',
@@ -161,7 +159,7 @@ export const mathformula = (options?: MathformulaOptionsType) => {
 					leftBorder: options!.leftBorder,
 					rightBorder: options!.rightBorder,
 					hideScroll: true,
-					active: editifyInstance.exposed!.editor.value ? hasMathformulaInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) : false,
+					active: editifyInstance.exposed!.editor.value ? !!getMathformulaElementByRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) : false,
 					disabled: isDisabled || options!.disabled,
 					//浮层展开时触发的事件
 					onLayerShow() {

package/src/plugins/panel/index.ts

@@ -0,0 +1,228 @@
+import { common as DapCommon } from 'dap-util'
+import { PluginType } from '../../core/tool'
+import { ComponentInternalInstance, h } from 'vue'
+import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
+import Icon from '../../components/icon/icon.vue'
+import { hasTableInRange } from '../../core/function'
+import { hasMathformulaInRange } from '../mathformula'
+
+export type PanelOptionsType = {
+	//排序
+	sequence?: number
+	//工具提示内容
+	title?: string
+	//按钮是否显示左侧边框
+	leftBorder?: boolean
+	//按钮是否显示右侧边框
+	rightBorder?: boolean
+	//按钮是否禁用
+	disabled?: boolean
+}
+
+/**
+ * 是否面板元素
+ * @param el
+ * @returns
+ */
+export const isPanel = (el: AlexElement) => {
+	return el.parsedom == 'div' && el.hasMarks() && el.marks!['data-editify-panel']
+}
+
+/**
+ * 判断某个元素是否在面板元素内
+ * @param el
+ * @returns
+ */
+export const isUnderPanel = (el: AlexElement): boolean => {
+	if (isPanel(el)) {
+		return true
+	}
+	if (el.parent) {
+		return isUnderPanel(el.parent)
+	}
+	return false
+}
+
+/**
+ * 根据某个元素获取所在的面板元素，如果不在面板元素内则返回null
+ * @param el
+ * @returns
+ */
+export const getPanelElement = (el: AlexElement): AlexElement | null => {
+	if (isPanel(el)) {
+		return el
+	}
+	if (el.parent) {
+		return getPanelElement(el.parent)
+	}
+	return null
+}
+
+/**
+ * 选区是否含有面板元素
+ * @param editor
+ * @param dataRangeCaches
+ * @returns
+ */
+export const hasPanelInRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+	if (!editor.range) {
+		return false
+	}
+	if (editor.range.anchor.isEqual(editor.range.focus)) {
+		return isUnderPanel(editor.range.anchor.element)
+	}
+	return dataRangeCaches.flatList.some(item => {
+		return isUnderPanel(item.element)
+	})
+}
+
+/**
+ * 选区是否在某个面板元素下，如果是返回该面板元素否则返回null
+ * @param editor
+ * @param dataRangeCaches
+ * @returns
+ */
+export const getPanelElementByRange = (editor: AlexEditor, dataRangeCaches: AlexElementsRangeType) => {
+	if (!editor.range) {
+		return null
+	}
+	if (editor.range.anchor.element.isEqual(editor.range.focus.element)) {
+		return getPanelElement(editor.range.anchor.element)
+	}
+	const arr = dataRangeCaches.list.map(item => {
+		return getPanelElement(item.element)
+	})
+	let hasNull = arr.some(el => {
+		return el == null
+	})
+	//如果存在null，则表示有的选区元素不在公式元素下，返回null
+	if (hasNull) {
+		return null
+	}
+	//如果只有一个元素，则返回该元素
+	if (arr.length == 1) {
+		return arr[0]!
+	}
+	//默认数组中的元素都相等
+	let flag = true
+	for (let i = 1; i < arr.length; i++) {
+		if (!arr[i]!.isEqual(arr[0]!)) {
+			flag = false
+			break
+		}
+	}
+	//如果相等，则返回该元素
+	if (flag) {
+		return arr[0]
+	}
+	return null
+}
+
+/**
+ * 面板插件
+ * @param options
+ * @returns
+ */
+export const panel = (options?: PanelOptionsType) => {
+	if (!DapCommon.isObject(options)) {
+		options = {}
+	}
+	const plugin: PluginType = (editifyInstance: ComponentInternalInstance, editTrans: (key: string) => any) => {
+		let isDisabled: boolean = false
+		//光标在表格、面板和数学公式下则禁用
+		if (editifyInstance.exposed!.editor.value) {
+			isDisabled = hasPanelInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasTableInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value) || hasMathformulaInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
+		}
+		return {
+			//插件名称
+			name: 'panel',
+			//菜单项配置
+			menu: {
+				sequence: options!.sequence || 102,
+				extraDisabled: (name: string) => {
+					//如果光标选区内有面板，则禁用有序列表、无需列表、任务列表、引用、代码块、表格和标题菜单
+					if (name == 'orderList' || name == 'unorderList' || name == 'task' || name == 'quote' || name == 'codeBlock' || name == 'table' || name == 'heading') {
+						return hasPanelInRange(editifyInstance.exposed!.editor.value, editifyInstance.exposed!.dataRangeCaches.value)
+					}
+					return false
+				},
+				extend: {
+					type: 'default',
+					title: options!.title || editTrans('insertPanel'),
+					leftBorder: options!.leftBorder,
+					rightBorder: options!.rightBorder,
+					hideScroll: true,
+					active: false,
+					disabled: isDisabled || options!.disabled,
+					default: () => h(Icon, { value: 'panel' }),
+					onOperate: () => {
+						const panelElement = AlexElement.create({
+							type: 'block',
+							parsedom: 'div',
+							marks: {
+								'data-editify-panel': 'true'
+							},
+							children: [
+								{
+									type: 'inblock',
+									parsedom: 'div',
+									behavior: 'block',
+									children: [
+										{
+											type: 'text',
+											textcontent: editTrans('panelTitle')
+										}
+									]
+								},
+								{
+									type: 'inblock',
+									parsedom: 'div',
+									behavior: 'block',
+									children: [
+										{
+											type: 'text',
+											textcontent: editTrans('panelContent')
+										}
+									]
+								}
+							]
+						})
+						//获取编辑器对象
+						const editor = <AlexEditor>editifyInstance.exposed!.editor.value
+						//插入编辑器
+						editor.insertElement(panelElement)
+						//面板后面插入段落
+						const paragraph = AlexElement.create({
+							type: 'block',
+							parsedom: AlexElement.BLOCK_NODE,
+							children: [
+								{
+									type: 'closed',
+									parsedom: 'br'
+								}
+							]
+						})
+						editor.addElementAfter(paragraph, panelElement)
+						//移动光标到新插入的元素
+						editor.range!.anchor.moveToEnd(panelElement.children![0])
+						editor.range!.focus.moveToEnd(panelElement.children![0])
+						//渲染
+						editor.formatElementStack()
+						editor.domRender()
+						editor.rangeRender()
+					}
+				}
+			},
+			//粘贴保留的属性
+			pasteKeepMarks: (element: AlexElement) => {
+				if (isPanel(element)) {
+					return {
+						'data-editify-panel': 'true'
+					}
+				}
+				return {}
+			}
+		}
+	}
+	return plugin
+}