fix: default editor focus setting failure (#6062)

#### 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
解决使用默认编辑器时无法正确设置焦点的问题
```
pull/6089/head
Takagi 2024-06-14 16:08:39 +08:00 committed by GitHub
parent ebf1a1fe1b
commit 3076838f36
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 17 deletions

View File

@ -74,7 +74,6 @@ import { OverlayScrollbarsComponent } from "overlayscrollbars-vue";
import { import {
inject, inject,
markRaw, markRaw,
nextTick,
onBeforeUnmount, onBeforeUnmount,
onMounted, onMounted,
ref, ref,
@ -169,6 +168,7 @@ const attachmentSelectorModal = ref(false);
const { onAttachmentSelect, attachmentResult } = useAttachmentSelect(); const { onAttachmentSelect, attachmentResult } = useAttachmentSelect();
const editor = shallowRef<Editor>(); const editor = shallowRef<Editor>();
const editorTitleRef = ref();
const { pluginModules } = usePluginModuleStore(); const { pluginModules } = usePluginModuleStore();
@ -408,6 +408,13 @@ onMounted(async () => {
onUpdate: () => { onUpdate: () => {
debounceOnUpdate(); 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) { function onTitleInput(event: Event) {
emit("update:title", (event.target as HTMLInputElement).value); 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> </script>
<template> <template>