Accept a style parameter to specify the copied style.

If `style` parameter isn't specified, this forces a text/plain copy to make it easier to work with word processors. This also changes the example code to exhibit the bug of issue sudodoki#46 so that it's easier to test. Fixes sudodoki#46
julienw · May 4, 2019 · 2986187 · 2986187
1 parent bc7125f
commit 2986187
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ copy('Text', {
 |------|--------|-----|
 |options.debug  |false| `Boolean`. Optional. Enable output to console. |
 |options.message|Copy to clipboard: `#{key}`, Enter| `String`. Optional. Prompt message. `*` |
-|options.format|"text/html"| `String`. Optional. Set the MIME type of what you want to copy as. Use `text/html` to copy as HTML, `text/plain` to avoid inherited styles showing when pasted into rich text editor. |
+|options.style  |false |`boolean \| Object`. Optional. If this is an object, it should have the properties `background` and/or `text` to define respectively background and text colors.  Defaults are a white background and black text color. You can also set it to `true` to get these defaults. |
 
 `*` all occurrences of `#{key}` are replaced with `⌘+C` for macOS/iOS users, and `Ctrl+C` otherwise.
 

diff --git a/example/index.html b/example/index.html
@@ -5,14 +5,16 @@
   <title>CopyButtonPlayground</title>
   <link rel="stylesheet" href="example.css">
 </head>
-<body>
+<body style='background: #ddd'>
   <h1 data-test="heading"><a href="http://github.com/sudodoki/copy-to-clipboard">copy-to-clipboard Repo</a></h1>
   <textarea data-test="placeholder"></textarea>
   <div class="container">
     <h2 id="basic-text">Basic text copy</h2>
     <textarea disabled class="code half">copyToClipboard("Hello, I'm new content from your clipboard")</textarea>
     <div class="half">
-      <button data-test="init-basic-text">Click to copy sample text</button>
+      <button class="copy-basic-text">Click to copy sample text</button>
+      <button class="copy-basic-text-default-style">Click to copy sample text with default style</button>
+      <button class="copy-basic-text-custom-style">Click to copy sample text with custom style</button>
     </div>
   </div>
   <hr>
@@ -23,7 +25,7 @@ <h2 id="multiline-text">Multiline text copy</h2>
 some multiline text
 for us to copy</textarea>
     <div class="half">
-      <button data-test="init-multiline-text">Click to copy multiline text</button>
+      <button class="copy-multiline-text">Click to copy multiline text</button>
     </div>
   </div>
   <hr>
@@ -35,26 +37,35 @@ <h2 id="multiline-markup">Markup + text copy</h2>
 </script>
 </textarea>
     <div class="half">
-      <button data-test="init-markup-text">Click to copy multiline text</button>
+      <button class="copy-markup-text">Click to copy multiline text</button>
     </div>
   </div>
   <hr>
   <script src="./index.js"></script>
   <script>
-    document.querySelector('#basic-text ~ .half button')
+    var simpleText = "Hello, I'm new content from your clipboard";
+    document.querySelector('.copy-basic-text')
       .addEventListener('click', function () {
-        copyToClipboard("Hello, I'm new content from your clipboard")
+        copyToClipboard(simpleText)
+      });
+    document.querySelector('.copy-basic-text-default-style')
+      .addEventListener('click', function () {
+        copyToClipboard(simpleText, { style: true })
+      });
+    document.querySelector('.copy-basic-text-custom-style')
+      .addEventListener('click', function () {
+        copyToClipboard(simpleText, { style: { background: 'red', text: 'yellow' }})
       });
     (function() {
       var multilineContainer = document.querySelector('#multiline-text + textarea');
-      document.querySelector('#multiline-text ~ .half button')
+      document.querySelector('.copy-multiline-text')
         .addEventListener('click', function () {
           copyToClipboard(multilineContainer.textContent)
         })
     })();
     (function() {
       var markupContainer = document.querySelector('#multiline-markup + textarea');
-      document.querySelector('#multiline-markup ~ .half button')
+      document.querySelector('.copy-markup-text')
         .addEventListener('click', function () {
           copyToClipboard(markupContainer.textContent)
         })

diff --git a/example/index.js b/example/index.js
diff --git a/index.d.ts b/index.d.ts
@@ -2,10 +2,15 @@
 // Project: https://github.com/sudodoki/copy-to-clipboard
 // Definitions by: Denis Carriere <https://github.com/DenisCarriere>, MartynasZilinskas <https://github.com/MartynasZilinskas>
 
+interface StyleOption {
+  background: string;
+  text: string;
+}
+
 interface Options {
   debug?: boolean;
   message?: string;
-  format?: string; // MIME type
+  style?: boolean | StyleOption; // MIME type
 }
 
 declare function copy(text: string, options?: Options): boolean;

diff --git a/index.js b/index.js
@@ -16,10 +16,18 @@ function copy(text, options) {
     range,
     selection,
     mark,
+    style,
     success = false;
   if (!options) {
     options = {};
   }
+
+  if (options.style) {
+    // If style is the boolean `true`, use the default values.
+    // Otherwise, overwrite the default values with whatever is passed.
+    style = Object.assign({ background: 'white', text: 'black' }, options.style);
+  }
+
   debug = options.debug || false;
   try {
     reselectPrevious = deselectCurrent();
@@ -31,6 +39,10 @@ function copy(text, options) {
     mark.textContent = text;
     // reset user styles for span element
     mark.style.all = "unset";
+    if (style) {
+      mark.style.backgroundColor = style.background;
+      mark.style.color = style.text;
+    }
     // prevents scrolling to the end of the page
     mark.style.position = "fixed";
     mark.style.top = 0;
@@ -43,11 +55,14 @@ function copy(text, options) {
     mark.style.msUserSelect = "text";
     mark.style.userSelect = "text";
     mark.addEventListener("copy", function(e) {
+      // Prevents the "copy" event from reaching the outside world.
       e.stopPropagation();
-      if (options.format) {
+      if (!style) {
+        // Force a text copy instead of an html copy, to make it easier to
+        // work with word processors.
         e.preventDefault();
         e.clipboardData.clearData();
-        e.clipboardData.setData(options.format, text);
+        e.clipboardData.setData('text/plain', text);
       }
     });
 
@@ -65,7 +80,7 @@ function copy(text, options) {
     debug && console.error("unable to copy using execCommand: ", err);
     debug && console.warn("trying IE specific stuff");
     try {
-      window.clipboardData.setData(options.format || "text", text);
+      window.clipboardData.setData("text", text);
       success = true;
     } catch (err) {
       debug && console.error("unable to copy using clipboardData: ", err);