vue-editify 0.2.16 → 0.2.18

package/src/editify/toolbar/toolbar.vue

@@ -1,16 +1,20 @@
 <template>
 	<Layer v-model="show" ref="layerRef" :node="node" :scroll-node="scrollNode" border placement="bottom-start" :useRange="type == 'text'" :z-index="zIndex" :inside-elements="insideElements">
 		<div class="editify-toolbar" :style="config.style">
-			<!-- 链接工具条 -->
-			<linkToolbar v-if="type == 'link'" :color="color" />
 			<!-- 图片工具条 -->
-			<ImageToolbar v-else-if="type == 'image'" @reset-toolbar="layerRef!.setPosition()" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
+			<ImageToolbar v-if="type == 'image'" @reset-toolbar="layerRef!.setPosition()" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
 			<!-- 视频工具条 -->
 			<VideoToolbar v-else-if="type == 'video'" @reset-toolbar="layerRef!.setPosition()" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
-			<!-- 表格工具条 -->
-			<TableToolbar v-else-if="type == 'table'" @reset-toolbar="layerRef!.setPosition()" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
 			<!-- 代码块工具条 -->
 			<CodeBlockToolbar v-else-if="type == 'codeBlock'" ref="codeBlockToolbarRef" :language="config.codeBlock!.languages!" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
+			<!-- 链接工具条 -->
+			<linkToolbar v-else-if="type == 'link'" :color="color" />
+			<!-- 表格工具条 -->
+			<TableToolbar v-else-if="type == 'table'" @reset-toolbar="layerRef!.setPosition()" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
+			<!-- 有序列表工具条 -->
+			<OrderListToolbar v-else-if="type == 'orderList'" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
+			<!-- 无序列表工具条 -->
+			<UnorderListToolbar v-else-if="type == 'unorderList'" :tooltip="config.tooltip!" :color="color" :z-index="zIndex + 1" />
 			<!-- 文本工具条 -->
 			<template v-else-if="type == 'text'">
 				<component v-for="(btn, index) in textToolbarBtns" :ref="el => (textToolbarBtnRefs[index] = (el as BtnComponentPublicInstance))" :is="btn" :color="color" :z-index="zIndex + 1" :config="textButtonConfig(btn.name)" :tooltip="config.tooltip!" />
@@ -28,11 +32,8 @@ import { ImageToolbar } from '@/feature/image'
 import { VideoToolbar } from '@/feature/video'
 import { TableToolbar } from '@/feature/table'
 import { CodeBlockToolbar } from '@/feature/codeBlock'
-import { HeadingToolbarButton } from '@/feature/heading'
-import { AlignToolbarButton } from '@/feature/align'
-import { OrderListToolbarButton } from '@/feature/orderList'
-import { UnorderListToolbarButton } from '@/feature/unorderList'
-import { TaskToolbarButton } from '@/feature/task'
+import { OrderListToolbar } from '@/feature/orderList'
+import { UnorderListToolbar } from '@/feature/unorderList'
 import { BoldToolbarButton } from '@/feature/bold'
 import { ItalicToolbarButton } from '@/feature/italic'
 import { StrikethroughToolbarButton } from '@/feature/strikethrough'
@@ -42,7 +43,6 @@ import { SuperToolbarButton } from '@/feature/super'
 import { SubToolbarButton } from '@/feature/sub'
 import { FontSizeToolbarButton } from '@/feature/fontSize'
 import { FontFamilyToolbarButton } from '@/feature/fontFamily'
-import { LineHeightToolbarButton } from '@/feature/lineHeight'
 import { ForeColorToolbarButton } from '@/feature/foreColor'
 import { BackColorToolbarButton } from '@/feature/backColor'
 import { FormatClearToolbarButton } from '@/feature/formatClear'
