vue-editify 0.2.14 → 0.2.15

package/src/feature/heading.ts

@@ -0,0 +1,154 @@
+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 { hasPanelInRange, hasPreInRange, hasTableInRange, setHeading } from '@/core/function'
+import { Button, ButtonOptionsItemType } from '@/components/button'
+
+/**
+ * feature名称
+ */
+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.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 HeadingMenuButton = 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 findHeadingItem = 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)) {
+					return editor.value.range.anchor.element.getBlock().parsedom == val
+				}
+				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)
+		})
+
+		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('heading'),
+						leftBorder: props.config.leftBorder,
+						rightBorder: props.config.rightBorder,
+						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)
+							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/image.ts

@@ -0,0 +1,225 @@
+import { defineComponent, h, inject, PropType, ref, Ref } from 'vue'
+import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
+import { Button } from '@/components/button'
+import { Icon } from '@/components/icon'
+import { getMatchElementByRange, hasMathformulaInRange, hasPreInRange, insertImage } from '@/core/function'
+import { InsertImage } from '@/components/insertImage'
+import { MenuImageButtonType } from '@/core/tool'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'image'
+
+/**
+ * 工具栏 - 图片操作
+ */
+export const ImageToolbar = defineComponent(
+	(props, { emit }) => {
+		const editor = inject<Ref<AlexEditor>>('editor')!
+		const dataRangeCaches = inject<Ref<AlexElementsRangeType>>('dataRangeCaches')!
+		const $editTrans = inject<(key: string) => any>('$editTrans')!
+
+		//设置图片宽度
+		const setWidth = (value: string) => {
+			const element = editor.value.range!.anchor.element
+			if (element) {
+				const styles = {
+					width: value
+				}
+				if (element.hasStyles()) {
+					element.styles = Object.assign(element.styles!, styles)
+				} else {
+					element.styles = styles
+				}
+				editor.value.formatElementStack()
+				editor.value.domRender()
+				editor.value.rangeRender()
+				//更新工具条位置
+				setTimeout(() => {
+					emit('reset-toolbar')
+				}, 0)
+			}
+		}
+
+		return () => {
+			return [
+				//30%
+				h(
+					Button,
+					{
+						name: 'set30Width',
+						title: $editTrans('width30'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						onOperate: () => setWidth('30%')
+					},
+					{
+						default: () => ' 30% '
+					}
+				),
+				//50%
+				h(
+					Button,
+					{
+						name: 'set50Width',
+						title: $editTrans('width50'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						onOperate: () => setWidth('50%')
+					},
+					{
+						default: () => ' 50% '
+					}
+				),
+				//100%
+				h(
+					Button,
+					{
+						name: 'set100Width',
+						title: $editTrans('width100'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						onOperate: () => setWidth('100%')
+					},
+					{
+						default: () => ' 100% '
+					}
+				),
+				//宽度自适应
+				h(
+					Button,
+					{
+						name: 'setAutoWidth',
+						title: $editTrans('auto'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						onOperate: () => setWidth('auto')
+					},
+					{
+						default: () => h(Icon, { value: 'auto-width' })
+					}
+				),
+				//删除图片
+				h(
+					Button,
+					{
+						name: 'deleteImage',
+						title: $editTrans('deleteImage'),
+						tooltip: props.tooltip,
+						color: props.color,
+						zIndex: props.zIndex,
+						onOperate: () => {
+							const element = getMatchElementByRange(editor.value, dataRangeCaches.value, { parsedom: 'img' })
+							if (element) {
+								element.toEmpty()
+								editor.value.formatElementStack()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						}
+					},
+					{
+						default: () => h(Icon, { value: 'delete' })
+					}
+				)
+			]
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			tooltip: Boolean
+		},
+		emits: ['reset-toolbar']
+	}
+)
+
+/**
+ * 菜单栏 - 插入图片
+ */
+export const ImageMenuButton = 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)
+
+		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('insertImage'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: false,
+							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || hasMathformulaInRange(editor.value, dataRangeCaches.value) || props.config.disabled
+						},
+						{
+							default: () =>
+								h(Icon, {
+									value: 'image'
+								}),
+							layer: () =>
+								h(InsertImage, {
+									color: props.color,
+									allowedFileType: props.config.allowedFileType,
+									multiple: props.config.multiple,
+									maxSize: props.config.maxSize,
+									minSize: props.config.minSize,
+									customUpload: props.config.customUpload,
+									handleError: props.config.handleError,
+									onChange: () => {
+										btnRef.value!.layerRef!.setPosition()
+									},
+									onInsert: (val: string[]) => {
+										//过滤掉空的地址
+										const urls = val.filter(url => {
+											return !!url
+										})
+										//如果数组为0
+										if (urls.length == 0) {
+											return
+										}
+										//遍历每个地址进行插入
+										urls.forEach(url => {
+											insertImage(editor.value, url)
+										})
+										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<MenuImageButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/indent.ts

@@ -0,0 +1,73 @@
+import { defineComponent, h, inject, PropType, Ref } from 'vue'
+import { AlexEditor, AlexElementsRangeType } from 'alex-editor'
+import { Button } from '@/components/button'
+import { MenuSelectButtonType } from '@/core/tool'
+import { Icon } from '@/components/icon'
+import { hasPreInRange, hasTableInRange, setIndentDecrease, setIndentIncrease } from '@/core/function'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'indent'
+
+/**
+ * 菜单栏 - 缩进
+ */
+export const IndentMenuButton = 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,
+							type: 'select',
+							title: $editTrans('indent'),
+							selectConfig: {
+								options: props.config.options,
+								width: props.config.width,
+								maxHeight: props.config.maxHeight
+							},
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: false,
+							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || hasTableInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+							onOperate: (_name, val: string) => {
+								if (val == 'indent-increase') {
+									setIndentIncrease(editor.value, dataRangeCaches.value)
+								}
+								//减少缩进
+								else if (val == 'indent-decrease') {
+									setIndentDecrease(editor.value, dataRangeCaches.value)
+								}
+								editor.value.formatElementStack()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'indent-increase' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuSelectButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/infoBlock.ts

@@ -0,0 +1,94 @@
+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 { elementToParagraph, hasPanelInRange, hasPreInRange, hasTableInRange, rangeIsInInfoBlock } from '@/core/function'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'infoBlock'
+
+/**
+ * 菜单栏 - 信息块
+ */
+export const InfoBlockMenuButton = 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('insertInfoBlock'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							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'
+											}
+										}
+									})
+								}
+								//渲染
+								editor.value.formatElementStack()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'info' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)

package/src/feature/italic.ts

@@ -0,0 +1,136 @@
+import { computed, defineComponent, h, inject, PropType, Ref, ref } from 'vue'
+import { AlexElementsRangeType, AlexEditor } from 'alex-editor'
+import { MenuButtonType } from '@/core/tool'
+import { hasPreInRange, queryTextStyle, removeTextStyle, setTextStyle } from '@/core/function'
+import { Button } from '@/components/button'
+import { Icon } from '@/components/icon'
+
+/**
+ * feature名称
+ */
+const FEATURE_NAME = 'italic'
+
+/**
+ * 工具栏 - 斜体
+ */
+export const ItalicToolbarButton = 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 active = computed<boolean>(() => {
+			return queryTextStyle(editor.value, dataRangeCaches.value, 'font-style', 'italic')
+		})
+
+		expose({
+			btnRef
+		})
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							ref: btnRef,
+							name: FEATURE_NAME,
+							title: $editTrans('italic'),
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							active: active.value,
+							disabled: props.config.disabled,
+							onOperate: () => {
+								if (active.value) {
+									removeTextStyle(editor.value, dataRangeCaches.value, ['font-style'])
+								} else {
+									setTextStyle(editor.value, dataRangeCaches.value, {
+										'font-style': 'italic'
+									})
+								}
+								editor.value.formatElementStack()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'italic' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean
+		}
+	}
+)
+
+/**
+ * 菜单栏 - 斜体
+ */
+export const ItalicMenuButton = 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 active = computed<boolean>(() => {
+			return queryTextStyle(editor.value, dataRangeCaches.value, 'font-style', 'italic')
+		})
+
+		return () => {
+			return props.config.show
+				? h(
+						Button,
+						{
+							name: FEATURE_NAME,
+							tooltip: props.tooltip,
+							color: props.color,
+							zIndex: props.zIndex,
+							title: $editTrans('italic'),
+							leftBorder: props.config.leftBorder,
+							rightBorder: props.config.rightBorder,
+							disabled: props.disabled || isSourceView.value || hasPreInRange(editor.value, dataRangeCaches.value) || props.config.disabled,
+							active: active.value,
+							onOperate: () => {
+								if (active.value) {
+									removeTextStyle(editor.value, dataRangeCaches.value, ['font-style'])
+								} else {
+									setTextStyle(editor.value, dataRangeCaches.value, {
+										'font-style': 'italic'
+									})
+								}
+								editor.value.formatElementStack()
+								editor.value.domRender()
+								editor.value.rangeRender()
+							}
+						},
+						{
+							default: () => h(Icon, { value: 'italic' })
+						}
+				  )
+				: null
+		}
+	},
+	{
+		name: `_${FEATURE_NAME}`,
+		props: {
+			color: String,
+			zIndex: Number,
+			config: Object as PropType<MenuButtonType>,
+			tooltip: Boolean,
+			disabled: Boolean
+		}
+	}
+)