diff options
| author | silverwind <me@silverwind.io> | 2022-12-25 18:17:48 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-12-25 18:17:48 +0100 |
| commit | f5cd0d93192fc4d04966ba971c7aaaae7475926d (patch) | |
| tree | 2ad59f311cd935e891afef5b78df99757dd806e5 /web_src/js/markup | |
| parent | 3bd49f780157494a3ff923a3bcdbb8696a688173 (diff) | |
| download | gitea-f5cd0d93192fc4d04966ba971c7aaaae7475926d.tar.gz gitea-f5cd0d93192fc4d04966ba971c7aaaae7475926d.zip | |
Add Mermaid copy button, avoid unnecessary tooltip hide (#22225)
- 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>
Diffstat (limited to 'web_src/js/markup')
| -rw-r--r-- | web_src/js/markup/codecopy.js | 13 | ||||
| -rw-r--r-- | web_src/js/markup/mermaid.js | 10 |
2 files changed, 17 insertions, 6 deletions
diff --git a/web_src/js/markup/codecopy.js b/web_src/js/markup/codecopy.js index 2aa7070c72..a12802ef73 100644 --- 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 index efd9abbb56..29fa92552d 100644 --- 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); |