perf: 文本框优化（创建文本自动聚焦、空文本自动删除）

src/hooks/useCreateElement.ts

@@ -32,7 +32,7 @@ export default () => {
   const { addHistorySnapshot } = useHistorySnapshot()
 
   // 创建（插入）一个元素并将其设置为被选中元素
-  const createElement = (element: PPTElement) => {
+  const createElement = (element: PPTElement, callback?: () => void) => {
     slidesStore.addElement(element)
     mainStore.setActiveElementIdList([element.id])
 
@@ -42,6 +42,8 @@ export default () => {
       mainStore.setEditorareaFocus(true)
     }, 0)
 
+    if (callback) callback()
+
     addHistorySnapshot()
   }
 
@@ -170,11 +172,12 @@ export default () => {
    * @param position 位置大小信息
    * @param content 文本内容
    */
-  const createTextElement = (position: CommonElementPosition, content = '请输入内容') => {
+  const createTextElement = (position: CommonElementPosition, content = '') => {
     const { left, top, width, height } = position
+    const id = nanoid(10)
     createElement({
       type: 'text',
-      id: nanoid(10),
+      id,
       left, 
       top, 
       width, 
@@ -183,6 +186,11 @@ export default () => {
       rotate: 0,
       defaultFontName: theme.value.fontName,
       defaultColor: theme.value.fontColor,
+    }, () => {
+      setTimeout(() => {
+        const editorRef: HTMLElement | null = document.querySelector(`#editable-element-${id} .ProseMirror`)
+        if (editorRef) editorRef.focus()
+      }, 0)
     })
   }
   

src/store/slides.ts

@@ -156,6 +156,13 @@ export const useSlidesStore = defineStore('slides', {
       this.slides[this.slideIndex].elements = newEls
     },
 
+    deleteElement(elementId: string | string[]) {
+      const elementIdList = Array.isArray(elementId) ? elementId : [elementId]
+      const currentSlideEls = this.slides[this.slideIndex].elements
+      const newEls = currentSlideEls.filter(item => !elementIdList.includes(item.id))
+      this.slides[this.slideIndex].elements = newEls
+    },
+  
     updateElement(data: UpdateElementData) {
       const { id, props } = data
       const elIdList = typeof id === 'string' ? [id] : id

src/views/Editor/Canvas/hooks/useScaleElement.ts

@@ -145,7 +145,7 @@ export default (
       baseTop = oppositePoint.top
     }
 
-    // 未旋转的元素具有缩放时的对齐吸附功能，在这处收集对齐对齐吸附线
+    // 未旋转的元素具有缩放时的对齐吸附功能，在此处收集对齐对齐吸附线
     // 包括页面内除目标元素外的其他元素在画布中的各个可吸附对齐位置：上下左右四边
     // 其中线条和被旋转过的元素不参与吸附对齐
     else {

src/views/components/element/ProsemirrorEditor.vue

@@ -11,7 +11,7 @@ import { debounce } from 'lodash'
 import { storeToRefs } from 'pinia'
 import { useMainStore } from '@/store'
 import { EditorView } from 'prosemirror-view'
-import { toggleMark, wrapIn, selectAll } from 'prosemirror-commands'
+import { toggleMark, wrapIn } from 'prosemirror-commands'
 import { initProsemirrorEditor, createDocument } from '@/utils/prosemirror'
 import { findNodesWithSameMark, getTextAttrs, autoSelectAll, addMark, markActive, getFontsize } from '@/utils/prosemirror/utils'
 import emitter, { EmitterEvents, RichTextCommand } from '@/utils/emitter'
@@ -63,11 +63,6 @@ export default defineComponent({
     }, 300, { trailing: true })
 
     const handleFocus = () => {
-      if (props.value === '请输入内容') {
-        setTimeout(() => {
-          selectAll(editorView.state, editorView.dispatch)
-        }, 100)
-      }
       mainStore.setDisableHotkeysState(true)
       emit('focus')
     }

src/views/components/element/TextElement/index.vue

@@ -40,6 +40,7 @@
           :editable="!elementInfo.lock"
           :value="elementInfo.content"
           @update="value => updateContent(value)"
+          @blur="checkEmptyText()"
           @mousedown="$event => handleSelectElement($event, false)"
         />
 
@@ -151,11 +152,17 @@ export default defineComponent({
       addHistorySnapshot()
     }
 
+    const checkEmptyText = () => {
+      const pureText = props.elementInfo.content.replaceAll(/<[^>]+>/g, '')
+      if (!pureText) slidesStore.deleteElement(props.elementInfo.id)
+    }
+
     return {
       elementRef,
       shadowStyle,
       updateContent,
       handleSelectElement,
+      checkEmptyText,
     }
   },
 })