chore(v2): replace Clipboard with copy-text-to-clipboard (#2900)

* chore(v2): replace Clipboard with copy-text-to-clipboard

* Remove clipboard from yarn.lock

packages/docusaurus-theme-classic/package.json

@@ -10,8 +10,8 @@
   "dependencies": {
     "@mdx-js/mdx": "^1.5.8",
     "@mdx-js/react": "^1.5.8",
-    "clipboard": "^2.0.6",
     "clsx": "^1.1.1",
+    "copy-text-to-clipboard": "^2.2.0",
     "infima": "0.2.0-alpha.12",
     "parse-numeric-range": "^0.0.2",
     "prism-react-renderer": "^1.1.0",

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js

@@ -10,7 +10,7 @@
 import React, {useEffect, useState, useRef} from 'react';
 import clsx from 'clsx';
 import Highlight, {defaultProps} from 'prism-react-renderer';
-import Clipboard from 'clipboard';
+import copy from 'copy-text-to-clipboard';
 import rangeParser from 'parse-numeric-range';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import usePrismTheme from '@theme/hooks/usePrismTheme';
@@ -107,7 +107,6 @@ export default ({children, className: languageClassName, metastring}) => {
     setMounted(true);
   }, []);
 
-  const target = useRef(null);
   const button = useRef(null);
   let highlightLines = [];
   let codeBlockTitle = '';
@@ -128,22 +127,6 @@ export default ({children, className: languageClassName, metastring}) => {
       .replace(/"+/g, '');
   }
 
-  useEffect(() => {
-    let clipboard;
-
-    if (button.current) {
-      clipboard = new Clipboard(button.current, {
-        target: () => target.current,
-      });
-    }
-
-    return () => {
-      if (clipboard) {
-        clipboard.destroy();
-      }
-    };
-  }, [button.current, target.current]);
-
   let language =
     languageClassName && languageClassName.replace(/language-/, '');
 
@@ -196,7 +179,7 @@ export default ({children, className: languageClassName, metastring}) => {
   }
 
   const handleCopyCode = () => {
-    window.getSelection().empty();
+    copy(code);
     setShowCopied(true);
 
     setTimeout(() => setShowCopied(false), 2000);
@@ -232,7 +215,7 @@ export default ({children, className: languageClassName, metastring}) => {
               className={clsx(className, styles.codeBlock, {
                 [styles.codeBlockWithTitle]: codeBlockTitle,
               })}>
-              <div ref={target} className={styles.codeBlockLines} style={style}>
+              <div className={styles.codeBlockLines} style={style}>
                 {tokens.map((line, i) => {
                   if (line.length === 1 && line[0].content === '') {
                     line[0].content = '\n'; // eslint-disable-line no-param-reassign

packages/docusaurus-theme-live-codeblock/package.json

@@ -9,7 +9,6 @@
   "license": "MIT",
   "dependencies": {
     "@philpl/buble": "^0.19.7",
-    "clipboard": "^2.0.6",
     "clsx": "^1.1.1",
     "parse-numeric-range": "^0.0.2",
     "prism-react-renderer": "^1.1.0",

yarn.lock

@@ -5022,15 +5022,6 @@ clipboard@^2.0.0:
     select "^1.1.2"
     tiny-emitter "^2.0.0"
 
-clipboard@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
-  integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==
-  dependencies:
-    good-listener "^1.2.2"
-    select "^1.1.2"
-    tiny-emitter "^2.0.0"
-
 cliui@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
@@ -5499,6 +5490,11 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-text-to-clipboard@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/copy-text-to-clipboard/-/copy-text-to-clipboard-2.2.0.tgz#329dd6daf8c42034c763ace567418401764579ae"
+  integrity sha512-WRvoIdnTs1rgPMkgA2pUOa/M4Enh2uzCwdKsOMYNAJiz/4ZvEJgmbF4OmninPmlFdAWisfeh0tH+Cpf7ni3RqQ==
+
 copy-webpack-plugin@^5.0.5:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-5.1.1.tgz#5481a03dea1123d88a988c6ff8b78247214f0b88"