mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-23 11:37:02 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Throw error if no communicator was found in a react context

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2021-06-17 18:02:16 +02:00
parent 57f46f489b
commit 31ca77ebfa
6 changed files with 58 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,15 +4,26 @@
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React, { useContext, useMemo } from 'react'
import React, { createContext, useContext, useMemo } from 'react'
import { IframeEditorToRendererCommunicator } from '../../render-page/iframe-editor-to-renderer-communicator'
const IFrameEditorToRendererCommunicatorContext = React.createContext<IframeEditorToRendererCommunicator | undefined>(
const IFrameEditorToRendererCommunicatorContext = createContext<IframeEditorToRendererCommunicator | undefined>(
undefined
)
export const useIFrameEditorToRendererCommunicator: () => IframeEditorToRendererCommunicator | undefined = () =>
useContext(IFrameEditorToRendererCommunicatorContext)
/**
* Provides the {@link IframeEditorToRendererCommunicator editor to renderer iframe communicator} that is set by a {@link IframeEditorToRendererCommunicatorContextProvider context provider}.
*
* @return the received communicator
* @throws Error if no communicator was received
*/
export const useIFrameEditorToRendererCommunicator: () => IframeEditorToRendererCommunicator = () => {
const communicatorFromContext = useContext(IFrameEditorToRendererCommunicatorContext)
if (!communicatorFromContext) {
throw new Error('No editor-to-renderer-iframe-communicator received. Did you forget to use the provider component?')
}
return communicatorFromContext
}
export const IframeEditorToRendererCommunicatorContextProvider: React.FC = ({ children }) => {
const currentIFrameCommunicator = useMemo<IframeEditorToRendererCommunicator>(

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

@ -13,8 +13,19 @@ const IFrameRendererToEditorCommunicatorContext = createContext<IframeRendererTo
undefined
)
export const useIFrameRendererToEditorCommunicator: () => IframeRendererToEditorCommunicator | undefined = () =>
useContext(IFrameRendererToEditorCommunicatorContext)
/**
* Provides the {@link IframeRendererToEditorCommunicator renderer to editor iframe communicator} that is set by a {@link IframeRendererToEditorCommunicatorContextProvider context provider}.
*
* @return the received communicator
* @throws Error if no communicator was received
*/
export const useIFrameRendererToEditorCommunicator: () => IframeRendererToEditorCommunicator = () => {
const communicatorFromContext = useContext(IFrameRendererToEditorCommunicatorContext)
if (!communicatorFromContext) {
throw new Error('No renderer-to-editor-iframe-communicator received. Did you forget to use the provider component?')
}
return communicatorFromContext
}
export const IframeRendererToEditorCommunicatorContextProvider: React.FC = ({ children }) => {
const editorOrigin = useSelector((state: ApplicationState) => state.config.iframeCommunication.editorOrigin)

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

@ -9,7 +9,7 @@ import { IframeEditorToRendererCommunicator } from '../../../render-page/iframe-
export const useOnIframeLoad = (
frameReference: RefObject<HTMLIFrameElement>,
iframeCommunicator: IframeEditorToRendererCommunicator | undefined,
iframeCommunicator: IframeEditorToRendererCommunicator,
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 {

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

@ -58,39 +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.onImageClicked(setLightboxDetails), [iframeCommunicator])
useEffect(() => {
iframeCommunicator?.onRendererReady(() => {
iframeCommunicator?.sendSetBaseConfiguration({
iframeCommunicator.onRendererReady(() => {
iframeCommunicator.sendSetBaseConfiguration({
baseUrl: window.location.toString(),
rendererType
})
setRendererReady(true)
})
}, [darkMode, rendererType, iframeCommunicator, rendererReady, scrollState])
useEffect(() => iframeCommunicator?.onHeightChange(setFrameHeight), [iframeCommunicator])
useEffect(() => iframeCommunicator.onHeightChange(setFrameHeight), [iframeCommunicator])
useEffect(() => {
if (rendererReady) {
iframeCommunicator?.sendSetDarkmode(darkMode)
iframeCommunicator.sendSetDarkmode(darkMode)
}
}, [darkMode, iframeCommunicator, rendererReady])
@ -98,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])