Iframe communicator context (2/3) (#1310)

* Add type

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Extract code and add new context provider

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

* Adjust import

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/editor-page/editor-page.tsx

@@ -32,7 +32,7 @@ import { RendererType } from '../render-page/rendering-message'
 import { useEditorModeFromUrl } from './hooks/useEditorModeFromUrl'
 import { UiNotifications } from '../notifications/ui-notifications'
 import { useNotificationTest } from './use-notification-test'
-import { IframeCommunicatorContextProvider } from './render-context/iframe-communicator-context-provider'
+import { IframeEditorToRendererCommunicatorContextProvider } from './render-context/iframe-editor-to-renderer-communicator-context-provider'
 import { useUpdateLocalHistoryEntry } from './hooks/useUpdateLocalHistoryEntry'
 import { useApplicationState } from '../../hooks/common/use-application-state'
 
@@ -126,7 +126,7 @@ export const EditorPage: React.FC = () => {
   )
 
   return (
-    <IframeCommunicatorContextProvider>
+    <IframeEditorToRendererCommunicatorContextProvider>
       <UiNotifications />
       <MotdBanner />
       <div className={'d-flex flex-column vh-100'}>
@@ -148,7 +148,7 @@ export const EditorPage: React.FC = () => {
           </div>
         </ShowIf>
       </div>
-    </IframeCommunicatorContextProvider>
+    </IframeEditorToRendererCommunicatorContextProvider>
   )
 }
 

src/components/editor-page/editor-pane/editor-pane.tsx

@@ -154,7 +154,7 @@ export const EditorPane: React.FC<EditorPaneProps & ScrollProps> = ({
     [onContentChange, maxLength, maxLengthWarningAlreadyShown]
   )
   const onEditorDidMount = useCallback(
-    (mountedEditor) => {
+    (mountedEditor: Editor) => {
       setStatusBarInfo(createStatusInfo(mountedEditor, maxLength))
       setEditor(mountedEditor)
     },

src/components/editor-page/render-context/iframe-editor-to-renderer-communicator-context-provider.tsx

@@ -10,18 +10,10 @@ import { IframeEditorToRendererCommunicator } from '../../render-page/iframe-edi
 const IFrameEditorToRendererCommunicatorContext =
   React.createContext<IframeEditorToRendererCommunicator | undefined>(undefined)
 
-export const useIFrameCommunicator: () => IframeEditorToRendererCommunicator | undefined = () =>
+export const useIFrameEditorToRendererCommunicator: () => IframeEditorToRendererCommunicator | undefined = () =>
   useContext(IFrameEditorToRendererCommunicatorContext)
 
-export const useContextOrStandaloneIframeCommunicator: () => IframeEditorToRendererCommunicator = () => {
-  const contextCommunicator = useIFrameCommunicator()
-  return useMemo(
-    () => (contextCommunicator ? contextCommunicator : new IframeEditorToRendererCommunicator()),
-    [contextCommunicator]
-  )
-}
-
-export const IframeCommunicatorContextProvider: React.FC = ({ children }) => {
+export const IframeEditorToRendererCommunicatorContextProvider: React.FC = ({ children }) => {
   const currentIFrameCommunicator = useMemo<IframeEditorToRendererCommunicator>(
     () => new IframeEditorToRendererCommunicator(),
     []

src/components/editor-page/render-context/iframe-renderer-to-editor-communicator-context-provider.tsx

@@ -0,0 +1,37 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { createContext, useContext, useEffect, useMemo } from 'react'
+import { IframeRendererToEditorCommunicator } from '../../render-page/iframe-renderer-to-editor-communicator'
+import { useSelector } from 'react-redux'
+import { ApplicationState } from '../../../redux'
+
+const IFrameRendererToEditorCommunicatorContext =
+  createContext<IframeRendererToEditorCommunicator | undefined>(undefined)
+
+export const useIFrameRendererToEditorCommunicator: () => IframeRendererToEditorCommunicator | undefined = () =>
+  useContext(IFrameRendererToEditorCommunicatorContext)
+
+export const IframeRendererToEditorCommunicatorContextProvider: React.FC = ({ children }) => {
+  const editorOrigin = useSelector((state: ApplicationState) => state.config.iframeCommunication.editorOrigin)
+  const currentIFrameCommunicator = useMemo<IframeRendererToEditorCommunicator>(() => {
+    const newCommunicator = new IframeRendererToEditorCommunicator()
+    newCommunicator.setOtherSide(window.parent, editorOrigin)
+    return newCommunicator
+  }, [editorOrigin])
+
+  useEffect(() => {
+    const currentIFrame = currentIFrameCommunicator
+    currentIFrame?.sendRendererReady()
+    return () => currentIFrame?.unregisterEventListener()
+  }, [currentIFrameCommunicator])
+
+  return (
+    <IFrameRendererToEditorCommunicatorContext.Provider value={currentIFrameCommunicator}>
+      {children}
+    </IFrameRendererToEditorCommunicatorContext.Provider>
+  )
+}

src/components/editor-page/renderer-pane/hooks/use-on-iframe-load.ts

@@ -9,7 +9,7 @@ import { IframeEditorToRendererCommunicator } from '../../../render-page/iframe-
 
 export const useOnIframeLoad = (
   frameReference: RefObject<HTMLIFrameElement>,
-  iframeCommunicator: IframeEditorToRendererCommunicator,
+  iframeCommunicator: IframeEditorToRendererCommunicator | undefined,
   rendererOrigin: string,
   renderPageUrl: string,
   onNavigateAway: () => void
@@ -19,12 +19,12 @@ export const useOnIframeLoad = (
   return useCallback(() => {
     const frame = frameReference.current
     if (!frame || !frame.contentWindow) {
-      iframeCommunicator.unsetOtherSide()
+      iframeCommunicator?.unsetOtherSide()
       return
     }
 
     if (sendToRenderPage.current) {
-      iframeCommunicator.setOtherSide(frame.contentWindow, rendererOrigin)
+      iframeCommunicator?.setOtherSide(frame.contentWindow, rendererOrigin)
       sendToRenderPage.current = false
       return
     } else {

src/components/editor-page/renderer-pane/render-iframe.tsx

@@ -10,7 +10,7 @@ import { useIsDarkModeActivated } from '../../../hooks/common/use-is-dark-mode-a
 import { isTestMode } from '../../../utils/test-modes'
 import { RendererProps } from '../../render-page/markdown-document'
 import { ImageDetails, RendererType } from '../../render-page/rendering-message'
-import { useContextOrStandaloneIframeCommunicator } from '../render-context/iframe-communicator-context-provider'
+import { useIFrameEditorToRendererCommunicator } from '../render-context/iframe-editor-to-renderer-communicator-context-provider'
 import { ScrollState } from '../synced-scroll/scroll-props'
 import { useOnIframeLoad } from './hooks/use-on-iframe-load'
 import { ShowOnPropChangeImageLightbox } from './show-on-prop-change-image-lightbox'
@@ -44,7 +44,7 @@ export const RenderIframe: React.FC<RenderIframeProps> = ({
   const rendererOrigin = useApplicationState((state) => state.config.iframeCommunication.rendererOrigin)
   const renderPageUrl = `${rendererOrigin}render`
   const resetRendererReady = useCallback(() => setRendererReady(false), [])
-  const iframeCommunicator = useContextOrStandaloneIframeCommunicator()
+  const iframeCommunicator = useIFrameEditorToRendererCommunicator()
   const onIframeLoad = useOnIframeLoad(
     frameReference,
     iframeCommunicator,
@@ -58,41 +58,39 @@ export const RenderIframe: React.FC<RenderIframeProps> = ({
     onRendererReadyChange?.(rendererReady)
   }, [onRendererReadyChange, rendererReady])
 
-  useEffect(() => () => iframeCommunicator.unregisterEventListener(), [iframeCommunicator])
+  useEffect(() => () => iframeCommunicator?.unregisterEventListener(), [iframeCommunicator])
   useEffect(
-    () => iframeCommunicator.onFirstHeadingChange(onFirstHeadingChange),
+    () => iframeCommunicator?.onFirstHeadingChange(onFirstHeadingChange),
     [iframeCommunicator, onFirstHeadingChange]
   )
   useEffect(
-    () => iframeCommunicator.onFrontmatterChange(onFrontmatterChange),
+    () => iframeCommunicator?.onFrontmatterChange(onFrontmatterChange),
     [iframeCommunicator, onFrontmatterChange]
   )
-  useEffect(() => iframeCommunicator.onSetScrollState(onScroll), [iframeCommunicator, onScroll])
+  useEffect(() => iframeCommunicator?.onSetScrollState(onScroll), [iframeCommunicator, onScroll])
   useEffect(
-    () => iframeCommunicator.onSetScrollSourceToRenderer(onMakeScrollSource),
+    () => iframeCommunicator?.onSetScrollSourceToRenderer(onMakeScrollSource),
     [iframeCommunicator, onMakeScrollSource]
   )
   useEffect(
-    () => iframeCommunicator.onTaskCheckboxChange(onTaskCheckedChange),
+    () => iframeCommunicator?.onTaskCheckboxChange(onTaskCheckedChange),
     [iframeCommunicator, onTaskCheckedChange]
   )
-  useEffect(() => iframeCommunicator.onImageClicked(setLightboxDetails), [iframeCommunicator])
-  useEffect(
-    () =>
-      iframeCommunicator.onRendererReady(() => {
-        iframeCommunicator.sendSetBaseConfiguration({
-          baseUrl: window.location.toString(),
-          rendererType
-        })
-        setRendererReady(true)
-      }),
-    [darkMode, rendererType, iframeCommunicator, rendererReady, scrollState]
-  )
-  useEffect(() => iframeCommunicator.onHeightChange(setFrameHeight), [iframeCommunicator])
+  useEffect(() => iframeCommunicator?.onImageClicked(setLightboxDetails), [iframeCommunicator])
+  useEffect(() => {
+    iframeCommunicator?.onRendererReady(() => {
+      iframeCommunicator?.sendSetBaseConfiguration({
+        baseUrl: window.location.toString(),
+        rendererType
+      })
+      setRendererReady(true)
+    })
+  }, [darkMode, rendererType, iframeCommunicator, rendererReady, scrollState])
+  useEffect(() => iframeCommunicator?.onHeightChange(setFrameHeight), [iframeCommunicator])
 
   useEffect(() => {
     if (rendererReady) {
-      iframeCommunicator.sendSetDarkmode(darkMode)
+      iframeCommunicator?.sendSetDarkmode(darkMode)
     }
   }, [darkMode, iframeCommunicator, rendererReady])
 
@@ -100,13 +98,13 @@ export const RenderIframe: React.FC<RenderIframeProps> = ({
   useEffect(() => {
     if (rendererReady && !equal(scrollState, oldScrollState.current)) {
       oldScrollState.current = scrollState
-      iframeCommunicator.sendScrollState(scrollState)
+      iframeCommunicator?.sendScrollState(scrollState)
     }
   }, [iframeCommunicator, rendererReady, scrollState])
 
   useEffect(() => {
     if (rendererReady) {
-      iframeCommunicator.sendSetMarkdownContent(markdownContent)
+      iframeCommunicator?.sendSetMarkdownContent(markdownContent)
     }
   }, [iframeCommunicator, markdownContent, rendererReady])