benweet / stackedit

In-browser Markdown editor
https://stackedit.io/
Apache License 2.0
21.83k stars 2.73k forks source link

Pasting code blocks messes up the formatting #1364

Open vekien opened 6 years ago

vekien commented 6 years ago

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

GreenGremlin commented 6 years ago

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.

GreenGremlin commented 6 years ago

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.

vekien commented 6 years ago

Good find @GreenGremlin , I use PHPStorm so something very similar is likely happening

AlloVince commented 5 years ago

same issue, hope this could be fixed

GreenGremlin commented 5 years ago

It’s fixed by https://github.com/benweet/stackedit/pull/1401, just needs to be merged

rehmatworks commented 4 years ago

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.

vekien commented 4 years ago

@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.

rehmatworks commented 4 years ago

@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.

kpeters-cbsi commented 4 years ago

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.

Peter-Schorn commented 4 years ago

On Google Chrome, when I use "Paste and Match Style" the code that I copy from Xcode is properly formatted. I reccomend trying that.

blachawk commented 3 years ago

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.

mobula9 commented 3 years ago

I still run into the problem. Has anyone found a solution to this problem?

madzadev commented 3 years ago

@mobula9 try @blachawk 's suggestion, works in Chrome, too 😉

alsanchez-dev commented 2 years ago

On Google chrome for mac, just right-click and "paste" as: "Paste and match style"