aboutsummaryrefslogtreecommitdiffstats
path: root/web_src/js
diff options
context:
space:
mode:
authorwilliam-allspice <william@allspice.io>2024-11-26 00:37:24 -0600
committerGitHub <noreply@github.com>2024-11-26 06:37:24 +0000
commit88f5d33ab267f330ffaf02eb019e772ed06ed34f (patch)
tree09e5c8a61636dd76017ee794af681f584a30ccb8 /web_src/js
parent9ed768adc426636b6fbcdb389ba89ba039bc7da3 (diff)
downloadgitea-88f5d33ab267f330ffaf02eb019e772ed06ed34f.tar.gz
gitea-88f5d33ab267f330ffaf02eb019e772ed06ed34f.zip
Fix race condition in mermaid observer (#32599)
This Pull Request addresses a race condition in the updateIframeHeight function where it is sometimes called when the iframe is not fully loaded or accessible resulting in an alarming error message for the user. To address this we: 1. Add defensive programming within the updateIframeHeight function 2. Delay instantiating the intersection observer until the iframe has loaded Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Diffstat (limited to 'web_src/js')
-rw-r--r--web_src/js/markup/mermaid.ts19
1 files changed, 11 insertions, 8 deletions
diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts
index 004795d367..2dbed280c2 100644
--- a/web_src/js/markup/mermaid.ts
+++ b/web_src/js/markup/mermaid.ts
@@ -58,16 +58,12 @@ export async function renderMermaid(): Promise<void> {
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');
@@ -76,6 +72,13 @@ export async function renderMermaid(): Promise<void> {
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);