Copy to clipboard for code blocks (#963)

SAP · Nov 18, 2019 · 8e08d9f · 8e08d9f
1 parent f43c048
commit 8e08d9f
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 34 deletions.
diff --git a/website/docs/scripts/markdown.unified-preview.js b/website/docs/scripts/markdown.unified-preview.js
@@ -11,9 +11,10 @@ const filesToProcess = [
 
 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);
 });
diff --git a/website/docs/src/routes/_layout.svelte b/website/docs/src/routes/_layout.svelte
@@ -199,10 +199,100 @@
 			}
 		}
 
+		.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;
-			position: relative;
 			width: 1px;
 			min-width: 100%;
 			*width: 100%;

diff --git a/website/docs/src/unified-plugins/plugin-helpers.js b/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 '';
+    }
+  }
diff --git a/website/docs/src/unified-plugins/rehype-copy-to-clipboard.js b/website/docs/src/unified-plugins/rehype-copy-to-clipboard.js
@@ -1,16 +1,6 @@
 import h from 'hastscript';
-import has from 'hast-util-has-property';
 import visit from 'unist-util-visit';
-import fs from 'fs';
-
-let log = () => {}
-if (process.env.NODE_ENV === 'debug') {
-  const debugFile =  __dirname + '/debug.log';
-  fs.writeFileSync(debugFile, '');
-  log = (text = '') => {
-    fs.appendFileSync(debugFile, text);
-  }
-}
+import { prependForExport } from './plugin-helpers';
 
 export default function addCopyToClipboard() {
   return function transformer(tree) {
@@ -20,17 +10,21 @@ export default function addCopyToClipboard() {
   }
 
   function modify(node, prop) {
-    if (node.tagName === 'pre') {
+    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 copyCode = h('a.copyCode', { onclick: 'copyCode(event, this)' }, [
-        h('div', [
-          h('img', { src: '/images/copy-clipboard-default.svg' }),
-          h('.popoverCopy', [
-            'Click to copy'
-          ]),
-        ]),
+      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)
       ]);
-      node.children.unshift(copyCode);
+      Object.assign(node, newNodeData);
     }
   }
 }
diff --git a/website/docs/src/unified-plugins/rehype-luigi-linkparser.js b/website/docs/src/unified-plugins/rehype-luigi-linkparser.js
@@ -2,6 +2,7 @@ import has from 'hast-util-has-property';
 import url from 'url';
 import visit from 'unist-util-visit';
 import { writeFileSync, appendFileSync } from 'fs';
+import { prependForExport } from './plugin-helpers';
 
 let log = () => {}
 if (process.env.NODE_ENV === 'debug') {
@@ -21,14 +22,6 @@ export default function luigiLinkParser(options) {
     });
   }
 
-  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)) {