Add copy-to-clipboard functionality to code snippets

docs/config/README.md

@@ -197,6 +197,13 @@ module.exports = {
 }
 ```
 
+### markdown.enableCbCopy
+
+- Type: `boolean`
+- Default: `undefined`
+
+Whether to show icon to copy the code snippet into the clipboard.
+
 ## Build Pipeline
 
 ### postcss

lib/app/app.js

@@ -6,6 +6,7 @@ import { routes } from '@temp/routes'
 import { siteData } from '@temp/siteData'
 import enhanceApp from '@temp/enhanceApp'
 import themeEnhanceApp from '@temp/themeEnhanceApp'
+import { enableCbCopy } from './clipboardCopy'
 
 // generated from user config
 import('@temp/style.styl')
@@ -14,6 +15,7 @@ import('@temp/style.styl')
 import Content from './components/Content'
 import OutboundLink from './components/OutboundLink.vue'
 import ClientOnly from './components/ClientOnly'
+import ClipboardCopy from './components/ClipboardCopy.vue'
 
 // suggest dev server restart on base change
 if (module.hot) {
@@ -38,6 +40,7 @@ Vue.component('OutboundLink', OutboundLink)
 Vue.component('Badge', () => import('./components/Badge.vue'))
 // component for client-only content
 Vue.component('ClientOnly', ClientOnly)
+Vue.component('ClipboardCopy', ClipboardCopy)
 
 // global helper for adding base path to absolute urls
 Vue.prototype.$withBase = function (path) {
@@ -82,6 +85,10 @@ export function createApp () {
     }
   })
 
+  router.afterEach((to, from) => {
+    enableCbCopy()
+  })
+
   const options = {}
 
   themeEnhanceApp({ Vue, options, router, siteData })

lib/app/clipboardCopy.js

@@ -0,0 +1,20 @@
+
+import { copyToClipboard } from './util'
+
+const generateCopyButton = (parent) => {
+  if (parent.classList.contains('codecopy-enabled')) return
+
+  const copyElement = document.createElement('span')
+  copyElement.className = 'code-copy'
+  copyElement.title = 'Click to copy to clipboard'
+  copyElement.addEventListener('click', () => {
+    copyToClipboard(parent.innerText)
+  })
+  parent.appendChild(copyElement)
+  parent.classList.add('codecopy-enabled')
+}
+
+export function enableCbCopy () {
+  const codeBlocks = document.querySelectorAll('div[class*="language-"] pre')
+  codeBlocks.forEach(generateCopyButton)
+}

lib/app/components/ClipboardCopy.vue

@@ -0,0 +1,23 @@
+<style lang="stylus">
+  .code-copy
+    color #aaa
+    display inline-block
+    cursor pointer
+  div[class*="language-"] pre .code-copy
+      position absolute
+      z-index 1000
+      top 35px
+      right 5px
+      width 20px
+      height 30px
+      content url(./copy.svg)
+      opacity 0
+  div[class*="language-"] pre:hover .code-copy
+    opacity 1
+</style>
+
+<script>
+export default {
+  name: 'ClipboardCopy'
+}
+</script>

lib/app/util.js

@@ -17,3 +17,24 @@ export function findPageForPath (pages, path) {
     frontmatter: {}
   }
 }
+
+export function copyToClipboard (str) {
+  const el = document.createElement('textarea')
+  el.value = str
+  el.setAttribute('readonly', '')
+  el.style.position = 'absolute'
+  el.style.left = '-9999px'
+  document.body.appendChild(el)
+  const selected =
+      document.getSelection().rangeCount > 0
+        ? document.getSelection().getRangeAt(0)
+        : false
+  el.select()
+  document.execCommand('copy')
+  document.body.removeChild(el)
+  if (selected) {
+    document.getSelection().removeAllRanges()
+    document.getSelection().addRange(selected)
+  }
+}
+