BenStullsBets
705de3169b
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>
56 lines
2.2 KiB
CSS
56 lines
2.2 KiB
CSS
/*
|
|
* Task 7 (D3/D21, PUC-3) — authorship + change annotations for the BUILT-IN VS
|
|
* Code Markdown preview (`markdown.previewStyles`). Same F10 vocabulary as the
|
|
* (sunsetting) custom webview's `media/preview.css`: style = operation
|
|
* (underline = inserted, strikethrough = removed), color = author (human
|
|
* green, Claude blue) — `cw-del` has no author variant (a single fixed
|
|
* struck-red mark; see `previewAnnotations.ts`/`trackChangesModel.ts`'s "del"
|
|
* sentinel tag). Light-theme defaults below; `body.vscode-dark` (also applied
|
|
* on high-contrast dark) overrides with the same palette the webview preview
|
|
* already ships, for continuity across both review surfaces.
|
|
*/
|
|
.cw-ins-claude {
|
|
background: rgba(9, 105, 218, 0.12);
|
|
border-bottom: 2px solid #0969da;
|
|
text-decoration: none;
|
|
}
|
|
.cw-ins-human {
|
|
background: rgba(26, 127, 55, 0.12);
|
|
border-bottom: 2px solid #1a7f37;
|
|
text-decoration: none;
|
|
}
|
|
.cw-del {
|
|
background: rgba(207, 34, 46, 0.1);
|
|
text-decoration: line-through;
|
|
text-decoration-color: #cf222e;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
body.vscode-dark .cw-ins-claude,
|
|
body.vscode-high-contrast:not(.vscode-high-contrast-light) .cw-ins-claude {
|
|
background: rgba(88, 166, 255, 0.15);
|
|
border-bottom-color: #58a6ff;
|
|
}
|
|
body.vscode-dark .cw-ins-human,
|
|
body.vscode-high-contrast:not(.vscode-high-contrast-light) .cw-ins-human {
|
|
background: rgba(63, 185, 80, 0.14);
|
|
border-bottom-color: #3fb950;
|
|
}
|
|
body.vscode-dark .cw-del,
|
|
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; }
|