fix(mdviewer): increase content max-width to A3 sheet size, add cache tests

abose · abose · commit 71971a29ed36 · 2026-03-30T11:44:43.000+05:30
- Change --content-max-width from 70ch to 1100px for large screens
- Add Document Cache &amp; File Switching test suite (5 tests):
  file switching, scroll preservation, edit mode persistence,
  persistent iframe verification, project switch edit mode
- Add md test project with doc1/doc2/doc3/long.md test fixtures
- Add _assertMdEditMode helper for reusable edit mode checks
diff --git a/src-mdviewer/src/styles/themes/variables.css b/src-mdviewer/src/styles/themes/variables.css
@@ -10,7 +10,7 @@
   --font-size-content: clamp(1rem, 0.925rem + 0.25vw, 1.125rem);
   --line-height: 1.6;
   --line-height-heading: 1.25;
-  --content-max-width: 70ch;
+  --content-max-width: 1100px;
   --letter-spacing: normal;
 
   /* Layout */
diff --git a/src-mdviewer/to-create-tests.md b/src-mdviewer/to-create-tests.md
@@ -12,7 +12,6 @@
 - [x] Escape in edit mode sends focus back to Phoenix editor
 - [x] F-key shortcuts (e.g. F8 for live preview toggle) work in edit mode
 - [x] F-key shortcuts work in reader mode
-- [ ] All of the above work in both reader and edit mode
 
 ## Document Cache & File Switching
 - [ ] Switching between two MD files is instant (no re-render, DOM cached)
diff --git a/test/spec/LiveDevelopment-Markdown-test-files/doc1.md b/test/spec/LiveDevelopment-Markdown-test-files/doc1.md
@@ -0,0 +1,15 @@
+# Document One
+
+This is the first test document for cache and file switching tests.
+
+## Section A
+
+Paragraph A with some content for testing scroll position preservation.
+
+## Section B
+
+Paragraph B with more content.
+
+## Section C
+
+Paragraph C at the bottom of the document.
diff --git a/test/spec/LiveDevelopment-Markdown-test-files/doc2.md b/test/spec/LiveDevelopment-Markdown-test-files/doc2.md
@@ -0,0 +1,13 @@
+# Document Two
+
+This is the second test document.
+
+## Features
+
+- Item one
+- Item two
+- Item three
+
+## Details
+
+More content in document two for testing.
diff --git a/test/spec/LiveDevelopment-Markdown-test-files/doc3.md b/test/spec/LiveDevelopment-Markdown-test-files/doc3.md
@@ -0,0 +1,5 @@
+# Document Three
+
+Third document for LRU cache testing.
+
+Some paragraph text here.
diff --git a/test/spec/LiveDevelopment-Markdown-test-files/long.md b/test/spec/LiveDevelopment-Markdown-test-files/long.md
@@ -0,0 +1,83 @@
+# Long Document for Scroll Testing
+
+## Section 1
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+## Section 2
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+![Mountain landscape](https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300)
+
+## Section 3
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+## Code Examples
+
+```javascript
+function fibonacci(n) {
+    if (n <= 1) return n;
+    return fibonacci(n - 1) + fibonacci(n - 2);
+}
+
+console.log(fibonacci(10));
+```
+
+```html
+<!DOCTYPE html>
+<html>
+<head><title>Test</title></head>
+<body>
+    <h1>Hello World</h1>
+    <p>This is a test page.</p>
+</body>
+</html>
+```
+
+## Table Example
+
+| Feature | Status | Priority |
+| --- | --- | --- |
+| Dark mode | Done | High |
+| Export PDF | In progress | Medium |
+| Mobile layout | Planned | Low |
+
+## Section 4
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+
+## Section 5
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+![Ocean sunset](https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=300)
+
+## Section 6
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+## Section 7
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+## Section 8
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+## Section 9
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+## Section 10 - Bottom Marker
+
+This is the bottom of the long document. If you can see this, you have scrolled to the end.
diff --git a/test/spec/LiveDevelopment-Markdown-test-files/simple.html b/test/spec/LiveDevelopment-Markdown-test-files/simple.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<head><title>Simple HTML</title></head>
+<body>
+<h1 id="testId">Simple HTML page</h1>
+</body>
+</html>
diff --git a/test/spec/md-editor-integ-test.js b/test/spec/md-editor-integ-test.js
@@ -25,6 +25,7 @@ define(function (require, exports, module) {
     const SpecRunnerUtils = require("spec/SpecRunnerUtils");
 
     const testFolder = SpecRunnerUtils.getTestPath("/spec/LiveDevelopment-MultiBrowser-test-files");
+    const mdTestFolder = SpecRunnerUtils.getTestPath("/spec/LiveDevelopment-Markdown-test-files");
 
     let testWindow, brackets, CommandManager, Commands, EditorManager, WorkspaceManager,
         LiveDevMultiBrowser;
@@ -244,11 +245,14 @@ define(function (require, exports, module) {
         }, 30000);
 
         afterAll(async function () {
-            _setMdEditMode(false);
-            LiveDevMultiBrowser.close();
-            await awaitsForDone(CommandManager.execute(Commands.FILE_CLOSE_ALL, { _forceClose: true }),
-                "closing all files");
-            await _cleanupTempFiles().catch(() => {});
+            // Final cleanup for the entire Markdown Editor test suite
+            if (LiveDevMultiBrowser) {
+                LiveDevMultiBrowser.close();
+            }
+            if (CommandManager) {
+                await awaitsForDone(CommandManager.execute(Commands.FILE_CLOSE_ALL, { _forceClose: true }),
+                    "final close all files");
+            }
             testWindow = null;
             brackets = null;
             CommandManager = null;
@@ -557,5 +561,192 @@ define(function (require, exports, module) {
                 }, "link to be created");
             }, 10000);
         });
