Copy to clipboard for code blocks

website/docs/scripts/markdown.unified-preview.js

@@ -3,15 +3,17 @@ import { readdirSync, readFileSync } from 'fs';
 
 const filesToProcess = [
   // 'plain.md',
+  // 'codeblocks.md',
   'links.md',
   // 'link.md',
 ];
 
 filesToProcess.forEach(async (name) => {
   const fileContent = readFileSync(__dirname + '/mocks/' + name);
-  const result = await MarkdownSvc.process(String(fileContent), { shortName: name.replace('.md', '') });
-  console.log(`============== ${name} =================`);
-  console.log(result)
-  console.log(`============ end: ${name} ==============`);
-  console.log('');
+  MarkdownSvc.process(String(fileContent), { shortName: name.replace('.md', '') }).then(result => {
+    console.log(`============== ${name} =================`);
+    console.log(result)
+    console.log(`============ end: ${name} ==============`);
+    console.log('');
+  }).catch(e => console.error);
 });

website/docs/scripts/mocks/codeblocks.md

@@ -0,0 +1,13 @@
+```javascript
+const something = () => {}
+```
+
+```
+some other plain code
+```
+
+```bash
+bash code
+```
+
+`inline code` should not be copied

website/docs/src/client.js

@@ -21,4 +21,31 @@ LuigiClient.addInitListener((ctx) => {
 			}
 		});
 	}
-});
+});
+
+const selectText = (node) => {
+	if (document.body.createTextRange) {
+		const range = document.body.createTextRange();
+		range.moveToElementText(node);
+		range.select();
+	} else if (window.getSelection) {
+		const selection = window.getSelection();
+		const range = document.createRange();
+		range.selectNodeContents(node);
+		selection.removeAllRanges();
+		selection.addRange(range);
+	} else {
+		console.warn("Could not select text in node: Unsupported browser.");
+	}
+}
+
+window.copyCode = (evt, elem) => {
+	evt.preventDefault();
+	evt.stopPropagation();
+	try {
+		selectText(elem.parentNode.querySelector('code'));
+		document.execCommand('copy');
+	} catch(e) {
+		console.error('Browser copy command not supported?', e);
+	}
+}

website/docs/src/routes/_layout.svelte

@@ -152,13 +152,104 @@
 			}
 		}
 
