From 87c9a2996e525b0445c28bd57d85b1d4626ffb15 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 6 Jun 2021 11:16:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A1=A8=E6=A0=BC=E5=8D=95=E5=85=83?=
 =?UTF-8?q?=E6=A0=BC=E5=86=85=E6=97=A0=E6=B3=95=E8=BE=93=E5=85=A5=E7=A9=BA?=
 =?UTF-8?q?=E6=A0=BC=E5=92=8C=E6=8D=A2=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../element/TableElement/CustomTextarea.vue    | 12 ++++++------
 .../element/TableElement/EditableTable.vue     | 18 +++++++++++-------
 .../element/TableElement/StaticTable.vue       |  5 +++--
 .../components/element/TableElement/utils.ts   |  4 ++++
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/views/components/element/TableElement/CustomTextarea.vue b/src/views/components/element/TableElement/CustomTextarea.vue
index c3643b8a..f0666f90 100644
--- a/src/views/components/element/TableElement/CustomTextarea.vue
+++ b/src/views/components/element/TableElement/CustomTextarea.vue
@@ -16,7 +16,7 @@ import { defineComponent, onUnmounted, ref, watch } from 'vue'
 export default defineComponent({
   name: 'custom-textarea',
   props: {
-    modelValue: {
+    value: {
       type: String,
       default: '',
     },
@@ -32,16 +32,16 @@ export default defineComponent({
 
     // 自定义v-modal，同步数据
     // 当文本框聚焦时，不执行数据同步
-    watch(() => props.modelValue, () => {
+    watch(() => props.value, () => {
       if (isFocus.value) return
-      text.value = props.modelValue
-      if (textareaRef.value) textareaRef.value.innerHTML = props.modelValue
+      text.value = props.value
+      if (textareaRef.value) textareaRef.value.innerHTML = props.value
     }, { immediate: true })
 
     const handleInput = () => {
       if (!textareaRef.value) return
       const text = textareaRef.value.innerHTML
-      emit('update:modelValue', text)
+      emit('updateValue', text)
     }
 
     // 聚焦时更新焦点标记，并监听粘贴事件
@@ -56,7 +56,7 @@ export default defineComponent({
         const clipboardDataFirstItem = e.clipboardData.items[0]
 
         if (clipboardDataFirstItem && clipboardDataFirstItem.kind === 'string' && clipboardDataFirstItem.type === 'text/plain') {
-          clipboardDataFirstItem.getAsString(text => emit('update:modelValue', text))
+          clipboardDataFirstItem.getAsString(text => emit('updateValue', text))
         }
       }
     }
diff --git a/src/views/components/element/TableElement/EditableTable.vue b/src/views/components/element/TableElement/EditableTable.vue
index f9099038..c79cdbc8 100644
--- a/src/views/components/element/TableElement/EditableTable.vue
+++ b/src/views/components/element/TableElement/EditableTable.vue
@@ -55,12 +55,14 @@
             v-contextmenu="el => contextmenus(el)"
           >
             <CustomTextarea 
+              v-if="activedCell === `${rowIndex}_${colIndex}`"
               class="cell-text" 
               :class="{ 'active': activedCell === `${rowIndex}_${colIndex}` }"
-              :contenteditable="activedCell === `${rowIndex}_${colIndex}` ? 'plaintext-only' : false"
-              v-model="cell.text"
-              @update:modelValue="handleInput()"
+              contenteditable="plaintext-only"
+              :value="cell.text"
+              @updateValue="value => handleInput(value, rowIndex, colIndex)"
             />
+            <div v-else class="cell-text" v-html="formatText(cell.text)" />
           </td>
         </tr>
       </tbody>
@@ -76,7 +78,7 @@ import { PPTElementOutline, TableCell, TableTheme } from '@/types/slides'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import { KEYS } from '@/configs/hotkey'
 import { createRandomCode } from '@/utils/common'
-import { getTextStyle } from './utils'
+import { getTextStyle, formatText } from './utils'
 import useHideCells from './useHideCells'
 import useSubThemeColor from './useSubThemeColor'
 
@@ -428,8 +430,8 @@ export default defineComponent({
 
     // 将焦点移动到下一个单元格
     // 当前行右边有单元格时，焦点右移
-    // 当前行右边无单元格（已处在行末），且存在下一行时，焦点移动下下一行行首
-    // 当前行右边无单元格（已处在行末），且不存在下一行（已处在最后一行）时，新建一行并将焦点移动下下一行行首
+    // 当前行右边无单元格（已处在行末），且存在下一行时，焦点移动至下一行行首
+    // 当前行右边无单元格（已处在行末），且不存在下一行（已处在最后一行）时，新建一行并将焦点移动至下一行行首
     const tabActiveCell = () => {
       const getNextCell = (i: number, j: number): [number, number] | null => {
         if (!tableCells.value[i]) return null
@@ -501,7 +503,8 @@ export default defineComponent({
     })
 
     // 单元格文字输入时更新表格数据
-    const handleInput = debounce(function() {
+    const handleInput = debounce(function(value, rowIndex, colIndex) {
+      tableCells.value = tableCells.value[rowIndex][colIndex].text = value
       emit('change', tableCells.value)
     }, 300, { trailing: true })
 
@@ -626,6 +629,7 @@ export default defineComponent({
       contextmenus,
       handleInput,
       subThemeColor,
+      formatText,
     }
   },
 })
diff --git a/src/views/components/element/TableElement/StaticTable.vue b/src/views/components/element/TableElement/StaticTable.vue
index 84109611..89df0f1d 100644
--- a/src/views/components/element/TableElement/StaticTable.vue
+++ b/src/views/components/element/TableElement/StaticTable.vue
@@ -35,7 +35,7 @@
             :colspan="cell.colspan"
             v-show="!hideCells.includes(`${rowIndex}_${colIndex}`)"
           >
-            <div class="cell-text" v-html="cell.text" />
+            <div class="cell-text" v-html="formatText(cell.text)" />
           </td>
         </tr>
       </tbody>
@@ -46,7 +46,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from 'vue'
 import { PPTElementOutline, TableCell, TableTheme } from '@/types/slides'
-import { getTextStyle } from './utils'
+import { getTextStyle, formatText } from './utils'
 import useHideCells from './useHideCells'
 import useSubThemeColor from './useSubThemeColor'
 
@@ -99,6 +99,7 @@ export default defineComponent({
       totalWidth,
       hideCells,
       getTextStyle,
+      formatText,
       subThemeColor,
     }
   },
diff --git a/src/views/components/element/TableElement/utils.ts b/src/views/components/element/TableElement/utils.ts
index bf489cb0..1e5a74da 100644
--- a/src/views/components/element/TableElement/utils.ts
+++ b/src/views/components/element/TableElement/utils.ts
@@ -31,4 +31,8 @@ export const getTextStyle = (style?: TableCellStyle) => {
     fontFamily: fontname || '微软雅黑',
     textAlign: align || 'left',
   }
+}
+
+export const formatText = (text: string) => {
+  return text.replace(/\n/g, '</br>').replace(/ /g, '&nbsp;')
 }
\ No newline at end of file