fix: publish content

components/publish/PublishWidget.vue

@@ -29,15 +29,8 @@ const { editor } = useTiptap({
   onPaste: handlePaste,
 })
 
-const status = $computed(() => {
-  return {
-    ...draft.params,
-    mediaIds: draft.attachments.map(a => a.id),
-  } as CreateStatusParams
-})
-
 const currentVisibility = $computed(() => {
-  return STATUS_VISIBILITIES.find(v => v.value === status.visibility) || STATUS_VISIBILITIES[0]
+  return STATUS_VISIBILITIES.find(v => v.value === draft.params.visibility) || STATUS_VISIBILITIES[0]
 })
 
 let isUploading = $ref<boolean>(false)
@@ -97,16 +90,30 @@ function chooseVisibility(visibility: StatusVisibility) {
 }
 
 async function publish() {
+  const payload = {
+    ...draft.params,
+    status: htmlToText(draft.params.status || ''),
+    mediaIds: draft.attachments.map(a => a.id),
+  } as CreateStatusParams
+
   if (process.dev) {
-    alert(JSON.stringify(draft.params, null, 2))
+    // eslint-disable-next-line no-console
+    console.info({
+      raw: draft.params.status,
+      ...payload,
+    })
+    const result = confirm('[DEV] Payload logged to console, do you want to publish it?')
+    if (!result)
       return
   }
+
   try {
     isSending = true
+
     if (!draft.editingStatus)
-      await masto.statuses.create(status)
+      await masto.statuses.create(payload)
     else
-      await masto.statuses.update(draft.editingStatus.id, status)
+      await masto.statuses.update(draft.editingStatus.id, payload)
 
     draft = getDefaultDraft({ inReplyToId })
     isPublishDialogOpen.value = false

components/status/StatusCard.vue

@@ -68,7 +68,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
 </script>
 
 <template>
-  <div ref="el" flex flex-col gap-2 px-4 transition-100 cursor-pointer :class="{ 'hover:bg-active': hover }" @click="onclick">
+  <div ref="el" flex flex-col gap-2 px-4 transition-100 :class="{ 'hover:bg-active': hover }" @click="onclick">
     <div v-if="rebloggedBy" pl8>
       <div flex="~ wrap" gap-1 items-center text-gray:75 text-sm>
         <div i-ri:repeat-fill mr-1 />

composables/content.ts

@@ -104,13 +104,15 @@ export function treeToVNode(
   return null
 }
 
-function htmlToText(html: string) {
+export function htmlToText(html: string) {
   const tree = parseFragment(html)
-  return tree.childNodes.map(n => treeToText(n)).join('')
+  return tree.childNodes.map(n => treeToText(n)).join('').trim()
 }
 
 function treeToText(input: Node): string {
   let pre = ''
+  let body = ''
+  let post = ''
 
   if (input.nodeName === '#text')
     // @ts-expect-error casing
@@ -119,11 +121,16 @@ function treeToText(input: Node): string {
   if (input.nodeName === 'br')
     return '\n'
 
-  if (input.nodeName === 'p')
+  if (['p', 'pre'].includes(input.nodeName))
     pre = '\n'
 
-  if ('childNodes' in input)
-    return pre + input.childNodes.map(n => treeToText(n)).join('')
+  if (input.nodeName === 'code') {
+    pre = '`'
+    post = '`'
+  }
 
-  return pre
+  if ('childNodes' in input)
+    body = input.childNodes.map(n => treeToText(n)).join('')
+
+  return pre + body + post
 }