+		.copyCodeContainer {
+			position: relative;
+		}
+
+		.copyCode {
+			position: absolute;
+			right: -10px;
+			top: -10px;
+			width: 28px;
+			height: 28px;
+			border-radius: 50%;
+			background-color: $primary-color;
+			border: 1px $primary-color solid;
+			box-shadow: 0 0 4px 0 $primary-color;
+			cursor: pointer;
+			& > div {
+				position: relative;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 100%;
+				width: 100%;
+			}
+			img {
+				width: 13px;
+				height: 16px;
+			}
+			.popoverCopy {
+				position: absolute;
+				right: 0;
+				bottom: -37px;
+				font-family: 'Open Sans', sans-serif;
+				display: none;
+				font-size: 11px;
+				line-height: 13px;
+				color: $secondary-color;
+				background-color: white;
+				border: 1px $primary-color solid;
+				padding: 5px 11px;
+				white-space: nowrap;
+
+				// Arrow needs to be added
+				&:before,
+				&:after {
+					content: ' ';
+					position: absolute;
+					bottom: 100%;
+					width: 0;
+					height: 0;
+				}
+
+				&:before {
+					right: 2px;
+					border: 10px solid transparent;
+					border-bottom-color: $primary-color;
+				}
+
+				// cutout
+				&:after {
+					right: 3px;
+					border: 9px solid transparent;
+					border-bottom-color: white;
+					background-color: transparent;
+				}
+
+				@media screen and (min-width: (1024px - $side-nav-width)) {
+
+					left: 50%;
+					right: auto;
+					transform: translateX(-50%);
+
+					&:before {
+						left: 34px;
+						right: auto;
+					}
+
+					&:after {
+						left: 35px;
+						right: auto;
+					}
+				}
+			}
+			&:hover {
+				background-color: white;
+				border-color: $primary-color;
+				.popoverCopy {
+					display: block;
+				}
+			}
+		}
+
 		pre {
 			width: 100%;
 			display: block;
-			overflow-x: auto;
 			width: 1px;
 			min-width: 100%;
 			*width: 100%;
+			overflow-x: auto;
 			-webkit-overflow-scrolling: touch;
 			border: 1px solid $powder-blue;
 			background-color: rgba(237, 242, 247, 0.1);
@@ -168,6 +259,7 @@
 			margin-bottom: 40px;
 
 			code {
+				overflow-x: auto;
 				word-break: normal;
 				white-space: pre;
 				overflow-wrap: normal;

website/docs/src/services/markdown.service.js

@@ -7,14 +7,15 @@ import html from 'rehype-stringify';
 import addIdsToHeadings from 'rehype-slug';
 
 import luigiLinkParser from '../unified-plugins/rehype-luigi-linkparser';
+import addCopyToClipboard from '../unified-plugins/rehype-copy-to-clipboard';
 
 // import highlight from 'rehype-highlight' // syntax highlight code blocks with lowlight: https://github.com/wooorm/lowlight
 import rehypeSection from '@agentofuser/rehype-section';
 const section = rehypeSection.default;
 
 class MarkdownService {
   async process(value, data = {}) {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
       unified()
         .use(markdown)
         .use(remark2rehype, {allowDangerousHTML: true})
@@ -23,10 +24,14 @@ class MarkdownService {
         .use(section)
         // .use(highlight)
         .use(addIdsToHeadings)
+        .use(addCopyToClipboard)
         .use(format)
         .use(html)
         .process(String(value), function (err, file) {
-          // console.error(report(err || file))
+          if(err) {
+            console.error(err || file)
+            return reject();
+          }
           resolve(file.contents);
         });
     });

website/docs/src/unified-plugins/plugin-helpers.js

@@ -0,0 +1,8 @@
+
+  export function prependForExport() {
+    if (process.env.NODE_ENV == 'production') {
+      return '/docu-microfrontend';
+    } else {
+      return '';
+    }
+  }

website/docs/src/unified-plugins/rehype-copy-to-clipboard.js

@@ -0,0 +1,30 @@
+import h from 'hastscript';
+import visit from 'unist-util-visit';
+import { prependForExport } from './plugin-helpers';
+
+export default function addCopyToClipboard() {
+  return function transformer(tree) {
+    visit(tree, 'element', function (node) {
+      modify(node, 'code');
+    });
+  }
+
+  function modify(node, prop) {
+    const notYetProcessed = !node.properties.className || node.properties.className.indexOf('canCopyCode') === -1; // prevent infinite loop
+    if (node.tagName === 'pre' && notYetProcessed) {
+      // Docu: https://github.com/syntax-tree/hastscript#use
+      const newNodeData = h('div.copyCodeContainer', [
+        h('a.copyCode', { onclick: 'copyCode(event, this)' }, 
+          [h('div', [
+            h('img', { src: prependForExport() + '/images/copy-clipboard-default.svg' }),
+            h('.popoverCopy', [
+              'Click to copy'
+            ])]
+          )]
+        ),
+        h('pre.canCopyCode', node.children)
+      ]);
+      Object.assign(node, newNodeData);
+    }
+  }
+}

website/docs/src/unified-plugins/rehype-luigi-linkparser.js

@@ -1,33 +1,27 @@
 import has from 'hast-util-has-property';
 import url from 'url';
 import visit from 'unist-util-visit';
-import fs from 'fs';
+import { writeFileSync, appendFileSync } from 'fs';
+import { prependForExport } from './plugin-helpers';
 
 let log = () => {}
 if (process.env.NODE_ENV === 'debug') {
   const debugFile =  __dirname + '/debug.log';
-  fs.writeFileSync(debugFile, '');
+  writeFileSync(debugFile, '');
   log = (text = '') => {
-    fs.appendFileSync(debugFile, text);
+    appendFileSync(debugFile, text);
   }
 }
 
 export default function luigiLinkParser(options) {
   var settings = options || {};
+
   return function transformer(tree) {
     visit(tree, 'element', function (node) {
       modify(node, 'href');
     });
   }
 
-  function prependForExport() {
-    if (process.env.NODE_ENV == 'production') {
-      return '/docu-microfrontend';
-    } else {
-      return '';
-    }
-  }
-
   function modify(node, prop) {
     const githubMaster = 'https://github.com/SAP/luigi/blob/master/';
     if (has(node, prop)) {