From 39ed6bffec4c520906c65367c1d685e2d8e688b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Wed, 14 Dec 2022 17:45:46 +0100
Subject: [PATCH] feat: focus editor on reply click (#434)

---
 components/publish/PublishWidget.vue     | 6 ++++++
 components/status/StatusActions.vue      | 4 +++-
 pages/[[server]]/@[account]/[status].vue | 8 ++++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 143a7d8d..672493b3 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -151,6 +151,12 @@ async function onDrop(files: File[] | null) {
 }
 
 const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
+
+defineExpose({
+  focusEditor: () => {
+    editor.value?.commands?.focus?.()
+  },
+})
 </script>
 
 <template>
diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index df900fbe..760dec2d 100644
--- a/components/status/StatusActions.vue
+++ b/components/status/StatusActions.vue
@@ -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)
diff --git a/pages/[[server]]/@[account]/[status].vue b/pages/[[server]]/@[account]/[status].vue
index 3f5fdbd7..0e4d981f 100644
--- a/pages/[[server]]/@[account]/[status].vue
+++ b/pages/[[server]]/@[account]/[status].vue
@@ -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"