feat(editor): add Mermaid preview fullscreen control

[murongg]

Summary

• add a full-screen and restore toggle to the enlarged Mermaid preview toolbar
• let the preview panel fill the Markra viewport while preserving zoom, pan, and reset controls
• keep the existing enlarge-preview icon and use distinct standard icons for enter and exit full screen
• restore the regular dialog on the first Escape before closing it on the next Escape
• hide the CodeMirror code-header gap while Mermaid is in preview mode, while preserving it in source mode

Why

Large Mermaid diagrams can outgrow the current constrained preview dialog, making detailed sections difficult to inspect.

Validation

• pnpm --filter @markra/editor test — 33 test files, 356 tests passed on the isolated rerun
• pnpm --filter @markra/app test -- src/styles.test.ts — 60 tests passed
• pnpm --filter @markra/editor typecheck:test — passed
• pnpm --filter @markra/app typecheck:test — passed
• pnpm --filter @markra/editor build — passed
• pnpm --filter @markra/app build — passed
• local desktop browser QA — Mermaid preview gap computed as display: none with zero height; source mode restored the 12px gap
• An initial six-way concurrent verification run exposed two unrelated jsdom timing failures; the editor suite passed when rerun alone.

Risk

Low. The change is limited to the existing Mermaid preview widget, its dialog styles, and focused test coverage.

Closes #593

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
markra-web	Ready	Preview, Comment	Jul 28, 2026 2:27pm