fix(desktop): refresh restored tab editors

Author: murongg

apps/desktop/src/App.test.tsx

@@ -300,6 +300,45 @@ describe("Markra workspace", () => {
     expect(mockedConsumeWelcomeDocumentState).not.toHaveBeenCalled();
   });
 
+  it("switches visual editor content after restoring multiple document tabs", async () => {
+    const guidePath = "/mock-files/vault/guide.md";
+    const notesPath = "/mock-files/vault/notes.md";
+    mockedGetStoredWorkspaceState.mockResolvedValue({
+      aiAgentSessionId: "session-restored-tabs",
+      filePath: notesPath,
+      fileTreeOpen: false,
+      folderName: null,
+      folderPath: null,
+      openFilePaths: [guidePath, notesPath]
+    });
+    mockedReadNativeMarkdownFile.mockImplementation(async (path) => {
+      if (path === guidePath) {
+        return {
+          content: "# Guide",
+          name: "guide.md",
+          path
+        };
+      }
+
+      return {
+        content: "# Notes",
+        name: "notes.md",
+        path
+      };
+    });
+
+    renderApp();
+
+    expect(await screen.findByRole("heading", { name: "Notes" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: /notes\.md/ })).toHaveAttribute("aria-selected", "true");
+
+    fireEvent.click(screen.getByRole("tab", { name: /guide\.md/ }));
+
+    expect(await screen.findByRole("heading", { name: "Guide" })).toBeInTheDocument();
+    expect(screen.queryByRole("heading", { name: "Notes" })).not.toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: /guide\.md/ })).toHaveAttribute("aria-selected", "true");
+  });
+
   it("restores a saved side-by-side tab group on app launch", async () => {
     const firstPath = "/mock-files/vault/docs/1.md";
     const secondPath = "/mock-files/vault/docs/2.md";

apps/desktop/src/App.tsx

@@ -2245,6 +2245,7 @@ export default function App() {
                           bodyFontSize={editorPreferences.preferences.bodyFontSize}
                           contentWidth={activeEditorContentWidth}
                           contentWidthPx={activeEditorContentWidthPx}
+                          documentKey={activeTabId}
                           documentPath={document.path}
                           editorTheme={appTheme.editorTheme}
                           initialContent={document.content}
@@ -2325,6 +2326,7 @@ export default function App() {
                       bodyFontSize={editorPreferences.preferences.bodyFontSize}
                       contentWidth={activeEditorContentWidth}
                       contentWidthPx={activeEditorContentWidthPx}
+                      documentKey={activeTabId}
                       documentPath={document.path}
                       editorTheme={appTheme.editorTheme}
                       initialContent={document.content}
@@ -2377,6 +2379,7 @@ export default function App() {
                         content={sideDocumentTab.content}
                         contentWidth={activeEditorContentWidth}
                         contentWidthPx={activeEditorContentWidthPx}
+                        documentKey={sideDocumentTab.id}
                         documentPath={sideDocumentTab.path}
                         editorTheme={appTheme.editorTheme}
                         language={appLanguage.language}

apps/desktop/src/components/MarkdownPaper.tsx

@@ -18,6 +18,7 @@ type MarkdownPaperProps = {
   contentWidthMax?: number;
   contentWidthMin?: number;
   contentWidthPx?: number | null;
+  documentKey?: string | null;
   documentPath?: MarkdownPaperSurfaceProps["documentPath"];
   editorTheme?: EditorTheme;
   initialContent: string;
@@ -50,6 +51,7 @@ export function MarkdownPaper({
   contentWidthMax = editorCustomContentWidthMax,
   contentWidthMin = editorCustomContentWidthMin,
   contentWidthPx = null,
+  documentKey,
   documentPath,
   editorTheme = "light",
   initialContent,
@@ -81,6 +83,7 @@ export function MarkdownPaper({
     ...(bottomOverlayInset > 0 ? { paddingBottom: `${bottomOverlayInset}px` } : {})
   } satisfies CSSProperties;
   const topInsetClassName = topInset === "tabs" ? "pt-24 max-[900px]:pt-20" : "pt-14 max-[900px]:pt-10";
+  const editorInstanceKey = `${documentKey ?? documentPath ?? "untitled"}:${revision}`;
 
   return (
     <section
@@ -90,7 +93,7 @@ export function MarkdownPaper({
       ref={scrollRef}
     >
       <article
-        key={revision}
+        key={editorInstanceKey}
         className={`markdown-paper relative mx-auto min-h-screen w-full max-w-215 px-18 pb-30 ${topInsetClassName} text-[16px] leading-[1.65] text-(--text-primary) caret-(--accent) outline-none focus:outline-none max-[900px]:px-5.25`}
         style={paperStyle}
         aria-label={t(language, "app.markdownEditor")}

apps/desktop/src/components/SideDocumentPane.tsx

@@ -11,6 +11,7 @@ type SideDocumentPaneProps = {
   content: string;
   contentWidth: EditorContentWidth;
   contentWidthPx: number | null;
+  documentKey?: string | null;
   documentPath?: string | null;
   editorTheme: EditorTheme;
   language?: AppLanguage;
@@ -37,6 +38,7 @@ export function SideDocumentPane({
   content,
   contentWidth,
   contentWidthPx,
+  documentKey,
   documentPath,
   editorTheme,
   language = "en",
@@ -81,6 +83,7 @@ export function SideDocumentPane({
           bodyFontSize={bodyFontSize}
           contentWidth={contentWidth}
           contentWidthPx={contentWidthPx}
+          documentKey={documentKey}
           documentPath={documentPath}
           editorTheme={editorTheme}
           initialContent={content}