Copy/Paste should preserve styling

[iclems]

There are three discussions here:

• how to make rich copy/paste fully compatible within Firepad
• how to preserve rich copy/paste fully compatible within Firepad from interfering with other apps (e.g. the issue with special chars appearing when you copy paste in other apps => oncopy event ?)
• how to make rich copy/paste compatible with other apps (mainly I guess to make basic styling compatible with apps as a Text Editor / Word)

[iclems]

The easiest way of doing this seems to me to play with event.clipboardData.getData('text/firepad') and setData('text/firepad') (or using directly the mime/type 'text/html' which is slightly more risky as Chrome will provide rich html content for data pasted from others apps). Then, using HTML as a bridge for import/export (as we currently do), would require for these operations to have getHtmlFromSelection (or getHtmlFromRange ?) and insertHtmlAtIndex/Cursor. How does that seem to you?

[mikelehen]

That sounds great, but I don't think clipboardData is widely supported (it might be IE-only?). In general, I believe browsers make it difficult to access the clipboard directly, due to security concerns. So making copy/paste work well will likely require some browser hackery. The typical approach (I think) is to detect a ctrl-C operation and move the focus / selection to some place that has the content that you want to end up in the clipboard. Similarly for ctrl-V, you paste to some alternate location and then process the pasted content and insert where you want it. This hackery is why I haven't felt like tackling this. :-)

[iclems]

