fix(client): code-block chrome, comment cards, quote preview, and annotation anchoring#2
Merged
Merged
Conversation
…d source Code rendering gets a cleaner, more useful chrome: - A plain code block loses its outer border/frame; its header is now just the language name on the left and a Copy button on the right, over the pinned line-number gutter. Copy grabs the block's source. - The Mermaid Code toggle shows the source as a real code block - line numbers, a Copy button, and Mermaid syntax highlighting (highlight.js ships no Mermaid language, so a small grammar is registered on first use) - instead of a bare pre. - A diff keeps its framed box and Unified/Split header and gets no Copy button. Shared helpers (copyText moved to util.js; makeCopyButton / makeLinenos / lineCount / highlightMermaidSource in a new codeblock.js) keep render.js and diagram.js from duplicating the button, gutter and highlighting. Adds a fixture and browser tests covering the code/diff copy behaviour and the Mermaid source view (line numbers, Copy, and highlighting).
…page A comment anchored inside a narrow container - a table cell, a grid card, or a <code> span - dragged its rail card into the middle of the page, because the card hugged the immediate container's right edge. anchorRight now returns the right edge of the widest block-level ancestor (the content column) rather than the narrow container, so the card sits on the side as intended, wherever the comment lands. Adds a fixture and a browser test (fails before, passes after). Signed-off-by: Austin (Ngoc Thang) Pham <austinpham@microsoft.com>
…de blocks
A self-styled artifact often styles every <code> (e.g. "code{border:1px
solid var(--border)}" for inline snippets). That rule also matches the <code>
inside the <pre> that htmlit enhances, so a stray 1px box was drawn around the
highlighted source - visible in light mode, where it did not blend into the
dark frame.
The enhancement already resets the inner <pre> (border/background/radius) but
the sibling reset for <pre>>code only cleared background and padding. Extend it
to also zero border, border-radius and box-shadow so the enhanced block owns its
own borderless frame regardless of the artifact's generic code styling. Inline
code outside the block is untouched.
Adds a regression fixture whose artifact sets code{border} and a test asserting
the enhanced block's <code> has no border while inline code keeps its own.
Signed-off-by: Austin (Ngoc Thang) Pham <austinpham@microsoft.com>
The rail card's quote (.card-q) clamps to two lines with -webkit-line-clamp, but a fixed max-height of 34px was shorter than two lines at the inherited line-height, so the second line was cut mid-glyph (a faded half-line) instead of a clean ellipsis. Pin an explicit line-height and size max-height to exactly two lines (calc(3em + 6px)), so the clamp and the height cap agree and a long quote previews two whole lines. Adds a regression test with a long quote asserting the preview is ~2 lines, not the clipped ~1.5 it was before. Signed-off-by: Austin (Ngoc Thang) Pham <austinpham@microsoft.com>
…ed inline elements cssPath emitted an unrooted selector (e.g. "div:nth-of-type(1) > ul > li:nth-of-type(2) > strong"). document.querySelector matches such a path against any subtree at any depth, so when an earlier element shared the same tag/nth-of-type skeleton (e.g. a <strong> nested in a card grid) it resolved to that decoy instead of the intended element. resolveRange's text guard then failed, pendingRects returned empty, and openSelMenu called clearPending - closing the annotation menu and wiping the selection. The result was that some lines (a <strong> inside a list, a link, any id-less nested inline element) silently could not be highlighted or commented on. Root the path at an ancestor id, otherwise <body>, and climb the full ancestor chain instead of capping at six segments, so it always resolves absolutely to the correct element. Adds a browser regression test whose fixture reproduces the colliding skeleton; it fails (menu display:none) before the fix and passes (flex) after. Signed-off-by: Austin (Ngoc Thang) Pham <austinpham@microsoft.com>
auspham
changed the title
12 tasks
The diagram source view was a bare overlay (no title, a lighter #f6f8fa background, floating Copy and toggle buttons) that did not match an enhanced code block. Rebuild it from the same pieces: a titled "MERMAID" header with the Copy button and a "Diagram" toggle, over the line-numbered, highlighted body, reusing the .htmlit-code / .htmlit-code-hd / .htmlit-code-body classes so it shares the borderless chrome and background. The diagram view keeps a floating "Code" button that opens the overlay and hides while it is open; the header's "Diagram" button restores the diagram. The header is sticky and opaque so the title/actions stay put while the source scrolls. Updates the Mermaid code-view and diagram robustness tests for the new open/close model and asserts the title, matching background and toggle. Signed-off-by: Austin (Ngoc Thang) Pham <austinpham@microsoft.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
A batch of client review-surface fixes, consolidated into one PR. Each is an independent, self-contained change with its own regression test.
Borderless code blocks with Copy, and a Mermaid source view that matches them. A plain code block loses its frame and gains a Copy button; a diff keeps its framed, titled box and has no Copy button. The Mermaid "Code" toggle renders the source using the same code-block chrome - a titled
MERMAIDheader with a Copy button and aDiagramtoggle, over a line-numbered, syntax-highlighted body, on the same background - instead of a bare, differently-shaded overlay.Comment card stays on the content-column side. A comment anchored inside a narrow container (a table cell /
<code>span) used to drag its rail card into the middle of the page, where it could also cover and block selection of lower content. Cards now sit at the right of the content column.An artifact's own
code{border}no longer leaks into an enhanced code block. Self-styled docs commonly style every<code>(for inline snippets); that rule also matched the<code>inside the enhanced<pre>, drawing a stray 1px box around the highlighted source (visible in light mode). The enhanced block now resets border/border-radius/box-shadow on its inner code, so it owns its borderless frame regardless of the artifact's styling. Inline code is untouched.A comment-card quote previews two full lines instead of a clipped one. The rail card quote clamps to two lines, but a fixed
max-heightshorter than two lines cut the second line mid-glyph. An explicit line-height and a two-linemax-heightmake the clamp and the height cap agree.Annotation selector is anchored so highlighting works on nested inline elements.
cssPathemitted an unrooted selector (e.g.div:nth-of-type(1) > ul > li:nth-of-type(2) > strong); when an earlier subtree shared that tag/nth-of-type skeleton,document.querySelectorresolved to the wrong element, the text guard failed, and the selection menu was force-closed. Some lines (an id-less nested<strong>, a link) silently could not be highlighted or commented on. The path is now rooted at an ancestor id, else<body>, and climbs the full chain.Type of change
How was this tested?
New browser regression tests for each behavior change (borderless/Copy/diff, the Mermaid Code view chrome + open/close model, artifact-
code{border}leak, comment-card placement + stacked-card blocking, long-quote two-line preview, and the selector-collision highlight). Each fails before its fix and passes after.python -m pytest tests/python(45 passed)ruff check skills/htmlit tests/python(clean)npm test(browser client - 26 passed)Checklist
git commit -s).