git724/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
- 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>
This commit is contained in:
silverwind 2022-12-25 18:17:48 +01:00 • committed by GitHub
parent 3bd49f7801
commit f5cd0d9319
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web_src/js/markup/mermaid.js
View file

@ -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);