Utilize HTML5 Clipboard API when feasible

[JamesMGreene]

Utilize the HTML5 Clipboard API when feasible [in addition to aligning event names with it via #105].

The API is currently being standardized @ http://www.w3.org/TR/clipboard-apis/.

The working group may even be receptive to hearing suggestions from us as well, if we have any to offer. Personally, I'm still trying to figure out what the heck that spec enables us to do (other than paste-capturing, which is not helpful for ZeroClipboard).

[JamesMGreene]

The big question here will be if we can programmatically trigger a "copy" event without incurring the pain of a security prompt (as IE has always done, and this spec is based on IE's DHTML Clipboard). It looks like a "no", at the moment:

Synthetic cut and copy events must not modify data on the system clipboard.

Something like a once-per-site security prompt (a la geolocation permissions, etc.) would fit nicely here, I think, but is not yet a part of the spec.

[JamesMGreene]

P.S. As for manipulating the clipboard data to be injected, I believe the spec would make that part easily achievable with something like the following code (which may not be quite right yet):

(function() {

  var textMsg = 'ZeroClipboard injected this into your system clipboard!';
  var htmlMsg = '<b>ZeroClipboard</b> injected <i>this</i> into your system clipboard!';

  var preventDefault = function(e) {
    if (typeof e.preventDefault === 'function') {
      e.preventDefault();
    }
    else {
      e.returnValue = false;
    }
  };

  var copyCallback = function(e) {
    e = e || window.event;

    if (e.clipboardData) {
      e.clipboardData.clearData();
      e.clipboardData.setData('text/plain', textMsg);
      e.clipboardData.setData('text/html', htmlMsg);
      // Wacky: Must prevent default in order to get this copied into the clipboard
      preventDefault(e);
    }
    else if (window.clipboardData) {
      window.clipboardData.clearData();
      // Only supports plain text and URLs, not HTML
      window.clipboardData.setData('text', textMsg);
      // Wacky: Must prevent default in order to get this copied into the clipboard
      preventDefault(e);
    }
    // else don't preventDefault
  };

  if (typeof document.addEventListener === 'function') {
    document.addEventListener('copy', copyCallback, false);
  }
  else if (typeof document.attachEvent === 'function') {
    document.attachEvent('oncopy', copyCallback);
  }

})();

Extrapolated from the new spec and this old Microsoft example.

[JamesMGreene]

Just posted a message to the HTML5 Clipboard API (webapps) mailing list about this idea.

Something like a once-per-site security prompt (a la geolocation permissions, etc.) would fit nicely here, I think, but is not yet a part of the spec.

Archived version is here: http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0061.html

[JamesMGreene]

Tangent: This isn't actually helpful to us but I found it pretty interesting.

Trello uses a clever mechanism to alter the contents going into the clipboard without using the HTML5 Clipboard API. Only major drawback is that it requires the user to trigger a keyboard-based copy (i.e. Ctrl+C).

[JamesMGreene]

Success! There is now a W3C bug to make this possible in the HTML5 Clipboard API: https://www.w3.org/Bugs/Public/show_bug.cgi?id=23235

[JamesMGreene]

The editor's draft of the spec has been updated to support this: http://dev.w3.org/2006/webapi/clipops/clipops.html

However:

1. There still isn't any way to feature-detect this capability
2. No browsers have implemented this semi-trusted privilege for copy/cut yet

[MasseGuillaume]

this is also a good alternative:
http://stackoverflow.com/questions/10729570/html5-alternative-to-flash-based-zeroclipboard-for-safe-copying-of-data-to-clipb

function copyToClipboard (text) {
     window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);
 }

[codylerum]

Chrome Launch Issue: https://code.google.com/p/chromium/issues/detail?id=437908

[JamesMGreene]

Thanks for the link, @codylerum!

The biggest problem is still that inability to feature detect Clipboard API support, which makes determining the need for Flash awkwardly late (the first click would potentially be wasted by trying to detect if the Clipboard API is supported). 😢

[JamesMGreene]

When the HTML Clipboard API is discoverable and usable in 1+ browsers, we should revisit any issues that have the "HTML TopLayer" label assigned.

[jab]

Landed in Chrome 43:
https://code.google.com/p/chromium/issues/detail?id=437908#c8
http://updates.html5rocks.com/2015/04/cut-and-copy-commands

[jonrohan]

Here's what github does to enable copy to clipboard without flash. It's based on useragent sniffing and not feature detection, which is why it's not in ZC yet. https://gist.github.com/jonrohan/81085b119d16cdd7868a

[JamesMGreene]

Thanks, @jonrohan!

[groovenectar]

Just want to note that if we did the browser sniffing (like Github's implementation) then in about 50 lines of code this would be done by now and actually 100% reliable in this case. Saying that with wholehearted respect for feature-detection which I do hope will work.

[hallvors]

@groovenectar well, in this case we have feature detection in approx two lines of code and we haven't yet found a browser where it's not reliable.

(Regarding time taken - to begin with I underestimated the complexity of the whole project and thought it would be easy to split the whole thing into two separate scripts - one for Flash and one for native. It would certainly be sweet to ensure browsers with native support didn't have to load and parse all the Flash-related code, right? Turns out it wasn't so simple and once I started testing pages with several ZC instances requiring different behaviours I realised my first approach was a bad idea and started over. If you think you have a better approach just code it and send a competing pull request, the more the merrier.)

[hallvors]

BTW - here's the fix for the "emits Flash errors even if it intends to use native API" bug: 26a3aa6
Thanks, @peteallen .

[teppeis]

FYI: Safari 10 supports execCommand('copy') and disables Flash by default.
https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
https://webkit.org/blog/6589/next-steps-for-legacy-plug-ins/

[tomsommer]

Can we get this committed?

[hallvors]

I think it's pretty ready to be committed - but I'm afraid it's flagged as decreasing test coverage somewhat. I'm not entirely sure how to fix that (and I no longer work for the employee who was funding this stuff so far, so I'll have less time available to figure things out..).

[hallvors]

Maybe @JamesMGreene has thoughts on fixing the test coverage..

[groovenectar]

Is there anything specific that needs more testing now?

[tomsommer]

Chrome is blocking Flash now, please merge this.

[ghost]

Is there any news on the progress of this?

[groovenectar]

I'm not sure what the issue is currently, but could throw this in there to get it working quickly and reliably:

#171 (comment)

It would return an id of the browser if there's any need to know it, or false if the browser doesn't support native clipboard... I used this on the application side to determine whether to inject ZeroClipboard or use native and it worked well

[hallvors]

State: The PR #650 is readyish - I just merged in master and fixed some conflicts a few weeks ago but apparently later changes on master caused some more conflicts that need resolving..

[JamesMGreene]

Just so everyone is clear on the state of things here, as I know everyone is dying to get this long overdue feature: I have 1 more bug (#533) that I'd like to fix before releasing 2.3.0, though I will bump the bug into a later release if I can't hammer it out in the next 2-3 days. After 2.3.0 goes out, I intend to immediately deal with @hallvors's PR #650 and get this feature (and only this feature) released in 2.4.0 ASAP. Thanks for all your patience! ❤️

[mc0]

@JamesMGreene is there a path forward for this? I'm not meaning to be impatient, just curious what the direction is of this feature as of April.

[krisztianb]

Hi guys. I found this page via Google search looking for a way to feature detect W3C Clipboard API support in the browser. Have you found a solution for this?

[cpeterso]

@krisztianb, I recommend checking out the clipboard.js library.