diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json index 3f976f22aa..794fcdee2a 100644 --- a/packages/docusaurus-theme-classic/package.json +++ b/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", diff --git a/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js b/packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js index 3cd64a3327..38b5e12615 100644 --- 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 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, })}> -