fix: 添加模板时形状内文字异常自动聚焦

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) => {

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>