I did think the same. But the fact is that window.clipboardData is supported by IE, and at least Chrome+Safari support event.clipboardData getData and setData (I've tested this). So it made me change a bit my mind ;-)

• Plain text: I've played with CodeMirror input and it's pretty easy to fix the sentinel chars being copied (just need to catch the 'copy' event and replace the inputField value which has already been updated with current selection value)
• HTML: CodeMirror uses a textarea inputfield to handle copy / paste (and input, as you know). The issue is that text area are considered plain text only by all browsers, except Chrome. Hence, only Chrome receives an HTML representation of the data pasted in a text area. This basically means that paste from external apps could preserve attributes in Chrome, but I understand it's not a real solution... Yet, changing CodeMirror input for a div with contenteditable=true does not seem a possible way either.
• Short term: getHtmlFromSelection and insertHtmlAtCursor fix the issue of copy/paste within Firepad. I've just created a inserHtmlAtCursor based on setHtml: that fixes the paste part of the thing as we can capture input.on('paste', function(event) { var html = event.clipboardData.getData('text/firepad'); firepad.insertHtmlAtCursor(html); }).

Do you have any suggestion for a getHtmlFromSelection?

[mikelehen]

Perhaps this will help (add it in firepad.js somewhere):

Firepad.prototype.getOperationForSpan = function(start, end) {
var text = this.richTextCodeMirror_.getRange(start, end);
var spans = this.richTextCodeMirror_.getAttributeSpans(start, end);
var pos = 0;
var op = new firepad.TextOperation();
for(var i = 0; i < spans.length; i++) {
op.insert(text.substr(pos, spans[i].length), spans[i].attributes);
pos += spans[i].length;
}
return op;
};

You can use that to create a TextOperation representing the span, and then
the existing getHtml() logic should work on that.

If you can get something working, I'd be thrilled with a pull request. :-)

On Thu, Nov 14, 2013 at 11:50 AM, Clément Wehrung
notifications@github.comwrote:

I did think the same. But the fact is that window.clipboardData is
supported by IE, and at least Chrome+Safari support event.clipboardData
getData and setData (I've tested this). So it made me change a bit my mind
;-)

• Plain text: I've played with CodeMirror input and it's pretty easy
  to fix the sentinel chars being copied (just need to catch the 'copy' event
  and replace the inputField value which has already been updated with
  current selection value)
• HTML: CodeMirror uses a textarea inputfield to handle copy / paste
  (and input, as you know). The issue is that text area are considered plain
  text only by all browsers, except Chrome. Hence, only Chrome receives an
  HTML representation of the data pasted in a text area. This basically means
  that paste from external apps could preserve attributes in Chrome, but I
  understand it's not a real solution... Yet, changing CodeMirror input for a
  div with contenteditable=true does not seem a possible way either.
• Short term: getHtmlFromSelection and insertHtmlAtCursor fix the
  issue of copy/paste within Firepad. I've just created a inserHtmlAtCursor
  based on setHtml: that fixes the paste part of the thing as we can
  capture input.on('paste', function(event) { var html =
  event.clipboardData.getData('text/firepad');
  firepad.insertHtmlAtCursor(html); }).

Do you have any suggestion for a getHtmlFromSelection?

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/35#issuecomment-28516445
.

[brianburt]

I'm very curious if anyone has worked on this... Google Docs handles it so well, I think now the user expectation is that this work. We're using firepad inside an app, and so are very interested.

[mikelehen]

I think @iclems made progress on this at one point. Hopefully he'll chime in. :-)

[brianburt]

Thanks Michael.
Clement any news on html copy paste in firepad?
#35

On Wed, Oct 8, 2014 at 6:24 PM, Michael Lehenbauer <notifications@github.com

wrote:

I think @iclems https://github.com/iclems made progress on this at one
point. Hopefully he'll chime in. :-)

Reply to this email directly or view it on GitHub
#35 (comment).

Brian Burt
Chief Visioneer (Founder & CEO)

Leader in Social Conferencing
www.MaestroConference.com http://www.maestroconference.com/

We are the leading technology for hosting real conversations at large
scale. Customers include the Obama Campaign who used us for 35,000
events, the National Association of Realtors, and the National Science
Foundation; other users include authors such as Jack Canfield, Marianne
Williamson, Deepak Chopra among thousands of others worldwide using
MaestroConference.

[iclems]

You’ll find here a quick example of how to do it: https://gist.github.com/iclems/31b44bb7aba9bf7713a8

Note that if you use entities, you probably need some additional processing, etc. 

Clément

On Fri, Oct 10, 2014 at 12:38 AM, brianburt notifications@github.com
wrote:

Thanks Michael.
Clement any news on html copy paste in firepad?
#35
On Wed, Oct 8, 2014 at 6:24 PM, Michael Lehenbauer <notifications@github.com

wrote:
I think @iclems https://github.com/iclems made progress on this at one
point. Hopefully he'll chime in. :-)

Reply to this email directly or view it on GitHub
#35 (comment).

Brian Burt
Chief Visioneer (Founder & CEO)
+1 415 727 1820 direct
+1 877 414 1515 customer support
Leader in Social Conferencing
www.MaestroConference.com http://www.maestroconference.com/
We are the leading technology for hosting real conversations at large
scale. Customers include the Obama Campaign who used us for 35,000
events, the National Association of Realtors, and the National Science
Foundation; other users include authors such as Jack Canfield, Marianne
Williamson, Deepak Chopra among thousands of others worldwide using

MaestroConference.

Reply to this email directly or view it on GitHub:
#35 (comment)

[nickgrossman]

Thanks -- I just looked at that Gist and couldn't quite figure how to integrate it. I was able to update it with correct references to my firepad and codeMirror instances, but choked on the "LineSentinelCharacter+EntitySentinelCharacter" variables.

Any suggestions?

Thanks -- this would be a really awesome feature to have

[oresmus]

@nickgrossman (and/or @brianburt), I'd be happy to try to help with this (and eventually submit a pull request), since I'd like the same feature in Firepad. But I don't quite see how that gist is supposed to fit in, so if you or @iclems have any public code sample that uses Firepad and incorporates that gist (even if it's disabled since it's not yet fully correct), that would help me get started. (FYI, the "sentinel" variables are internal variables of some object in firepad.js; if they were just commented out in the gist, I think it would still "sort of work" and be a good version to start with. They also happen to have constant values.) [update: now I think I see how to incorporate the gist, so any code sample is not urgent.]

[oresmus]

As I mentioned in #199, it looks to me like the gist above by @iclems would fix #199 as well as adding this feature.

[iclems]

The gist does work fine. Though, you can actually improve it by setting a private mime type for Firepad to distinguish copy/paste within a firepad or from outside. When a paste comes from outside, you may need to perform additional cleanup before trying to insert the pasted HTML or text.

Also, some entities may require to be able to perform some specific tasks when being inserted through a paste. Think of a paste of rich text which includes images: in this scenario, the clipboard should contain an HTML version of the rich text (at least on Mac), though you'll probably need to upload the base64 or image URL to your server to store it, and get a token to store in Firepad, etc.

Hence, it would take some work to figure a really generic implementation of copy/paste for rich text that would work in every case and have full support for entities.

[oresmus]

@iclems, thanks for this additional info. It sounds much easier to just preserve basic styling, and that is what's high-priority for my use case, so I'm planning to try to get that to work (and fix #199), and after that we'll see (maybe splitting off a separate issue for going farther will make sense).

One question about your gist: does the ios case (shown below) work correctly, or does it always copy the entire input element? (I am not familiar with web programming, so I am just guessing the details of the DOM interface used below when assigning to node.selectionEnd, etc.)

function selectInput(node) {
  if (ios) { // Mobile Safari apparently has a bug where select() is broken.
    node.selectionStart = 0;
    node.selectionEnd = node.value.length;
  } else {
    // Suppress mysterious IE10 errors
    try { node.select(); }
    catch(_e) {}
  }
}