stackedit
stackedit copied to clipboard
benweet
Pasting code blocks messes up the formatting
Hello,
Having this problem consistently and right now it is a deal breaker, whenever I post snippets of code back into StackEdit, it breaks all line formatting, for example here is the difference of the exact same text in Version 4 and Version 5:
I don't know what causes this, but it happens 9/10 times I copy markdown text back into Version 5
I'm seeing this same thing. I paste a large block of markdown with code blocks and the indentation for code blocks is completely gone. There also seems to be extra line breaks added throughout the file.
It looks like this only happens when pasting from an editor that loads the clipboard with html formatted code. Specifically, I see this when copy/pasting from VSCode.
When pasting this code from VSCode:
function foo(bar) {
return 'bar: ' + bar;
}
StackEdit is receiving this html:
<meta charset='utf-8'><div style="color: #c0ccdb;background-color: #32373d;font-family: SF Mono;font-weight: normal;font-size: 14px;line-height: 21px;white-space: pre;"><div><span style="color: #5da892;">function</span><span style="color: #c0ccdb;"> </span><span style="color: #ffffff;">foo</span><span style="color: #c0ccdb;">(</span><span style="color: #ffffff;">bar</span><span style="color: #c0ccdb;">) {</span></div><div><span style="color: #c0ccdb;"> </span><span style="color: #5da892;">return</span><span style="color: #c0ccdb;"> </span><span style="color: #cec86f;">'bar: '</span><span style="color: #c0ccdb;"> </span><span style="color: #5da892;">+</span><span style="color: #c0ccdb;"> </span><span style="color: #ffffff;">bar</span><span style="color: #c0ccdb;">;</span></div><div><span style="color: #c0ccdb;">}</span></div></div>
Which is sanitized to this:
<div><div><span>function</span><span> </span><span>foo</span><span>(</span><span>bar</span><span>) {</span></div><div><span> </span><span>return</span><span> </span><span>'bar: '</span><span> </span><span>+</span><span> </span><span>bar</span><span>;</span></div><div><span>}</span></div></div>
Turndown then turns it to this:
function foo(bar) {
return 'bar: ' + bar;
}
The important piece missing here is that the pasted code includes the white-space: pre; style. Somehow that needs to be taken into account and process the pasted code appropriately.
Note, clipboardData.getData('text/plain') is returning an empty string, when pasting from VSCode.
Good find @GreenGremlin , I use PHPStorm so something very similar is likely happening
It’s fixed by https://github.com/benweet/stackedit/pull/1401, just needs to be merged
I'm still facing the same issue. Not only the editors, but I also copied code from a file in GitHub repo (viewer mode) and still all the indentation disappeared.
@rehmatworks If you want to copy from Github you have to click Raw and then it'll work, Stackedit is still a bit wonkey and won't copy formatted text, only raw code.
@viion Thank you so much for guiding me through it. Generally, I'll be pasting code directly from VScode but I'll follow your suggestion onward to achieve the results. I'll be following this thread to see if any real fix is found.
p.s. I turned off Copy With Syntax Highlighting option in VSCode preferences and now I get the plain text from the editor clipboard. For a real solution, I'll keep an eye on this thread.
This happens for me when pasting monochrome JSON from Windows Terminal running Bash under WSL2. However, pasting into another terminal app (Terminator running on X410) preserves the formatting and I am able to copy the formatted JSON from Terminator back into StackEdit.
On Google Chrome, when I use "Paste and Match Style" the code that I copy from Xcode is properly formatted. I reccomend trying that.
Pasting from VSCode to Stackedit in the new Microsoft Edge, simply right click with your mouse before pasting, and select "paste as plain text". Works like a charm.
On Google chrome for mac, just right-click and "paste" as: "Paste and match style"