+
+        describe("Document Cache & File Switching", function () {
+
+            async function _switchToMdTestProject() {
+                await SpecRunnerUtils.loadProjectInTestWindow(mdTestFolder);
+                await SpecRunnerUtils.deletePathAsync(mdTestFolder + "/.phcode.json", true);
+            }
+
+            async function _openMdFileAndWaitForPreview(fileName) {
+                await awaitsForDone(SpecRunnerUtils.openProjectFiles([fileName]),
+                    "open " + fileName);
+                await _waitForMdPreviewReady();
+            }
+
+            function _getViewerScrollTop() {
+                const mdDoc = _getMdIFrameDoc();
+                const viewer = mdDoc && mdDoc.querySelector(".app-viewer");
+                return viewer ? viewer.scrollTop : 0;
+            }
+
+            function _setViewerScrollTop(scrollTop) {
+                const mdDoc = _getMdIFrameDoc();
+                const viewer = mdDoc && mdDoc.querySelector(".app-viewer");
+                if (viewer) {
+                    viewer.scrollTop = scrollTop;
+                }
+            }
+
+            function _getViewerH1Text() {
+                const mdDoc = _getMdIFrameDoc();
+                const h1 = mdDoc && mdDoc.querySelector("#viewer-content h1");
+                return h1 ? h1.textContent : "";
+            }
+
+            async function _assertMdEditMode(shouldBeEditing) {
+                await awaitsFor(() => {
+                    const mdDoc = _getMdIFrameDoc();
+                    const content = mdDoc && mdDoc.getElementById("viewer-content");
+                    if (!content) { return false; }
+                    return shouldBeEditing
+                        ? content.classList.contains("editing")
+                        : !content.classList.contains("editing");
+                }, shouldBeEditing ? "md viewer to be in edit mode" : "md viewer to be in reader mode");
+            }
+
+            beforeAll(async function () {
+                // Switch to the md test project for these tests
+                if (testWindow) {
+                    _setMdEditMode(false);
+                    await awaitsForDone(CommandManager.execute(Commands.FILE_CLOSE_ALL, { _forceClose: true }),
+                        "close all before project switch");
+                    await _switchToMdTestProject();
+
+                    // Start live dev
+                    await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple.html"]),
+                        "open simple.html");
+                    if (!WorkspaceManager.isPanelVisible("live-preview-panel")) {
+                        await awaitsForDone(CommandManager.execute(Commands.FILE_LIVE_FILE_PREVIEW));
+                    }
+                    LiveDevMultiBrowser.open();
+                    await awaitsFor(() => {
+                        return LiveDevMultiBrowser.status === LiveDevMultiBrowser.STATUS_ACTIVE;
+                    }, "live dev to open", 20000);
+                }
+            }, 30000);
+
+            it("should switch between MD files with viewer showing correct content", async function () {
+                await _openMdFileAndWaitForPreview("doc1.md");
+                await awaitsFor(() => _getViewerH1Text().includes("Document One"),
+                    "doc1 heading to appear");
+
+                await _openMdFileAndWaitForPreview("doc2.md");
+                await awaitsFor(() => _getViewerH1Text().includes("Document Two"),
+                    "doc2 heading to appear");
+
+                // Switch back to doc1 — should show doc1 content
+                await _openMdFileAndWaitForPreview("doc1.md");
+                await awaitsFor(() => _getViewerH1Text().includes("Document One"),
+                    "doc1 heading to appear on switch back");
+            }, 15000);
+
+            it("should preserve scroll position per-document on switch", async function () {
+                // Open long doc, scroll down
+                await _openMdFileAndWaitForPreview("long.md");
+                await awaitsFor(() => _getViewerH1Text().includes("Long Document"),
+                    "long doc heading to appear");
+
+                _setViewerScrollTop(300);
+                await awaitsFor(() => _getViewerScrollTop() >= 290, "scroll to apply");
+                const scrollBefore = _getViewerScrollTop();
+
+                // Switch to doc2
+                await _openMdFileAndWaitForPreview("doc2.md");
+                await awaitsFor(() => _getViewerH1Text().includes("Document Two"),
+                    "doc2 heading to appear");
+
+                // Switch back to long doc — scroll should be restored
+                await _openMdFileAndWaitForPreview("long.md");
+                await awaitsFor(() => {
+                    const scroll = _getViewerScrollTop();
+                    return Math.abs(scroll - scrollBefore) < 50;
+                }, "scroll position to be restored");
+            }, 15000);
+
+            it("should preserve edit/reader mode globally across file switches", async function () {
+                await _openMdFileAndWaitForPreview("doc1.md");
+                await _enterEditMode();
+
+                // Switch to another md file — should still be in edit mode
+                await _openMdFileAndWaitForPreview("doc2.md");
+                await awaitsFor(() => _getViewerH1Text().includes("Document Two"),
+                    "doc2 heading to appear");
+                await _assertMdEditMode(true);
+
+                // Switch to reader mode
+                await _enterReaderMode();
+                await _assertMdEditMode(false);
+
+                // Switch to doc1 — should still be in reader mode
+                await _openMdFileAndWaitForPreview("doc1.md");
+                await awaitsFor(() => _getViewerH1Text().includes("Document One"),
+                    "doc1 heading to appear");
+                await _assertMdEditMode(false);
+            }, 15000);
+
+            it("should switch MD to HTML and back reusing persistent md iframe", async function () {
+                await _openMdFileAndWaitForPreview("doc1.md");
+                await awaitsFor(() => _getViewerH1Text().includes("Document One"),
+                    "doc1 content to load");
+
+                // Set a verification code inside the md iframe to prove persistence
+                const verificationCode = "persist_" + Date.now();
+                _getMdIFrameWin().__test_verification = verificationCode;
+
+                // Switch to HTML file
+                await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple.html"]),
+                    "open simple.html");
+                await awaitsFor(() => {
+                    const lpFrame = testWindow.document.getElementById("panel-live-preview-frame");
+                    return lpFrame && lpFrame.src && !lpFrame.src.includes("mdViewer");
+                }, "HTML preview to load");
+
+                // Switch back to md file
+                await _openMdFileAndWaitForPreview("doc1.md");
+                await awaitsFor(() => _getViewerH1Text().includes("Document One"),
+                    "doc1 content to load after switch back");
+
+                // Verify iframe was NOT reloaded — our JS variable should survive
+                const win = _getMdIFrameWin();
+                expect(win.__test_verification).toBe(verificationCode);
+            }, 15000);
+
+            it("should preserve edit mode across project switches", async function () {
+                await _openMdFileAndWaitForPreview("doc1.md");
+                await _enterEditMode();
+
+                // Switch to a different project
+                const otherProject = SpecRunnerUtils.getTestPath("/spec/LiveDevelopment-MultiBrowser-test-files");
+                await SpecRunnerUtils.loadProjectInTestWindow(otherProject);
+
+                // Open an HTML file and start live dev in the other project
+                await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple1.html"]),
+                    "open simple1.html in other project");
+                LiveDevMultiBrowser.open();
+                await awaitsFor(() => {
+                    return LiveDevMultiBrowser.status === LiveDevMultiBrowser.STATUS_ACTIVE;
+                }, "live dev active in other project", 20000);
+
+                // Now open an md file in the other project
+                await awaitsForDone(SpecRunnerUtils.openProjectFiles(["readme.md"]),
+                    "open readme.md in other project");
+                await _waitForMdPreviewReady();
+
+                // Edit mode should be preserved
+                await _assertMdEditMode(true);
+
+                // Switch back to the md test project
+                await _switchToMdTestProject();
+                await awaitsForDone(SpecRunnerUtils.openProjectFiles(["simple.html"]),
+                    "reopen simple.html");
+                LiveDevMultiBrowser.open();
+                await awaitsFor(() => {
+                    return LiveDevMultiBrowser.status === LiveDevMultiBrowser.STATUS_ACTIVE;
+                }, "live dev to reopen", 20000);
+            }, 30000);
+        });
+
     });
 });
