mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-11-21 12:55:32 +03:00
Fix mermaid diagram height when initially hidden (#32457)
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:
parent
fc26becba4
commit
308812a82e
1 changed files with 12 additions and 1 deletions
|
@ -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');
|
||||||
|
|
Loading…
Reference in a new issue