github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-22 01:36:29 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix: send scroll state if current renderer is ready instead of main renderer

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-04-11 14:00:57 +02:00
parent 86276b0753
commit 2e18f7f775
2 changed files with 14 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/components/editor-page/renderer-pane/hooks/use-send-scroll-state.ts
View file

@ -3,32 +3,29 @@
* *
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
import { useApplicationState } from '../../../../hooks/common/use-application-state' import { useSendToRenderer } from '../../../render-page/window-post-message-communicator/hooks/use-send-to-renderer'
import { CommunicationMessageType } from '../../../render-page/window-post-message-communicator/rendering-message' import { CommunicationMessageType } from '../../../render-page/window-post-message-communicator/rendering-message'
import { useEditorToRendererCommunicator } from '../../render-context/editor-to-renderer-communicator-context-provider'
import type { ScrollState } from '../../synced-scroll/scroll-props' import type { ScrollState } from '../../synced-scroll/scroll-props'
import equal from 'fast-deep-equal' import equal from 'fast-deep-equal'
import { useEffect, useRef } from 'react' import { useMemo, useRef } from 'react'
/** /**
* Sends the given {@link ScrollState scroll state} to the renderer if the content changed. * Sends the given {@link ScrollState scroll state} to the renderer if the content changed.
* *
* @param scrollState The scroll state to send * @param scrollState The scroll state to send
* @param rendererReady Defines if the target renderer is ready
*/ */
export const useSendScrollState = (scrollState: ScrollState | undefined): void => { export const useSendScrollState = (scrollState: ScrollState | undefined, rendererReady: boolean): void => {
const iframeCommunicator = useEditorToRendererCommunicator()
const oldScrollState = useRef<ScrollState | undefined>(undefined) const oldScrollState = useRef<ScrollState | undefined>(undefined)
const rendererReady = useApplicationState((state) => state.rendererStatus.rendererReady)
useEffect(() => { useSendToRenderer(
if ( useMemo(() => {
iframeCommunicator.isCommunicationEnabled() && if (!scrollState || equal(scrollState, oldScrollState.current)) {
rendererReady && return
scrollState && }
!equal(scrollState, oldScrollState.current)
) {
oldScrollState.current = scrollState oldScrollState.current = scrollState
iframeCommunicator.sendMessageToOtherSide({ type: CommunicationMessageType.SET_SCROLL_STATE, scrollState }) return { type: CommunicationMessageType.SET_SCROLL_STATE, scrollState }
} }, [scrollState]),
}, [iframeCommunicator, rendererReady, scrollState]) rendererReady
)
} }

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

@ -146,8 +146,7 @@ export const RenderIframe: React.FC<RenderIframeProps> = ({
useEffectOnRenderTypeChange(rendererType, onIframeLoad) useEffectOnRenderTypeChange(rendererType, onIframeLoad)
useSendDarkModeStatusToRenderer(forcedDarkMode, rendererReady) useSendDarkModeStatusToRenderer(forcedDarkMode, rendererReady)
useSendMarkdownToRenderer(markdownContentLines, rendererReady) useSendMarkdownToRenderer(markdownContentLines, rendererReady)
useSendScrollState(scrollState, rendererReady)
useSendScrollState(scrollState)
useEditorReceiveHandler( useEditorReceiveHandler(
CommunicationMessageType.SET_SCROLL_STATE, CommunicationMessageType.SET_SCROLL_STATE,