adds live page preview on hover :)

src/manifest.json

@@ -34,18 +34,7 @@
     },
     "content_scripts": [
         {
-            "js": [
-                "shortcuts.js",
-                "navigation.js",
-                "srs.js",
-                "inc-dec-value.js",
-                "dispatcher.js",
-                "block-manipulation.js",
-                "live-preview.js",
-                "custom-css.js",
-                "fuzzy_date.js",
-                "create-block-demo.js"
-            ],
+            "js": ["entry.js"],
             "matches": ["*://roamresearch.com/*"]
         }
     ]

src/ts/features/features.ts

@@ -4,9 +4,9 @@ import {config as incDec} from './inc-dec-value'
 import {config as customCss} from './custom-css'
 import {config as srs} from '../srs/srs'
 import {config as blockManipulation} from './block-manipulation'
-import {config as livePreview} from './live-preview'
-import {config as estimate} from './estimates/index'
-import {config as navigation} from './navigation/index'
+import {config as estimate} from './estimates'
+import {config as navigation} from './navigation'
+import {config as livePreview} from './livePreview'
 import {filterAsync, mapAsync} from '../utils/async'
 
 export const Features = {

src/ts/contentScripts/live-preview/index.tsx → src/ts/features/livePreview.tsx

@@ -1,5 +1,5 @@
-import {Feature, Settings} from '../../utils/settings'
-import {Navigation} from '../../roam/navigation'
+import {Feature, Settings} from '../utils/settings'
+import {Navigation} from '../roam/navigation'
 import {browser} from 'webextension-polyfill-ts'
 import {createPopper, Instance} from '@popperjs/core'
 
@@ -25,12 +25,16 @@ browser.runtime.onMessage.addListener(async message => {
 let iframeInstance: PreviewIframe | null = null
 
 const toggleIframe = (active: boolean) => {
-    if (active && !iframeInstance) {
-        iframeInstance = new PreviewIframe()
-        iframeInstance.activate()
-    } else if (iframeInstance) {
-        iframeInstance.destroy()
-        iframeInstance = null
+    if (active) {
+        if (!iframeInstance) {
+            iframeInstance = new PreviewIframe()
+            iframeInstance.activate()
+        }
+    } else {
+        if (iframeInstance) {
+            iframeInstance.destroy()
+            iframeInstance = null
+        }
     }
 }
 
@@ -68,23 +72,12 @@ class PreviewIframe {
 
         document.body.removeChild(this.iframe)
     }
-    /**
-     * HACK: needed because the instance is created thrice onload/toggle.
-     * Remove this check to see the issue
-     */
-    private getExisitingIframe(): HTMLIFrameElement | null {
-        return document.getElementById(this.iframeId) ? this.iframe : null
-    }
 
     private initPreviewIframe() {
         const url = Navigation.getDailyNotesUrl()
-        const existingIframe = this.getExisitingIframe()
-        if (existingIframe) {
-            return
-        }
         this.setupHiddenIframe(url)
         this.addIframeToBody()
-        this.scrollToTopHack()
+        this.scrollToTopOnPageLoad()
         this.attachMouseListeners()
     }
 
@@ -166,23 +159,13 @@ class PreviewIframe {
     }
 
     private resetIframeForNextHover() {
-        this.scrollToTopOnMouseOut()
+        this.scrollIframeToTopOnMouseOut()
         this.iframe.style.pointerEvents = 'none'
         this.iframe.style.opacity = '0'
         this.iframe.style.height = '0'
         this.iframe.style.width = '0'
     }
 
-    private scrollToTopOnMouseOut() {
-        if (this.iframe.contentDocument) {
-            // scroll to top when removed, so the next popup is not scrolled
-            const scrollContainer = this.iframe.contentDocument.querySelector('.roam-center > div')
-            if (scrollContainer) {
-                scrollContainer.scrollTop = 0
-            }
-        }
-    }
-
     private showPreview() {
         this.iframe.style.opacity = '1'
         this.iframe.style.pointerEvents = 'all'
@@ -251,17 +234,31 @@ class PreviewIframe {
             ;(event.target as HTMLIFrameElement).contentDocument?.body.appendChild(styleNode)
         }
     }
+    /**
+     * Sets the iframe's scrollTop to 0,
+     * so the next popup is in the correct scroll position
+     */
+    private scrollIframeToTopOnMouseOut() {
+        if (this.iframe.contentDocument) {
+            const scrollContainer = this.iframe.contentDocument.querySelector('.roam-center > div')
+            this.scrollToTopForElement(scrollContainer)
+        }
+    }
+
     /**
      * HACK: to reset scroll after adding iframe to DOM.
      * Since the `overflow` is not set to `hidden` for the HTML tag,
      * on adding iframe, the body scrolls down,
      * causing the loader to not be centerd.
      * This fixes it by setting the scrollTop to 0
      */
-    private scrollToTopHack = () => {
-        const htmlElement = document.querySelector('html')
-        if (htmlElement) {
-            htmlElement.scrollTop = 0
+    private scrollToTopOnPageLoad = () => {
+        this.scrollToTopForElement(document.querySelector('html'))
+    }
+
+    private scrollToTopForElement = (element: Element | null) => {
+        if (element) {
+            element.scrollTop = 0
         }
     }
 }