Fix: code-selection offset in generated-project preview#666
Merged
yaozheng-fang merged 4 commits intoJul 16, 2026
Merged
Conversation
yaozheng-fang
approved these changes
Jul 16, 2026
The generated-code viewer (ProjectPreview) layers a transparent <textarea>
over a highlight.js-colored <pre> for in-browser editing. After clicking
「生成项目」, selecting code drew the native selection rectangle offset
from the visible text because the two layers were not metric-identical:
1. highlight.js's github.css theme applies `pre code.hljs { padding: 1em }`
(specificity 0,1,2), which beat ProjectPreview.css's .pp-hl code reset
(specificity 0,1,1). The underlay's <code> had ~13px of extra inner
padding that the textarea did not, shifting everything down-right.
2. The underlay's scrollbar consumed inner width independently of the
textarea's scrollbar, so long lines wrapped at different columns.
3. github.css applies font-weight:bold / font-style:italic to several
token classes, but the textarea renders every glyph at one weight;
bold/italic spans widened the underlay, producing horizontal drift
that grew across a line.
4. Subpixel font-rendering defaults differed between <pre> and <textarea>.
Fix: raise specificity of the <code> padding reset (pre.pp-hl > code),
force both layers to identical font metrics (weight 400, normal style,
ligatures off, tab-size pinned), hide the underlay's scrollbar visually
while keeping its layout footprint (so column widths match), and
neutralize bold/italic on highlighted tokens in the overlay.
…tion The transparent-textarea-over-highlighted-pre hack could never be made pixel-perfect across browsers/font renderings — selection rectangles kept drifting from the visible text. Trade syntax-while-editing for a plain <textarea> where the OS/browser handles caret, selection, IME, and scrolling natively. Read-only/compare views keep highlighting.
richarddancin
force-pushed
the
worktree-fix-preview-selection-offset
branch
from
July 16, 2026 13:41
b31addf to
54fa6c9
Compare
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
2 participants
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.
No description provided.