benstull/vscode-cowriting-plugin
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: re-emit changed mermaid diagrams through mermaidDiff in the built-in preview (plan T7 §2.6, INV-29 parity)

Browse Source 
Task 7 scoped out reusing the F7.1 (#22) intra-diagram mermaid diff in the
built-in Markdown preview's mermaid fence rendering; Task 8 then deleted the
webview that still had it, leaving mermaidDiff.ts/mermaidFlowchartDiff.ts/
mermaidSequenceDiff.ts production-dead. Wires diffMermaid into
cowritingMarkdownItPlugin's options.highlight override via a per-render
mermaid-fence queue (built in the core rule where state.env is visible,
consumed by highlight in fence-encounter order — highlight itself has no env
param) so a mermaid fence changed since the F6/F7 baseline is re-emitted with
classDef/class/linkStyle styling directives + legend before mermaid.js ever
sees it, reusing diffBlocks' baseline/current block pairing (same pairing
renderReview used). Unchanged diagrams, disabled annotations, no baseline, and
pinned-zero-diff all pass through verbatim.

Ports the substance of the 6 mermaid-diff assertions Task 8 deleted with the
webview's E2E suite as pure unit tests in previewAnnotations.test.ts instead
(DOM-free, source-level).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
BenStullsBets
2026-07-02 15:08:46 -07:00
parent 2170a0d282
commit 705de3169b
5 changed files with 167 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
media/preview-annotations.css
+12
View File
@@ -41,3 +41,15 @@ body.vscode-high-contrast:not(.vscode-high-contrast-light) .cw-del {
background: rgba(248, 81, 73, 0.11);
text-decoration-color: #f85149;
}
/*
* F7.1 (#22) intra-diagram mermaid diff legend, shown beneath a mermaid fence
* `previewAnnotations.ts` re-emitted through `mermaidDiff.ts` (Task 7 §2.6
* parity — same legend markup + colors as the sunset webview's
* `media/preview.css`).
*/
.cw-mermaid-legend { display: flex; gap: 0.6rem; font-size: 0.75em; opacity: 0.85; margin: 0.2rem 0 0.6rem; }
.cw-mermaid-legend .cw-leg { padding: 0 0.4em; border-radius: 3px; border: 1px solid; }
.cw-mermaid-legend .cw-leg-add { color: #2ea043; border-color: #2ea043; }
.cw-mermaid-legend .cw-leg-chg { color: #d29922; border-color: #d29922; }
.cw-mermaid-legend .cw-leg-rem { color: #808080; border-color: #808080; border-style: dashed; }