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>
This commit is contained in:
Tilman Vatteroth 2021-06-12 16:14:46 +02:00 committed by GitHub
parent 829cc2fe48
commit 6285af458a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 189 additions and 154 deletions

View file

@ -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(),
[]

View file

@ -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>
)
}