vue-editify 0.2.27 → 0.2.29

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-editify",
-	"version": "0.2.27",
+	"version": "0.2.29",
 	"private": false,
 	"sideEffects": [
 		"*.css"
@@ -17,7 +17,7 @@
 		"lib": "vue-tsc && vite build"
 	},
 	"dependencies": {
-		"alex-editor": "^1.5.0",
+		"alex-editor": "^1.5.1",
 		"dap-util": "^1.5.8",
 		"highlight.js": "^11.8.0",
 		"katex": "^0.16.10",

package/src/editify/editify.less

@@ -84,8 +84,6 @@
 		line-height: 1.5;
 		color: var(--editify-font-color-dark);
 		font-size: var(--editify-font-size);
-		position: relative;
-		line-height: 1.5;
 		overflow-wrap: break-word;
 
 		//显示占位符

package/src/editify/editify.vue

@@ -1,18 +1,28 @@
 <template>
-	<div class="editify" :class="{ 'editify-fullscreen': isFullScreen, 'editify-autoheight': !isFullScreen && isAutoHeight }" :style="{ zIndex: zIndex, paddingTop: isFullScreen ? '' : (offset || '') + 'px' }" ref="elRef">
+	<div class="editify"
+		:class="{ 'editify-fullscreen': isFullScreen, 'editify-autoheight': !isFullScreen && isAutoHeight }"
+		:style="{ zIndex: zIndex, paddingTop: isFullScreen ? '' : (offset || '') + 'px' }" ref="elRef">
 		<!-- 菜单区域 -->
-		<Menu ref="menuRef" v-if="menuConfig.use && editor" :config="menuConfig" :color="color" :z-index="zIndex + 1"></Menu>
+		<Menu ref="menuRef" v-if="menuConfig.use && editor" :config="menuConfig" :color="color" :z-index="zIndex + 1">
+		</Menu>
 		<!-- 编辑层，与编辑区域宽高相同必须适配 -->
-		<div ref="bodyRef" class="editify-body" :class="{ 'editify-border': showBorder, 'editify-menu_inner': menuConfig.use && menuConfig.mode == 'inner' }" :data-editify-uid="instance.uid">
+		<div ref="bodyRef" class="editify-body"
+			:class="{ 'editify-border': showBorder, 'editify-menu_inner': menuConfig.use && menuConfig.mode == 'inner' }"
+			:data-editify-uid="instance.uid">
 			<!-- 编辑器 -->
-			<div ref="contentRef" class="editify-content" :class="{ 'editify-placeholder': showPlaceholder, 'editify-disabled': isDisabled }" @click="handleEditorClick" @compositionstart="isInputChinese = true" @compositionend="isInputChinese = false" :data-editify-placeholder="placeholder" tabindex="-1"></div>
+			<div ref="contentRef" class="editify-content"
+				:class="{ 'editify-placeholder': showPlaceholder, 'editify-disabled': isDisabled }" @click="handleEditorClick"
+				@compositionstart="isInputChinese = true" @compositionend="isInputChinese = false"
+				:data-editify-placeholder="placeholder" tabindex="-1"></div>
 			<!-- 代码视图 -->
 			<textarea v-if="isSourceView" :value="value" readonly class="editify-sourceview" />
 			<!-- 工具条 -->
-			<Toolbar ref="toolbarRef" v-model="toolbarOptions.show" :node="toolbarOptions.node!" :type="toolbarOptions.type" :scroll-node="contentRef!" :config="toolbarConfig" :color="color" :z-index="zIndex + 10"></Toolbar>
+			<Toolbar ref="toolbarRef" v-model="toolbarOptions.show" :node="toolbarOptions.node!" :type="toolbarOptions.type"
+				:scroll-node="contentRef!" :config="toolbarConfig" :color="color" :z-index="zIndex + 10"></Toolbar>
 		</div>
 		<!-- 编辑器尾部 -->
-		<div v-if="showWordLength" class="editify-footer" :class="{ 'editify-fullscreen': isFullScreen && !isSourceView }" :style="{ zIndex: zIndex + 1 }">
+		<div v-if="showWordLength" class="editify-footer" :class="{ 'editify-fullscreen': isFullScreen && !isSourceView }"
+			:style="{ zIndex: zIndex + 1 }">
 			<!-- 字数统计 -->
 			<div class="editify-footer-words">{{ $editTrans('totalWordCount') }}{{ textValue.length }}</div>
 		</div>
@@ -343,9 +353,11 @@ const createEditor = () => {
 	//dom渲染
 	editor.value.domRender()
 	//自动获取焦点
-	if (props.autofocus && !isSourceView.value && !isDisabled.value) {
-		collapseToEnd()
-	}
+	nextTick(() => {
+		if (props.autofocus && !isSourceView.value && !isDisabled.value) {
+			collapseToEnd()
+		}
+	})
 }
 //设定编辑器内的视频高度
 const setVideoHeight = () => {

package/src/editify/menu/menu.vue

@@ -1,10 +1,15 @@
 <template>
-	<div ref="menuRef" class="editify-menu" :class="{ 'editify-border': menuShowBorder, 'editify-source': isSourceView && menuMode == 'inner', 'editify-fullscreen': isFullScreen }" :data-editify-mode="menuMode" :style="{ zIndex: zIndex, ...(config.style || {}) }">
+	<div ref="menuRef" class="editify-menu"
+		:class="{ 'editify-border': menuShowBorder, 'editify-source': isSourceView && menuMode == 'inner', 'editify-fullscreen': isFullScreen }"
+		:data-editify-mode="menuMode" :style="{ zIndex: zIndex, ...(config.style || {}) }">
 		<template v-for="item in menuNames">
 			<!-- 内置菜单按钮 -->
-			<component :ref="(el:MenuItemComponentPublicInstance) => (menuItemRefs[item] = el)" v-if="!!currentDefaultMenu(item)" :is="currentDefaultMenu(item)" :color="color" :z-index="zIndex + 1" :config="(config as any)[item]" :disabled="isDisabled || !rangeKey" :tooltip="config.tooltip!"></component>
+			<component :ref="(el) => (menuItemRefs[item] = el as MenuItemComponentPublicInstance)"
+				v-if="!!currentDefaultMenu(item)" :is="currentDefaultMenu(item)" :color="color" :z-index="zIndex + 1"
+				:config="(config as any)[item]" :disabled="isDisabled || !rangeKey" :tooltip="config.tooltip!"></component>
 			<!-- 拓展菜单按钮 -->
-			<ExtendMenuButton v-else :ref="el => (menuItemRefs[item] = (el as MenuItemComponentPublicInstance))" :name="item" />
+			<ExtendMenuButton v-else :ref="el => (menuItemRefs[item] = (el as MenuItemComponentPublicInstance))"
+				:name="item" />
 		</template>
 	</div>
 </template>
@@ -127,73 +132,73 @@ const ExtendMenuButton = defineComponent(
 		return () => {
 			return configuration
 				? h(
-						Button,
-						{
-							ref: btnRef,
-							name: extendProps.name,
-							tooltip: props.config.tooltip,
-							color: props.color,
-							zIndex: props.zIndex + 1,
-							type: configuration.type || 'default',
-							title: `${configuration.title || ''}${configuration.shortcut?.title ? `【${configuration.shortcut?.title}】` : ''}`,
-							leftBorder: configuration.leftBorder || false,
-							rightBorder: configuration.rightBorder || false,
-							hideScroll: configuration.hideScroll || false,
-							disabled: isDisabled.value || !rangeKey.value || configuration.disabled,
-							active: configuration.active || false,
-							selectConfig: {
-								width: configuration.width,
-								maxHeight: configuration.maxHeight,
-								options: configuration.options
-							},
-							displayConfig: {
-								width: configuration.width,
-								maxHeight: configuration.maxHeight,
-								value: configuration.value,
-								options: configuration.options
-							},
-							onLayerShow: () => {
-								if (typeof configuration.onLayerShow == 'function') {
-									configuration.onLayerShow(extendProps.name, btnRef.value!)
-								}
-							},
-							onLayerShown: () => {
-								if (typeof configuration.onLayerShown == 'function') {
-									configuration.onLayerShown(extendProps.name, btnRef.value!)
-								}
-							},
-							onLayerHidden: () => {
-								if (typeof configuration.onLayerHidden == 'function') {
-									configuration.onLayerHidden(extendProps.name, btnRef.value!)
-								}
-							},
-							onOperate: (name, val) => {
-								if (typeof configuration.onOperate == 'function') {
-									configuration.onOperate(name, val, btnRef.value!)
-								}
+					Button,
+					{
+						ref: btnRef,
+						name: extendProps.name,
+						tooltip: props.config.tooltip,
+						color: props.color,
+						zIndex: props.zIndex + 1,
+						type: configuration.type || 'default',
+						title: `${configuration.title || ''}${configuration.shortcut?.title ? `【${configuration.shortcut?.title}】` : ''}`,
+						leftBorder: configuration.leftBorder || false,
+						rightBorder: configuration.rightBorder || false,
+						hideScroll: configuration.hideScroll || false,
+						disabled: isDisabled.value || !rangeKey.value || configuration.disabled,
+						active: configuration.active || false,
+						selectConfig: {
+							width: configuration.width,
+							maxHeight: configuration.maxHeight,
+							options: configuration.options
+						},
+						displayConfig: {
+							width: configuration.width,
+							maxHeight: configuration.maxHeight,
+							value: configuration.value,
+							options: configuration.options
+						},
+						onLayerShow: () => {
+							if (typeof configuration.onLayerShow == 'function') {
+								configuration.onLayerShow(extendProps.name, btnRef.value!)
+							}
+						},
+						onLayerShown: () => {
+							if (typeof configuration.onLayerShown == 'function') {
+								configuration.onLayerShown(extendProps.name, btnRef.value!)
+							}
+						},
+						onLayerHidden: () => {
+							if (typeof configuration.onLayerHidden == 'function') {
+								configuration.onLayerHidden(extendProps.name, btnRef.value!)
+							}
+						},
+						onOperate: (name, val) => {
+							if (typeof configuration.onOperate == 'function') {
+								configuration.onOperate(name, val, btnRef.value!)
+							}
+						}
+					},
+					{
+						default: () => {
+							if (configuration.default) {
+								return configuration.default(extendProps.name, btnRef.value!)
+							}
+							return null
+						},
+						layer: () => {
+							if (configuration.layer) {
+								return configuration.layer(extendProps.name, btnRef.value!)
 							}
+							return null
 						},
-						{
-							default: () => {
-								if (configuration.default) {
-									return configuration.default(extendProps.name, btnRef.value!)
-								}
-								return null
-							},
-							layer: () => {
-								if (configuration.layer) {
-									return configuration.layer(extendProps.name, btnRef.value!)
-								}
-								return null
-							},
-							option: () => {
-								if (configuration.option) {
-									return configuration.option(extendProps.name, btnRef.value!)
-								}
-								return null
+						option: () => {
+							if (configuration.option) {
+								return configuration.option(extendProps.name, btnRef.value!)
 							}
+							return null
 						}
-				  )
+					}
+				)
 				: null
 		}
 	},

package/src/feature/table.ts

@@ -205,9 +205,18 @@ export const TableToolbar = defineComponent(
 				editor.value.range!.anchor.element = editor.value.range!.focus.element
 				editor.value.range!.anchor.offset = editor.value.range!.focus.offset
 			}
-			const row = getMatchElementByRange(editor.value, dataRangeCaches.value, { parsedom: 'tr' })
-			if (row) {
+			const cell = getMatchElementByRange(editor.value, dataRangeCaches.value, { parsedom: 'td' })
+			if (cell) {
+				const { rowspan } = getCellSpanNumber(cell)
+				let row = cell.parent!
 				const tbody = row.parent!
+				if (type == 'down') {
+					let i = 1
+					while (i < rowspan) {
+						row = editor.value.getNextElement(row)!
+						i++
+					}
+				}
 				const { columnNumber } = getTableSize(tbody.children!)
 				const children: AlexElementCreateConfigType[] = []
 				for (let i = 0; i < columnNumber; i++) {

package/src/index.ts

@@ -5,11 +5,11 @@ import { withInstall } from '@/core/tool'
 //重写AlexElement.isPreStyle，将td加入到代码块样式中去
 const originFn = AlexElement.prototype.isPreStyle
 AlexElement.prototype.isPreStyle = function () {
-	const block = this.getInblock() || this.getBlock()
-	if (block.parsedom == 'td') {
-		return true
-	}
-	return originFn.apply(this)
+  const block = this.getInblock() || this.getBlock()
+  if (block.parsedom == 'td') {
+    return true
+  }
+  return originFn.apply(this)
 }
 
 //引入根节点颜色变量样式
@@ -40,67 +40,14 @@ export type * from '@/editify/menu'
 export type * from '@/editify/toolbar'
 
 //导出编辑器操作方法
-export {
-	elementIsMatch,
-	getMatchElementByElement,
-	getMatchElementByRange,
-	elementIsList,
-	getListByElement,
-	hasListInRange,
-	rangeIsInList,
-	elementIsTask,
-	getTaskByElement,
-	hasTaskInRange,
-	rangeIsInTask,
-	elementIsAttachment,
-	hasAttachmentInRange,
-	elementIsMathformula,
-	getMathformulaByElement,
-	hasMathformulaInRange,
-	elementIsInfoBlock,
-	getInfoBlockByElement,
-	hasInfoBlockInRange,
-	rangeIsInInfoBlock,
-	hasPreInRange,
-	hasTableInRange,
-	hasQuoteInRange,
-	rangeIsInQuote,
-	hasLinkInRange,
-	hasImageInRange,
-	hasVideoInRange,
-	queryTextStyle,
-	setTextStyle,
-	removeTextStyle,
-	queryTextMark,
-	setTextMark,
-	removeTextMark,
-	getRangeText,
-	addSpaceTextToBothSides,
-	setHeading,
-	setIndentIncrease,
-	setIndentDecrease,
-	setQuote,
-	setAlign,
-	setList,
-	setTask,
-	setLineHeight,
-	insertLink,
-	insertImage,
-	insertVideo,
-	insertTable,
-	insertCodeBlock,
-	insertSeparator,
-	insertAttachment,
-	insertMathformula,
-	insertInfoBlock
-} from '@/core/function'
+export { elementIsMatch, getMatchElementByElement, getMatchElementByRange, elementIsList, getListByElement, hasListInRange, rangeIsInList, elementIsTask, getTaskByElement, hasTaskInRange, rangeIsInTask, elementIsAttachment, hasAttachmentInRange, elementIsMathformula, getMathformulaByElement, hasMathformulaInRange, elementIsInfoBlock, getInfoBlockByElement, hasInfoBlockInRange, rangeIsInInfoBlock, hasPreInRange, hasTableInRange, hasQuoteInRange, rangeIsInQuote, hasLinkInRange, hasImageInRange, hasVideoInRange, queryTextStyle, setTextStyle, removeTextStyle, queryTextMark, setTextMark, removeTextMark, getRangeText, addSpaceTextToBothSides, setHeading, setIndentIncrease, setIndentDecrease, setQuote, setAlign, setList, setTask, setLineHeight, insertLink, insertImage, insertVideo, insertTable, insertCodeBlock, insertSeparator, insertAttachment, insertMathformula, insertInfoBlock } from '@/core/function'
 
 //安装函数
 const install = (app: App) => {
-	app.component(Editify.name!, Editify)
+  app.component(Editify.name!, Editify)
 }
 //版本号
-const version = '0.2.27'
+const version = '0.2.29'
 
 //导出组件和安装函数
 export { Editify as default, Editify, install, AlexElement, version }