femsci/forgejo
femsci/forgejo
1
0
Fork 0
forked from NYANDEV/forgejo
Code Pull requests Activity

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
Show stats Download patch file Download diff file Expand all files Collapse all files

13
web_src/js/markup/codecopy.js
View file

@ -1,15 +1,18 @@
import {svg} from '../svg.js'; 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() { export function renderCodeCopy() {
const els = document.querySelectorAll('.markup .code-block code'); const els = document.querySelectorAll('.markup .code-block code');
if (!els.length) return; 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) { for (const el of els) {
const btn = button.cloneNode(true); const btn = makeCodeCopyButton();
btn.setAttribute('data-clipboard-text', el.textContent); btn.setAttribute('data-clipboard-text', el.textContent);
el.after(btn); el.after(btn);
} }

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

@ -1,4 +1,6 @@
import {isDarkTheme} from '../utils.js'; import {isDarkTheme} from '../utils.js';
import {makeCodeCopyButton} from './codecopy.js';
const {mermaidMaxSourceCharacters} = window.config; const {mermaidMaxSourceCharacters} = window.config;
const iframeCss = ` const iframeCss = `
@ -58,7 +60,13 @@ export async function renderMermaid() {
iframe.sandbox = 'allow-scripts'; iframe.sandbox = 'allow-scripts';
iframe.style.height = `${Math.ceil(parseFloat(heightStr))}px`; iframe.style.height = `${Math.ceil(parseFloat(heightStr))}px`;
iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svgStr}</body></html>`; 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) { } catch (err) {
displayError(el, err); displayError(el, err);

3
web_src/js/modules/tippy.js
View file

@ -6,6 +6,7 @@ export function createTippy(target, opts = {}) {
placement: target.getAttribute('data-placement') || 'top-start', placement: target.getAttribute('data-placement') || 'top-start',
animation: false, animation: false,
allowHTML: false, allowHTML: false,
hideOnClick: false,
interactiveBorder: 30, interactiveBorder: 30,
ignoreAttributes: true, ignoreAttributes: true,
maxWidth: 500, // increase over default 350px maxWidth: 500, // increase over default 350px
@ -46,7 +47,7 @@ export function showTemporaryTooltip(target, content) {
} }
tippy.setContent(content); tippy.setContent(content);
tippy.show(); if (!tippy.state.isShown) tippy.show();
tippy.setProps({ tippy.setProps({
onHidden: (tippy) => { onHidden: (tippy) => {
if (oldContent) { if (oldContent) {

6
web_src/less/markup/codecopy.less
View file

@ -1,4 +1,5 @@
.markup .code-block { .markup .code-block,
.markup .mermaid-block {
position: relative; position: relative;
} }
@ -26,7 +27,8 @@
background: var(--color-secondary-dark-1) !important; 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; visibility: visible;
animation: fadein .2s both; animation: fadein .2s both;
} }