fedi/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-21 21:27:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix mermaid diagram height when initially hidden (#32457)

Browse source 
In a hidden iframe, `document.body.clientHeight` is not reliable. Use
`IntersectionObserver` to detect the visibility change and update the
height there.

Fixes: https://github.com/go-gitea/gitea/issues/32392

<img width="885" alt="image"
src="https://github.com/user-attachments/assets/a95ef6aa-27e7-443f-9d06-400ef27919ae">

(cherry picked from commit b55a31eb6a894feb5508e350ff5e9548b2531bd6)
This commit is contained in:
silverwind 2024-11-09 19:03:55 +01:00 committed by Earl Warren
parent fc26becba4
commit 308812a82e
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
1 changed files with 12 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -56,10 +56,21 @@ export async function renderMermaid() {
btn.setAttribute('data-clipboard-text', source); btn.setAttribute('data-clipboard-text', source);
mermaidBlock.append(btn); mermaidBlock.append(btn);
const updateIframeHeight = () => {
iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`;
};
// update height when element's visibility state changes, for example when the diagram is inside
// a <details> + <summary> block and the <details> block becomes visible upon user interaction, it
// would initially set a incorrect height and the correct height is set during this callback.
(new IntersectionObserver(() => {
updateIframeHeight();
}, {root: document.documentElement})).observe(iframe);
iframe.addEventListener('load', () => { iframe.addEventListener('load', () => {
pre.replaceWith(mermaidBlock); pre.replaceWith(mermaidBlock);
mermaidBlock.classList.remove('tw-hidden'); mermaidBlock.classList.remove('tw-hidden');
iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`; updateIframeHeight();
setTimeout(() => { // avoid flash of iframe background setTimeout(() => { // avoid flash of iframe background
mermaidBlock.classList.remove('is-loading'); mermaidBlock.classList.remove('is-loading');
iframe.classList.remove('tw-invisible'); iframe.classList.remove('tw-invisible');