From f5326c71b8406cdb239d9dc25c123bc8e13a158d Mon Sep 17 00:00:00 2001 From: zxc <1171051090@qq.com> Date: Sat, 24 Aug 2024 13:46:08 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E6=96=87=E6=9C=AC?= =?UTF-8?q?=E6=A1=86=E5=86=85=E5=8E=86=E5=8F=B2=E8=AE=B0=E5=BD=95=E4=B8=8E?= =?UTF-8?q?=E5=85=A8=E5=B1=80=E5=8E=86=E5=8F=B2=E8=AE=B0=E5=BD=95=E9=97=B4?= =?UTF-8?q?=E7=9A=84=E7=9B=B8=E4=BA=92=E5=BD=B1=E5=93=8D=EF=BC=88#282?= =?UTF-8?q?=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/mocks/slides.ts | 10 ++++----- .../components/element/ProsemirrorEditor.vue | 21 ++++++++++++++----- .../components/element/ShapeElement/index.vue | 6 +++--- .../components/element/TextElement/index.vue | 6 +++--- 4 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/mocks/slides.ts b/src/mocks/slides.ts index 8bb7216c8..26c2a7122 100644 --- a/src/mocks/slides.ts +++ b/src/mocks/slides.ts @@ -40,7 +40,7 @@ export const slides: Slide[] = [ width: 450, height: 188, lineHeight: 1.2, - content: '

PPTist

', + content: '

PPTist

', rotate: 0, defaultFontName: 'Microsoft Yahei', defaultColor: '#333' @@ -52,7 +52,7 @@ export const slides: Slide[] = [ top: 253.25, width: 585, height: 56, - content: '

基于 Vue 3.x + TypeScript 的在线演示文稿应用

', + content: '

基于 Vue 3.x + TypeScript 的在线演示文稿应用

', rotate: 0, defaultFontName: 'Microsoft Yahei', defaultColor: '#333' @@ -86,7 +86,7 @@ export const slides: Slide[] = [ width: 711, height: 77, lineHeight: 1.2, - content: '

在此处添加标题

', + content: '

在此处添加标题

', rotate: 0, defaultFontName: 'Microsoft Yahei', defaultColor: '#333', @@ -98,7 +98,7 @@ export const slides: Slide[] = [ top: 249.84259259259264, width: 585, height: 56, - content: '

在此处添加副标题

', + content: '

在此处添加副标题

', rotate: 0, defaultFontName: 'Microsoft Yahei', defaultColor: '#333', @@ -171,7 +171,7 @@ export const slides: Slide[] = [ top: 198.10185185185182, width: 417.9629629629629, height: 140, - content: '

感谢观看

', + content: '

感谢观看

', rotate: 0, defaultFontName: 'Microsoft Yahei', defaultColor: '#333', diff --git a/src/views/components/element/ProsemirrorEditor.vue b/src/views/components/element/ProsemirrorEditor.vue index 51b2c77d8..4313875ed 100644 --- a/src/views/components/element/ProsemirrorEditor.vue +++ b/src/views/components/element/ProsemirrorEditor.vue @@ -22,6 +22,7 @@ import { indentCommand, textIndentCommand } from '@/utils/prosemirror/commands/s import { toggleList } from '@/utils/prosemirror/commands/toggleList' import { setListStyle } from '@/utils/prosemirror/commands/setListStyle' import type { TextFormatPainterKeys } from '@/types/edit' +import { KEYS } from '@/configs/hotkey' const props = withDefaults(defineProps<{ elementId: string @@ -36,7 +37,7 @@ const props = withDefaults(defineProps<{ }) const emit = defineEmits<{ - (event: 'update', payload: string): void + (event: 'update', payload: { value: string; ignore: boolean }): void (event: 'focus'): void (event: 'blur'): void (event: 'mousedown', payload: MouseEvent): void @@ -52,8 +53,12 @@ let editorView: EditorView // 聚焦时取消全局快捷键事件 // 输入文字时同步数据到vuex // 点击鼠标和键盘时同步富文本状态到工具栏 -const handleInput = debounce(function() { - emit('update', editorView.dom.innerHTML) +const handleInput = debounce(function(isHanldeHistory = false) { + if (props.value.replace(/ style=\"\"/g, '') === editorView.dom.innerHTML.replace(/ style=\"\"/g, '')) return + emit('update', { + value: editorView.dom.innerHTML, + ignore: isHanldeHistory, + }) }, 300, { trailing: true }) const handleFocus = () => { @@ -74,8 +79,14 @@ const handleClick = debounce(function() { mainStore.setRichtextAttrs(attrs) }, 30, { trailing: true }) -const handleKeydown = () => { - handleInput() +const handleKeydown = (editorView: EditorView, e: KeyboardEvent) => { + const { ctrlKey, shiftKey, metaKey } = e + const ctrlActive = ctrlKey || shiftKey || metaKey + const key = e.key.toUpperCase() + + const isHanldeHistory = ctrlActive && (key === KEYS.Z || key === KEYS.Y) + + handleInput(isHanldeHistory) handleClick() } diff --git a/src/views/components/element/ShapeElement/index.vue b/src/views/components/element/ShapeElement/index.vue index 25615ee91..d4c0317ef 100644 --- a/src/views/components/element/ShapeElement/index.vue +++ b/src/views/components/element/ShapeElement/index.vue @@ -70,7 +70,7 @@ :defaultFontName="text.defaultFontName" :editable="!elementInfo.lock" :value="text.content" - @update="value => updateText(value)" + @update="({ value, ignore }) => updateText(value, ignore)" @blur="checkEmptyText()" @mousedown="$event => handleSelectElement($event, false)" /> @@ -156,14 +156,14 @@ const text = computed(() => { return props.elementInfo.text }) -const updateText = (content: string) => { +const updateText = (content: string, ignore = false) => { const _text = { ...text.value, content } slidesStore.updateElement({ id: props.elementInfo.id, props: { text: _text }, }) - addHistorySnapshot() + if (!ignore) addHistorySnapshot() } const checkEmptyText = () => { diff --git a/src/views/components/element/TextElement/index.vue b/src/views/components/element/TextElement/index.vue index 59f7fac1d..7e2fd889d 100644 --- a/src/views/components/element/TextElement/index.vue +++ b/src/views/components/element/TextElement/index.vue @@ -47,7 +47,7 @@ :style="{ '--paragraphSpace': `${elementInfo.paragraphSpace === undefined ? 5 : elementInfo.paragraphSpace}px`, }" - @update="value => updateContent(value)" + @update="({ value, ignore }) => updateContent(value, ignore)" @mousedown="$event => handleSelectElement($event, false)" /> @@ -157,13 +157,13 @@ onUnmounted(() => { if (elementRef.value) resizeObserver.unobserve(elementRef.value) }) -const updateContent = (content: string) => { +const updateContent = (content: string, ignore = false) => { slidesStore.updateElement({ id: props.elementInfo.id, props: { content }, }) - addHistorySnapshot() + if (!ignore) addHistorySnapshot() } const checkEmptyText = debounce(function() {