samclarke/SCEditor

My custom formats break copy/paste

Closed this issue · 6 comments

ph1823 commented

Hi everyone ! I hope you have a nice day 😄

I have slamm problem, when i try copy/paste with ctrl-c / ctrl-v and not with toolbar paste, that paste blank, or the return of "fragmentToHtml"

My code: https://gist.github.com/ph1823/a139957a3763bd9265eadb88ca122819

When I do a CTRL-V, it's only the "fragmentToHtml" function that is called (i have make print on other unction, and no output of this print in the console), so I don't understand why the source variable is empty.
(when I print the source, it is quite empty) do you know where it can come from?

Thank for your help !

samclarke commented

The fragmentToSource methods arguments are html (a string), context (the document), and parent (a DOM node). The API could really do with some documentation.

For the custom format to work, it will first need to convert the HTML into a DOM node and then pass it to the conversion code. Something like this: https://jsfiddle.net/ybnkocz6/1/ (I've moved the fragmentToSource code into the function nodeToSource and then updated fragmentToSource to call it).

The Minecraft format looks really interesting!

ph1823 commented

Thanks to you for the fix of emon code, which should not be very clean .. It was quite difficult for me to format because I have limited skills in JS, so the code should not be very optimized or other. I have a problem, when I CTRL + C and CTRL + V in the same textarea, it adds a StartFragment and an EndFragment that appears. Whereas when I copy paste into a text document it doesn't,

Thank you in any case for your precise help!

samclarke commented

I'm not entirely sure what the issue is, do you have a demo of it?

it adds a StartFragment and an EndFragment that appears

Is it adding the text "StartFragment" and "EndFragment", extra DOM nodes or something else?

ph1823 commented

Sorry for not knowing how to explain better, I made a video, it will be more understandable!
Video link: https://ph1823.fr/files/sceditor_bug.mp4

samclarke commented

Oh that's because some browsers add comments to copy and pasted code. So the copied HTML might look like:

<!-- StartFragment -->
<strong>test</strong>
<!-- EndFragment -->

The nodeToSource method doesn't skip comments and instead converts their contents to text. It can be fixed by adding a check to the start of the nodeToSource method:

// Skip comment nodes
if (context.nodeType === Node.COMMENT_NODE) {
    return '';
}

Something like: https://jsfiddle.net/o9skz40w/

samclarke commented

Closing this. Feel free to re-open or create a new issue if you have any other issues.