mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-09-10 20:22:14 +02:00
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>
This commit is contained in:
parent
3bd49f7801
commit
f5cd0d9319
4 changed files with 23 additions and 9 deletions
|
@ -1,15 +1,18 @@
|
|||
import {svg} from '../svg.js';
|
||||
|
||||
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;
|
||||
|
||||
const button = document.createElement('button');
|
||||
button.classList.add('code-copy', 'ui', 'button');
|
||||
button.innerHTML = svg('octicon-copy');
|
||||
|
||||
for (const el of els) {
|
||||
const btn = button.cloneNode(true);
|
||||
const btn = makeCodeCopyButton();
|
||||
btn.setAttribute('data-clipboard-text', el.textContent);
|
||||
el.after(btn);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue