From 6c776d6b68f9cb89158247bc855be2b23362176e Mon Sep 17 00:00:00 2001
From: YR Chen <yrchen@mail.ustc.edu.cn>
Date: Wed, 23 Oct 2024 15:46:10 +0800
Subject: [PATCH 1/3] fix(web): keep title in sync with iframe

---
 web/src/components/IFrame.tsx | 24 ++++++++++++++++++++++--
 web/src/pages/Docs.tsx        | 10 +++++++++-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/web/src/components/IFrame.tsx b/web/src/components/IFrame.tsx
index 3a5e51108..4f2a6c897 100644
--- a/web/src/components/IFrame.tsx
+++ b/web/src/components/IFrame.tsx
@@ -4,8 +4,9 @@ import { uniqueId } from 'lodash'
 import styles from '../style/components/IFrame.module.css'
 interface Props {
   src: string
-  onPageChanged: (page: string, hash: string) => void
+  onPageChanged: (page: string, hash: string, title?: string) => void
   onHashChanged: (hash: string) => void
+  onTitleChanged: (title: string) => void
   onNotFound: () => void
 }
 
@@ -69,6 +70,10 @@ export default function IFrame(props: Props): JSX.Element {
       'hashchange',
       hashChangeEventListener
     )
+    iFrameRef.current.contentWindow?.addEventListener(
+      'titlechange',
+      titleChangeEventListener
+    )
 
     const parts = url.split('/doc/').slice(1).join('/doc/').split('/')
     const urlPageAndHash = parts.slice(2).join('/')
@@ -77,8 +82,9 @@ export default function IFrame(props: Props): JSX.Element {
       : urlPageAndHash.length
     const urlPage = urlPageAndHash.slice(0, hashIndex)
     const urlHash = urlPageAndHash.slice(hashIndex)
+    const title = iFrameRef.current?.contentDocument?.title
 
-    props.onPageChanged(urlPage, urlHash)
+    props.onPageChanged(urlPage, urlHash, title)
   }
 
   const hashChangeEventListener = (): void => {
@@ -102,6 +108,20 @@ export default function IFrame(props: Props): JSX.Element {
     props.onHashChanged(hash)
   }
 
+  const titleChangeEventListener = (): void => {
+    if (iFrameRef.current == null) {
+      console.error('titleChangeEvent from iframe but iFrameRef is null')
+      return
+    }
+
+    const title = iFrameRef.current?.contentDocument?.title
+    if (title == null) {
+      return
+    }
+
+    props.onTitleChanged(title)
+  }
+
   return (
     <iframe
       ref={iFrameRef}
diff --git a/web/src/pages/Docs.tsx b/web/src/pages/Docs.tsx
index a2834f7dd..d6abbb639 100644
--- a/web/src/pages/Docs.tsx
+++ b/web/src/pages/Docs.tsx
@@ -117,7 +117,14 @@ export default function Docs(): JSX.Element {
     window.history.pushState(null, '', url)
   }
 
-  const iFramePageChanged = (urlPage: string, urlHash: string): void => {
+  const updateTitle = (newTitle: string): void => {
+    document.title = newTitle
+  }
+
+  const iFramePageChanged = (urlPage: string, urlHash: string, title?: string): void => {
+    if (title != null && title !== document.title) {
+      updateTitle(title)
+    }
     if (urlPage === page.current) {
       return
     }
@@ -225,6 +232,7 @@ export default function Docs(): JSX.Element {
         src={iFrameSrc}
         onPageChanged={iFramePageChanged}
         onHashChanged={iFrameHashChanged}
+        onTitleChanged={updateTitle}
         onNotFound={iFrameNotFound}
       />
       {!hideUi && (

From c58111f5503ab3550029216bea0d4c444fe52ed9 Mon Sep 17 00:00:00 2001
From: YR Chen <stevapple@icloud.com>
Date: Wed, 23 Oct 2024 17:27:31 +0800
Subject: [PATCH 2/3] fix(web): release `titleChangeEventListener`

---
 web/src/components/IFrame.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/src/components/IFrame.tsx b/web/src/components/IFrame.tsx
index 4f2a6c897..2ce24bd5f 100644
--- a/web/src/components/IFrame.tsx
+++ b/web/src/components/IFrame.tsx
@@ -19,11 +19,15 @@ export default function IFrame(props: Props): JSX.Element {
       return
     }
 
-    // remove the hashchange event listener to prevent memory leaks
+    // remove the event listeners to prevent memory leaks
     iFrameRef.current.contentWindow?.removeEventListener(
       'hashchange',
       hashChangeEventListener
     )
+    iFrameRef.current.contentWindow?.removeEventListener(
+      'titlechange',
+      titleChangeEventListener
+    )
 
     const url = iFrameRef.current?.contentDocument?.location.href
     if (url == null) {

From 309025826302853838b3decc6286b2f44cd26b2d Mon Sep 17 00:00:00 2001
From: YR Chen <yrchen@mail.ustc.edu.cn>
Date: Fri, 25 Oct 2024 00:23:37 +0800
Subject: [PATCH 3/3] fix(web): use type-strict equal when possible

---
 web/src/components/IFrame.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/IFrame.tsx b/web/src/components/IFrame.tsx
index 2ce24bd5f..b5de0d609 100644
--- a/web/src/components/IFrame.tsx
+++ b/web/src/components/IFrame.tsx
@@ -14,7 +14,7 @@ export default function IFrame(props: Props): JSX.Element {
   const iFrameRef = useRef<HTMLIFrameElement>(null)
 
   const onIframeLoad = (): void => {
-    if (iFrameRef.current == null) {
+    if (iFrameRef.current === null) {
       console.error('iFrameRef is null')
       return
     }
@@ -92,7 +92,7 @@ export default function IFrame(props: Props): JSX.Element {
   }
 
   const hashChangeEventListener = (): void => {
-    if (iFrameRef.current == null) {
+    if (iFrameRef.current === null) {
       console.error('hashChangeEvent from iframe but iFrameRef is null')
       return
     }
@@ -113,7 +113,7 @@ export default function IFrame(props: Props): JSX.Element {
   }
 
   const titleChangeEventListener = (): void => {
-    if (iFrameRef.current == null) {
+    if (iFrameRef.current === null) {
       console.error('titleChangeEvent from iframe but iFrameRef is null')
       return
     }