Name: clipboard-polyfill
Owner: HearthSim
Description: Forked for droppable console.log statements required by Twitch Extensions
Created: 2018-04-08 00:37:02.0
Updated: 2018-04-08 00:53:30.0
Pushed: 2018-04-08 00:53:29.0
Size: 221
Language: TypeScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
clipboard-polyfill
Make copying on the web as easy as:
clipboard.writeText("hello world");
As of October 2017, this library is a polyfill for the modern Promise
-based asynchronous clipboard API.
Get the source using one of the following:
build/clipboard-polyfill.js
and include it using a <script>
tag.npm install clipboard-polyfill
and import as clipboard
.Copy text to the clipboard (all modern browsers):
clipboard.writeText("This text is plain.");
Read text from the clipboard (IE 9-11 and Chrome 65+):
clipboard.readText().then(console.log, console.error);
Caveats:
text/plain
data.Write (all modern browsers):
var dt = new clipboard.DT();
dt.setData("text/plain", "Fallback markup text.");
dt.setData("text/html", "<i>Markup</i> <b>text</b>.");
clipboard.write(dt);
Read (IE 9-11, Chrome 65+):
// The success callback receives a clipboard.DT object.
clipboard.read().then(console.log, console.error);
Caveats:
text/plain
and text/html
are the only data types that can be written to the clipboard across most browsers.text/plain
data type, if it is on the clipboard.clipboard {
static write: (data: clipboard.DT) => Promise<void>
static writeText: (s: string) => Promise<void>
static read: () => Promise<clipboard.DT>
static readText: () => Promise<string>
static suppressWarnings: () => void
}
clipboard.DT {
constructor()
setData: (type: string, value: string): void
getData: (type: string): string | undefined
}
clipboard.DT
The asynchronous clipboard API works like this:
var dt = new DataTransfer();
dt.setData("text/plain", "plain text");
navigator.clipboard.write(dt);
Ideally, clipboard-polyfill
would take a DataTransfer
, so that the code above works verbatim when you replace navigator.clipboard
with clipboard
. However, the DataTransfer
constructor cannot be called in most browsers. Thus, this library uses a light-weight alternative to DataTransfer
, exposed as clipboard.DT
:
var dt = new clipboard.DT();
dt.setData("text/plain", "plain text");
clipboard.write(dt);
Try this gist for a simpler solution.
clipboard-polyfill
uses a variety of heuristics to get around compatibility bugs. Please let us know if you are running into compatibility issues with any of the browsers listed above.
clipboard-polyfill
will always call resolve()
in Edge.DataTransfer
and clipbard.DT
keep track of the order in which you set items. If you care which data type Edge copies, call setData()
with that data type first.clipboard-polyfill
needs to use the DOM to copy, so the text will be copied as rich text. clipboard-polyfill
attempts to use shadow DOM in order to avoid some of the page formatting (e.g. background color) from affecting the copied text. However, such formatting might be copied if shadow DOM is not available.text/plain
data type will succeed, but also show a console warning:clipboard.write() was called without a
text/plain
data type. On some platforms, this may result in an empty clipboard. Call clipboard.suppressWarnings() to suppress this warning.
clipboard-polyfill
attemps to avoid changing the document selection or modifying the DOM. However, clipboard-polyfill
will automatically fall back to using them if needed:clipbard-polyfill
needs to add a temporary element to the DOM. This will trigger a mutation observer if you have attached one to document.body
. Please file an issue if you'd like to discuss how to detect temporary elements added by clipboard-polyfill
.read()
currently only works in Internet Explorer.text/plain
values from the clipboard.Promise
implementation, so the standalone build file for clipboard-polyfill
also includes stefanpenner
's es6-promise
polyfill. This adds significant size to the build. Please file an issue if you're interested in a minimal build without Internet Explorer support.text/html
to the clipboard using the Windows CF_HTML
clipboard format (Edge Bug #14372529), which prevents other programs (including other browsers) from recognizing the copied HTML data (issue #73). clipboard-polyfill
currently does not attempt to work around this issue.