don't make plus-signs selectable

[SimonSiefke]

Expected behavior:

I can copy and paste the code, the plus-signs are not copied with the code.

Current behavior:

When I copy and paste the code, I manually need to remove each + because the the plus-signs are copied along with the code.

[anikethsaha]

Those + and - signs are required in order to make it better to understand how to change the code for migration or how to replace any deprecated APIs with the new one.

these are not usually long snippets so manually deleting should not be a much of work. 👍

[SimonSiefke]

I was thinking that maybe

<p><span style="user-select:none">+</span>document.body.removeChild(element);</p>
<p><span style="user-select:none">+</span>element = component();</p>
<p><span style="user-select:none">+</span>document.body.appendChild(element);</p>

would be a good solution.

I agree that it is not much work to manually remove the plus-signs but I think it is unnecessary and that the guides would be improved when the code can just be copied and pasted.

[chenxsan]

@SimonSiefke It could be possible to target the + - prefix if we bring Prismjs plugin https://prismjs.com/plugins/diff-highlight/ support into Refactor which this doc site relies one.

[DanielRuf]

Or render :before pseudo elements.

I think this issue can be closed as PrismJS/prism#2281 is merged?

[chenxsan]

@DanielRuf That commit is not released in a new version PrismJS yet. Maybe we can keep this issue open if we do want to bring this feature into doc site.

[chenxsan]

• Wait for new PrismJS to be released (1.21.0 is out)
• Wait for refractor to update to PrismJS 1.21.0 (refractor 3.1.0 with PrismJS 1.21.0 is out)
• Wait for remark-refractor to update to then-latest refractor
• Add CSS to enable the requested feature

[chenxsan]

I've created a pull request here #3912 so anyone can check how it looks like now https://webpack-js-org-git-fork-chenxsan-feature-user-select-none-diff.webpack-docs.vercel.app/guides/asset-management/#loading-images.