Fixing NBSP Issue in Blogger Code Block Copy Button
Today I happened to discover that clicking the copy button on a code block yields a result that contains NBSP.
For example, the following.
Selecting with the mouse and copying from the right-click menu gives the result on the left.
Clicking the copy button on the code block gives the result on the right. (Contains some NBSP characters)
I took my code and the problem description to ask Claude.
Solution 1: Change innerText to textContent
Implementation
https://crazypeace.github.io/blogger-replace-blockquote-to-pre/blockquote-add-copy-button1.js
The test result was wrong. Not only did it still contain NBSP, but the line breaks were also gone.
I took the above problem and continued asking Claude
Solution 2: In the result obtained from innerText, specifically clean up NBSP
The original code is "condensed" into a single line of JS. It's hard for me to find a specific spot to modify, and I was worried I'd strain my eyes and make a mistake.
So I gave the original single-line JS to Claude, and asked it to return the modified version as a single line as well.
I then applied it to my own code. Implementation
https://crazypeace.github.io/blogger-replace-blockquote-to-pre/blockquote-add-copy-button2.js
The test result is good, NBSP is gone.
However, 1 blank line in the original text becomes 2 blank lines. It doesn't affect usage, so I won't bother with it.
========
Finally adopting Solution 2, syncing to the original project
https://crazypeace.github.io/blogger-replace-blockquote-to-pre/blockquote-add-copy-button.js
Users of my project don't need to make any changes.
========
Related Recommendations
"Using the Stylebot Plugin to Modify Blogger Editor Width and Hide the Right Sidebar"
"Displaying Post Labels on the Blogger Homepage"
"Adding a Copy Button to blockquote Code Blocks in Blogger"
Posts
