Feature: Added Copy as MD btn. #18

packages/frontend/src/components/content/Header.vue

@@ -1,17 +1,40 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from "vue";
 
+import { useSDK } from "@/plugins/sdk";
 import { useEditorStore } from "@/stores/editor";
 import { useNotesStore } from "@/stores/notes";
 import { useSidebarStore } from "@/stores/sidebar";
+import { convertTipTapToMarkdown } from "@/utils/jsonToMarkdown";
 
 const notesStore = useNotesStore();
 const note = computed(() => notesStore.currentNote);
 const editorStore = useEditorStore();
 const sidebarStore = useSidebarStore();
+const sdk = useSDK();
 const inputRef = ref<HTMLInputElement | undefined>(undefined);
 const isSubmitting = ref(false);
 
+const copyAsMarkdown = async () => {
+  const content = notesStore.currentNote?.content;
+  if (!content) {
+    sdk.window.showToast("No note content to copy", { variant: "warning" });
+    return;
+  }
+
+  try {
+    const markdown = await convertTipTapToMarkdown(content, sdk);
+    await navigator.clipboard.writeText(markdown);
+    sdk.window.showToast("Copied to clipboard as Markdown", {
+      variant: "success",
+    });
+  } catch (error) {
+    sdk.window.showToast(`Failed to copy: ${String(error)}`, {
+      variant: "error",
+    });
+  }
+};
+
 watch(inputRef, (value) => {
   editorStore.renamingInputRef = value;
 });
@@ -116,11 +139,22 @@ watch(
         </div>
       </div>
     </div>
-    <div
-      class="p-2 cursor-pointer hover:text-gray-300 transition-colors"
-      @click="notesStore.selectNote(undefined)"
-    >
-      <i class="fas fa-times"></i>
+    <div class="flex items-center">
+      <div
+        class="p-2 cursor-pointer hover:text-gray-300 transition-colors flex items-center gap-1"
+        title="Copy as Markdown"
+        @click="copyAsMarkdown()"
+      >
+        <i class="fas fa-copy"></i>
+        <span class="text-sm">Copy as Markdown</span>
+      </div>
+      <div
+        class="p-2 cursor-pointer hover:text-gray-300 transition-colors"
+        title="Close note"
+        @click="notesStore.selectNote(undefined)"
+      >
+        <i class="fas fa-times"></i>
+      </div>
     </div>
   </div>
 </template>

packages/frontend/src/utils/jsonToMarkdown.ts

@@ -0,0 +1,128 @@
+import { Editor } from "@tiptap/core";
+import { StarterKit } from "@tiptap/starter-kit";
+import { type NoteContent, type NoteContentItem } from "shared";
+import { Markdown } from "tiptap-markdown";
+
+import { type FrontendSDK } from "@/types";
+
+async function fetchReplaySessionContent(
+  sdk: FrontendSDK,
+  sessionId: string,
+): Promise<string | undefined> {
+  try {
+    const sessionResponse = await sdk.graphql.replaySessionEntries({
+      id: sessionId,
+    });
+    const activeEntryId = sessionResponse?.replaySession?.activeEntry?.id;
+
+    if (!activeEntryId) {
+      return undefined;
+    }
+
+    const entryResponse = await sdk.graphql.replayEntry({
+      id: activeEntryId,
+    });
+
+    return entryResponse?.replayEntry?.raw || undefined;
+  } catch (error) {
+    console.error("Error fetching replay session content:", error);
+    return undefined;
+  }
+}
+
+function collectMentionIds(content: NoteContentItem[]): string[] {
+  const ids: string[] = [];
+
+  for (const node of content) {
+    if (node.type === "mention" && node.attrs?.id) {
+      ids.push(node.attrs.id as string);
+    }
+    if (node.content) {
+      ids.push(...collectMentionIds(node.content));
+    }
+  }
+
+  return ids;
+}
+
+function replaceMentionsWithCodeBlocks(
+  content: NoteContentItem[],
+  httpContentMap: Map<string, string>,
+): NoteContentItem[] {
+  const result: NoteContentItem[] = [];
+
+  for (const node of content) {
+    if (node.type === "mention" && node.attrs?.id) {
+      const sessionId = node.attrs.id as string;
+      const httpContent = httpContentMap.get(sessionId);
+
+      if (httpContent) {
+        result.push({
+          type: "codeBlock",
+          attrs: { language: "http" },
+          content: [
+            {
+              type: "text",
+              text: httpContent,
+            },
+          ],
+        });
+      } else {
+        result.push({
+          type: "paragraph",
+          content: [
+            {
+              type: "text",
+              text: `[Replay Session: ${sessionId} (unavailable)]`,
+            },
+          ],
+        });
+      }
+    } else if (node.content) {
+      result.push({
+        ...node,
+        content: replaceMentionsWithCodeBlocks(node.content, httpContentMap),
+      });
+    } else {
+      result.push(node);
+    }
+  }
+
+  return result;
+}
+
+export async function convertTipTapToMarkdown(
+  content: NoteContent,
+  sdk: FrontendSDK,
+): Promise<string> {
+  const mentionIds = collectMentionIds(content.content || []);
+
+  const httpContentMap = new Map<string, string>();
+  if (mentionIds.length > 0) {
+    const fetchPromises = mentionIds.map(async (id) => {
+      const httpContent = await fetchReplaySessionContent(sdk, id);
+      if (httpContent) {
+        httpContentMap.set(id, httpContent);
+      }
+    });
+    await Promise.all(fetchPromises);
+  }
+
+  const processedContent: NoteContent = {
+    ...content,
+    content: replaceMentionsWithCodeBlocks(
+      content.content || [],
+      httpContentMap,
+    ),
+  };
+
+  const editor = new Editor({
+    extensions: [StarterKit, Markdown],
+    content: processedContent,
+  });
+
+  const markdown = editor.storage.markdown.getMarkdown();
+  editor.destroy();
+
+  return markdown;
+}