From 145cda7d45e82a290b19e03854155dca135c8de5 Mon Sep 17 00:00:00 2001
From: Jerry Kim <42jerrykim@gmail.com>
Date: Sun, 2 Nov 2025 05:59:30 +0900
Subject: [PATCH] feat: use ResizeObserver to detect changes in the size of
 `.article-content` (#1105)

* Use ResizeObserver to detect changes in the size of .article-content

This code is for handling changes in position caused by content rendered as part of post-processing, such as Mermaid diagrams

* Add debounced to resizeHandler
---
 assets/ts/scrollspy.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/assets/ts/scrollspy.ts b/assets/ts/scrollspy.ts
index 22c0217..7cf416e 100644
--- a/assets/ts/scrollspy.ts
+++ b/assets/ts/scrollspy.ts
@@ -127,7 +127,14 @@ function setupScrollspy() {
         scrollHandler();
     }
 
+    // Use ResizeObserver to detect changes in the size of .article-content
+    const articleContent = document.querySelector(".article-content");
+    if (articleContent) {
+        const resizeObserver = new ResizeObserver(debounced(resizeHandler));
+        resizeObserver.observe(articleContent);
+    }
+
     window.addEventListener("resize", debounced(resizeHandler));
 }
 
-export { setupScrollspy };
\ No newline at end of file
+export { setupScrollspy };