Stackedit: Pasting code blocks messes up the formatting

Created on 18 Aug 2018  路  10Comments  路  Source: benweet/stackedit

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:

code issue

I don't know what causes this, but it happens 9/10 times I copy markdown text back into Version 5

Most helpful comment

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.

All 10 comments

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

same issue, hope this could be fixed

It鈥檚 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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bdeanindy picture bdeanindy  路  5Comments

alankis picture alankis  路  4Comments

nobozo picture nobozo  路  5Comments

andaag picture andaag  路  4Comments

tydel picture tydel  路  4Comments