vue-editify 0.2.10 → 0.2.12

package/lib/index.d.ts

@@ -804,7 +804,7 @@ export type { MenuButtonType, MenuSelectButtonType, MenuDisplayButtonType, MenuI
 export type { ElementMatchConfigType } from './core/function';
 export { elementIsMatch, getMatchElementByElement, getMatchElementByRange, isList, isTask, elementIsInList, elementIsInTask, hasPreInRange, hasQuoteInRange, hasListInRange, hasTaskInRange, hasLinkInRange, hasTableInRange, hasImageInRange, hasVideoInRange, isRangeInQuote, isRangeInList, isRangeInTask, queryTextStyle, queryTextMark, getRangeText, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setTextStyle, setTextMark, removeTextStyle, removeTextMark, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock, insertSeparator } from './core/function';
 declare const install: (app: App) => void;
-declare const version = "0.2.10";
+declare const version = "0.2.12";
 export { AlexElement } from 'alex-editor';
 export type { AttachmentOptionsType } from './plugins/attachment';
 export type { InsertAttachmentUploadErrorType } from './plugins/attachment/insertAttachment/props';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-editify",
-	"version": "0.2.10",
+	"version": "0.2.12",
 	"private": false,
 	"sideEffects": [
 		"*.css"

package/src/components/layer/layer.vue

@@ -29,8 +29,6 @@ const realPlacement = ref<LayerPlacementType | null>(null)
 const wrapRef = ref<HTMLElement | null>(null)
 const elRef = ref<HTMLElement | null>(null)
 const triangleRef = ref<InstanceType<typeof Triangle> | null>(null)
-const MOUSEDOWN = ref<boolean>(false)
-const MOUSEMOVE = ref<boolean>(false)
 
 //三角形位置
 const triPlacement = computed<TrianglePlacementType>(() => {
@@ -576,19 +574,22 @@ const handleResize = () => {
 }
 //点击定位元素和自身以外的元素关闭浮层
 const handleClick = (e: Event) => {
-	//如果鼠标移动了则不是点击事件
-	if (MOUSEMOVE.value) {
-		return
-	}
 	if (!DapElement.isElement(elRef.value)) {
 		return
 	}
+	//如果在浮层内点击，不用关闭
 	if (DapElement.isContains(elRef.value!, e.target as HTMLElement)) {
 		return
 	}
+	//如果在浮层关联的元素内点击，不用关闭
 	if (!props.useRange && getNode()! && DapElement.isContains(getNode()!, e.target as HTMLElement)) {
 		return
 	}
+	//如果在insideElement规定的元素内，不用关闭
+	if (props.insideElements.some(el => DapElement.isContains(el, e.target as HTMLElement))) {
+		return
+	}
+
 	if (props.modelValue) {
 		emits('update:modelValue', false)
 	}
@@ -598,28 +599,17 @@ onMounted(() => {
 	if (props.modelValue) {
 		setPosition()
 	}
-	DapEvent.on(window, `mousedown.editify_layer_${instance.uid} mousemove.editify_layer_${instance.uid} mouseup.editify_layer_${instance.uid}`, e => {
-		if (e.type == 'mousedown') {
-			MOUSEDOWN.value = true
-			MOUSEMOVE.value = false
-		} else if (e.type == 'mousemove') {
-			if (MOUSEDOWN.value) {
-				MOUSEMOVE.value = true
-			}
-		} else if (e.type == 'mouseup') {
-			MOUSEDOWN.value = false
-		}
-	})
-
-	DapEvent.on(window, `click.editify_layer_${instance.uid}`, handleClick)
+	DapEvent.on(window, `mousedown.editify_layer_${instance.uid}`, handleClick)
 	DapEvent.on(window, `resize.editify_layer_${instance.uid}`, handleResize)
 })
+
 onBeforeUnmount(() => {
-	DapEvent.off(window, `click.editify_layer_${instance.uid} resize.editify_layer_${instance.uid}`)
+	DapEvent.off(window, `mousedown.editify_layer_${instance.uid} resize.editify_layer_${instance.uid}`)
 })
 
 defineExpose({
-	setPosition
+	setPosition,
+	elRef
 })
 </script>
 <style scoped src="./layer.less"></style>

package/src/components/layer/props.ts

@@ -70,6 +70,13 @@ export const LayerProps = {
 	useRange: {
 		type: Boolean,
 		default: false
+	},
+	//点击无需关闭layer的元素数组
+	insideElements: {
+		type: Array as PropType<HTMLElement[]>,
+		default: function () {
+			return []
+		}
 	}
 }
 

package/src/components/toolbar/toolbar.vue

@@ -1,5 +1,5 @@
 <template>
-	<Layer v-model="show" ref="layerRef" :node="node" :scroll-node="scrollNode" border placement="bottom-start" @show="layerShow" :useRange="type == 'text'" :z-index="zIndex">
+	<Layer v-model="show" ref="layerRef" :node="node" :scroll-node="scrollNode" border placement="bottom-start" @show="layerShow" :useRange="type == 'text'" :z-index="zIndex" :inside-elements="insideElements">
 		<div class="editify-toolbar" ref="toolbarRef" :style="config.style">
 			<!-- 链接工具条 -->
 			<template v-if="type == 'link'">
@@ -131,14 +131,14 @@
 					<Icon value="text-wrap"></Icon>
 				</Button>
 				<!-- 代码块语言选择 -->
-				<Button v-if="languageConfig.show" name="languages" type="display" :title="$editTrans('selectLanguages')" :tooltip="config.tooltip" :leftBorder="languageConfig.leftBorder" :rightBorder="languageConfig.rightBorder" :display-config="languageConfig.displayConfig" :color="color" :active="languageConfig.active" :disabled="languageConfig.disabled" @operate="selectLanguage" :z-index="zIndex + 1"></Button>
+				<Button v-if="languageConfig.show" ref="languagesBtnRef" name="languages" type="display" :title="$editTrans('selectLanguages')" :tooltip="config.tooltip" :leftBorder="languageConfig.leftBorder" :rightBorder="languageConfig.rightBorder" :display-config="languageConfig.displayConfig" :color="color" :active="languageConfig.active" :disabled="languageConfig.disabled" @operate="selectLanguage" :z-index="zIndex + 1"></Button>
 			</template>
 			<!-- 文本工具条 -->
 			<template v-else-if="type == 'text'">
 				<!-- 设置段落和标题 -->
-				<Button v-if="headingConfig.show" name="heading" type="display" :title="$editTrans('heading')" :tooltip="config.tooltip" :display-config="headingConfig.displayConfig" :leftBorder="headingConfig.leftBorder" :rightBorder="headingConfig.rightBorder" :color="color" :active="headingConfig.active" :disabled="headingConfig.disabled" @operate="_setHeading" :z-index="zIndex + 1"></Button>
+				<Button v-if="headingConfig.show" ref="headingBtnRef" name="heading" type="display" :title="$editTrans('heading')" :tooltip="config.tooltip" :display-config="headingConfig.displayConfig" :leftBorder="headingConfig.leftBorder" :rightBorder="headingConfig.rightBorder" :color="color" :active="headingConfig.active" :disabled="headingConfig.disabled" @operate="_setHeading" :z-index="zIndex + 1"></Button>
 				<!-- 对齐方式 -->
-				<Button v-if="alignConfig.show" name="align" type="select" :title="$editTrans('align')" :tooltip="config.tooltip" :select-config="alignConfig.selectConfig" :leftBorder="alignConfig.leftBorder" :rightBorder="alignConfig.rightBorder" :color="color" :active="alignConfig.active" :disabled="alignConfig.disabled" @operate="_setAlign" :z-index="zIndex + 1">
+				<Button v-if="alignConfig.show" name="align" ref="alignBtnRef" type="select" :title="$editTrans('align')" :tooltip="config.tooltip" :select-config="alignConfig.selectConfig" :leftBorder="alignConfig.leftBorder" :rightBorder="alignConfig.rightBorder" :color="color" :active="alignConfig.active" :disabled="alignConfig.disabled" @operate="_setAlign" :z-index="zIndex + 1">
 					<Icon value="align-left"></Icon>
 				</Button>
 				<!-- 有序列表 -->
@@ -182,20 +182,20 @@
 					<Icon value="subscript"></Icon>
 				</Button>
 				<!-- 字号大小 -->
-				<Button v-if="fontSizeConfig.show" name="fontSize" type="display" :title="$editTrans('fontSize')" :tooltip="config.tooltip" :display-config="fontSizeConfig.displayConfig" :leftBorder="fontSizeConfig.leftBorder" :rightBorder="fontSizeConfig.rightBorder" :color="color" :active="fontSizeConfig.active" :disabled="fontSizeConfig.disabled" @operate="setFontSize" :z-index="zIndex + 1"></Button>
+				<Button v-if="fontSizeConfig.show" ref="fontSizeBtnRef" name="fontSize" type="display" :title="$editTrans('fontSize')" :tooltip="config.tooltip" :display-config="fontSizeConfig.displayConfig" :leftBorder="fontSizeConfig.leftBorder" :rightBorder="fontSizeConfig.rightBorder" :color="color" :active="fontSizeConfig.active" :disabled="fontSizeConfig.disabled" @operate="setFontSize" :z-index="zIndex + 1"></Button>
 				<!-- 字体 -->
-				<Button v-if="fontFamilyConfig.show" name="fontFamily" type="display" :title="$editTrans('fontFamily')" :tooltip="config.tooltip" :display-config="fontFamilyConfig.displayConfig" :leftBorder="fontFamilyConfig.leftBorder" :rightBorder="fontFamilyConfig.rightBorder" :color="color" :active="fontFamilyConfig.active" :disabled="fontFamilyConfig.disabled" @operate="setFontFamily" :z-index="zIndex + 1"></Button>
+				<Button v-if="fontFamilyConfig.show" ref="fontFamilyBtnRef" name="fontFamily" type="display" :title="$editTrans('fontFamily')" :tooltip="config.tooltip" :display-config="fontFamilyConfig.displayConfig" :leftBorder="fontFamilyConfig.leftBorder" :rightBorder="fontFamilyConfig.rightBorder" :color="color" :active="fontFamilyConfig.active" :disabled="fontFamilyConfig.disabled" @operate="setFontFamily" :z-index="zIndex + 1"></Button>
 				<!-- 行高 -->
-				<Button v-if="lineHeightConfig.show" name="lineHeight" type="display" :title="$editTrans('lineHeight')" :tooltip="config.tooltip" :display-config="lineHeightConfig.displayConfig" :leftBorder="lineHeightConfig.leftBorder" :rightBorder="lineHeightConfig.rightBorder" :color="color" :active="lineHeightConfig.active" :disabled="lineHeightConfig.disabled" @operate="_setLineHeight" :z-index="zIndex + 1"></Button>
+				<Button v-if="lineHeightConfig.show" ref="lineHeightBtnRef" name="lineHeight" type="display" :title="$editTrans('lineHeight')" :tooltip="config.tooltip" :display-config="lineHeightConfig.displayConfig" :leftBorder="lineHeightConfig.leftBorder" :rightBorder="lineHeightConfig.rightBorder" :color="color" :active="lineHeightConfig.active" :disabled="lineHeightConfig.disabled" @operate="_setLineHeight" :z-index="zIndex + 1"></Button>
 				<!-- 前景色 -->
-				<Button v-if="foreColorConfig.show" name="foreColor" type="select" :title="$editTrans('foreColor')" :tooltip="config.tooltip" :select-config="foreColorConfig.selectConfig" :leftBorder="foreColorConfig.leftBorder" :rightBorder="foreColorConfig.rightBorder" :color="color" :active="foreColorConfig.active" :disabled="foreColorConfig.disabled" hideScroll ref="foreColorRef" :z-index="zIndex + 1">
+				<Button v-if="foreColorConfig.show" name="foreColor" type="select" :title="$editTrans('foreColor')" :tooltip="config.tooltip" :select-config="foreColorConfig.selectConfig" :leftBorder="foreColorConfig.leftBorder" :rightBorder="foreColorConfig.rightBorder" :color="color" :active="foreColorConfig.active" :disabled="foreColorConfig.disabled" hideScroll ref="foreColorBtnRef" :z-index="zIndex + 1">
 					<Icon value="font-color"></Icon>
 					<template #layer="{ options }">
 						<Colors :tooltip="config.tooltip" :color="color" :value="foreColorConfig.value" @change="setForeColor" :data="options"></Colors>
 					</template>
 				</Button>
 				<!-- 背景色 -->
-				<Button v-if="backColorConfig.show" name="backColor" type="select" :title="$editTrans('backColor')" :tooltip="config.tooltip" :select-config="backColorConfig.selectConfig" :leftBorder="backColorConfig.leftBorder" :rightBorder="backColorConfig.rightBorder" :color="color" :active="backColorConfig.active" :disabled="backColorConfig.disabled" hideScroll ref="backColorRef" :z-index="zIndex + 1">
+				<Button v-if="backColorConfig.show" name="backColor" type="select" :title="$editTrans('backColor')" :tooltip="config.tooltip" :select-config="backColorConfig.selectConfig" :leftBorder="backColorConfig.leftBorder" :rightBorder="backColorConfig.rightBorder" :color="color" :active="backColorConfig.active" :disabled="backColorConfig.disabled" hideScroll ref="backColorBtnRef" :z-index="zIndex + 1">
 					<Icon value="brush"></Icon>
 					<template #layer="{ options }">
 						<Colors :tooltip="config.tooltip" :color="color" :value="backColorConfig.value" @change="setBackColor" :data="options"></Colors>
@@ -235,8 +235,14 @@ const $editTrans = inject<(key: string) => any>('$editTrans')!
 
 const layerRef = ref<InstanceType<typeof Layer> | null>(null)
 const toolbarRef = ref<HTMLElement | null>(null)
-const foreColorRef = ref<InstanceType<typeof Button> | null>(null)
-const backColorRef = ref<InstanceType<typeof Button> | null>(null)
+const foreColorBtnRef = ref<InstanceType<typeof Button> | null>(null)
+const backColorBtnRef = ref<InstanceType<typeof Button> | null>(null)
+const languagesBtnRef = ref<InstanceType<typeof Button> | null>(null)
+const headingBtnRef = ref<InstanceType<typeof Button> | null>(null)
+const alignBtnRef = ref<InstanceType<typeof Button> | null>(null)
+const fontSizeBtnRef = ref<InstanceType<typeof Button> | null>(null)
+const fontFamilyBtnRef = ref<InstanceType<typeof Button> | null>(null)
+const lineHeightBtnRef = ref<InstanceType<typeof Button> | null>(null)
 
 //链接参数配置
 const linkConfig = ref<ObjectType>({
@@ -622,6 +628,43 @@ const canMergeCells = computed<(type: 'left' | 'right' | 'up' | 'down') => boole
 		return false
 	}
 })
+//点击不关闭工具条浮层的元素（算在工具条浮层元素范围内）
+const insideElements = computed<HTMLElement[]>(() => {
+	let elements: HTMLElement[] = []
+	//语言选择浮层元素
+	if (languagesBtnRef.value && languagesBtnRef.value.layerRef && languagesBtnRef.value.layerRef.elRef) {
+		elements.push(languagesBtnRef.value.layerRef.elRef)
+	}
+	//前景色选择浮层元素
+	if (foreColorBtnRef.value && foreColorBtnRef.value.layerRef && foreColorBtnRef.value.layerRef.elRef) {
+		elements.push(foreColorBtnRef.value.layerRef.elRef)
+	}
+	//背景色选择浮层元素
+	if (backColorBtnRef.value && backColorBtnRef.value.layerRef && backColorBtnRef.value.layerRef.elRef) {
+		elements.push(backColorBtnRef.value.layerRef.elRef)
+	}
+	//标题选择浮层元素
+	if (headingBtnRef.value && headingBtnRef.value.layerRef && headingBtnRef.value.layerRef.elRef) {
+		elements.push(headingBtnRef.value.layerRef.elRef)
+	}
+	//对齐方式选择浮层元素
+	if (alignBtnRef.value && alignBtnRef.value.layerRef && alignBtnRef.value.layerRef.elRef) {
+		elements.push(alignBtnRef.value.layerRef.elRef)
+	}
+	//字号选择浮层元素
+	if (fontSizeBtnRef.value && fontSizeBtnRef.value.layerRef && fontSizeBtnRef.value.layerRef.elRef) {
+		elements.push(fontSizeBtnRef.value.layerRef.elRef)
+	}
+	//字体选择浮层元素
+	if (fontFamilyBtnRef.value && fontFamilyBtnRef.value.layerRef && fontFamilyBtnRef.value.layerRef.elRef) {
+		elements.push(fontFamilyBtnRef.value.layerRef.elRef)
+	}
+	//行高选择浮层元素
+	if (lineHeightBtnRef.value && lineHeightBtnRef.value.layerRef && lineHeightBtnRef.value.layerRef.elRef) {
+		elements.push(lineHeightBtnRef.value.layerRef.elRef)
+	}
+	return elements
+})
 
 //输入框获取焦点
 const handleInputFocus = (e: Event) => {
@@ -646,7 +689,7 @@ const setBackColor = (value: string) => {
 	setTextStyle(editor.value, dataRangeCaches.value, {
 		'background-color': value
 	})
-	backColorRef.value!.show = false
+	backColorBtnRef.value!.show = false
 	editor.value.formatElementStack()
 	editor.value.domRender()
 	editor.value.rangeRender()
@@ -656,7 +699,7 @@ const setForeColor = (value: string) => {
 	setTextStyle(editor.value, dataRangeCaches.value, {
 		color: value
 	})
-	foreColorRef.value!.show = false
+	foreColorBtnRef.value!.show = false
 	editor.value.formatElementStack()
 	editor.value.domRender()
 	editor.value.rangeRender()
@@ -1626,5 +1669,9 @@ const layerShow = () => {
 		formatClearConfig.value.disabled = extraDisabled('formatClear')
 	}
 }
+
+defineExpose({
+	layerRef
+})
 </script>
 <style scoped src="./toolbar.less"></style>

package/src/editify/editify.vue

@@ -27,7 +27,6 @@ import { parseList, orderdListHandle, commonElementHandle, tableThTdHandle, tabl
 import { isTask, elementToParagraph, getMatchElementByRange, hasTableInRange, hasLinkInRange, hasPreInRange, hasImageInRange, hasVideoInRange } from '@/core/function'
 import Toolbar from '@/components/toolbar/toolbar.vue'
 import Menu from '@/components/menu/menu.vue'
-import Layer from '@/components/layer/layer.vue'
 import { trans } from '@/locale'
 import { LanguagesItemType } from '@/hljs'
 import { EditifyProps, EditifyResizeParamsType, EditifyToolbarOptionsType } from './props'
@@ -194,7 +193,7 @@ const handleToolbar = () => {
 			toolbarOptions.value.type = 'link'
 			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${link.key}"]`
 			if (toolbarOptions.value.show) {
-				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
+				toolbarRef.value!.layerRef!.setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
@@ -204,7 +203,7 @@ const handleToolbar = () => {
 			toolbarOptions.value.type = 'image'
 			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${image.key}"]`
 			if (toolbarOptions.value.show) {
-				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
+				toolbarRef.value!.layerRef!.setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
@@ -214,7 +213,7 @@ const handleToolbar = () => {
 			toolbarOptions.value.type = 'video'
 			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${video.key}"]`
 			if (toolbarOptions.value.show) {
-				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
+				toolbarRef.value!.layerRef!.setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
@@ -224,7 +223,7 @@ const handleToolbar = () => {
 			toolbarOptions.value.type = 'table'
 			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${table.key}"]`
 			if (toolbarOptions.value.show) {
-				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
+				toolbarRef.value!.layerRef!.setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
@@ -234,7 +233,7 @@ const handleToolbar = () => {
 			toolbarOptions.value.type = 'codeBlock'
 			toolbarOptions.value.node = `[data-editify-uid="${instance.uid}"] [data-editify-element="${pre.key}"]`
 			if (toolbarOptions.value.show) {
-				;(<InstanceType<typeof Layer>>toolbarRef.value!.$refs.layerRef).setPosition()
+				toolbarRef.value!.layerRef!.setPosition()
 			} else {
 				toolbarOptions.value.show = true
 			}
@@ -247,7 +246,7 @@ const handleToolbar = () => {
 			if (result.length && !hasTableInRange(editor.value!, dataRangeCaches.value) && !hasPreInRange(editor.value!, dataRangeCaches.value) && !hasLinkInRange(editor.value!, dataRangeCaches.value) && !hasImageInRange(editor.value!, dataRangeCaches.value) && !hasVideoInRange(editor.value!, dataRangeCaches.value)) {
 				toolbarOptions.value.type = 'text'
 				if (toolbarOptions.value.show) {
-					;(toolbarRef.value!.$refs.layerRef as InstanceType<typeof Layer>).setPosition()
+					toolbarRef.value!.layerRef!.setPosition()
 				} else {
 					toolbarOptions.value.show = true
 				}

package/src/index.ts

@@ -24,7 +24,7 @@ const install = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
 //版本号
-const version = '0.2.10'
+const version = '0.2.12'
 
 //导出AlexElement元素
 export { AlexElement } from 'alex-editor'

package/src/plugins/attachment/index.ts

@@ -2,7 +2,6 @@ import { ComponentInternalInstance, h } from 'vue'
 import { AlexEditor, AlexElement, AlexElementsRangeType } from 'alex-editor'
 import { event as DapEvent, common as DapCommon } from 'dap-util'
 import { ObjectType, PluginType } from '@/core/tool'
-import Layer from '@/components/layer/layer.vue'
 import Button from '@/components/button/button.vue'
 import Icon from '@/components/icon/icon.vue'
 import InsertAttachment from './insertAttachment/insertAttachment.vue'
@@ -114,7 +113,7 @@ export const attachment = (options?: AttachmentOptionsType) => {
 							customUpload: options!.customUpload,
 							handleError: options!.handleError,
 							onChange: () => {
-								;(<InstanceType<typeof Layer>>btnInstance.$refs.layerRef).setPosition()
+								btnInstance.layerRef!.setPosition()
 							},
 							onInsert: (name: string, urls: string[]) => {
 								//过滤掉空的地址