mirror of
https://github.com/hedgedoc/hedgedoc.git
synced 2025-05-23 19:47:03 -04:00
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:
parent
829cc2fe48
commit
6285af458a
10 changed files with 189 additions and 154 deletions
|
@ -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(),
|
||||
[]
|
|
@ -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>
|
||||
)
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue