From 3076838f36fba6eb34be9d438e6d6418037f205d Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Fri, 14 Jun 2024 16:08:39 +0800
Subject: [PATCH] fix: default editor focus setting failure (#6062)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind bug
/area editor
/area ui

#### What this PR does / why we need it:

当前为默认编辑器设置焦点的时机放在 `onMounted` 时，但此时默认编辑器可能还未加载成功且标题也为能成功加载，因此无法保证正确设置标题焦点。

当前 PR 将此时机放置在默认编辑器创建完成之后的 `onCreate` ，此时将能够保证焦点设置成功。

#### How to test it?

测试默认编辑器能否正常设置标题或内容的焦点。

#### Which issue(s) this PR fixes:

Fixes #6060

#### Does this PR introduce a user-facing change?
```release-note
解决使用默认编辑器时无法正确设置焦点的问题
```
---
 ui/src/components/editor/DefaultEditor.vue | 25 +++++++---------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/ui/src/components/editor/DefaultEditor.vue b/ui/src/components/editor/DefaultEditor.vue
index d6bc0d4fe..f8fe653a6 100644
--- a/ui/src/components/editor/DefaultEditor.vue
+++ b/ui/src/components/editor/DefaultEditor.vue
@@ -74,7 +74,6 @@ import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
 import {
   inject,
   markRaw,
-  nextTick,
   onBeforeUnmount,
   onMounted,
   ref,
@@ -169,6 +168,7 @@ const attachmentSelectorModal = ref(false);
 const { onAttachmentSelect, attachmentResult } = useAttachmentSelect();
 
 const editor = shallowRef<Editor>();
+const editorTitleRef = ref();
 
 const { pluginModules } = usePluginModuleStore();
 
@@ -408,6 +408,13 @@ onMounted(async () => {
     onUpdate: () => {
       debounceOnUpdate();
     },
+    onCreate() {
+      if (editor.value?.isEmpty && !props.title) {
+        editorTitleRef.value.focus();
+      } else {
+        editor.value?.commands.focus();
+      }
+    },
   });
 });
 
@@ -442,22 +449,6 @@ const currentLocale = i18n.global.locale.value as
 function onTitleInput(event: Event) {
   emit("update:title", (event.target as HTMLInputElement).value);
 }
-
-// Set focus
-const editorTitleRef = ref();
-onMounted(() => {
-  // if name is empty, it means the editor is in the creation mode
-  const urlParams = new URLSearchParams(window.location.search);
-  const name = urlParams.get("name");
-
-  if (!name) {
-    nextTick(() => {
-      editorTitleRef.value.focus();
-    });
-  } else {
-    editor.value?.commands.focus();
-  }
-});
 </script>
 
 <template>