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

facebook · Jun 6, 2020 · 4799c1b · 4799c1b
1 parent 277f02b
commit 4799c1b
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 22 deletions.
diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json
@@ -11,7 +11,7 @@
     "@mdx-js/mdx": "^1.5.8",
     "@mdx-js/react": "^1.5.8",
     "classnames": "^2.2.6",
-    "clipboard": "^2.0.6",
+    "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",

diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
@@ -10,7 +10,7 @@
 import React, {useEffect, useState, useRef} from 'react';
 import classnames from 'classnames';
 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={classnames(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

diff --git a/packages/docusaurus-theme-live-codeblock/package.json b/packages/docusaurus-theme-live-codeblock/package.json
@@ -10,7 +10,6 @@
   "dependencies": {
     "@philpl/buble": "^0.19.7",
     "classnames": "^2.2.6",
-    "clipboard": "^2.0.6",
     "parse-numeric-range": "^0.0.2",
     "prism-react-renderer": "^1.1.0",
     "react-live": "^2.2.1"

diff --git a/yarn.lock b/yarn.lock
@@ -5494,6 +5494,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"