From 2dbde31584df9efc0b9a8cbf1d3c87fbab1023e8 Mon Sep 17 00:00:00 2001
From: Amr Elsagaei <amrelsagaei.social@gmail.com>
Date: Mon, 8 Dec 2025 19:09:28 +0300
Subject: [PATCH 1/2] Feature: Added Copy as MD btn. #18

---
 .../src/components/content/Header.vue         |  44 +++++-
 packages/frontend/src/utils/jsonToMarkdown.ts | 128 ++++++++++++++++++
 2 files changed, 167 insertions(+), 5 deletions(-)
 create mode 100644 packages/frontend/src/utils/jsonToMarkdown.ts

diff --git a/packages/frontend/src/components/content/Header.vue b/packages/frontend/src/components/content/Header.vue
index 4c160d3..a548180 100644
--- a/packages/frontend/src/components/content/Header.vue
+++ b/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>
diff --git a/packages/frontend/src/utils/jsonToMarkdown.ts b/packages/frontend/src/utils/jsonToMarkdown.ts
new file mode 100644
index 0000000..28efdbe
--- /dev/null
+++ b/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;
+}

From 9c5a31e6c9bf849533ecbefdab6e46202a61faf2 Mon Sep 17 00:00:00 2001
From: Amr Elsagaei <amrelsagaei.social@gmail.com>
Date: Mon, 8 Dec 2025 19:56:38 +0300
Subject: [PATCH 2/2] Fixed #19 Restore focus

---
 .../components/content/editor/NoteEditor.vue  | 67 +++++++++++++++++--
 packages/frontend/src/index.ts                |  3 +
 packages/frontend/src/utils/eventBus.ts       |  1 +
 3 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/content/editor/NoteEditor.vue b/packages/frontend/src/components/content/editor/NoteEditor.vue
index 2c0542a..2b7b19f 100644
--- a/packages/frontend/src/components/content/editor/NoteEditor.vue
+++ b/packages/frontend/src/components/content/editor/NoteEditor.vue
@@ -19,7 +19,7 @@ import { StarterKit } from "@tiptap/starter-kit";
 import { type Editor, EditorContent, useEditor } from "@tiptap/vue-3";
 import { useDebounceFn } from "@vueuse/core";
 import { type NoteContent } from "shared";
-import { onMounted, watch } from "vue";
+import { onMounted, onUnmounted, watch } from "vue";
 
 import "./editor.css";
 import { ArrowKeysFix } from "./extensions/arrows-fix";
@@ -32,6 +32,7 @@ import SearchUI from "./extensions/search/SearchUI.vue";
 
 import { useSDK } from "@/plugins/sdk";
 import { useNotesStore } from "@/stores/notes";
+import { emitter } from "@/utils/eventBus";
 import { compressImage } from "@/utils/images";
 
 const sdk = useSDK();
@@ -42,6 +43,44 @@ const SessionMention = createSessionMention(sdk);
 const MAX_IMAGE_SIZE_MB = 30;
 const ALLOWED_IMAGE_TYPES = ["image/jpeg", "image/png", "image/gif"];
 
+const cursorPositions = new Map<string, { from: number; to: number }>();
+
+const saveCursorPosition = () => {
+  if (!editor.value || !notesStore.currentNotePath) return;
+
+  const { from, to } = editor.value.state.selection;
+  cursorPositions.set(notesStore.currentNotePath, { from, to });
+};
+
+const restoreCursorPosition = (notePath: string) => {
+  if (!editor.value) return;
+
+  const savedPosition = cursorPositions.get(notePath);
+  if (savedPosition) {
+    const docLength = editor.value.state.doc.content.size;
+    const from = Math.min(savedPosition.from, docLength);
+    const to = Math.min(savedPosition.to, docLength);
+
+    editor.value.commands.setTextSelection({ from, to });
+  }
+
+  editor.value.view.focus();
+};
+
+const restoreFocus = () => {
+  if (!editor.value || !notesStore.currentNotePath) return;
+
+  editor.value.view.focus();
+
+  const savedPosition = cursorPositions.get(notesStore.currentNotePath);
+  if (savedPosition) {
+    const docLength = editor.value.state.doc.content.size;
+    const from = Math.min(savedPosition.from, docLength);
+    const to = Math.min(savedPosition.to, docLength);
+    editor.value.commands.setTextSelection({ from, to });
+  }
+};
+
 const saveNote = async (editor: Editor) => {
   if (!notesStore.currentNote) return;
 
@@ -189,16 +228,29 @@ const editor = useEditor({
       debouncedSave(editor as Editor);
     }
   },
+  onBlur: () => {
+    saveCursorPosition();
+  },
 });
 
+let previousNotePath: string | undefined;
+
 watch(
   () => notesStore.currentNote,
-  (newNote) => {
+  (newNote, oldNote) => {
+    // Save cursor position of the previous note before switching
+    if (previousNotePath && editor.value) {
+      const { from, to } = editor.value.state.selection;
+      cursorPositions.set(previousNotePath, { from, to });
+    }
+
     if (editor.value && newNote) {
       const content = newNote.content;
       editor.value.commands.setContent(content);
-      editor.value.commands.focus("end");
+      restoreCursorPosition(newNote.path);
     }
+
+    previousNotePath = newNote?.path;
   },
   { immediate: true },
 );
@@ -207,8 +259,15 @@ onMounted(() => {
   if (editor.value && notesStore.currentNote) {
     const content = notesStore.currentNote.content;
     editor.value.commands.setContent(content);
-    editor.value.commands.focus("end");
+    restoreCursorPosition(notesStore.currentNote.path);
   }
+
+  emitter.on("restoreFocus", restoreFocus);
+});
+
+onUnmounted(() => {
+  saveCursorPosition();
+  emitter.off("restoreFocus", restoreFocus);
 });
 </script>
 
diff --git a/packages/frontend/src/index.ts b/packages/frontend/src/index.ts
index 1ef127c..89a4c11 100644
--- a/packages/frontend/src/index.ts
+++ b/packages/frontend/src/index.ts
@@ -85,6 +85,9 @@ export const init = (sdk: FrontendSDK) => {
     onEnter: () => {
       emitter.emit("refreshEditors");
       checkLegacyNotes(sdk);
+      setTimeout(() => {
+        emitter.emit("restoreFocus");
+      }, 200);
     },
   });
 
diff --git a/packages/frontend/src/utils/eventBus.ts b/packages/frontend/src/utils/eventBus.ts
index 6c120bd..74d3dcd 100644
--- a/packages/frontend/src/utils/eventBus.ts
+++ b/packages/frontend/src/utils/eventBus.ts
@@ -3,6 +3,7 @@ import mitt from "mitt";
 type Events = {
   refreshEditors: void;
   refreshTree: number;
+  restoreFocus: void;
   showMigrationDialog: { path: string; content: string }[];
   confirmMigration: { path: string; content: string }[];
 };