feat: focus editor on reply click (#434)

zio/stable
Joaquín Sánchez 2022-12-14 17:45:46 +01:00 committed by GitHub
parent e4b7b8061a
commit 39ed6bffec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 1 deletions

View File

@ -151,6 +151,12 @@ async function onDrop(files: File[] | null) {
}
const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
defineExpose({
focusEditor: () => {
editor.value?.commands?.focus?.()
},
})
</script>
<template>

View File

@ -7,6 +7,8 @@ const props = defineProps<{
command?: boolean
}>()
const focusEditor = inject<() => void>('focus-editor')
const { details, command } = $(props)
const {
@ -21,7 +23,7 @@ const reply = () => {
if (!checkLogin())
return
if (details) {
// TODO focus to editor
focusEditor?.()
}
else {
const { key, draft } = getReplyDraft(status)

View File

@ -11,6 +11,7 @@ const route = useRoute()
const id = $(computedEager(() => route.params.status as string))
const main = ref<ComponentPublicInstance | null>(null)
let bottomSpace = $ref(0)
const publishWidget = ref()
const { data: status, pending, refresh: refreshStatus } = useAsyncData(`status:${id}`, async () => (
window.history.state?.status as Status | undefined)
@ -39,6 +40,12 @@ if (pendingContext) {
})
}
const focusEditor = () => {
publishWidget.value?.focusEditor?.()
}
provide('focus-editor', focusEditor)
onReactivated(() => {
// Silently update data when reentering the page
// The user will see the previous content first, and any changes will be updated to the UI when the request is completed
@ -66,6 +73,7 @@ onReactivated(() => {
/>
<PublishWidget
v-if="currentUser"
ref="publishWidget"
:draft-key="replyDraft!.key"
:initial="replyDraft!.draft"
border="t base"