@@ -62,7 +62,7 @@ type BtnComponentPublicInstance = ComponentPublicInstance & { btnRef: InstanceTy
 //代码块语言选择按钮实例
 const codeBlockToolbarRef = ref<BtnComponentPublicInstance | null>(null)
 //文本工具条按钮数组
-const textToolbarBtns = shallowRef([HeadingToolbarButton, AlignToolbarButton, OrderListToolbarButton, UnorderListToolbarButton, TaskToolbarButton, BoldToolbarButton, ItalicToolbarButton, StrikethroughToolbarButton, UnderlineToolbarButton, CodeToolbarButton, SuperToolbarButton, SubToolbarButton, FontSizeToolbarButton, FontFamilyToolbarButton, LineHeightToolbarButton, ForeColorToolbarButton, BackColorToolbarButton, FormatClearToolbarButton])
+const textToolbarBtns = shallowRef([BoldToolbarButton, ItalicToolbarButton, StrikethroughToolbarButton, UnderlineToolbarButton, CodeToolbarButton, SuperToolbarButton, SubToolbarButton, FontSizeToolbarButton, FontFamilyToolbarButton, ForeColorToolbarButton, BackColorToolbarButton, FormatClearToolbarButton])
 //文本工具条按钮实例
 const textToolbarBtnRefs = ref<BtnComponentPublicInstance[]>([])
 

package/src/feature/align.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { defineComponent, h, inject, PropType, Ref } from 'vue'
 import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
 import { MenuSelectButtonType } from '@/core/tool'
 import { hasPreInRange, setAlign } from '@/core/function'
@@ -10,66 +10,6 @@ import { Icon } from '@/components/icon'
  */
 const FEATURE_NAME = 'align'
 
-/**
- * 工具栏 - 对齐方式
- */
-export const AlignToolbarButton = 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,
-							type: 'select',
-							title: $editTrans('align'),
-							tooltip: props.tooltip,
-							color: props.color,
-							zIndex: props.zIndex,
-							leftBorder: props.config.leftBorder,
-							rightBorder: props.config.rightBorder,
-							active: false,
-							disabled: props.config.disabled,
-							selectConfig: {
-								options: props.config.options,
-								width: props.config.width,
-								maxHeight: props.config.maxHeight
-							},
-							onOperate: (_name: string, val: 'left' | 'right' | 'center' | 'justify') => {
-								setAlign(editor.value, dataRangeCaches.value, val)
-								editor.value.domRender()
-								editor.value.rangeRender()
-							}
-						},
-						{
-							default: () => h(Icon, { value: 'align-left' })
-						}
-				  )
-				: null
-		}
-	},
-	{
-		name: `_${FEATURE_NAME}`,
-		props: {
-			color: String,
-			zIndex: Number,
-			config: Object as PropType<MenuSelectButtonType>,
-			tooltip: Boolean
-		}
-	}
-)
-
 /**
  * 菜单栏 - 对齐方式
  */

package/src/feature/attachment.ts

@@ -1,8 +1,8 @@
 import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
-import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
-import { MenuAttachmentButtonType, ObjectType } from '@/core/tool'
+import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
+import { MenuAttachmentButtonType } from '@/core/tool'
 import { Button } from '@/components/button'
-import { hasMathformulaInRange, hasPreInRange } from '@/core/function'
+import { hasMathformulaInRange, hasPreInRange, insertAttachment } from '@/core/function'
 import { Icon } from '@/components/icon'
 import { InsertAttachment } from '@/components/insertAttachment'
 
@@ -62,30 +62,17 @@ export const AttachmentMenuButton = defineComponent(
 										urls = urls.filter(url => {
 											return !!url
 										})
-										//如果有地址存在
-										if (urls.length) {
-											//遍历地址数组
-											urls.forEach(url => {
-												const marks: ObjectType = {
-													'data-editify-attachment': url,
-													'data-editify-attachment-name': name || $editTrans('attachmentDefaultName')
-												}
-												//创建元素
-												const attachmentElement = AlexElement.create({
-													type: 'closed',
-													parsedom: 'span',
-													marks
-												})
-												//插入编辑器
-												editor.value.insertElement(attachmentElement)
-												//移动光标到新插入的元素
-												editor.value.range!.anchor.moveToEnd(attachmentElement)
-												editor.value.range!.focus.moveToEnd(attachmentElement)
-											})
-											//渲染
-											editor.value.domRender()
-											editor.value.rangeRender()
+										//如果数组为0
+										if (urls.length == 0) {
+											return
 										}
+										//遍历地址数组
+										urls.forEach(url => {
+											insertAttachment(editor.value, url, name || $editTrans('attachmentDefaultName'))
+										})
+										//渲染
+										editor.value.domRender()
+										editor.value.rangeRender()
 										//关闭浮层
 										btnRef.value!.show = false
 									}

package/src/feature/backColor.ts

@@ -139,6 +139,7 @@ export const BackColorMenuButton = defineComponent(
 								return h(Colors, {
 									tooltip: props.tooltip,
 									color: props.color,
+									zIndex: props.zIndex + 2,
 									value: selectVal.value,
 									data: options,
 									onChange: (val: string) => {

package/src/feature/foreColor.ts

@@ -141,6 +141,7 @@ export const ForeColorMenuButton = defineComponent(
 								return h(Colors, {
 									tooltip: props.tooltip,
 									color: props.color,
+									zIndex: props.zIndex + 2,
 									value: selectVal.value,
 									data: options,
 									onChange: (val: string) => {

package/src/feature/heading.ts

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { computed, defineComponent, h, inject, PropType, Ref } from 'vue'
 import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
 import { common as DapCommon } from 'dap-util'
 import { MenuDisplayButtonType } from '@/core/tool'
@@ -10,77 +10,6 @@ import { Button, ButtonOptionsItemType } from '@/components/button'
  */
 const FEATURE_NAME = 'heading'
 
-/**
- * 工具栏 - 标题
- */
-export const HeadingToolbarButton = 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>(() => {
-			//显示已设置标题
-			const findHeadingItem = 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()) {
-						return el.element.parsedom == val
-					}
-					return el.element.getBlock().parsedom == val
-				})
-			})
-			return findHeadingItem ? (DapCommon.isObject(findHeadingItem) ? ((findHeadingItem as ButtonOptionsItemType).value as string) : (findHeadingItem as string)) : (props.config.defaultValue as string)
-		})
-
-		expose({
-			btnRef
-		})
-		return () => {
-			return props.config.show
-				? h(Button, {
-						ref: btnRef,
-						name: FEATURE_NAME,
-						type: 'display',
-						title: $editTrans('heading'),
-						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) => {
-							setHeading(editor.value, dataRangeCaches.value, $editTrans, val)
-							editor.value.domRender()
-							editor.value.rangeRender()
-						}
-				  })
-				: null
-		}
-	},
-	{
-		name: `_${FEATURE_NAME}`,
-		props: {
-			color: String,
-			zIndex: Number,
-			config: Object as PropType<MenuDisplayButtonType>,
-			tooltip: Boolean
-		}
-	}
-)
-
 /**
  * 菜单栏 - 标题
  */
@@ -131,7 +60,7 @@ export const HeadingMenuButton = defineComponent(
 						active: false,
 						disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || hasTableInRange(editor.value, dataRangeCaches.value) || hasPanelInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
 						onOperate: (_name: string, val: string) => {
-							setHeading(editor.value, dataRangeCaches.value, $editTrans, val)
+							setHeading(editor.value, dataRangeCaches.value, val)
 							editor.value.domRender()
 							editor.value.rangeRender()
 						}

package/src/feature/infoBlock.ts

@@ -1,9 +1,9 @@
 import { defineComponent, h, inject, PropType, Ref } from 'vue'
-import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
+import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
 import { Button } from '@/components/button'
 import { MenuButtonType } from '@/core/tool'
 import { Icon } from '@/components/icon'
-import { elementToParagraph, hasPanelInRange, hasPreInRange, hasTableInRange, rangeIsInInfoBlock } from '@/core/function'
+import { hasPanelInRange, hasPreInRange, hasTableInRange, insertInfoBlock, rangeIsInInfoBlock } from '@/core/function'
 
 /**
  * feature名称
@@ -35,39 +35,8 @@ export const InfoBlockMenuButton = defineComponent(
 							active: rangeIsInInfoBlock(editor.value, dataRangeCaches.value),
 							disabled: props.disabled || isSourceView.value || hasPanelInRange(editor.value, dataRangeCaches.value) || hasTableInRange(editor.value, dataRangeCaches.value) || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
 							onOperate: () => {
-								//是否都在信息块里
-								const flag = rangeIsInInfoBlock(editor.value, dataRangeCaches.value)
-								//起点和终点在一起
-								if (editor.value.range!.anchor.isEqual(editor.value.range!.focus)) {
-									const block = editor.value.range!.anchor.element.getBlock()
-									elementToParagraph(block)
-									if (!flag) {
-										block.parsedom = 'div'
-										block.marks = {
-											'data-editify-info': 'true'
-										}
-									}
-								}
-								//起点和终点不在一起
-								else {
-									let blocks: AlexElement[] = []
-									dataRangeCaches.value.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'
-											}
-										}
-									})
-								}
+								//插入信息块
+								insertInfoBlock(editor.value, dataRangeCaches.value)
 								//渲染
 								editor.value.domRender()
 								editor.value.rangeRender()

package/src/feature/lineHeight.ts

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { computed, defineComponent, h, inject, PropType, Ref } from 'vue'
 import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
 import { common as DapCommon } from 'dap-util'
 import { MenuDisplayButtonType } from '@/core/tool'
@@ -10,82 +10,6 @@ import { Button, ButtonOptionsItemType } from '@/components/button'
  */
 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.domRender()
-							editor.value.rangeRender()
-						}
-				  })
-				: null
-		}
-	},
-	{
-		name: `_${FEATURE_NAME}`,
-		props: {
-			color: String,
-			zIndex: Number,
-			config: Object as PropType<MenuDisplayButtonType>,
-			tooltip: Boolean
-		}
-	}
-)
-
 /**
  * 菜单栏 - 行高
  */

package/src/feature/mathformula.ts

@@ -1,10 +1,8 @@
 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 { getMatchElementByRange, hasLinkInRange, hasPreInRange, insertMathformula } from '@/core/function'
 import { Icon } from '@/components/icon'
 import { InsertMathformula } from '@/components/insertMathformula'
 
@@ -77,53 +75,8 @@ export const MathformulaMenuButton = defineComponent(
 									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.domRender()
-												editor.value.rangeRender()
-											}
-										}
+										//插入数学公式
+										insertMathformula(editor.value, dataRangeCaches.value, content, props.config.handleError)
 										//关闭浮层
 										btnRef.value!.show = false
 									}