Skip to content

fix(mermaid): keep Markdown previews visible outside edit mode - #1505

Draft
parker2024-boom wants to merge 2 commits into
xiaolai:mainfrom
parker2024-boom:fix/mermaid-preview-webkit-sizing
Draft

parker2024-boom wants to merge 2 commits into
xiaolai:mainfrom
parker2024-boom:fix/mermaid-preview-webkit-sizing

Conversation

@parker2024-boom

Copy link
Copy Markdown

Summary

Mermaid diagrams can render while their code block is being edited, then disappear when returning to the Markdown preview. On Intel macOS 13.7.8, the affected SVGs have a 0 × 0 bounding box in the native WKWebView.

The standalone .mmd adapter's stylesheet uses the same .mermaid-preview class as Markdown code-block widgets. Its pane layout leaks height: 100%, width: auto, and max-height: 100% into those widgets. The live editing preview uses different classes, which explains why editing temporarily makes the diagram visible.

What Changed

  • Scope the standalone container and direct-child SVG layout rules with :not(:where(.code-block-preview)). Markdown previews keep their existing layout; standalone .mmd panes retain theirs regardless of stylesheet import order.
  • Use :where() so the exclusion adds no specificity. The standalone empty and invalid modifiers must still override the base rules.
  • Add a WebKit regression suite in the existing codePreview coordination module, using the production Mermaid renderer, SVG sanitizer, stylesheets, and Panzoom. It covers flowchart/cycle/sequence visibility across edit/view states and a narrow container, standalone pane sizing, and empty/invalid states.

The change does not alter Mermaid syntax, the shared theme/fallback styling, or diagram rendering logic.

Reproduction

  1. Open a saved Markdown document containing a Mermaid flowchart or sequence diagram in WYSIWYG mode.
  2. Observe a blank diagram area on the affected WKWebView.
  3. Double-click the diagram to edit: its live preview becomes visible.
  4. Leave editing: the diagram disappears again.

A native-app differential check reintroduced only the original leaking layout declarations: all three SVGs collapsed to 0 × 0. Removing those declarations restored visible diagrams, including after entering and leaving editing. The document's bytes were unchanged.

Validation

  • Native WKWebView harness: 25 assertions passed with each stylesheet order (50 total), including edit/view sizing, narrow layout, Panzoom/zoom/reset, and standalone states.
  • Running Tauri app: three diagrams visible, original-style failure reproduced and reversed, edit/cancel verified, source document unchanged.
  • Standalone layout differential: 84 observed style values unchanged across normal, empty, and invalid states.
  • Initial pnpm check:fast: passed (43 test files, 462 tests).
  • Focused Mermaid unit tests: passed (5 files, 91 tests).
  • pnpm build: passed.
  • New browser test scoped TypeScript check: passed.
  • pnpm lint:test-types: passed with NODE_OPTIONS=--max-old-space-size=4096; no baseline changes. The default heap ran out of memory on this host.
  • pnpm check:predelta: initially 46/49 gates passed. The introduced cross-plugin test import was fixed by moving the integration test to codePreview; lint:deps now passes. The other failures were this macOS host's BSD grep path output and unsupported inherited C.UTF-8 locale. With GNU grep and LC_ALL=en_US.UTF-8, the unchanged console lint passes and the two failed gate-test files pass all 73 cases. No gate or baseline was relaxed.
  • Final branch is rebased onto main 2d3903cb2 (v0.9.92). Final pnpm check:all: passed (exit 0): all static checks; 137 gate files / 3,520 tests; 2,051 application files / 44,440 tests; MCP server 34 files / 749 tests; content server 17 files / 271 tests; coverage thresholds, production build, eager-import lint, and bundle-size limits. Existing skips: 2 gate cases, 2 application files / 83 cases, and 1 MCP case. Application coverage: 95.86% statements, 92.47% branches, 95.30% functions, 96.82% lines. An earlier check on the previous base was interrupted and is not counted as a pass.

Remaining review and platform limits

This is a draft PR. Playwright's WebKit installer refuses macOS 13 (Playwright does not support webkit on mac13), so the committed browser regression suite has not run here. Native WKWebView and the actual Tauri app provide local layout evidence, but the browser suite still needs a supported host.

The local JEV automated patch review remained escalate for test-gap/blast-radius confidence after two evidence supplements. Its completion claims were verified; that is not an overall patch approval. The unresolved review status is retained rather than represented as a green gate.

No private document contents or user paths are included in this PR. The regression diagrams are synthetic.

Policy Gates (Required)

  • This PR is single-focus.
  • Full changed-behavior coverage is confirmed on a supported WebKit runner (pending).
  • Detailed reproduction context is included above; no new issue is required to read this report.

Type of Change

  • Bug fix
  • Regression tests

PR Checklist

  • The PR avoids unrelated refactors or cleanup.
  • The problem, cause, and validation limits are described above.
  • Critical flows were verified in the native app.
  • Ready for merge: pending supported-host browser tests and reviewer acceptance.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant