feat: ✨ Add note editing capabilities

composables/EventBus.ts

@@ -22,7 +22,9 @@ type ApplicationEvents = {
     "composer:open": undefined;
     "composer:reply": Status;
     "composer:quote": Status;
+    "composer:edit": Status;
     "composer:send": Status;
+    "composer:send-edit": Status;
     "composer:close": undefined;
     "notification:new": NotificationEvent;
     "attachment:view": Attachment;

composables/NoteData.ts

@@ -22,12 +22,12 @@ export const useNoteData = (
             false,
     );
     const mentions = useResolveMentions(
-        renderedNote.value?.mentions ?? [],
+        computed(() => renderedNote.value?.mentions ?? []),
         client.value,
     );
     const content = useParsedContent(
-        renderedNote.value?.content ?? "",
-        renderedNote.value?.emojis ?? [],
+        computed(() => renderedNote.value?.content ?? ""),
+        computed(() => renderedNote.value?.emojis ?? []),
         mentions,
     );
     const loaded = computed(() => content.value !== null);

composables/ParsedContent.ts

@@ -10,17 +10,21 @@ import MentionComponent from "../components/social-elements/notes/mention.vue";
  * @returns Reactive object with the parsed content
  */
 export const useParsedContent = (
-    content: string,
-    emojis: Emoji[],
+    content: MaybeRef<string>,
+    emojis: MaybeRef<Emoji[]>,
     mentions: MaybeRef<Account[]> = ref([]),
 ): Ref<string | null> => {
     const result = ref(null as string | null);
 
     watch(
-        mentions,
+        isRef(content)
+            ? isRef(emojis)
+                ? [content, mentions, emojis]
+                : [content, mentions]
+            : mentions,
         async () => {
             const contentHtml = document.createElement("div");
-            contentHtml.innerHTML = content;
+            contentHtml.innerHTML = toValue(content);
 
             // Replace emoji shortcodes with images
             const paragraphs = contentHtml.querySelectorAll("p");
@@ -29,7 +33,7 @@ export const useParsedContent = (
                 paragraph.innerHTML = paragraph.innerHTML.replace(
                     /:([a-z0-9_-]+):/g,
                     (match, emoji) => {
-                        const emojiData = emojis.find(
+                        const emojiData = toValue(emojis).find(
                             (e) => e.shortcode === emoji,
                         );
                         if (!emojiData) {

composables/ResolveMentions.ts

@@ -3,7 +3,7 @@ import type { Account } from "~/types/mastodon/account";
 import type { Mention } from "~/types/mastodon/mention";
 
 export const useResolveMentions = (
-    mentions: Mention[],
+    mentions: Ref<Mention[]>,
     client: Mastodon | null,
 ): Ref<Account[]> => {
     if (!client) {
@@ -12,14 +12,14 @@ export const useResolveMentions = (
 
     const output = ref<Account[]>([]);
 
-    (async () => {
+    watch(mentions, async () => {
         output.value = await Promise.all(
-            mentions.map(async (mention) => {
+            toValue(mentions).map(async (mention) => {
                 const response = await client.getAccount(mention.id);
                 return response.data;
             }),
         );
-    })();
+    });
 
     return output;
 };