Refactor code

package.json

@@ -54,6 +54,7 @@
     "split-grid": "^1.0.11",
     "tsx": "^4.19.1",
     "typescript": "^5.6.3",
+    "wait-for-async": "^0.7.0",
     "yarn-upgrade-all": "^0.7.4"
   },
   "@parcel/runtime-js": {

src/components/preview.tsx

@@ -1,5 +1,6 @@
 import { auto } from 'manate/react';
 import React, { useEffect } from 'react';
+import waitFor from 'wait-for-async';
 
 const Preview = auto(() => {
   useEffect(() => {
@@ -9,26 +10,33 @@ const Preview = auto(() => {
     const lineHeight = parseInt(getComputedStyle(preview).lineHeight, 10);
     preview.style.paddingBottom = `${leftPanel.offsetHeight - lineHeight}px`;
 
-    // todo: precisely set the timing
-    setTimeout(() => {
-      // scroll to hash element
-      if (window.location.hash.length > 0) {
-        const previewPanel = document.querySelector('#preview').parentElement;
-        const linkElement = document.querySelector(
-          window.location.hash,
-        ) as HTMLElement;
-        if (linkElement) {
-          previewPanel.scrollTop = linkElement.offsetTop;
-          // first time scroll `store.editor.heightAtLine(xxx, 'local')` value is wrong
-          // trigger again after 300ms
-          // it is a codemirror bug, maybe latest version has fixed this issue
-          setTimeout(() => {
-            previewPanel.scrollTop = linkElement.offsetTop - 1;
-            previewPanel.scrollTop = linkElement.offsetTop;
-          }, 300);
-        }
+    const scrollToHash = async () => {
+      if (window.location.hash.length === 0) {
+        return;
       }
-    }, 3000);
+      const r = await waitFor({
+        interval: 100,
+        times: 30,
+        condition: () => document.querySelector(window.location.hash) !== null,
+      });
+      if (!r) {
+        return;
+      }
+      const linkElement = document.querySelector(
+        window.location.hash,
+      ) as HTMLElement;
+      const rightPanel = document.querySelector('#right-panel');
+      rightPanel.scrollTop = linkElement.offsetTop;
+
+      // first time scroll `store.editor.heightAtLine(xxx, 'local')` value is wrong
+      // trigger again after 300ms
+      // it is a codemirror bug, maybe latest version has fixed this issue
+      setTimeout(() => {
+        rightPanel.scrollTop = linkElement.offsetTop - 1;
+        rightPanel.scrollTop = linkElement.offsetTop;
+      }, 300);
+    };
+    scrollToHash();
   }, []);
   return <article className="markdown-body" id="preview"></article>;
 });

yarn.lock

@@ -3953,16 +3953,11 @@ prop-types@^15.8.1:
     object-assign "^4.1.1"
     react-is "^16.13.1"
 
-punycode@^2.1.0:
+punycode@^2.1.0, punycode@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
-punycode@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
-  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
-
 qs@^6.4.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
@@ -4915,6 +4910,11 @@ utility-types@^3.10.0:
   resolved "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz#607c40edb4f258915e901ea7995607fdf319424c"
   integrity sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==
 
+wait-for-async@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/wait-for-async/-/wait-for-async-0.7.0.tgz#e2ccbe0875f4a60cbc395a519a608e955b0cbd69"
+  integrity sha512-Qrt/KCUIYuYew4EZJ6R24Lz0HTw10fFr8fgVgkK+qZNSFWRQAYKqub8OeRUUaP9JnlKX7QSwzKzgqZZkMuKEGw==
+
 weak-lru-cache@^1.2.2:
   version "1.2.2"
   resolved "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz#fdbb6741f36bae9540d12f480ce8254060dccd19"