Add Mermaid copy button, avoid unnecessary tooltip hide (#22225)

silverwind · lafriks · KN4CK3R · web-flow · commit f5cd0d93192f · 2022-12-25T18:17:48.000+01:00
- Add Copy button to mermaid diagrams which copies their source. - Set tippy to not hide on click and avoid tooltip re-creation for temporary tooltips. This avoids hide and show when copying repo url. Popovers still hide the tooltip as usual. <img width="815" alt="Screenshot 2022-12-23 at 14 02 32" src="https://user-images.githubusercontent.com/115237/209341696-98e30953-f246-46d9-9157-2ececfd791c9.png"> Co-authored-by: Lauris BH <lauris@nix.lv> Co-authored-by: KN4CK3R <admin@oldschoolhack.me>
diff --git a/web_src/js/markup/codecopy.js b/web_src/js/markup/codecopy.js
@@ -1,15 +1,18 @@
 import {svg} from '../svg.js';
 
-export function renderCodeCopy() {
-  const els = document.querySelectorAll('.markup .code-block code');
-  if (!els.length) return;
-
+export function makeCodeCopyButton() {
   const button = document.createElement('button');
   button.classList.add('code-copy', 'ui', 'button');
   button.innerHTML = svg('octicon-copy');
+  return button;
+}
+
+export function renderCodeCopy() {
+  const els = document.querySelectorAll('.markup .code-block code');
+  if (!els.length) return;
 
   for (const el of els) {
-    const btn = button.cloneNode(true);
+    const btn = makeCodeCopyButton();
     btn.setAttribute('data-clipboard-text', el.textContent);
     el.after(btn);
   }
diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js
@@ -1,4 +1,6 @@
 import {isDarkTheme} from '../utils.js';
+import {makeCodeCopyButton} from './codecopy.js';
+
 const {mermaidMaxSourceCharacters} = window.config;
 
 const iframeCss = `
@@ -58,7 +60,13 @@ export async function renderMermaid() {
         iframe.sandbox = 'allow-scripts';
         iframe.style.height = `${Math.ceil(parseFloat(heightStr))}px`;
         iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svgStr}</body></html>`;
-        el.closest('pre').replaceWith(iframe);
+        const mermaidBlock = document.createElement('div');
+        mermaidBlock.classList.add('mermaid-block');
+        mermaidBlock.append(iframe);
+        const btn = makeCodeCopyButton();
+        btn.setAttribute('data-clipboard-text', source);
+        mermaidBlock.append(btn);
+        el.closest('pre').replaceWith(mermaidBlock);
       });
     } catch (err) {
       displayError(el, err);
diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
@@ -6,6 +6,7 @@ export function createTippy(target, opts = {}) {
     placement: target.getAttribute('data-placement') || 'top-start',
     animation: false,
     allowHTML: false,
+    hideOnClick: false,
     interactiveBorder: 30,
     ignoreAttributes: true,
     maxWidth: 500, // increase over default 350px
@@ -46,7 +47,7 @@ export function showTemporaryTooltip(target, content) {
   }
 
   tippy.setContent(content);
-  tippy.show();
+  if (!tippy.state.isShown) tippy.show();
   tippy.setProps({
     onHidden: (tippy) => {
       if (oldContent) {
diff --git a/web_src/less/markup/codecopy.less b/web_src/less/markup/codecopy.less
@@ -1,4 +1,5 @@
-.markup .code-block {
+.markup .code-block,
+.markup .mermaid-block {
   position: relative;
 }
 
@@ -26,7 +27,8 @@
   background: var(--color-secondary-dark-1) !important;
 }
 
-.markup .code-block:hover .code-copy {
+.markup .code-block:hover .code-copy,
+.markup .mermaid-block:hover .code-copy {
   visibility: visible;
   animation: fadein .2s both;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`		`-.markup .code-block {`
	`1`	`+.markup .code-block,`
	`2`	`+.markup .mermaid-block {`
`2`	`3`	`position: relative;`
`3`	`4`	`}`
`4`	`5`
`@@ -26,7 +27,8 @@`
`26`	`27`	`background: var(--color-secondary-dark-1) !important;`
`27`	`28`	`}`
`28`	`29`
`29`		`-.markup .code-block:hover .code-copy {`
	`30`	`+.markup .code-block:hover .code-copy,`
	`31`	`+.markup .mermaid-block:hover .code-copy {`
`30`	`32`	`visibility: visible;`
`31`	`33`	`animation: fadein .2s both;`
`32`	`34`	`}`