Skip to content

Commit d5e14e1

Browse files
RunDevelopmentRunDevelopment
authored
Copy to clipboard: Removed ClipboardJS dependency (#2784)
1 parent 459365e commit d5e14e1

File tree

5 files changed

+77
-85
lines changed

5 files changed

+77
-85
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 38 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,6 @@
2929
"author": "Lea Verou",
3030
"license": "MIT",
3131
"readmeFilename": "README.md",
32-
"optionalDependencies": {
33-
"clipboard": "^2.0.0"
34-
},
3532
"devDependencies": {
3633
"chai": "^4.2.0",
3734
"danger": "^10.5.0",

‎plugins/copy-to-clipboard/index.html‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,7 @@
2121
<section>
2222
<h1>How to use</h1>
2323

24-
<p>The plugin depends on <a href="https://clipboardjs.com/">clipboard.js</a> and the Prism <a href="https://prismjs.com/plugins/toolbar/">Toolbar</a> plugin. In addition to including the plugin file with your PrismJS build, ensure they are loaded before the plugin.</p>
25-
26-
<p>The simplest way to include clipboard.js is to use any of the
27-
<a href="https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers">recommended CDNs</a>. If you're using Browserify, clipboard.js will be loaded automatically
28-
if it's included in your <code>package.json</code>.
29-
If you don't load clipboard.js yourself, the plugin will load it from a CDN for you.</p>
24+
<p>The plugin depends on the Prism <a href="https://prismjs.com/plugins/toolbar/">Toolbar</a> plugin. In addition to including the plugin file with your PrismJS build, ensure it is loaded before the plugin.</p>
3025
</section>
3126

3227
<section>

‎plugins/copy-to-clipboard/prism-copy-to-clipboard.js‎

Lines changed: 75 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,73 @@
99
return;
1010
}
1111

12-
var ClipboardJS = window.ClipboardJS || undefined;
13-
14-
if (!ClipboardJS && typeof require === 'function') {
15-
ClipboardJS = require('clipboard');
12+
/**
13+
* When the given elements is clicked by the user, the given text will be copied to clipboard.
14+
*
15+
* @param {HTMLElement} element
16+
* @param {CopyInfo} copyInfo
17+
*
18+
* @typedef CopyInfo
19+
* @property {() => string} getText
20+
* @property {() => void} success
21+
* @property {(reason: unknown) => void} error
22+
*/
23+
function registerClipboard(element, copyInfo) {
24+
element.addEventListener('click', function () {
25+
copyTextToClipboard(copyInfo);
26+
});
1627
}
1728

18-
var callbacks = [];
29+
// https://stackoverflow.com/a/30810322/7595472
30+
31+
/** @param {CopyInfo} copyInfo */
32+
function fallbackCopyTextToClipboard(copyInfo) {
33+
var textArea = document.createElement("textarea");
34+
textArea.value = copyInfo.getText();
1935

20-
if (!ClipboardJS) {
21-
var script = document.createElement('script');
22-
var head = document.querySelector('head');
36+
// Avoid scrolling to bottom
37+
textArea.style.top = "0";
38+
textArea.style.left = "0";
39+
textArea.style.position = "fixed";
2340

24-
script.onload = function () {
25-
ClipboardJS = window.ClipboardJS;
41+
document.body.appendChild(textArea);
42+
textArea.focus();
43+
textArea.select();
2644

27-
if (ClipboardJS) {
28-
while (callbacks.length) {
29-
callbacks.pop()();
45+
try {
46+
var successful = document.execCommand('copy');
47+
setTimeout(function () {
48+
if (successful) {
49+
copyInfo.success();
50+
} else {
51+
copyInfo.error();
3052
}
31-
}
32-
};
53+
}, 1);
54+
} catch (err) {
55+
setTimeout(function () {
56+
copyInfo.error(err);
57+
}, 1);
58+
}
3359

34-
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js';
35-
head.appendChild(script);
60+
document.body.removeChild(textArea);
61+
}
62+
/** @param {CopyInfo} copyInfo */
63+
function copyTextToClipboard(copyInfo) {
64+
if (navigator.clipboard) {
65+
navigator.clipboard.writeText(copyInfo.getText()).then(copyInfo.success, copyInfo.error);
66+
} else {
67+
fallbackCopyTextToClipboard(copyInfo);
68+
}
69+
}
70+
71+
/**
72+
* Selects the text content of the given element.
73+
*
74+
* @param {Element} element
75+
*/
76+
function selectElementText(element) {
77+
// https://stackoverflow.com/a/20079910/7595472
78+
window.getSelection().selectAllChildren(element)
3679
}
3780

3881
/**
@@ -74,32 +117,27 @@
74117
linkCopy.textContent = settings['copy'];
75118
linkCopy.setAttribute('type', 'button');
76119

77-
if (!ClipboardJS) {
78-
callbacks.push(registerClipboard);
79-
} else {
80-
registerClipboard();
81-
}
82-
83-
return linkCopy;
84-
85-
function registerClipboard() {
86-
var clip = new ClipboardJS(linkCopy, {
87-
'text': function () {
88-
return element.textContent;
89-
}
90-
});
91-
92-
clip.on('success', function () {
120+
registerClipboard(linkCopy, {
121+
getText: function () {
122+
return element.textContent;
123+
},
124+
success: function () {
93125
linkCopy.textContent = settings['copy-success'];
94126

95127
resetText();
96-
});
97-
clip.on('error', function () {
128+
},
129+
error: function () {
98130
linkCopy.textContent = settings['copy-error'];
99131

132+
setTimeout(function () {
133+
selectElementText(element);
134+
}, 1);
135+
100136
resetText();
101-
});
102-
}
137+
}
138+
});
139+
140+
return linkCopy;
103141

104142
function resetText() {
105143
setTimeout(function () {

‎plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)