github-mirror/gitea
2
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2024-12-19 04:06:17 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix race condition in mermaid observer (#32599) (#32673)
Some checks failed
release-nightly / disk-clean (push) Has been cancelled
Details
release-nightly / nightly-binary (push) Has been cancelled
Details
release-nightly / nightly-docker-rootful (push) Has been cancelled
Details
release-nightly / nightly-docker-rootless (push) Has been cancelled
Details

Browse Source 
Backport #32599 by william-allspice
This commit is contained in:
Giteabot 2024-11-29 19:44:41 +08:00 committed by GitHub
parent 27489f2e0b
commit 4b73e92264
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web_src/js/markup/mermaid.js
View File

@ -57,16 +57,12 @@ export async function renderMermaid() {
mermaidBlock.append(btn);
const updateIframeHeight = () => {
iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`;
const body = iframe.contentWindow?.document?.body;
if (body) {
iframe.style.height = `${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', () => {
pre.replaceWith(mermaidBlock);
mermaidBlock.classList.remove('tw-hidden');
@ -75,6 +71,13 @@ export async function renderMermaid() {
mermaidBlock.classList.remove('is-loading');
iframe.classList.remove('tw-invisible');
}, 0);
// 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);
});
document.body.append(mermaidBlock);