fix: 优化文本框内历史记录与全局历史记录间的相互影响（#282）

pipipi-pikachu · Aug 24, 2024 · f5326c7 · f5326c7
1 parent b7ad764
commit f5326c7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 16 deletions.
diff --git 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: '<p><strong><span style=\'font-size:  112px\'>PPTist</span></strong></p>',
+        content: '<p><strong><span style=\"font-size: 112px;\">PPTist</span></strong></p>',
         rotate: 0,
         defaultFontName: 'Microsoft Yahei',
         defaultColor: '#333'
@@ -52,7 +52,7 @@ export const slides: Slide[] = [
         top: 253.25,
         width: 585,
         height: 56,
-        content: '<p><span style=\'font-size:  24px\'>基于 Vue 3.x + TypeScript 的在线演示文稿应用</span></p>',
+        content: '<p><span style=\"font-size: 24px;\">基于 Vue 3.x + TypeScript 的在线演示文稿应用</span></p>',
         rotate: 0,
         defaultFontName: 'Microsoft Yahei',
         defaultColor: '#333'
@@ -86,7 +86,7 @@ export const slides: Slide[] = [
         width: 711,
         height: 77,
         lineHeight: 1.2,
-        content: '<p style=\'text-align: center;\'><strong><span style=\'font-size: 48px\'>在此处添加标题</span></strong></p>',
+        content: '<p style=\"text-align: center;\"><strong><span style=\"font-size: 48px;\">在此处添加标题</span></strong></p>',
         rotate: 0,
         defaultFontName: 'Microsoft Yahei',
         defaultColor: '#333',
@@ -98,7 +98,7 @@ export const slides: Slide[] = [
         top: 249.84259259259264,
         width: 585,
         height: 56,
-        content: '<p style=\'text-align: center;\'><span style=\'font-size: 24px\'>在此处添加副标题</span></p>',
+        content: '<p style=\"text-align: center;\"><span style=\"font-size: 24px;\">在此处添加副标题</span></p>',
         rotate: 0,
         defaultFontName: 'Microsoft Yahei',
         defaultColor: '#333',
@@ -171,7 +171,7 @@ export const slides: Slide[] = [
         top: 198.10185185185182,
         width: 417.9629629629629,
         height: 140,
-        content: '<p style=\'text-align: center;\'><strong><span style=\'color: #ffffff;\'><span style=\'font-size: 80px\'>感谢观看</span></span></strong></p>',
+        content: '<p style=\"text-align: center;\"><strong><span style=\"font-size: 80px;\"><span style=\"color: rgb(255, 255, 255);\">感谢观看</span></span></strong></p>',
         rotate: 0,
         defaultFontName: 'Microsoft Yahei',
         defaultColor: '#333',

diff --git 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
@@ -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<ShapeText>(() => {
   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
@@ -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() {