search

shikijs / twoslash

You take some Shiki, add a hint of TypeScript compiler, and 🎉 incredible static code samples
https://shikijs.github.io/twoslash/
MIT License
1.08k stars 53 forks source link

Selecting, copying and pasting popovers and completions includes an extra newline #67

Closed benlesh closed 3 years ago

benlesh commented 3 years ago

Similar to the issue reported in #65, but not exactly the same...

When using queries and completions, it's fairly easy to prevent the user from selecting and copying the popovers or completions with a little CSS. Something like:

.popover-prefix, .popover, .query, .inline-completions {
  user-select: none;
}

This is, of course, behavior that should be totally optional, because who knows? Maybe authors want people to be able to copy and paste that. Either way. The issue becomes this line here, where an \n is used

Basically, there's no way to prevent the user from selecting that extra newline because it's an \n and not contained in a <div> of some sort. I'd recommend not using <div class="line"> from the prefix variable, because that is something people can leverage to generate line numbers for just code lines (as outlined in #65), rather maybe a new prefix type like <div class="meta-line"> or something like that?

The catch here is I think documentation/styling may need to be updated? A div will, of course, cause the new line behavior, so maybe not.

source image

browser (selecting) image

pasted image

benlesh commented 3 years ago

I just confirmed locally that the suggested solution does work, and doesn't seem to have any impact on the layout:

browser (selected) image

pasted image

orta commented 3 years ago

Yeah, I agree - unless you've started a PR I'll do it now as I've got the stuff open. I don't think this should need styling changes, but will take a look at the fixtures.