Procházet zdrojové kódy
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>tags/v1.19.0-rc0
silverwind
před 1 rokem
4 změnil soubory, kde provedl 23 přidání a 9 odebrání
+ 8
- 5
web_src/js/markup/codecopy.js
Zobrazit soubor
| @@ -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); | |||
| } | |||
+ 9
- 1
web_src/js/markup/mermaid.js
Zobrazit soubor
| @@ -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); | |||
+ 2
- 1
web_src/js/modules/tippy.js
Zobrazit soubor
| @@ -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) { | |||
+ 4
- 2
web_src/less/markup/codecopy.less
Zobrazit soubor
| @@ -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; | |||
| } | |||
Načítá se…