fix: move dark mode and transparent body hook into renderer

These hooks are only necessary for the document and simple renderer. The slideshow handles theming itself.

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

frontend/src/components/render-page/hooks/use-transparent-body-background.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useEffect } from 'react'
+
+/**
+ * Makes the HTML body transparent.
+ */
+export const useTransparentBodyBackground = () => {
+  useEffect(() => {
+    document.body.classList.add('bg-transparent')
+    return () => document.body.classList.remove('bg-transparent')
+  }, [])
+}

frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx

@@ -3,6 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { useApplyDarkModeStyle } from '../../../../hooks/dark-mode/use-apply-dark-mode-style'
 import { cypressId } from '../../../../utils/cypress-attribute'
 import type { ScrollProps } from '../../../editor-page/synced-scroll/scroll-props'
 import type { LineMarkers } from '../../../markdown-renderer/extensions/linemarker/add-line-marker-markdown-it-plugin'
@@ -12,6 +13,7 @@ import { useMarkdownExtensions } from '../../../markdown-renderer/hooks/use-mark
 import { MarkdownToReact } from '../../../markdown-renderer/markdown-to-react/markdown-to-react'
 import { useDocumentSyncScrolling } from '../../hooks/sync-scroll/use-document-sync-scrolling'
 import { useOnHeightChange } from '../../hooks/use-on-height-change'
+import { useTransparentBodyBackground } from '../../hooks/use-transparent-body-background'
 import { RendererType } from '../../window-post-message-communicator/rendering-message'
 import type { CommonMarkdownRendererProps, HeightChangeRendererProps } from '../common-markdown-renderer-props'
 import { DocumentTocSidebar } from './document-toc-sidebar'
@@ -69,6 +71,9 @@ export const DocumentMarkdownRenderer: React.FC<DocumentMarkdownRendererProps> =
   )
   useCalculateLineMarkerPosition(markdownBodyRef, currentLineMarkers.current, recalculateLineMarkers)
 
+  useTransparentBodyBackground()
+  useApplyDarkModeStyle()
+
   return (
     <div
       className={`${styles.document} vh-100`}

frontend/src/components/render-page/renderers/simple/simple-markdown-renderer.tsx

@@ -3,10 +3,12 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
+import { useApplyDarkModeStyle } from '../../../../hooks/dark-mode/use-apply-dark-mode-style'
 import { cypressId } from '../../../../utils/cypress-attribute'
 import { useMarkdownExtensions } from '../../../markdown-renderer/hooks/use-markdown-extensions'
 import { MarkdownToReact } from '../../../markdown-renderer/markdown-to-react/markdown-to-react'
 import { useOnHeightChange } from '../../hooks/use-on-height-change'
+import { useTransparentBodyBackground } from '../../hooks/use-transparent-body-background'
 import { RendererType } from '../../window-post-message-communicator/rendering-message'
 import type { CommonMarkdownRendererProps, HeightChangeRendererProps } from '../common-markdown-renderer-props'
 import React, { useRef } from 'react'
@@ -31,6 +33,9 @@ export const SimpleMarkdownRenderer: React.FC<SimpleMarkdownRendererProps> = ({
   useOnHeightChange(rendererRef, onHeightChange)
   const extensions = useMarkdownExtensions(baseUrl, RendererType.SIMPLE, [])
 
+  useTransparentBodyBackground()
+  useApplyDarkModeStyle()
+
   return (
     <div className={`vh-100 bg-transparent overflow-y-hidden`}>
       <div ref={rendererRef} className={`position-relative`}>

frontend/src/pages/render.tsx

@@ -5,21 +5,13 @@
  */
 import { RendererToEditorCommunicatorContextProvider } from '../components/editor-page/render-context/renderer-to-editor-communicator-context-provider'
 import { RenderPageContent } from '../components/render-page/render-page-content'
-import { useApplyDarkModeStyle } from '../hooks/dark-mode/use-apply-dark-mode-style'
 import type { NextPage } from 'next'
-import React, { useEffect } from 'react'
+import React from 'react'
 
 /**
  * Renders the actual markdown renderer that receives the content and metadata via iframe communication.
  */
 export const RenderPage: NextPage = () => {
-  useEffect(() => {
-    document.body.classList.add('bg-transparent')
-    return () => document.body.classList.remove('bg-transparent')
-  }, [])
-
-  useApplyDarkModeStyle()
-
   return (
     <RendererToEditorCommunicatorContextProvider>
       <RenderPageContent />