Merge pull request #598 from docat-org/fix/render-loop

Fix/docs-page-url-handling

Author: reglim

web/src/components/DocumentControlButtons.tsx

@@ -31,7 +31,7 @@ export default function DocumentControlButtons (props: Props): JSX.Element {
         <Select
           className={styles['version-select']}
           onChange={(e) => { props.onVersionChange(e.target.value) }}
-          value={props.versions.length > 0 ? props.version : ''}
+          value={props.versions.find(v => v.name === props.version) !== undefined ? props.version : ''}
         >
           {props.versions
             .filter((v) => !v.hidden || v.name === props.version)

web/src/components/IFrame.tsx

@@ -0,0 +1,95 @@
+import React, { useRef } from 'react'
+import { uniqueId } from 'lodash'
+
+import styles from '../style/components/IFrame.module.css'
+interface Props {
+  src: string
+  onPageChanged: (page: string, hash: string) => void
+  onHashChanged: (hash: string) => void
+}
+
+export default function IFrame(props: Props): JSX.Element {
+  const iFrameRef = useRef<HTMLIFrameElement>(null)
+
+  const onIframeLoad = (): void => {
+    if (iFrameRef.current == null) {
+      console.error('iFrameRef is null')
+      return
+    }
+
+    // remove the hashchange event listener to prevent memory leaks
+    iFrameRef.current.contentWindow?.removeEventListener('hashchange', hashChangeEventListener)
+
+    const url = iFrameRef.current?.contentDocument?.location.href
+    if (url == null) {
+      console.warn('IFrame onload event triggered, but url is null')
+      return
+    }
+
+    // make all external links in iframe open in new tab
+    // and make internal links replace the iframe url so that change
+    // doesn't show up in the page history (we'd need to click back twice)
+    iFrameRef.current.contentDocument
+      ?.querySelectorAll('a')
+      .forEach((a: HTMLAnchorElement) => {
+        if (!a.href.startsWith(window.location.origin)) {
+          a.setAttribute('target', '_blank')
+          return
+        }
+
+        if (a.href.trim() === '') {
+          // ignore empty links, may be handled with js internally,
+          // so we'll ignore it. Will inevitably cause the user to have to click back
+          // multiple times to get back to the previous page.
+          return
+        }
+
+        // From here: https://www.ozzu.com/questions/358584/how-do-you-ignore-iframes-javascript-history
+        a.onclick = () => {
+          iFrameRef.current?.contentWindow?.location.replace(a.href)
+          return false
+        }
+      })
+
+    // Add the event listener again
+    iFrameRef.current.contentWindow?.addEventListener('hashchange', hashChangeEventListener)
+
+    const parts = url.split('/doc/').slice(1).join('/doc/').split('/')
+    const urlPageAndHash = parts.slice(2).join('/')
+    const hashIndex = urlPageAndHash.includes('#') ? urlPageAndHash.indexOf('#') : urlPageAndHash.length
+    const urlPage = urlPageAndHash.slice(0, hashIndex)
+    const urlHash = urlPageAndHash.slice(hashIndex)
+
+    props.onPageChanged(urlPage, urlHash)
+  }
+
+  const hashChangeEventListener = (): void => {
+    if (iFrameRef.current == null) {
+      console.error('hashChangeEvent from iframe but iFrameRef is null')
+      return
+    }
+
+    const url = iFrameRef.current?.contentDocument?.location.href
+    if (url == null) {
+      return
+    }
+
+    let hash = url.split('#')[1]
+    if (hash !== null) {
+      hash = `#${hash}`
+    } else {
+      hash = ''
+    }
+
+    props.onHashChanged(hash)
+  }
+
+  return (<iframe
+    ref={iFrameRef}
+    key={uniqueId()}
+    className={styles['docs-iframe']}
+    src={props.src}
+    title="docs"
+    onLoad={onIframeLoad}
+  />)
+}

web/src/data-providers/MessageBannerProvider.tsx

@@ -15,11 +15,15 @@ export interface Message {
 
 interface MessageBannerState {
   showMessage: (message: Message) => void
+  clearMessages: () => void
 }
 
 export const Context = React.createContext<MessageBannerState>({
   showMessage: (): void => {
     console.warn('MessageBannerProvider not initialized')
+  },
+  clearMessages: (): void => {
+    console.warn('MessageBannerProvider not initialized')
   }
 })
 
@@ -59,8 +63,20 @@ export function MessageBannerProvider ({ children }: any): JSX.Element {
     setLastTimeout(newTimeout)
   }, [])
 
+  const clearMessages = useCallback(() => {
+    if (lastTimeout !== undefined) {
+      clearTimeout(lastTimeout)
+    }
+
+    setMessage({
+      content: undefined,
+      type: 'success',
+      showMs: 6000
+    })
+  }, [])
+
   return (
-    <Context.Provider value={{ showMessage }}>
+    <Context.Provider value={{ showMessage, clearMessages }}>
       <Banner message={message} />
       {children}
     </Context.Provider>