fix: Move content into to frontend directory

Doing this BEFORE the merge prevents a lot of merge conflicts.

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

frontend/src/components/editor-page/renderer-pane/hooks/use-effect-on-render-type-change.ts

@@ -0,0 +1,26 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { useEffect, useRef } from 'react'
+import type { RendererType } from '../../../render-page/window-post-message-communicator/rendering-message'
+
+/**
+ * Execute the given reload callback if the given render type changes.
+ *
+ * @param rendererType The render type to watch
+ * @param effectCallback The callback that should be executed if the render type changes.
+ */
+export const useEffectOnRenderTypeChange = (rendererType: RendererType, effectCallback: () => void): void => {
+  const lastRendererType = useRef<RendererType>(rendererType)
+
+  useEffect(() => {
+    if (lastRendererType.current === rendererType) {
+      return
+    }
+    effectCallback()
+    lastRendererType.current = rendererType
+  }, [effectCallback, rendererType])
+}

frontend/src/components/editor-page/renderer-pane/hooks/use-force-render-page-url-on-iframe-load-callback.ts

@@ -0,0 +1,59 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { RefObject } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { Logger } from '../../../../utils/logger'
+import { ORIGIN, useBaseUrl } from '../../../../hooks/common/use-base-url'
+import { useEditorToRendererCommunicator } from '../../render-context/editor-to-renderer-communicator-context-provider'
+
+const log = new Logger('IframeLoader')
+
+/**
+ * Generates a callback for an iframe load handler, that enforces a given URL if frame navigates away.
+ *
+ * @param iFrameReference A reference to the iframe react dom element.
+ * @param onNavigateAway An optional callback that is executed when the iframe leaves the enforced URL.
+ */
+export const useForceRenderPageUrlOnIframeLoadCallback = (
+  iFrameReference: RefObject<HTMLIFrameElement>,
+  onNavigateAway: () => void
+): (() => void) => {
+  const iframeCommunicator = useEditorToRendererCommunicator()
+  const rendererBaseUrl = useBaseUrl(ORIGIN.RENDERER)
+  const forcedUrl = useMemo(() => {
+    const renderUrl = new URL(rendererBaseUrl)
+    renderUrl.pathname += 'render'
+    renderUrl.searchParams.set('uuid', iframeCommunicator.getUuid())
+    return renderUrl.toString()
+  }, [iframeCommunicator, rendererBaseUrl])
+  const redirectionInProgress = useRef<boolean>(false)
+
+  const loadCallback = useCallback(() => {
+    const frame = iFrameReference.current
+
+    if (!frame) {
+      log.debug('No frame in reference')
+      return
+    }
+
+    if (redirectionInProgress.current) {
+      redirectionInProgress.current = false
+      log.debug('Redirect complete')
+    } else {
+      log.warn(`Navigated away from unknown URL. Forcing back to ${forcedUrl}`)
+      onNavigateAway?.()
+      redirectionInProgress.current = true
+      frame.src = forcedUrl
+    }
+  }, [iFrameReference, onNavigateAway, forcedUrl])
+
+  useEffect(() => {
+    loadCallback()
+  }, [loadCallback])
+
+  return loadCallback
+}

frontend/src/components/editor-page/renderer-pane/hooks/use-send-dark-mode-status-to-renderer.ts

@@ -0,0 +1,31 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { useMemo } from 'react'
+import { CommunicationMessageType } from '../../../render-page/window-post-message-communicator/rendering-message'
+import { useSendToRenderer } from '../../../render-page/window-post-message-communicator/hooks/use-send-to-renderer'
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+
+/**
+ * Sends the current dark mode setting to the renderer.
+ *
+ * @param forcedDarkMode Overwrites the value from the global application states if set.
+ * @param rendererReady Defines if the target renderer is ready
+ */
+export const useSendDarkModeStatusToRenderer = (forcedDarkMode: boolean | undefined, rendererReady: boolean): void => {
+  const darkModePreference = useApplicationState((state) => state.darkMode.darkModePreference)
+
+  useSendToRenderer(
+    useMemo(
+      () => ({
+        type: CommunicationMessageType.SET_DARKMODE,
+        preference: darkModePreference
+      }),
+      [darkModePreference]
+    ),
+    rendererReady
+  )
+}

frontend/src/components/editor-page/renderer-pane/hooks/use-send-markdown-to-renderer.ts

@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { useSendToRenderer } from '../../../render-page/window-post-message-communicator/hooks/use-send-to-renderer'
+import { useMemo } from 'react'
+import { CommunicationMessageType } from '../../../render-page/window-post-message-communicator/rendering-message'
+
+/**
+ * Sends the given markdown content to the renderer.
+ *
+ * @param markdownContentLines The markdown content to send.
+ * @param rendererReady Defines if the target renderer is ready
+ */
+export const useSendMarkdownToRenderer = (markdownContentLines: string[], rendererReady: boolean): void => {
+  return useSendToRenderer(
+    useMemo(
+      () => ({
+        type: CommunicationMessageType.SET_MARKDOWN_CONTENT,
+        content: markdownContentLines
+      }),
+      [markdownContentLines]
+    ),
+    rendererReady
+  )
+}

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

@@ -0,0 +1,30 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { useEffect, useRef } from 'react'
+import type { ScrollState } from '../../synced-scroll/scroll-props'
+import { CommunicationMessageType } from '../../../render-page/window-post-message-communicator/rendering-message'
+import equal from 'fast-deep-equal'
+import { useEditorToRendererCommunicator } from '../../render-context/editor-to-renderer-communicator-context-provider'
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+
+/**
+ * Sends the given {@link ScrollState scroll state} to the renderer if the content changed.
+ *
+ * @param scrollState The scroll state to send
+ */
+export const useSendScrollState = (scrollState: ScrollState | undefined): void => {
+  const iframeCommunicator = useEditorToRendererCommunicator()
+  const oldScrollState = useRef<ScrollState | undefined>(undefined)
+  const rendererReady = useApplicationState((state) => state.rendererStatus.rendererReady)
+
+  useEffect(() => {
+    if (rendererReady && scrollState && !equal(scrollState, oldScrollState.current)) {
+      oldScrollState.current = scrollState
+      iframeCommunicator.sendMessageToOtherSide({ type: CommunicationMessageType.SET_SCROLL_STATE, scrollState })
+    }
+  }, [iframeCommunicator, rendererReady, scrollState])
+}