Skip to content

Render Mermaid diagrams and highlight fenced code - #143

Open
simulcast wants to merge 1 commit into
Lex-Inc:mainfrom
simulcast:codex/mermaid-shiki-rendering
Open

simulcast wants to merge 1 commit into
Lex-Inc:mainfrom
simulcast:codex/mermaid-shiki-rendering

Conversation

@simulcast

Copy link
Copy Markdown

Summary

  • render mermaid fences as diagrams by default with Diagram and Source controls
  • highlight fenced code with Shiki using GitHub light and dark themes
  • keep generated SVG presentation-only while preserving Mermaid as a normal editable TipTap codeBlock
  • preserve multiline code whitespace when serializing CriticMarkup comments and every suggestion form
  • add focused unit, component, and Playwright coverage plus README and screenshot-guide updates

Why

Roughdraft currently shows Mermaid as plain source, and its fenced-code CriticMarkup serializer routes marked code through Turndown. That path normalizes multiline whitespace and can corrupt indentation and blank lines when a code fence contains a comment or suggestion.

This keeps the Markdown source as the document of record. Mermaid rendering is lazy, uses unique render IDs and stale-result protection, runs with securityLevel: "strict", follows the system color scheme, and falls back to editable source with an actionable error. Keeping Mermaid as a normal code block is safer for source editing, comment navigation, and exact Markdown round-tripping than replacing it with an atomic diagram node.

This also acknowledges the earlier conflicted work in #102. The implementation here preserves the existing code-block schema and review behavior, and never saves generated SVG.

Validation

  • pnpm --filter @roughdraft/app exec vitest run test/critic-markup.test.ts test/code-block-view.test.tsx test/render-mermaid.test.ts — 70 passed
  • pnpm test:e2e packages/app/e2e/mermaid-code-blocks.spec.ts — 3 passed
  • pnpm check — lint, selector policy, 387 tests, and production builds passed
  • pnpm test:smoke — 12 passed
  • production output keeps Mermaid core, diagram types, Shiki themes, and language grammars in separate lazy chunks
  • locally reviewed through roughdraft-dev-roughdraft; the published global CLI was not changed

Fixes #115
Fixes #125

@vercel

vercel Bot commented Aug 6, 2026

Copy link
Copy Markdown

@simulcast is attempting to deploy a commit to the Lex Team on Vercel.

A member of the Team first needs to authorize it.

@simulcast
simulcast marked this pull request as ready for review August 6, 2026 16:24
peterhartree added a commit to peterhartree/roughdraft that referenced this pull request Aug 30, 2026
Port the critic-markup serialization hunk from upstream PR Lex-Inc#143
(0d7ef88) by Tristan Rodman. Serializing a code block containing
comment anchors or suggestions no longer runs its contents through
turndown, which collapsed blank lines and indentation; child nodes
are now walked directly so fences round-trip exactly.

Co-Authored-By: Claude <noreply@anthropic.com>

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.

Comments/suggestions inside a fenced code block collapse its newlines on save Render Mermaid code fences as diagrams

1 participant