vue-editify 0.2.14 → 0.2.15

package/src/feature/lineHeight.ts

@@ -0,0 +1,165 @@
+import { computed, defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
+import { common as DapCommon } from 'dap-util'
+import { MenuDisplayButtonType } from '@/core/tool'
+import { hasPreInRange, setLineHeight } from '@/core/function'
+import { Button, ButtonOptionsItemType } from '@/components/button'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'lineHeight'
+
+/**
+ * 工具栏 - 行高
+ */
+export const LineHeightToolbarButton = defineComponent(
+	(props, { expose }) => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
+		const $editTrans = inject<(key: string) => any>('$editTrans')!
+
+		const btnRef = ref<InstanceType<typeof Button> | null>(null)
+
+		const selectVal = computed<string | number>(() => {
+			const findHeightItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
+				let val: string | number | ButtonOptionsItemType = item
+				if (DapCommon.isObject(item)) {
+					val = (item as ButtonOptionsItemType).value!
+				}
+				return dataRangeCaches.value.list.every(el => {
+					if (el.element.isBlock() || el.element.isInblock()) {
+						return el.element.hasStyles() && el.element.styles!['line-height'] == val
+					}
+					const block = el.element.getBlock()
+					const inblock = el.element.getInblock()
+					if (inblock) {
+						return inblock.hasStyles() && inblock.styles!['line-height'] == val
+					}
+					return block.hasStyles() && block.styles!['line-height'] == val
+				})
+			})
+			return findHeightItem ? (DapCommon.isObject(findHeightItem) ? ((findHeightItem as ButtonOptionsItemType).value as string | number) : (findHeightItem as string | number)) : (props.config.defaultValue as string | number)
+		})
+
+		expose({
+			btnRef
+		})
+
+		return () => {
+			return props.config.show
+				? h(Button, {
+						ref: btnRef,
+						name: FEATURE_NAME,
+						type: 'display',
+						title: $editTrans('lineHeight'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						leftBorder: props.config.leftBorder,
+						rightBorder: props.config.rightBorder,
+						active: false,
+						disabled: props.config.disabled,
+						displayConfig: {
+							options: props.config.options,
+							value: selectVal.value,
+							width: props.config.width,
+							maxHeight: props.config.maxHeight
+						},
+						onOperate: (_name: string, val: string) => {
+							setLineHeight(editor.value, dataRangeCaches.value, val)
+							editor.value.formatElementStack()
+							editor.value.domRender()
+							editor.value.rangeRender()
+						}
+				  })
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuDisplayButtonType>,
+			tooltip: Boolean
+		}
+	}
+)
+
+/**
+ * 菜单栏 - 行高
+ */
+export const LineHeightMenuButton = defineComponent(
+	props => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
+		const $editTrans = inject<(key: string) => any>('$editTrans')!
+		const isSourceView = inject<Ref<boolean>>('isSourceView')!
+		const rangeKey = inject<Ref<number | null>>('rangeKey')!
+
+		const selectVal = computed<string>(() => {
+			const findHeightItem = props.config.options!.find((item: string | number | ButtonOptionsItemType) => {
+				let val: string | number | ButtonOptionsItemType = item
+				if (DapCommon.isObject(item)) {
+					val = (item as ButtonOptionsItemType).value!
+				}
+				if (rangeKey.value && editor.value.range && editor.value.range.anchor.isEqual(editor.value.range!.focus)) {
+					const block = editor.value.range!.anchor.element.getBlock()
+					return block.hasStyles() && block.styles!['line-height'] == val
+				}
+				return dataRangeCaches.value.list.every(el => {
+					if (el.element.isBlock() || el.element.isInblock()) {
+						return el.element.hasStyles() && el.element.styles!['line-height'] == val
+					}
+					const block = el.element.getBlock()
+					const inblock = el.element.getInblock()
+					if (inblock) {
+						return inblock.hasStyles() && inblock.styles!['line-height'] == val
+					}
+					return block.hasStyles() && block.styles!['line-height'] == val
+				})
+			})
+			return findHeightItem ? (DapCommon.isObject(findHeightItem) ? ((findHeightItem as ButtonOptionsItemType).value as string) : (findHeightItem as string)) : (props.config.defaultValue as string)
+		})
+
+		return () => {
+			return props.config.show
+				? h(Button, {
+						name: FEATURE_NAME,
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						type: 'display',
+						displayConfig: {
+							options: props.config.options,
+							value: selectVal.value,
+							width: props.config.width,
+							maxHeight: props.config.maxHeight
+						},
+						title: $editTrans('lineHeight'),
+						leftBorder: props.config.leftBorder,
+						rightBorder: props.config.rightBorder,
+						disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+						active: false,
+						onOperate: (_name, val) => {
+							setLineHeight(editor.value, dataRangeCaches.value, <string | number>val)
+							editor.value.formatElementStack()
+							editor.value.domRender()
+							editor.value.rangeRender()
+						}
+				  })
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuDisplayButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/link.ts

@@ -0,0 +1,149 @@
+import { computed, defineComponent, h, inject, PropType, ref, Ref } from 'vue'
+import { UpdateLink } from '@/components/updateLink'
+import { getMatchElementByRange, getRangeText, hasAttachmentInRange, hasLinkInRange, hasMathformulaInRange, hasPreInRange, insertLink } from '@/core/function'
+import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
+import { Button } from '@/components/button'
+import { Icon } from '@/components/icon'
+import { InsertLink } from '@/components/insertLink'
+import { MenuSelectButtonType } from '@/core/tool'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'link'
+
+/**
+ * 工具栏 - 编辑链接
+ */
+export const linkToolbar = defineComponent(
+	props => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
+
+		const preset = computed(() => {
+			const link = getMatchElementByRange(editor.value, dataRangeCaches.value, { parsedom: 'a' })
+			if (link) {
+				return {
+					url: link.marks!['href'],
+					newOpen: link.marks!['target'] == '_blank'
+				}
+			}
+			return {
+				url: '',
+				newOpen: false
+			}
+		})
+
+		return () => {
+			return h(UpdateLink, {
+				color: props.color,
+				toolbar: true,
+				presetNewOpen: preset.value.newOpen,
+				presetUrl: preset.value.url,
+				onModify: (url: string, newOpen: boolean) => {
+					if (!url) {
+						return
+					}
+					const link = getMatchElementByRange(editor.value, dataRangeCaches.value, { parsedom: 'a' })
+					if (link) {
+						link.marks!.href = url
+						if (newOpen) {
+							link.marks!.target = '_blank'
+						} else {
+							delete link.marks!.target
+						}
+						editor.value.formatElementStack()
+						editor.value.domRender()
+					}
+				},
+				onRemove: () => {
+					const link = getMatchElementByRange(editor.value, dataRangeCaches.value, { parsedom: 'a' })
+					if (link) {
+						link.parsedom = AlexElement.TEXT_NODE
+						delete link.marks!['target']
+						delete link.marks!['href']
+						delete link.marks!['data-editify-element']
+						editor.value.formatElementStack()
+						editor.value.domRender()
+						editor.value.rangeRender()
+					}
+				}
+			})
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String
+		}
+	}
+)
+
+/**
+ * 菜单栏 - 插入链接
+ */
+export const LinkMenuButton = defineComponent(
+	props => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
+		const $editTrans = inject<(key: string) => any>('$editTrans')!
+		const isSourceView = inject<Ref<boolean>>('isSourceView')!
+
+		const btnRef = ref<InstanceType<typeof Button> | null>(null)
+
+		const presetText = computed<string>(() => getRangeText(dataRangeCaches.value))
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							ref: btnRef,
+							name: FEATURE_NAME,
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							type: 'select',
+							hideScroll: true,
+							title: $editTrans('insertLink'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: false,
+							disabled: props.disabled || isSourceView.value || hasLinkInRange(editor.value, dataRangeCaches.value) || hasPreInRange(editor.value, dataRangeCaches.value) || hasAttachmentInRange(editor.value, dataRangeCaches.value) || hasMathformulaInRange(editor.value, dataRangeCaches.value) || props.config.disabled
+						},
+						{
+							default: () =>
+								h(Icon, {
+									value: 'link'
+								}),
+							layer: () =>
+								h(InsertLink, {
+									color: props.color,
+									presetText: presetText.value,
+									onInsert: (text: string, url: string, newOpen: boolean) => {
+										if (!url) {
+											return
+										}
+										insertLink(editor.value, text, url, newOpen)
+										editor.value.formatElementStack()
+										editor.value.domRender()
+										editor.value.rangeRender()
+										btnRef.value!.show = false
+									}
+								})
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuSelectButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/mathformula.ts

@@ -0,0 +1,147 @@
+import { computed, defineComponent, h, inject, PropType, ref, Ref } from 'vue'
+import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
+import 'katex/dist/katex.css'
+import KaTex from 'katex'
+import { MenuMathformulaButtonType } from '@/core/tool'
+import { Button } from '@/components/button'
+import { getMatchElementByRange, hasLinkInRange, hasPreInRange } from '@/core/function'
+import { Icon } from '@/components/icon'
+import { InsertMathformula } from '@/components/insertMathformula'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'mathformula'
+
+/**
+ * 数学公式额外保留的标签
+ */
+export const extraKeepTagsForMathformula = ['math', 'mrow', 'mi', 'mo', 'mn', 'msup', 'msub', 'mfrac', 'msqrt', 'mroot', 'munder', 'mover', 'munderover', 'mtable', 'mtr', 'mtd', 'mtext', 'mspace', 'mmultiscripts', 'menclose', 'mglyph', 'maction', 'maligngroup', 'malignmark', 'mprescripts', 'none', 'mpadded', 'ms', 'mphantom', 'mstyle', 'merror', 'mscarries', 'mscarry', 'msline', 'msgroup', 'msrow', 'mscolumn', 'mstack', 'mlongdiv', 'mlabeledtr', 'mlabeledmultiscripts', 'semantics', 'msubsup']
+
+/**
+ * 菜单栏 - 插入数学公式
+ */
+export const MathformulaMenuButton = defineComponent(
+	props => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
+		const $editTrans = inject<(key: string) => any>('$editTrans')!
+		const isSourceView = inject<Ref<boolean>>('isSourceView')!
+
+		const btnRef = ref<InstanceType<typeof Button> | null>(null)
+
+		const defaultLaTexContent = computed<string>(() => {
+			//获取选区所在的数学公式元素
+			const mathformulaElement = getMatchElementByRange(editor.value, dataRangeCaches.value, {
+				parsedom: 'span',
+				marks: {
+					'data-editify-mathformula': true
+				}
+			})
+			if (mathformulaElement) {
+				return mathformulaElement.marks!['data-editify-mathformula'] || ''
+			}
+			return ''
+		})
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							ref: btnRef,
+							name: FEATURE_NAME,
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							type: 'select',
+							hideScroll: true,
+							title: $editTrans('insertMathformula'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: !!getMatchElementByRange(editor.value, dataRangeCaches.value, {
+								parsedom: 'span',
+								marks: {
+									'data-editify-mathformula': true
+								}
+							}),
+							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || hasLinkInRange(editor.value, dataRangeCaches.value) || props.config.disabled
+						},
+						{
+							default: () =>
+								h(Icon, {
+									value: 'mathformula'
+								}),
+							layer: () =>
+								h(InsertMathformula, {
+									color: props.color,
+									defaultLaTexContent: defaultLaTexContent.value,
+									onInsert: (content: string) => {
+										//如果公式文本框有内容则进行下一步处理
+										if (content) {
+											//获取选区所在的数学公式元素
+											const mathformulaElement = getMatchElementByRange(editor.value, dataRangeCaches.value, {
+												parsedom: 'span',
+												marks: {
+													'data-editify-mathformula': true
+												}
+											})
+											//如果在数学公式下
+											if (mathformulaElement) {
+												//清除该数学公式
+												mathformulaElement.toEmpty()
+												//移动光标到后一个元素上
+												editor.value.range!.anchor.moveToStart(editor.value.getNextElement(mathformulaElement)!)
+												editor.value.range!.focus.moveToStart(editor.value.getNextElement(mathformulaElement)!)
+											}
+											//定义转换后的mathml内容
+											let mathml: string = ''
+											try {
+												//获取转换后的mathml
+												mathml = KaTex.renderToString(content, {
+													output: 'mathml',
+													throwOnError: true
+												})
+											} catch (error) {
+												mathml = ''
+												if (typeof props.config!.handleError == 'function') {
+													props.config!.handleError(error as Error)
+												}
+											}
+											//如果mathml存在则表示数学公式渲染成功则插入到编辑器
+											if (mathml) {
+												//设置最终的html内容
+												const html = `<span data-editify-mathformula="${content}" contenteditable="false">${mathml}</span>`
+												//html内容转为元素数组
+												const elements = editor.value.parseHtml(html)
+												//插入编辑器
+												editor.value.insertElement(elements[0])
+												//移动光标到新插入的元素
+												editor.value.range!.anchor.moveToEnd(elements[0])
+												editor.value.range!.focus.moveToEnd(elements[0])
+												//渲染
+												editor.value.formatElementStack()
+												editor.value.domRender()
+												editor.value.rangeRender()
+											}
+										}
+										//关闭浮层
+										btnRef.value!.show = false
+									}
+								})
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuMathformulaButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/orderList.ts

@@ -0,0 +1,116 @@
+import { defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
+import { MenuButtonType } from '@/core/tool'
+import { hasPanelInRange, hasPreInRange, hasTableInRange, rangeIsInList, setList } from '@/core/function'
+import { Button } from '@/components/button'
+import { Icon } from '@/components/icon'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'orderList'
+
+/**
+ * 工具栏 - 有序列表
+ */
+export const OrderListToolbarButton = defineComponent(
+	(props, { expose }) => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
+		const $editTrans = inject<(key: string) => any>('$editTrans')!
+
+		const btnRef = ref<InstanceType<typeof Button> | null>(null)
+
+		expose({
+			btnRef
+		})
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							ref: btnRef,
+							name: FEATURE_NAME,
+							title: $editTrans('orderList'),
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: rangeIsInList(editor.value, dataRangeCaches.value, true),
+							disabled: props.config.disabled,
+							onOperate: () => {
+								setList(editor.value, dataRangeCaches.value, true)
+								editor.value.formatElementStack()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'list-ordered' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean
+		}
+	}
+)
+
+/**
+ * 菜单栏 - 有序列表
+ */
+export const OrderListMenuButton = defineComponent(
+	props => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
+		const $editTrans = inject<(key: string) => any>('$editTrans')!
+		const isSourceView = inject<Ref<boolean>>('isSourceView')!
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							name: FEATURE_NAME,
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							title: $editTrans('orderList'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: rangeIsInList(editor.value, dataRangeCaches.value, true),
+							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || hasTableInRange(editor.value, dataRangeCaches.value) || hasPanelInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+							onOperate: () => {
+								setList(editor.value, dataRangeCaches.value, true)
+								editor.value.formatElementStack()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'list-ordered' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/panel.ts

@@ -0,0 +1,108 @@
+import { defineComponent, h, inject, PropType, Ref } from 'vue'
+import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
+import { Button } from '@/components/button'
+import { MenuButtonType } from '@/core/tool'
+import { Icon } from '@/components/icon'
+import { hasMathformulaInRange, hasPanelInRange, hasTableInRange } from '@/core/function'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'panel'
+
+/**
+ * 菜单栏 - 插入面板
+ */
+export const PanelMenuButton = defineComponent(
+	props => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
+		const $editTrans = inject<(key: string) => any>('$editTrans')!
+		const isSourceView = inject<Ref<boolean>>('isSourceView')!
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							name: FEATURE_NAME,
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							title: $editTrans('insertPanel'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: false,
+							disabled: props.disabled || isSourceView.value || hasPanelInRange(editor.value, dataRangeCaches.value) || hasTableInRange(editor.value, dataRangeCaches.value) || hasMathformulaInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+							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')
+												}
+											]
+										}
+									]
+								})
+								editor.value.insertElement(panelElement)
+								//面板后面插入段落
+								const paragraph = AlexElement.create({
+									type: 'block',
+									parsedom: AlexElement.BLOCK_NODE,
+									children: [
+										{
+											type: 'closed',
+											parsedom: 'br'
+										}
+									]
+								})
+								editor.value.addElementAfter(paragraph, panelElement)
+								//移动光标到新插入的元素
+								editor.value.range!.anchor.moveToEnd(panelElement.children![0])
+								editor.value.range!.focus.moveToEnd(panelElement.children![0])
+								//渲染
+								editor.value.formatElementStack()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'panel' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)