feat(fs.shared): Add copy-to-clipboard. Closes #1519

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",

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 (
+    <CopyToClipboard text={text} onCopy={() => setCopied(true)}>
+      <button className={copied ? 'text-success' : ''}><CopyIcon /></button>
+    </CopyToClipboard>
+  )
+}
+
+export default CopyToClipboardIcon
+

packages/freesewing.shared/components/icons/copy.js

@@ -0,0 +1,7 @@
+const Copy  = props => (
+  <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+  </svg>
+)
+
+export default Copy

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 (
     <div className="hljs my-4">
-      <div className={`text-xs uppercase font-bold text-neutral-content mt-1 text-center border-b border-neutral-content border-opacity-25 py-1 mb-2 lg:text-sm`}>
-        {names[language] ? names[language] : language}
+      <div className={`
+        flex flex-row justify-between
+        text-xs uppercase font-bold text-neutral-content
+        mt-1 border-b border-neutral-content border-opacity-25
+        py-1 mb-2 lg:text-sm
+      `}>
+        <span>&nbsp;</span>
+        <span>{names[language] ? names[language] : language}</span>
+        <CopyToClipboard content={children} />
       </div>
       <pre className={`language-${language} hljs text-base lg:text-lg whitespace-pre-wrap break-words`}>
         {children}

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==