Do not copy the removed lines from a diff code block - #464
Conversation
A diff block shows the old line in red and the new line in green. The + and - glyphs come from CSS ::before, and pseudo-element content is not in the DOM, so the copy button handed you the old line and the new line with nothing to tell them apart. The tutorial evolves the same file over several pages, so that is a broken file rather than a cosmetic problem. Copying the -Force block on the coverage page produced two $Name parameters and took the whole suite down with "Missing ')' in function parameter list". Swizzle the copy button to drop the lines marked diff-remove. Rendering is untouched, the red lines stay on the page and just do not reach the clipboard. The other half is a title="path" on a block that is not the whole file. The tutorial teaches that a titled block is a file to save, so a three line excerpt or a "# ... the four existing It blocks ..." placeholder under that title deletes the rest of the file. Print the complete file where the title stays, and drop the title where the block is genuinely an excerpt. Also move the "this is an illustration" note in front of the blocks it applies to, it was sitting after them. Fix #459
|
@fflaten this is a stack of five. I ran the tutorial end to end against 6.1.0 a few times, each time reading it the way a different kind of reader would, and these are the things that came out of it. Each PR is based on the previous one, so merge from the bottom up:
Only the first one touches the theme. It is a wrapper swizzle on the copy button so that a diff block stops putting the old line and the new line on your clipboard together. That one is worth looking at properly, the rest is content and you can skim it. The reason it matters: reading the tutorial by copying the blocks, which is what most people do, breaks the suite on 8 pages. The worst case is silent. On Two notes on reviewing: Netlify only built a preview for #464, the other four target a branch rather than The tutorial itself still ends at 26 tests and 100% coverage. The blocks where I replaced a Happy to squash the content ones into a single PR if five is too many, I split them by the kind of change mostly so the theme change is reviewable on its own. LMK. 🤖 |
Fix #459
I went through the tutorial copying only the code blocks and the suite broke on 8 pages. Two causes, both fixed here.
The copy button handed you the removed lines.
diff-addanddiff-removeare declared asmagicComments, and the+and-glyphs come from CSS::before. Pseudo element content is not in the DOM, so a copied diff block contained the old line and the new line with nothing to tell them apart. On the coverage page that gave two$Nameparameters and killed the whole suite withMissing ')' in function parameter list.src/theme/CodeBlock/Buttons/CopyButtonnow re-provides the code block context with thediff-removelines dropped, so only the copy button sees the trimmed code. Rendering is untouched, the red lines stay on the page.A
title="path"on a block that is not the whole file. The tutorial teaches that a titled block is a file to save, so an excerpt or a# ... the four existing It blocks ...placeholder under that title deletes the rest of the file. Complete files are now printed where the title stays, and the title is gone where the block really is an excerpt.Also moved the "this is an illustration" notes in front of the blocks they apply to instead of after them.
Verification
Built the site and drove the real copy button in the browser, capturing what it writes to the clipboard.
The
-Forceblock ontutorial/6-code-coverage/1-measuring.mdx, before and after:The three blocks where I replaced a placeholder with the complete file were diffed against the files the tutorial actually produces, taken from a full run of the tutorial. All three match exactly:
Checked that a block with no diff copies exactly as before, and that the removed lines still render in red.
🤖