Documentation copy to clipboard button

docs/package.json

@@ -23,7 +23,8 @@
     "stylefmt": "^6.0.0",
     "vue": "^2.5.2",
     "webpack-watch": "^0.2.0",
-    "yargs": "^10.0.3"
+    "yargs": "^10.0.3",
+    "clipboard": "^1.7.1"
   },
   "browserslist": [
     "> 1%"

docs/source/_assets/js/app.js

@@ -1,5 +1,8 @@
 const anchorJS = require('anchor-js')
 const Prism = require('./prism')
+const PrismToolbar = require('./prism-plugins/prism-toolbar')
+const clipboard = require('./clipboard')
+const PrismClipboard = require('./prism-plugins/prism-clipboard')
 const Mousetrap = require('mousetrap')
 
 window.anchors = new anchorJS()

docs/source/_assets/js/prism-plugins/prism-clipboard.js

@@ -0,0 +1,81 @@
+//http://prismjs.com/plugins/copy-to-clipboard
+
+(function(){
+	if (typeof self === 'undefined' || !self.Prism || !self.document) {
+		return;
+	}
+
+	if (!Prism.plugins.toolbar) {
+		console.warn('Copy to Clipboard plugin loaded before Toolbar plugin.');
+
+		return;
+	}
+
+	var Clipboard = window.Clipboard || undefined;
+
+	if (Clipboard && /(native code)/.test(Clipboard.toString())) {
+		Clipboard = undefined;
+	}
+
+	if (!Clipboard && typeof require === 'function') {
+		Clipboard = require('clipboard');
+	}
+
+	var callbacks = [];
+
+	if (!Clipboard) {
+		var script = document.createElement('script');
+		var head = document.querySelector('head');
+
+		script.onload = function() {
+			Clipboard = window.Clipboard;
+
+			if (Clipboard) {
+				while (callbacks.length) {
+					callbacks.pop()();
+				}
+			}
+		};
+
+		script.src = 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js';
+		head.appendChild(script);
+	}
+
+	Prism.plugins.toolbar.registerButton('copy-to-clipboard', function (env) {
+		var linkCopy = document.createElement('a');
+		linkCopy.textContent = 'Copy';
+
+		if (!Clipboard) {
+			callbacks.push(registerClipboard);
+		} else {
+			registerClipboard();
+		}
+
+		return linkCopy;
+
+		function registerClipboard() {
+			var clip = new Clipboard(linkCopy, {
+				'text': function () {
+					return env.code;
+				}
+			});
+
+			clip.on('success', function() {
+				linkCopy.textContent = 'Copied!';
+
+				resetText();
+			});
+			clip.on('error', function () {
+				linkCopy.textContent = 'Press Ctrl+C to copy';
+
+				resetText();
+			});
+		}
+
+		function resetText() {
+			setTimeout(function () {
+				linkCopy.textContent = 'Copy';
+			}, 5000);
+		}
+	});
+})();

docs/source/_assets/less/prism-clipboard.less

@@ -0,0 +1,9 @@
+.toolbar-item{
+  a{
+    @apply .table .ml-auto .mr-auto .py-1 .px-1 .cursor-pointer .border .border-blue .rounded .text-blue-dark;
+
+    &:hover{
+      @apply .bg-blue .text-white;
+    }
+  }
+}