vscode: Copy-Paste Formatted Code Doesn't Work Properly On Linux (Works On Windows)
- VS Code Version: 1.55.2
- OS Version: Kubuntu 20.04 (Linux)
Steps to Reproduce:
- Open VS Code 1.55.2 on Linux
- Open a JavaScript (.js) file
- Select some code, & Copy
- Paste to any ‘Rich Text’ editor (i.e. LibreOffice Writer, AbiWord, WPS Office Writer, or SoftOffice TextMaker).
- Observe that there is no indentation in the pasted text
Does this issue occur when all extensions are disabled?: Yes
Full Description:
On Windows, I can copy from VS Code & paste it into i.e. MS Word, and it retains all the correct formatting (both coloring/syntax highlighting & indentation). However, on Linux, there doesn’t seem to be any combination that works: pasting it anywhere else seems to lose either the coloring or the indentation. Here’s a very simple example - source code, as shown in VS Code:
If I paste it to LibreOffice Writer, WPS Office Writer, SoftOffice TextMaker, or AbiWord, it loses its indentation:
Conversely, if I paste it to MS Word running in VirtualBox, it keeps its indentation but loses its color:
Here’s the raw HTML in the clipboard, as shown by CopyQ (a clipboard utility):
<meta http-equiv="content-type" content="text/html; charset=utf-8"><div style="color: #000000;background-color: #ffffff;font-family: 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback';font-weight: normal;font-size: 12px;line-height: 16px;white-space: pre;"><div><span style="color: #0000ff;">import</span><span style="color: #000000;"> React </span><span style="color: #0000ff;">from</span><span style="color: #000000;"> </span><span style="color: #a31515;">"react"</span><span style="color: #000000;">;</span></div><br><div><span style="color: #0000ff;">function</span><span style="color: #000000;"> withTooltip(Component) {</span></div><div><span style="color: #000000;"> </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> </span><span style="color: #0000ff;">class</span><span style="color: #000000;"> WithTooltip </span><span style="color: #0000ff;">extends</span><span style="color: #000000;"> React.Component {</span></div><div><span style="color: #000000;"> state = { showTooltip: </span><span style="color: #0000ff;">false</span><span style="color: #000000;"> };</span></div><div><span style="color: #000000;"> render() { </span></div><div><span style="color: #000000;"> </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> (</span></div><div><span style="color: #000000;"> </span><span style="color: #800000;"><div</span><span style="color: #000000;"> </span><span style="color: #800000;">/></span></div><div><span style="color: #000000;"> );</span></div><div><span style="color: #000000;"> }</span></div><div><span style="color: #000000;"> };</span></div><div><span style="color: #000000;">}</span></div><br><div><span style="color: #0000ff;">export</span><span style="color: #000000;"> </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> withTooltip;</span></div></div>
If I reboot to Windows & copy-paste from VS Code 1.55.2 to MS Word (or any other Windows richext editor), the formatting comes out properly. The html produced on Windows (also obtained via CopyQ) looks completely different to the html produced by VS Code on Linux. Here’s the html from Windows:
<html>
<body>
<!--StartFragment--><div style="color: #000000;background-color: #ffffff;font-family: Consolas, 'Courier New', monospace;font-weight: normal;font-size: 12px;line-height: 16px;white-space: pre;"><div><span style="color: #0000ff;">import</span><span style="color: #000000;"> React </span><span style="color: #0000ff;">from</span><span style="color: #000000;"> </span><span style="color: #a31515;">"react"</span><span style="color: #000000;">;</span></div><br><div><span style="color: #0000ff;">function</span><span style="color: #000000;"> withTooltip(Component) {</span></div><div><span style="color: #000000;">    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> </span><span style="color: #0000ff;">class</span><span style="color: #000000;"> WithTooltip </span><span style="color: #0000ff;">extends</span><span style="color: #000000;"> React.Component {</span></div><div><span style="color: #000000;">        state = { showTooltip: </span><span style="color: #0000ff;">false</span><span style="color: #000000;"> };</span></div><div><span style="color: #000000;">        render() { </span></div><div><span style="color: #000000;">            </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> (</span></div><div><span style="color: #000000;">                </span><span style="color: #800000;"><div</span><span style="color: #000000;"> </span><span style="color: #800000;">/></span></div><div><span style="color: #000000;">            );</span></div><div><span style="color: #000000;">        }</span></div><div><span style="color: #000000;">    };</span></div><div><span style="color: #000000;">}</span></div><br><div><span style="color: #0000ff;">export</span><span style="color: #000000;"> </span><span style="color: #0000ff;">default</span><span style="color: #000000;"> withTooltip;</span></div></div><!--EndFragment-->
</body>
</html>
Thus, every time I need to copy formatted code out of VS Code, I find myself having to reboot completely to Windows just to do the copy-paste, as it works fine there, but not on Linux.
About this issue
- Original URL
- State: open
- Created 3 years ago
- Reactions: 15
- Comments: 16 (1 by maintainers)
I tried pasting code into more than a dozen formatted text editors on Linux and online; I found one where the formatting comes out properly: Google Docs. Everywhere else it doesn’t.
Clearly the problem is VS Code. It’s producing html that the vast, vast majority of text editors don’t understand - so even if there are a few cases that do, it should be producing html that is generally understood, not just understood by a small subset of editors. i.e. VS Code on Windows produces code that is properly formatted 100% of the time, regardless of the editor you paste it to. VS Code on Linux produces code that is apparently recognizable by some small exceptional number of editors, but not by the vast majority of others. Clearly the issue is the HTML it’s producing.
I can report that Teams on Windows also now has this issue.
There is most definitely a bug in Teams. Pasting the exact same content in a chat strips the indentation and pasting the content into a channel does not strip the indentation.
Chat:
Channel:
People are linking to this ticket from MSTeams bug reports claiming that MSTeams tickets should be closed when they are not fixed.
I’m also facing this issue on Mac. No matter where I copy the code and paste it into MS Teams, it just shows as text and separates lines with 2 empty lines!
I never have this issue on Slack.