mirror of https://github.com/halo-dev/halo
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
parent
ebf1a1fe1b
commit
3076838f36
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue