feat: focus editor on reply click (#434)

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>

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)

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"