vue-editify 0.2.24 → 0.2.26

package/lib/index.d.ts

@@ -764,8 +764,6 @@ declare const Editify: import('./core/tool').SFCWithInstall<import('vue').Define
     menuHeight: import('vue').ComputedRef<number | null>;
     collapseToEnd: () => void;
     collapseToStart: () => void;
-    undo: () => void;
-    redo: () => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     change: (...args: any[]) => void;
     blur: (...args: any[]) => void;
@@ -953,5 +951,5 @@ 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';
 declare const install: (app: App) => void;
-declare const version = "0.2.24";
+declare const version = "0.2.26";
 export { Editify as default, Editify, install, AlexElement, version };

package/package.json

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

package/src/core/function.ts

@@ -1867,7 +1867,7 @@ export const insertLink = (editor: AlexEditor, text: string, url: string, newOpe
 		children: [
 			{
 				type: 'text',
-				textcontent: text
+				textContent: text
 			}
 		]
 	})
@@ -2004,7 +2004,7 @@ export const insertCodeBlock = (editor: AlexEditor, dataRangeCaches: AlexElement
 				children: [
 					{
 						type: 'text',
-						textcontent: item
+						textContent: item
 					}
 				]
 			})
@@ -2052,7 +2052,7 @@ export const insertCodeBlock = (editor: AlexEditor, dataRangeCaches: AlexElement
 				if (index > 0) {
 					const text = AlexElement.create({
 						type: 'text',
-						textcontent: '\n'
+						textContent: '\n'
 					})
 					if (pre.hasChildren()) {
 						editor.addElementTo(text, pre, pre.children!.length)

package/src/editify/editify.less

@@ -86,6 +86,7 @@
 		font-size: var(--editify-font-size);
 		position: relative;
 		line-height: 1.5;
+		overflow-wrap: break-word;
 
 		//显示占位符
 		&.editify-placeholder::before {
@@ -554,6 +555,7 @@
 		resize: none;
 		border: none;
 		border-radius: inherit;
+		overflow-wrap: break-word;
 		z-index: 1;
 	}
 }

package/src/editify/editify.vue

@@ -5,7 +5,7 @@
 		<!-- 编辑层，与编辑区域宽高相同必须适配 -->
 		<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"></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" />
 			<!-- 工具条 -->
@@ -738,7 +738,10 @@ const handleCustomParseNode = (ele: AlexElement) => {
 }
 //编辑区域键盘按下
 const handleEditorKeydown = (val: string, e: KeyboardEvent) => {
+	//如果禁用不执行后面的逻辑
 	if (isDisabled.value) {
+		//自定义键盘按下操作
+		emits('keydown', val, e)
 		return
 	}
 	//遍历菜单栏配置，设置快捷键
@@ -851,9 +854,6 @@ const handleEditorKeydown = (val: string, e: KeyboardEvent) => {
 }
 //编辑区域键盘松开
 const handleEditorKeyup = (val: string, e: Event) => {
-	if (isDisabled.value) {
-		return
-	}
 	//自定义键盘松开操作
 	emits('keyup', val, e)
 }
@@ -879,9 +879,6 @@ const handleEditorClick = (e: Event) => {
 }
 //编辑器的值更新
 const handleEditorChange = (newVal: string, oldVal: string) => {
-	if (isDisabled.value) {
-		return
-	}
 	//内部修改
 	internalModify(newVal)
 	//触发change事件
@@ -959,23 +956,18 @@ const handleInsertParagraph = (element: AlexElement, previousElement: AlexElemen
 }
 //编辑器焦点更新
 const handleRangeUpdate = () => {
-	if (isDisabled.value) {
-		return
-	}
 	//更新rangeKey
 	if (rangeKey.value) {
 		rangeKey.value++
 	} else {
 		rangeKey.value = 1
 	}
-
 	//没有range直接返回
 	if (!editor.value!.range) {
 		return
 	}
 	//获取光标选取范围内的元素数据，并且进行缓存
 	dataRangeCaches.value = editor.value!.getElementsByRange()
-
 	//节流写法
 	if (rangeUpdateTimer.value) {
 		clearTimeout(rangeUpdateTimer.value)
@@ -1034,46 +1026,26 @@ const handleAfterRender = () => {
 }
 //api：光标设置到文档底部
 const collapseToEnd = () => {
-	if (isDisabled.value) {
-		return
-	}
 	editor.value!.collapseToEnd()
 	editor.value!.rangeRender()
 	DapElement.setScrollTop({
 		el: contentRef.value!,
 		number: DapElement.getScrollHeight(contentRef.value!),
-		time: 0
+		time: 300
 	})
 }
 //api：光标设置到文档头部
 const collapseToStart = () => {
-	if (isDisabled.value) {
-		return
-	}
 	editor.value!.collapseToStart()
 	editor.value!.rangeRender()
 	nextTick(() => {
 		DapElement.setScrollTop({
 			el: contentRef.value!,
 			number: 0,
-			time: 0
+			time: 300
 		})
 	})
 }
-//api：撤销
-const undo = () => {
-	if (isDisabled.value) {
-		return
-	}
-	editor.value!.undo()
-}
-//api：重做
-const redo = () => {
-	if (isDisabled.value) {
-		return
-	}
-	editor.value!.redo()
-}
 
 //监听编辑的值变更
 watch(
@@ -1159,8 +1131,6 @@ provide('isSourceView', isSourceView)
 provide('isFullScreen', isFullScreen)
 provide('rangeKey', rangeKey)
 provide('dataRangeCaches', dataRangeCaches)
-provide('undo', undo)
-provide('redo', redo)
 provide('$editTrans', $editTrans)
 provide('showBorder', showBorder)
 provide('isDark', isDark)
@@ -1176,9 +1146,7 @@ defineExpose({
 	textValue,
 	menuHeight,
 	collapseToEnd,
-	collapseToStart,
-	undo,
-	redo
+	collapseToStart
 })
 </script>
 <style scoped src="./editify.less"></style>

package/src/feature/redo.ts

@@ -18,7 +18,6 @@ export const RedoMenuButton = defineComponent(
 		const $editTrans = inject<(key: string) => any>('$editTrans')!
 		const isSourceView = inject<Ref<boolean>>('isSourceView')!
 		const rangeKey = inject<Ref<number | null>>('rangeKey')!
-		const redo = inject<() => void>('redo')!
 
 		const btnRef = ref<InstanceType<typeof Button> | null>(null)
 
@@ -41,7 +40,7 @@ export const RedoMenuButton = defineComponent(
 							rightBorder: props.config.rightBorder,
 							active: false,
 							disabled: props.disabled || isSourceView.value || (rangeKey.value && editor.value.history && editor.value.history.redoRecords.length == 0) || props.config.disabled,
-							onOperate: () => redo()
+							onOperate: () => editor.value.redo()
 						},
 						{
 							default: () => h(Icon, { value: 'redo' })

package/src/feature/undo.ts

@@ -18,8 +18,6 @@ export const UndoMenuButton = defineComponent(
 		const $editTrans = inject<(key: string) => any>('$editTrans')!
 		const isSourceView = inject<Ref<boolean>>('isSourceView')!
 		const rangeKey = inject<Ref<number | null>>('rangeKey')!
-		const undo = inject<() => void>('undo')!
-
 		const btnRef = ref<InstanceType<typeof Button> | null>(null)
 
 		expose({
@@ -41,7 +39,7 @@ export const UndoMenuButton = defineComponent(
 							rightBorder: props.config.rightBorder,
 							active: false,
 							disabled: props.disabled || isSourceView.value || (rangeKey.value && editor.value.history && editor.value.history.records.length <= 1) || props.config.disabled,
-							onOperate: () => undo()
+							onOperate: () => editor.value.undo()
 						},
 						{
 							default: () => h(Icon, { value: 'undo' })

package/src/index.ts

@@ -100,7 +100,7 @@ const install = (app: App) => {
 	app.component(Editify.name!, Editify)
 }
 //版本号
-const version = '0.2.24'
+const version = '0.2.26'
 
 //导出组件和安装函数
 export { Editify as default, Editify, install, AlexElement, version }