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) const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
defineExpose({
focusEditor: () => {
editor.value?.commands?.focus?.()
},
})
</script> </script>
<template> <template>

View File

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

View File

@ -11,6 +11,7 @@ const route = useRoute()
const id = $(computedEager(() => route.params.status as string)) const id = $(computedEager(() => route.params.status as string))
const main = ref<ComponentPublicInstance | null>(null) const main = ref<ComponentPublicInstance | null>(null)
let bottomSpace = $ref(0) let bottomSpace = $ref(0)
const publishWidget = ref()
const { data: status, pending, refresh: refreshStatus } = useAsyncData(`status:${id}`, async () => ( const { data: status, pending, refresh: refreshStatus } = useAsyncData(`status:${id}`, async () => (
window.history.state?.status as Status | undefined) window.history.state?.status as Status | undefined)
@ -39,6 +40,12 @@ if (pendingContext) {
}) })
} }
const focusEditor = () => {
publishWidget.value?.focusEditor?.()
}
provide('focus-editor', focusEditor)
onReactivated(() => { onReactivated(() => {
// Silently update data when reentering the page // 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 // 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 <PublishWidget
v-if="currentUser" v-if="currentUser"
ref="publishWidget"
:draft-key="replyDraft!.key" :draft-key="replyDraft!.key"
:initial="replyDraft!.draft" :initial="replyDraft!.draft"
border="t base" border="t base"