feat(redux): add print-mode

Signed-off-by: Philip Molares <philip.molares@udo.edu>

frontend/src/components/editor-page/utils/print-iframe.ts

@@ -4,17 +4,36 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { useIsRendererReady } from '../../render-page/window-post-message-communicator/hooks/use-is-renderer-ready'
+import { useCallback } from 'react'
+import { CommunicationMessageType } from '../../render-page/window-post-message-communicator/rendering-message'
+import { useEditorToRendererCommunicator } from '../render-context/editor-to-renderer-communicator-context-provider'
+
 /**
  * Prints the content of the renderer iframe.
  */
-export const printIframe = (): void => {
-  const iframe = document.getElementById('editor-renderer-iframe') as HTMLIFrameElement
-<<<<<<< HEAD
-  if (!iframe) {
-=======
-  if (!iframe || !iframe.contentWindow) {
->>>>>>> 279f6cd89 (feat(frontend): add basic print functionality)
-    return
-  }
-  iframe.contentWindow.print()
+export const usePrintIframe = (): (() => void) => {
+  const iframeCommunicator = useEditorToRendererCommunicator()
+  const rendererReady = useIsRendererReady()
+
+  return useCallback(() => {
+    if (!rendererReady) {
+      return
+    }
+    const iframe = document.getElementById('editor-renderer-iframe') as HTMLIFrameElement
+    if (!iframe || !iframe.contentWindow) {
+      return
+    }
+    iframeCommunicator.sendMessageToOtherSide({
+      type: CommunicationMessageType.SET_PRINT_MODE,
+      printMode: true
+    })
+    setTimeout(() => {
+      iframe.contentWindow?.print()
+      iframeCommunicator.sendMessageToOtherSide({
+        type: CommunicationMessageType.SET_PRINT_MODE,
+        printMode: false
+      })
+    }, 50)
+  }, [rendererReady, iframeCommunicator])
 }

frontend/src/components/render-page/render-page-content.tsx

@@ -17,6 +17,7 @@ import { countWords } from './word-counter'
 import type { SlideOptions } from '@hedgedoc/commons'
 import { EventEmitter2 } from 'eventemitter2'
 import React, { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'
+import { setPrintMode } from '../../redux/print-mode/methods'
 
 /**
  * Wraps the markdown rendering in an iframe.
@@ -78,6 +79,13 @@ export const RenderPageContent: React.FC = () => {
     }, [communicator])
   )
 
+  useRendererReceiveHandler(
+    CommunicationMessageType.SET_PRINT_MODE,
+    useCallback(({ printMode }) => {
+      setPrintMode(printMode)
+    }, [])
+  )
+
   const onMakeScrollSource = useCallback(() => {
     sendScrolling.current = true
     communicator.sendMessageToOtherSide({

frontend/src/components/render-page/window-post-message-communicator/rendering-message.ts

@@ -20,13 +20,19 @@ export enum CommunicationMessageType {
   ON_WORD_COUNT_CALCULATED = 'ON_WORD_COUNT_CALCULATED',
   SET_SLIDE_OPTIONS = 'SET_SLIDE_OPTIONS',
   IMAGE_UPLOAD = 'IMAGE_UPLOAD',
-  EXTENSION_EVENT = 'EXTENSION_EVENT'
+  EXTENSION_EVENT = 'EXTENSION_EVENT',
+  SET_PRINT_MODE = 'SET_PRINT_MODE'
 }
 
 export interface NoPayloadMessage<TYPE extends CommunicationMessageType> {
   type: TYPE
 }
 
+export interface SetPrintModeConfigurationMessage {
+  type: CommunicationMessageType.SET_PRINT_MODE
+  printMode: boolean
+}
+
 export interface SetAdditionalConfigurationMessage {
   type: CommunicationMessageType.SET_ADDITIONAL_CONFIGURATION
   darkModePreference: DarkModePreference
@@ -101,6 +107,7 @@ export type CommunicationMessages =
   | OnWordCountCalculatedMessage
   | ImageUploadMessage
   | ExtensionEvent
+  | SetPrintModeConfigurationMessage
 
 export type EditorToRendererMessageType =
   | CommunicationMessageType.SET_MARKDOWN_CONTENT
@@ -110,6 +117,7 @@ export type EditorToRendererMessageType =
   | CommunicationMessageType.GET_WORD_COUNT
   | CommunicationMessageType.SET_SLIDE_OPTIONS
   | CommunicationMessageType.DISABLE_RENDERER_SCROLL_SOURCE
+  | CommunicationMessageType.SET_PRINT_MODE
 
 export type RendererToEditorMessageType =
   | CommunicationMessageType.RENDERER_READY

frontend/src/hooks/dark-mode/use-dark-mode-state.ts

@@ -6,6 +6,9 @@
 import { DarkModePreference } from '../../redux/dark-mode/types'
 import { useApplicationState } from '../common/use-application-state'
 import useMediaQuery from '@restart/hooks/useMediaQuery'
+import { Logger } from '../../utils/logger'
+
+const logger = new Logger('useDarkModeState')
 
 /**
  * Uses the user settings and the browser preference to determine if dark mode should be used.
@@ -14,7 +17,14 @@ import useMediaQuery from '@restart/hooks/useMediaQuery'
  */
 export const useDarkModeState = (): boolean => {
   const preference = useApplicationState((state) => state.darkMode.darkModePreference)
+  const printModeEnabled = useApplicationState((state) => state.printMode.printModeEnabled)
   const isBrowserPreferringDark = useMediaQuery('(prefers-color-scheme: dark)')
 
+  logger.info(`SET_PRINT_MODE ${printModeEnabled}`)
+
+  if (printModeEnabled) {
+    return false
+  }
+
   return preference === DarkModePreference.DARK || (preference === DarkModePreference.AUTO && isBrowserPreferringDark)
 }

frontend/src/redux/index.ts

@@ -12,6 +12,7 @@ import { rendererStatusReducer } from './renderer-status/slice'
 import { realtimeStatusReducer } from './realtime/slice'
 import { historyReducer } from './history/slice'
 import { noteDetailsReducer } from './note-details/slice'
+import { printModeReducer } from './print-mode/slice'
 
 export const store = configureStore({
   reducer: {
@@ -21,7 +22,8 @@ export const store = configureStore({
     rendererStatus: rendererStatusReducer,
     realtimeStatus: realtimeStatusReducer,
     history: historyReducer,
-    noteDetails: noteDetailsReducer
+    noteDetails: noteDetailsReducer,
+    printMode: printModeReducer
   },
   devTools: isDevMode
 })

frontend/src/redux/print-mode/initial-state.ts

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import type { PrintModeConfig } from './types'
+
+export const initialState: PrintModeConfig = {
+  printModeEnabled: false
+}

frontend/src/redux/print-mode/methods.ts

@@ -0,0 +1,12 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { store } from '..'
+import { printModeActionsCreator } from './slice'
+
+export const setPrintMode = (printMode: boolean): void => {
+  const action = printModeActionsCreator.setPrintMode(printMode)
+  store.dispatch(action)
+}

frontend/src/redux/print-mode/slice.ts

@@ -0,0 +1,22 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from '@reduxjs/toolkit'
+import { initialState } from './initial-state'
+import type { PrintModeConfig } from './types'
+
+const printModeSlice = createSlice({
+  name: 'printMode',
+  initialState,
+  reducers: {
+    setPrintMode: (state, action: PayloadAction<PrintModeConfig['printModeEnabled']>) => {
+      state.printModeEnabled = action.payload
+    }
+  }
+})
+
+export const printModeActionsCreator = printModeSlice.actions
+export const printModeReducer = printModeSlice.reducer

frontend/src/redux/print-mode/types.ts

@@ -0,0 +1,8 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+export interface PrintModeConfig {
+  printModeEnabled: boolean
+}