Merge branch 'feature/clipboard-html' into autofeather-dash

components/dash-core-components/src/components/Clipboard.react.js

@@ -26,6 +26,15 @@ export default class Clipboard extends React.Component {
         };
     }
 
+    componentDidUpdate(prevProps) {
+        // If the data hasn't changed, do nothing.
+        if (!this.props.content || this.props.content === prevProps.content) {
+            return;
+        }
+        // If the data has changed, copy to clipboard
+        this.copyToClipboard();
+    }
+
     // stringifies object ids used in pattern matching callbacks
     stringifyId(id) {
         if (typeof id !== 'object') {
@@ -38,9 +47,23 @@ export default class Clipboard extends React.Component {
         return '{' + parts.join(',') + '}';
     }
 
-    async copySuccess(content) {
+    async copySuccess(content, htmlContent) {
         const showCopiedIcon = 1000;
-        await clipboardAPI.writeText(content);
+        if (htmlContent) {
+            const blobHtml = new Blob([htmlContent], {type: 'text/html'});
+            const blobText = new Blob([content ?? htmlContent], {
+                type: 'text/plain',
+            });
+            const data = [
+                new ClipboardItem({
+                    ['text/plain']: blobText,
+                    ['text/html']: blobHtml,
+                }),
+            ];
+            await navigator.clipboard.write(data);
+        } else {
+            await clipboardAPI.writeText(content);
+        }
         this.setState({copied: true});
         await wait(showCopiedIcon);
         this.setState({copied: false});
@@ -76,15 +99,17 @@ export default class Clipboard extends React.Component {
         });
 
         let content;
+        let htmlContent;
         if (this.props.target_id) {
             content = this.getTargetText();
         } else {
             await wait(100); // gives time for callback to start
             await this.loading();
             content = this.props.content;
+            htmlContent = this.props.html_content;
         }
-        if (content) {
-            this.copySuccess(content);
+        if (content || htmlContent) {
+            this.copySuccess(content, htmlContent);
         }
     }
 
@@ -119,6 +144,7 @@ export default class Clipboard extends React.Component {
 
 Clipboard.defaultProps = {
     content: null,
+    html_content: null,
     target_id: null,
     n_clicks: 0,
 };
@@ -137,7 +163,7 @@ Clipboard.propTypes = {
     target_id: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 
     /**
-     * The text to  be copied to the clipboard if the `target_id` is None.
+     * The text to be copied to the clipboard if the `target_id` is None.
      */
     content: PropTypes.string,
 
@@ -146,6 +172,11 @@ Clipboard.propTypes = {
      */
     n_clicks: PropTypes.number,
 
+    /**
+     * The clipboard html text be copied to the clipboard if the `target_id` is None.
+     */
+    html_content: PropTypes.string,
+
     /**
      * The text shown as a tooltip when hovering over the copy icon.
      */

components/dash-core-components/tests/integration/clipboard/test_clipboard.py

@@ -1,4 +1,4 @@
-from dash import Dash, html, dcc
+from dash import Dash, html, dcc, callback, Output, Input
 
 import dash.testing.wait as wait
 import time
@@ -54,3 +54,32 @@ def test_clp002_clipboard_text(dash_dcc_headed):
         == copy_text,
         timeout=3,
     )
+
+def test_clp003_clipboard_text(dash_dcc_headed):
+    copy_text = "Copy this text to the clipboard using a separate button"
+    app = Dash(__name__, prevent_initial_callbacks=True)
+    app.layout = html.Div(
+        [dcc.Clipboard(id="copy_icon", content=copy_text), dcc.Textarea(id="paste"), html.Button("Copy", id="copy_button")]
+    )
+    @callback(
+        Output("copy_icon", "content"),
+        Input("copy_button", "n_clicks"),
+        prevent_initial_call=True,
+    )
+    def selected(clicks):
+        return f"{clicks}"
+
+    dash_dcc_headed.start_server(app)
+
+    dash_dcc_headed.find_element("#copy_button").click()
+    time.sleep(1)
+    dash_dcc_headed.find_element("#paste").click()
+    ActionChains(dash_dcc_headed.driver).key_down(Keys.CONTROL).send_keys("v").key_up(
+        Keys.CONTROL
+    ).perform()
+
+    wait.until(
+        lambda: dash_dcc_headed.find_element("#paste").get_attribute("value")
+        == copy_text,
+        timeout=3,
+    )