fix: prevent nbsp characters from being manually copied

[dstaley]

🔗 Relevant links

• Preview link 🔎
• Asana task 🎟️

🗒️ What

This PR switches blank lines in our CodeBlocks to use a CSS pseudo element, which won't be copied when the user manually selects content to copy.

🤷 Why

Due to the way we split lines, empty lines aren't properly retained. We need to manually insert those blank lines, which requires that we give them some content so they take up space. Previously, we used the nbsp; character, but this creates issues when code is copied and pasted, since some languages don't allow this specific character.

🛠️ How

This PR switches the approach somewhat, by targeting empty lines via a specific CSS class. This class uses the :after pseudo element to render a space character, which isn't copied to the clipboard when a user selects code.

Unfortunately, since the blank lines have no content (not even a line terminating character), blank lines are not preserved when copied manually (they are when using the copy button). We can iterate and fix this later, but right now the important thing is preventing unsupported characters from ending up in our users' code.

📸 Design Screenshots

🧪 Testing

• Go to preview
• Manually select the code in the code block and copy it to your clipboard.
• Open the console in your web browser.
• Type the first character of a template literal string `
• Paste the code
• Type the closing template literal symbol `
• Type .includes('\xa0')
• Press enter
• Ensure the output is false (meaning the string does not contain the non-breaking space character).

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dev-portal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 21, 2024 5:37pm

[github-actions]

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

This PR introduced no changes to the javascript bundle 🙌

[zchsh]

Thanks for tackling this - such a ✨ FUN ✨ issue ahah! 💖

Tested as described, and am indeed no longer seeing those NBSP characters, nor when using the Copy button... but there is a bit of wildness in my browser at least with "double-highlighting" (presumably of both the newlines, in pink, and the code itself, in green) [EDIT: I missed that the pink is just the Vercel toolbar, not related to this PR]. And also seems to be missing some newlines in the pasted code:

Upstream	This PR

Maybe this is something we can live with... I did a bit more digging though, and found that selecting and copying the text didn't seem to yield those weird whitespace characters in the first place (in my experience, at least). But, using the Copy button does. First showing this in browser console:

2024-05-17-weird-whitespace-chars-in-copy-button-use.mp4

And then in VSCode:

2024-05-17-invisible-chars-in-vscode-from-copy-button-only.mp4

As well it seems in some browsers (FireFox is where I found this), selecting and copying the text yields a pasted value with no newlines at all (upstream, and also in this PR, shown with preview link of this PR):

2024-05-17-firefox-select-and-copy-missing-whitespace.mp4

Looking back on the original report in Slack I think this lines up... We kind of have two separate but somewhat related problems:

• Select and copy yields no newlines (in some browsers at least, probably relates to HTML structure / styles of Helios code block, or to our rehype processing, I have no idea in which domain a good solution might lie)
• Copy button yields weird whitespace characters (seems to affect all browsers)

Which is all to say... I think we may need a separate fix for the Select and copy yields no newlines issue, and I feel like the solution in this PR is probably headed more in that direction?

The "good news" (well kinda maybe?) is that we don't have to contend with the "select" and "copy button" issues being super-intertwined, so we don't have to try to solve both problems at once (i think this might've been one of the reasons we introduced HiddenCopyContent in the previous component... but heck if there is such a solution then that'd be awesome... i just feel like we tried going down that path and couldn't figure it out 😅 )

ANYWAYS... point being, for the Copy button yields weird whitespace characters we may be able to fix the issue by adjusting the processSnippet function 🤔 And for the Select and copy yields no newlines, I feel like we somehow figured this out in the previous component... but i honestly can't remember how 🙈 i'll make a task for that latter issue, and dive in there!

[dstaley]

(presumably of both the newlines, in pink, and the code itself, in green)

This is actually from the Vercel toolbar!

[zchsh]

@dstaley ahah oh man, the pink highlighting makes so much more sense now 🤦 Edited the comment to reflect that!

[LeahMarieBush]

LGTM!

[zchsh]

Looked at this again, definitely fixes the "weird whitespace in Copy button" issue so seems like a great improvement 👍 (Apologies for the wall of text earlier, went on quite the tangent there! 🙇‍♂️)