Skip to content

Commit 2ccde16

Browse files
committed
Clipboard support for text/html MIME type
1 parent 73747c8 commit 2ccde16

File tree

1 file changed

+27
-5
lines changed

1 file changed

+27
-5
lines changed

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

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,23 @@ export default class Clipboard extends React.Component {
4747
return '{' + parts.join(',') + '}';
4848
}
4949

50-
async copySuccess(content) {
50+
async copySuccess(content, htmlContent) {
5151
const showCopiedIcon = 1000;
52-
await clipboardAPI.writeText(content);
52+
if (htmlContent) {
53+
const blobHtml = new Blob([htmlContent], {type: 'text/html'});
54+
const blobText = new Blob([content ?? htmlContent], {
55+
type: 'text/plain',
56+
});
57+
const data = [
58+
new ClipboardItem({
59+
['text/plain']: blobText,
60+
['text/html']: blobHtml,
61+
}),
62+
];
63+
await navigator.clipboard.write(data);
64+
} else {
65+
await clipboardAPI.writeText(content);
66+
}
5367
this.setState({copied: true});
5468
await wait(showCopiedIcon);
5569
this.setState({copied: false});
@@ -85,15 +99,17 @@ export default class Clipboard extends React.Component {
8599
});
86100

87101
let content;
102+
let htmlContent;
88103
if (this.props.target_id) {
89104
content = this.getTargetText();
90105
} else {
91106
await wait(100); // gives time for callback to start
92107
await this.loading();
93108
content = this.props.content;
109+
htmlContent = this.props.html_content;
94110
}
95-
if (content) {
96-
this.copySuccess(content);
111+
if (content || htmlContent) {
112+
this.copySuccess(content, htmlContent);
97113
}
98114
}
99115

@@ -128,6 +144,7 @@ export default class Clipboard extends React.Component {
128144

129145
Clipboard.defaultProps = {
130146
content: null,
147+
html_content: null,
131148
target_id: null,
132149
n_clicks: 0,
133150
};
@@ -146,7 +163,7 @@ Clipboard.propTypes = {
146163
target_id: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
147164

148165
/**
149-
* The text to be copied to the clipboard if the `target_id` is None.
166+
* The text to be copied to the clipboard if the `target_id` is None.
150167
*/
151168
content: PropTypes.string,
152169

@@ -155,6 +172,11 @@ Clipboard.propTypes = {
155172
*/
156173
n_clicks: PropTypes.number,
157174

175+
/**
176+
* The clipboard html text be copied to the clipboard if the `target_id` is None.
177+
*/
178+
html_content: PropTypes.string,
179+
158180
/**
159181
* The text shown as a tooltip when hovering over the copy icon.
160182
*/

0 commit comments

Comments
 (0)