feat: basic parsing of post content

components/common/RichContent.ts

@@ -0,0 +1,11 @@
+export default defineComponent({
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () => contentToVNode(props.content)
+  },
+})

components/publish/PublishWidget.vue

@@ -18,7 +18,12 @@ async function publish() {
 
 <template>
   <div flex flex-col gap-4 :class="isSending ? ' pointer-events-none' : ''">
-    <textarea v-model="draftPost" p2 border-rounded w-full h-40 color-black placeholder="What's on your mind?" />
+    <textarea
+      v-model="draftPost"
+      placeholder="What's on your mind?"
+      p2 border-rounded w-full h-40
+      bg-gray:10 outline-none border="~ border"
+    />
     <div flex justify-end>
       <button h-9 w-22 bg-primary border-rounded :disabled="draftPost === ''" @click="publish">
         Publish!

components/status/StatusBody.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import type { Status } from 'masto'
 
-defineProps<{
+const { status } = defineProps<{
   status: Status
 }>()
-
-// TODO: parse and interop content (link, emojis)
 </script>
 
 <template>
-  <div class="status-body" v-html="sanitize(status.content)" />
+  <div class="status-body">
+    <CommonRichContent :content="status.content" />
+  </div>
 </template>
 
 <style lang="postcss">