From 731875501143deb150aa23b7c4ad80d28e5aab65 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sat, 18 Jun 2022 09:25:13 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B7=BB=E5=8A=A0=E6=A8=A1=E6=9D=BF?=
 =?UTF-8?q?=E6=97=B6=E5=BD=A2=E7=8A=B6=E5=86=85=E6=96=87=E5=AD=97=E5=BC=82?=
 =?UTF-8?q?=E5=B8=B8=E8=87=AA=E5=8A=A8=E8=81=9A=E7=84=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/element/ProsemirrorEditor.vue  |  4 ++++
 src/views/components/element/ShapeElement/index.vue | 12 +++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/views/components/element/ProsemirrorEditor.vue b/src/views/components/element/ProsemirrorEditor.vue
index 84d98be9..9bd1c505 100644
--- a/src/views/components/element/ProsemirrorEditor.vue
+++ b/src/views/components/element/ProsemirrorEditor.vue
@@ -121,6 +121,10 @@ onUnmounted(() => {
   editorView && editorView.destroy()
 })
 
+// 暴露 focus 方法
+const focus = () => editorView.focus()
+defineExpose({ focus })
+
 // 执行富文本命令（可以是一个或多个）
 // 部分命令在执行前先判断当前选区是否为空，如果选区为空先进行全选操作
 const execCommand = ({ target, action }: RichTextCommand) => {
diff --git a/src/views/components/element/ShapeElement/index.vue b/src/views/components/element/ShapeElement/index.vue
index 47e11384..293e0146 100644
--- a/src/views/components/element/ShapeElement/index.vue
+++ b/src/views/components/element/ShapeElement/index.vue
@@ -25,7 +25,7 @@
         v-contextmenu="contextmenus"
         @mousedown="$event => handleSelectElement($event)"
         @touchstart="$event => handleSelectElement($event)"
-        @dblclick="editable = true"
+        @dblclick="startEdit()"
       >
         <svg 
           overflow="visible" 
@@ -60,12 +60,12 @@
 
         <div class="shape-text" :class="[text.align, { 'editable': editable || text.content }]">
           <ProsemirrorEditor
+            ref="prosemirrorEditorRef"
             v-if="editable || text.content"
             :elementId="elementInfo.id"
             :defaultColor="text.defaultColor"
             :defaultFontName="text.defaultFontName"
             :editable="!elementInfo.lock"
-            :autoFocus="true"
             :value="text.content"
             @update="value => updateText(value)"
             @blur="checkEmptyText()"
@@ -79,7 +79,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, PropType, ref, watch } from 'vue'
+import { computed, nextTick, PropType, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
 import { PPTShapeElement, ShapeText } from '@/types/slides'
@@ -168,6 +168,12 @@ const checkEmptyText = () => {
     addHistorySnapshot()
   }
 }
+
+const prosemirrorEditorRef = ref<typeof ProsemirrorEditor>()
+const startEdit = () => {
+  editable.value = true
+  nextTick(() => prosemirrorEditorRef.value && prosemirrorEditorRef.value.focus())
+}
 </script>
 
 <style lang="scss" scoped>