diff --git a/packages/freesewing.dev/package.json b/packages/freesewing.dev/package.json index ddb8d0776ad..e005bb7806e 100644 --- a/packages/freesewing.dev/package.json +++ b/packages/freesewing.dev/package.json @@ -28,6 +28,7 @@ "lodash.set": "^4.3.2", "netlify-cli": "^8.4.2", "next": "latest", + "react-copy-to-clipboard": "^5.0.4", "react-hotkeys-hook": "^3.4.4", "react-instantsearch-dom": "^6.18.0", "react-markdown": "^7.1.1", diff --git a/packages/freesewing.shared/components/copy-to-clipboard.js b/packages/freesewing.shared/components/copy-to-clipboard.js new file mode 100644 index 00000000000..d9dbe79b3e4 --- /dev/null +++ b/packages/freesewing.shared/components/copy-to-clipboard.js @@ -0,0 +1,27 @@ +import ReactDOMServer from 'react-dom/server' +import { useState, useEffect } from 'react' +import CopyIcon from 'shared/components/icons/copy.js' +import {CopyToClipboard} from 'react-copy-to-clipboard' + +const strip = html => new DOMParser() + .parseFromString(html, 'text/html') + .body.textContent || "" + + +const CopyToClipboardIcon = ({ content }) => { + + const [copied, setCopied] = useState(false) + + const text = (typeof content === 'string') + ? content + : strip(ReactDOMServer.renderToStaticMarkup(content)) + + return ( + setCopied(true)}> + + + ) +} + +export default CopyToClipboardIcon + diff --git a/packages/freesewing.shared/components/icons/copy.js b/packages/freesewing.shared/components/icons/copy.js new file mode 100644 index 00000000000..6cc6a73cf38 --- /dev/null +++ b/packages/freesewing.shared/components/icons/copy.js @@ -0,0 +1,7 @@ +const Copy = props => ( + + + +) + +export default Copy diff --git a/packages/freesewing.shared/components/mdx/highlight.js b/packages/freesewing.shared/components/mdx/highlight.js index 6d2ab5cd789..3abe439e708 100644 --- a/packages/freesewing.shared/components/mdx/highlight.js +++ b/packages/freesewing.shared/components/mdx/highlight.js @@ -1,3 +1,5 @@ +import CopyToClipboard from 'shared/components/copy-to-clipboard' + const names = { js: 'javascript', bash: 'bash', @@ -5,16 +7,21 @@ const names = { } const Highlight = (props) => { - const { - children=[], - className='language-js', - } = props + + const { children=[], className='language-js' } = props const language = props.children.props.className.split('-').pop() return (
-
- {names[language] ? names[language] : language} +
+   + {names[language] ? names[language] : language} +
         {children}
diff --git a/yarn.lock b/yarn.lock
index ce7b0e36fa4..57ff0f028c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23286,7 +23286,7 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
-react-copy-to-clipboard@^5.0.3:
+react-copy-to-clipboard@^5.0.3, react-copy-to-clipboard@^5.0.4:
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.4.tgz#42ec519b03eb9413b118af92d1780c403a5f19bf"
   integrity sha512-IeVAiNVKjSPeGax/Gmkqfa/+PuMTBhutEvFUaMQLwE2tS0EXrAdgOpWDX26bWTXF3HrioorR7lr08NqeYUWQCQ==