From c5dd5eac0d8f773180df1d3556e0c7805d2b662a Mon Sep 17 00:00:00 2001
From: Erik Michelson <github@erik.michelson.eu>
Date: Fri, 1 Nov 2024 20:21:16 +0100
Subject: [PATCH] feat(frontend): add basic print functionality

Co-authored-by: Philip Molares <philip.molares@udo.edu>
Signed-off-by: Erik Michelson <github@erik.michelson.eu>
Signed-off-by: Philip Molares <philip.molares@udo.edu>
---
 frontend/global-styles/github-markdown.scss   |  6 --
 frontend/global-styles/index.scss             |  1 +
 frontend/global-styles/markdown-tweaks.scss   |  4 +-
 frontend/global-styles/print.scss             | 73 +++++++++++++++++++
 frontend/locales/en.json                      |  9 ++-
 .../copy-to-clipboard-button.spec.tsx.snap    | 12 +--
 .../copy-to-clipboard-button.tsx              |  2 +
 .../style.module.scss                         | 11 +++
 .../highlighted-code.module.scss              |  7 ++
 ...render-page-url-on-iframe-load-callback.ts |  6 +-
 .../renderer-iframe/renderer-iframe.tsx       | 17 +++--
 .../common/renderer-iframe/style.module.scss  |  6 ++
 .../editor-page/editor-page-content.tsx       |  6 +-
 .../hooks/use-print-keyboard-shortcut.ts      | 38 ++++++++++
 .../print-warning/print-warning.tsx           | 27 +++++++
 .../src/components/editor-page/print.scss     | 15 ++++
 ...renderer-communicator-context-provider.tsx |  9 ++-
 .../editor-page/sidebar/sidebar.tsx           |  2 +-
 .../entries/export-print-sidebar-entry.tsx    | 24 ++++++
 .../export-sidebar-menu.tsx                   |  9 ++-
 .../note-info-line-word-count.tsx             |  4 +-
 .../__snapshots__/splitter.spec.tsx.snap      | 15 ++++
 .../splitter/split-divider/split-divider.tsx  |  2 +-
 .../editor-page/splitter/splitter.tsx         | 10 ++-
 .../editor-page/utils/print-iframe.ts         | 58 +++++++++++++++
 .../click-shield/click-shield.module.scss     | 11 ++-
 .../click-shield/click-shield.tsx             | 34 ++++++---
 .../click-shield/print-link.tsx               | 26 +++++++
 .../markdown-toc-button.module.scss           |  6 ++
 .../render-page/render-page-content.tsx       | 13 +++-
 .../document/document-markdown-renderer.tsx   |  2 +-
 .../document/markdown-document.module.scss    |  7 ++
 .../hooks/use-editor-receive-handler.ts       |  6 +-
 .../hooks/use-send-to-renderer.ts             |  4 +-
 .../rendering-message.ts                      | 10 ++-
 .../iframe-capsule-replacer.tsx               |  5 +-
 .../abcjs/abc.module.scss                     | 16 +++-
 .../asciinema-frame.spec.tsx.snap             |  2 +-
 .../asciinema/asciinema-frame.tsx             |  5 +-
 .../asciinema/replace-asciinema-link.ts       |  2 +-
 .../gist/gist-frame.tsx                       |  6 +-
 .../__snapshots__/vimeo-frame.spec.tsx.snap   |  2 +-
 .../vimeo/vimeo-frame.tsx                     |  5 +-
 .../__snapshots__/youtube-frame.spec.tsx.snap |  2 +-
 .../youtube/youtube-frame.tsx                 |  5 +-
 .../hooks/dark-mode/use-dark-mode-state.ts    | 12 ++-
 frontend/src/redux/index.ts                   |  4 +-
 .../src/redux/print-mode/initial-state.ts     |  6 ++
 frontend/src/redux/print-mode/methods.ts      | 12 +++
 frontend/src/redux/print-mode/slice.ts        | 21 ++++++
 frontend/src/test-utils/mock-app-state.ts     |  3 +-
 51 files changed, 520 insertions(+), 80 deletions(-)
 create mode 100644 frontend/global-styles/print.scss
 create mode 100644 frontend/src/components/common/copyable/copy-to-clipboard-button/style.module.scss
 create mode 100644 frontend/src/components/editor-page/hooks/use-print-keyboard-shortcut.ts
 create mode 100644 frontend/src/components/editor-page/print-warning/print-warning.tsx
 create mode 100644 frontend/src/components/editor-page/print.scss
 create mode 100644 frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-sidebar-menu/entries/export-print-sidebar-entry.tsx
 create mode 100644 frontend/src/components/editor-page/utils/print-iframe.ts
 create mode 100644 frontend/src/components/markdown-renderer/replace-components/click-shield/print-link.tsx
 create mode 100644 frontend/src/redux/print-mode/initial-state.ts
 create mode 100644 frontend/src/redux/print-mode/methods.ts
 create mode 100644 frontend/src/redux/print-mode/slice.ts

diff --git a/frontend/global-styles/github-markdown.scss b/frontend/global-styles/github-markdown.scss
index 13175a407..4006d6eab 100644
--- a/frontend/global-styles/github-markdown.scss
+++ b/frontend/global-styles/github-markdown.scss
@@ -107,12 +107,6 @@
     font-size: 1em;
   }
 
-  hr {
-    box-sizing: initial;
-    height: 0;
-    overflow: visible;
-  }
-
   input {
     font: inherit;
     margin: 0;
diff --git a/frontend/global-styles/index.scss b/frontend/global-styles/index.scss
index db7b98ca5..b61bd7742 100644
--- a/frontend/global-styles/index.scss
+++ b/frontend/global-styles/index.scss
@@ -17,6 +17,7 @@
 @import "./github-markdown";
 @import "./markdown-tweaks";
 @import "./reveal";
+@import "./print";
 
 .text-black, body[data-bs-theme=dark] .text-black {
   color: $black;
diff --git a/frontend/global-styles/markdown-tweaks.scss b/frontend/global-styles/markdown-tweaks.scss
index 5d8782155..e1b7e96ea 100644
--- a/frontend/global-styles/markdown-tweaks.scss
+++ b/frontend/global-styles/markdown-tweaks.scss
@@ -1,5 +1,5 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+/*!
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
diff --git a/frontend/global-styles/print.scss b/frontend/global-styles/print.scss
new file mode 100644
index 000000000..a99a905cd
--- /dev/null
+++ b/frontend/global-styles/print.scss
@@ -0,0 +1,73 @@
+/*!
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+@media print {
+  .heading-anchor, .footnote-backref {
+    display: none;
+  }
+
+  a[href] {
+    border-bottom: none;
+    text-decoration: none;
+
+    &::after {
+      content: ' (' attr(href) ')';
+      font-size: 0.75em;
+    }
+  }
+
+  nav.table-of-contents, sup.footnote-ref {
+    a[href]::after {
+      display: none;
+      content: '';
+    }
+  }
+
+  sup.footnote-ref {
+    a[href] {
+      color: unset;
+    }
+  }
+
+  abbr[title] {
+    border-bottom: none !important;
+    text-decoration: none !important;
+  }
+
+  mark {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  h1, h2, h3, h4, h5 {
+    break-after: avoid;
+    page-break-after: avoid;
+  }
+
+  table, figure, p, img, ul, ol, pre, code  {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+
+  @page {
+    padding: 1.5cm;
+    margin: 1cm auto;
+  }
+
+  .print-only {
+    display: inline;
+  }
+
+  hr {
+    background-color: transparent !important;
+    border-bottom: 2px solid #bbbcbf;
+  }
+}
+
+@media screen {
+  .print-only {
+    display: none;
+  }
+}
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 3734a7e01..1b40a936f 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -370,7 +370,8 @@
         }
       },
       "rawHtml": "Raw HTML",
-      "markdown-file": "Markdown file"
+      "markdown-file": "Markdown file",
+      "print": "Print"
     },
     "import": {
       "clipboard": "Clipboard",
@@ -971,5 +972,11 @@
         "example": "```markdown=12\nline1\n```\n```markdown=+\nline2\n```\n```markdown=\nline3\n```"
       }
     }
+  },
+  "print": {
+    "warning": {
+      "title": "Warning!",
+      "text": "To print this note, please use the print button in the export menu in the sidebar. Printing this page directly will not work as expected."
+    }
   }
 }
diff --git a/frontend/src/components/common/copyable/copy-to-clipboard-button/__snapshots__/copy-to-clipboard-button.spec.tsx.snap b/frontend/src/components/common/copyable/copy-to-clipboard-button/__snapshots__/copy-to-clipboard-button.spec.tsx.snap
index 12f2e8282..12b168954 100644
--- a/frontend/src/components/common/copyable/copy-to-clipboard-button/__snapshots__/copy-to-clipboard-button.spec.tsx.snap
+++ b/frontend/src/components/common/copyable/copy-to-clipboard-button/__snapshots__/copy-to-clipboard-button.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Copy to clipboard button show an error text if clipboard api isn't available 1`] = `
 <div>
   <button
-    class="btn btn-dark btn-sm"
+    class="copy-button btn btn-dark btn-sm"
     title="renderer.highlightCode.copyCode"
     type="button"
   >
@@ -16,7 +16,7 @@ exports[`Copy to clipboard button show an error text if clipboard api isn't avai
 <div>
   <button
     aria-describedby="copied_35a35a31-c259-48c4-b75a-8da99859dcdb"
-    class="btn btn-dark btn-sm"
+    class="copy-button btn btn-dark btn-sm"
     title="renderer.highlightCode.copyCode"
     type="button"
   >
@@ -28,7 +28,7 @@ exports[`Copy to clipboard button show an error text if clipboard api isn't avai
 exports[`Copy to clipboard button shows an error text if writing failed 1`] = `
 <div>
   <button
-    class="btn btn-dark btn-sm"
+    class="copy-button btn btn-dark btn-sm"
     title="renderer.highlightCode.copyCode"
     type="button"
   >
@@ -41,7 +41,7 @@ exports[`Copy to clipboard button shows an error text if writing failed 2`] = `
 <div>
   <button
     aria-describedby="copied_35a35a31-c259-48c4-b75a-8da99859dcdb"
-    class="btn btn-dark btn-sm"
+    class="copy-button btn btn-dark btn-sm"
     title="renderer.highlightCode.copyCode"
     type="button"
   >
@@ -53,7 +53,7 @@ exports[`Copy to clipboard button shows an error text if writing failed 2`] = `
 exports[`Copy to clipboard button shows an success text if writing succeeded 1`] = `
 <div>
   <button
-    class="btn btn-dark btn-sm"
+    class="copy-button btn btn-dark btn-sm"
     title="renderer.highlightCode.copyCode"
     type="button"
   >
@@ -66,7 +66,7 @@ exports[`Copy to clipboard button shows an success text if writing succeeded 2`]
 <div>
   <button
     aria-describedby="copied_35a35a31-c259-48c4-b75a-8da99859dcdb"
-    class="btn btn-dark btn-sm"
+    class="copy-button btn btn-dark btn-sm"
     title="renderer.highlightCode.copyCode"
     type="button"
   >
diff --git a/frontend/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx b/frontend/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx
index 42d3877cf..4b689f770 100644
--- a/frontend/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx
+++ b/frontend/src/components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button.tsx
@@ -12,6 +12,7 @@ import React, { Fragment, useRef } from 'react'
 import { Button } from 'react-bootstrap'
 import { Files as IconFiles } from 'react-bootstrap-icons'
 import type { Variant } from 'react-bootstrap/types'
+import styles from './style.module.scss'
 
 export interface CopyToClipboardButtonProps extends PropsWithDataCypressId {
   content: string
@@ -40,6 +41,7 @@ export const CopyToClipboardButton: React.FC<CopyToClipboardButtonProps> = ({
   return (
     <Fragment>
       <Button
+        className={styles['copy-button']}
         ref={button}
         size={size}
         variant={variant}
diff --git a/frontend/src/components/common/copyable/copy-to-clipboard-button/style.module.scss b/frontend/src/components/common/copyable/copy-to-clipboard-button/style.module.scss
new file mode 100644
index 000000000..c0b51ee42
--- /dev/null
+++ b/frontend/src/components/common/copyable/copy-to-clipboard-button/style.module.scss
@@ -0,0 +1,11 @@
+/*!
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+@media print {
+  .copy-button {
+    display: none;
+  }
+}
diff --git a/frontend/src/components/common/highlighted-code/highlighted-code.module.scss b/frontend/src/components/common/highlighted-code/highlighted-code.module.scss
index 5b1823f6c..bf4108927 100644
--- a/frontend/src/components/common/highlighted-code/highlighted-code.module.scss
+++ b/frontend/src/components/common/highlighted-code/highlighted-code.module.scss
@@ -55,3 +55,10 @@
     }
   }
 }
+
+@media print {
+  .code-highlighter {
+    border: black solid 1px;
+    border-radius: var(--bs-border-radius);
+  }
+}
diff --git a/frontend/src/components/common/renderer-iframe/hooks/use-force-render-page-url-on-iframe-load-callback.ts b/frontend/src/components/common/renderer-iframe/hooks/use-force-render-page-url-on-iframe-load-callback.ts
index f9712f7b7..87d349b9a 100644
--- a/frontend/src/components/common/renderer-iframe/hooks/use-force-render-page-url-on-iframe-load-callback.ts
+++ b/frontend/src/components/common/renderer-iframe/hooks/use-force-render-page-url-on-iframe-load-callback.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -27,7 +27,9 @@ export const useForceRenderPageUrlOnIframeLoadCallback = (
   const forcedUrl = useMemo(() => {
     const renderUrl = new URL(rendererBaseUrl)
     renderUrl.pathname += 'render'
-    renderUrl.searchParams.set('uuid', iframeCommunicator.getUuid())
+    if (iframeCommunicator !== undefined) {
+      renderUrl.searchParams.set('uuid', iframeCommunicator.getUuid())
+    }
     return renderUrl.toString()
   }, [iframeCommunicator, rendererBaseUrl])
   const redirectionInProgress = useRef<boolean>(false)
diff --git a/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx b/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx
index cf8fe8409..77ee1a7ef 100644
--- a/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx
+++ b/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -66,7 +66,7 @@ export const RendererIframe: React.FC<RendererIframeProps> = ({
   const [rendererReady, setRendererReady] = useState<boolean>(false)
   const frameReference = useRef<HTMLIFrameElement>(null)
   const iframeCommunicator = useEditorToRendererCommunicator()
-  const log = useMemo(() => new Logger(`RendererIframe[${iframeCommunicator.getUuid()}]`), [iframeCommunicator])
+  const log = useMemo(() => new Logger(`RendererIframe[${iframeCommunicator?.getUuid()}]`), [iframeCommunicator])
 
   const resetRendererReady = useCallback(() => {
     log.debug('Reset render status')
@@ -97,7 +97,7 @@ export const RendererIframe: React.FC<RendererIframeProps> = ({
 
   useEffect(() => {
     if (!rendererReady) {
-      iframeCommunicator.unsetMessageTarget()
+      iframeCommunicator?.unsetMessageTarget()
     }
   }, [iframeCommunicator, rendererReady])
 
@@ -141,9 +141,9 @@ export const RendererIframe: React.FC<RendererIframeProps> = ({
         log.error('Load triggered without content window')
         return
       }
-      iframeCommunicator.setMessageTarget(otherWindow)
-      iframeCommunicator.enableCommunication()
-      iframeCommunicator.sendMessageToOtherSide({
+      iframeCommunicator?.setMessageTarget(otherWindow)
+      iframeCommunicator?.enableCommunication()
+      iframeCommunicator?.sendMessageToOtherSide({
         type: CommunicationMessageType.SET_BASE_CONFIGURATION,
         baseConfiguration: {
           baseUrl: window.location.toString(),
@@ -177,11 +177,14 @@ export const RendererIframe: React.FC<RendererIframeProps> = ({
     <Fragment>
       {!rendererReady && showWaitSpinner && <WaitSpinner />}
       <iframe
+        id={'editor-renderer-iframe'}
         style={{ height: `${frameHeight}px` }}
         {...cypressId('documentIframe')}
         onLoad={onIframeLoad}
         title='render'
-        {...(isTestMode ? {} : { sandbox: 'allow-downloads allow-same-origin allow-scripts allow-popups' })}
+        {...(isTestMode
+          ? {}
+          : { sandbox: 'allow-downloads allow-same-origin allow-scripts allow-popups allow-modals' })}
         allowFullScreen={true}
         ref={frameReference}
         referrerPolicy={'no-referrer'}
diff --git a/frontend/src/components/common/renderer-iframe/style.module.scss b/frontend/src/components/common/renderer-iframe/style.module.scss
index ca6fa0c52..dc1bac939 100644
--- a/frontend/src/components/common/renderer-iframe/style.module.scss
+++ b/frontend/src/components/common/renderer-iframe/style.module.scss
@@ -7,3 +7,9 @@
 .frame {
   color-scheme: initial;
 }
+
+@media print {
+  .frame {
+    height: auto !important;
+  }
+}
diff --git a/frontend/src/components/editor-page/editor-page-content.tsx b/frontend/src/components/editor-page/editor-page-content.tsx
index 4e3de05d5..6346827b6 100644
--- a/frontend/src/components/editor-page/editor-page-content.tsx
+++ b/frontend/src/components/editor-page/editor-page-content.tsx
@@ -15,8 +15,11 @@ import { useUpdateLocalHistoryEntry } from './hooks/use-update-local-history-ent
 import { RendererPane } from './renderer-pane/renderer-pane'
 import { Sidebar } from './sidebar/sidebar'
 import { Splitter } from './splitter/splitter'
+import { PrintWarning } from './print-warning/print-warning'
 import React, { useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import './print.scss'
+import { usePrintKeyboardShortcut } from './hooks/use-print-keyboard-shortcut'
 
 export enum ScrollSource {
   EDITOR = 'editor',
@@ -28,7 +31,7 @@ export enum ScrollSource {
  */
 export const EditorPageContent: React.FC = () => {
   useTranslation()
-
+  usePrintKeyboardShortcut()
   useUpdateLocalHistoryEntry()
 
   const scrollSource = useRef<ScrollSource>(ScrollSource.EDITOR)
@@ -68,6 +71,7 @@ export const EditorPageContent: React.FC = () => {
       <ExtensionEventEmitterProvider>
         {editorExtensionComponents}
         <CommunicatorImageLightbox />
+        <PrintWarning />
         <div className={'flex-fill d-flex h-100 w-100 overflow-hidden flex-row'}>
           <Splitter
             left={leftPane}
diff --git a/frontend/src/components/editor-page/hooks/use-print-keyboard-shortcut.ts b/frontend/src/components/editor-page/hooks/use-print-keyboard-shortcut.ts
new file mode 100644
index 000000000..eccff72e8
--- /dev/null
+++ b/frontend/src/components/editor-page/hooks/use-print-keyboard-shortcut.ts
@@ -0,0 +1,38 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { usePrintIframe, usePrintSelf } from '../utils/print-iframe'
+import { useCallback, useEffect, useMemo } from 'react'
+
+/**
+ * Hook to listen for the print keyboard shortcut and print the content of the renderer iframe.
+ */
+export const usePrintKeyboardShortcut = (): void => {
+  const printCallbackOutside = usePrintIframe()
+  const printCallbackInside = usePrintSelf()
+  const isIframe = useMemo(() => window.top !== window.self, [])
+
+  const handlePrint = useCallback(
+    (event: KeyboardEvent): void => {
+      if (event.key === 'p' && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault()
+        if (isIframe) {
+          printCallbackInside()
+        } else {
+          printCallbackOutside()
+        }
+      }
+    },
+    [isIframe, printCallbackInside, printCallbackOutside]
+  )
+
+  useEffect(() => {
+    window.addEventListener('keydown', handlePrint)
+
+    return () => {
+      window.removeEventListener('keydown', handlePrint)
+    }
+  }, [handlePrint])
+}
diff --git a/frontend/src/components/editor-page/print-warning/print-warning.tsx b/frontend/src/components/editor-page/print-warning/print-warning.tsx
new file mode 100644
index 000000000..0a4d9cb7c
--- /dev/null
+++ b/frontend/src/components/editor-page/print-warning/print-warning.tsx
@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+import { Alert } from 'react-bootstrap'
+import { Trans } from 'react-i18next'
+
+/**
+ * Renders a warning when the user tries to open the print dialog from the browser.
+ */
+export const PrintWarning: React.FC = () => {
+  return (
+    <div className={'d-none d-print-block'}>
+      <Alert variant={'warning'}>
+        <Alert.Heading>
+          <Trans i18nKey={'print.warning.title'} />
+        </Alert.Heading>
+        <p>
+          <Trans i18nKey={'print.warning.text'} />
+        </p>
+      </Alert>
+    </div>
+  )
+}
diff --git a/frontend/src/components/editor-page/print.scss b/frontend/src/components/editor-page/print.scss
new file mode 100644
index 000000000..a2e4611ff
--- /dev/null
+++ b/frontend/src/components/editor-page/print.scss
@@ -0,0 +1,15 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+@media print {
+  body {
+    & > div.d-flex {
+      nav, #editor-edit-pane, #editor-splitter, #editor-sidebar, #editor-view-pane {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/frontend/src/components/editor-page/render-context/editor-to-renderer-communicator-context-provider.tsx b/frontend/src/components/editor-page/render-context/editor-to-renderer-communicator-context-provider.tsx
index 81ea7b732..39ca241ba 100644
--- a/frontend/src/components/editor-page/render-context/editor-to-renderer-communicator-context-provider.tsx
+++ b/frontend/src/components/editor-page/render-context/editor-to-renderer-communicator-context-provider.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -10,7 +10,9 @@ import { EditorToRendererCommunicator } from '../../render-page/window-post-mess
 import type { PropsWithChildren } from 'react'
 import React, { createContext, useContext, useEffect, useMemo } from 'react'
 import { v4 as uuid } from 'uuid'
+import { Logger } from '../../../utils/logger'
 
+const logger = new Logger('EditorToRendererCommunicator')
 const EditorToRendererCommunicatorContext = createContext<EditorToRendererCommunicator | undefined>(undefined)
 
 /**
@@ -19,10 +21,11 @@ const EditorToRendererCommunicatorContext = createContext<EditorToRendererCommun
  * @return the received communicator
  * @throws {Error} if no communicator was received
  */
-export const useEditorToRendererCommunicator: () => EditorToRendererCommunicator = () => {
+export const useEditorToRendererCommunicator = (): EditorToRendererCommunicator | undefined => {
   const communicatorFromContext = useContext(EditorToRendererCommunicatorContext)
   if (!communicatorFromContext) {
-    throw new Error('No editor-to-renderer-iframe-communicator received. Did you forget to use the provider component?')
+    logger.error('No editor-to-renderer-iframe-communicator received. Did you forget to use the provider component?')
+    return undefined
   }
   return communicatorFromContext
 }
diff --git a/frontend/src/components/editor-page/sidebar/sidebar.tsx b/frontend/src/components/editor-page/sidebar/sidebar.tsx
index 657983eb4..fb4f93f4e 100644
--- a/frontend/src/components/editor-page/sidebar/sidebar.tsx
+++ b/frontend/src/components/editor-page/sidebar/sidebar.tsx
@@ -43,7 +43,7 @@ export const Sidebar: React.FC = () => {
   const selectionIsNotNone = selectedMenu !== DocumentSidebarMenuSelection.NONE
 
   return (
-    <div className={styles['slide-sidebar']}>
+    <div className={styles['slide-sidebar']} id={'editor-sidebar'}>
       <div ref={sideBarRef} className={`${styles['sidebar-inner']} ${selectionIsNotNone ? styles['show'] : ''}`}>
         <UsersOnlineSidebarMenu
           menuId={DocumentSidebarMenuSelection.USERS_ONLINE}
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-sidebar-menu/entries/export-print-sidebar-entry.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-sidebar-menu/entries/export-print-sidebar-entry.tsx
new file mode 100644
index 000000000..314f6fbf5
--- /dev/null
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-sidebar-menu/entries/export-print-sidebar-entry.tsx
@@ -0,0 +1,24 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { cypressId } from '../../../../../../utils/cypress-attribute'
+import { SidebarButton } from '../../../sidebar-button/sidebar-button'
+import React from 'react'
+import { PrinterFill as IconPrinterFill } from 'react-bootstrap-icons'
+import { Trans } from 'react-i18next'
+import { usePrintIframe } from '../../../../utils/print-iframe'
+
+/**
+ * Editor sidebar entry for exporting the markdown content into a local file.
+ */
+export const ExportPrintSidebarEntry: React.FC = () => {
+  const printIframe = usePrintIframe()
+
+  return (
+    <SidebarButton {...cypressId('menu-export-print')} onClick={printIframe} icon={IconPrinterFill}>
+      <Trans i18nKey={'editor.export.print'} />
+    </SidebarButton>
+  )
+}
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-sidebar-menu/export-sidebar-menu.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-sidebar-menu/export-sidebar-menu.tsx
index d6b928d83..58983cde6 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-sidebar-menu/export-sidebar-menu.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-sidebar-menu/export-sidebar-menu.tsx
@@ -20,6 +20,7 @@ import { concatCssClasses } from '../../../../../utils/concat-css-classes'
 import styles from '../../sidebar-button/sidebar-button.module.scss'
 import { ExportGistSidebarEntry } from './entries/export-gist-sidebar-entry/export-gist-sidebar-entry'
 import { ExportGitlabSnippetSidebarEntry } from './entries/export-gitlab-snippet-sidebar-entry/export-gitlab-snippet-sidebar-entry'
+import { ExportPrintSidebarEntry } from './entries/export-print-sidebar-entry'
 
 /**
  * Renders the export menu for the sidebar.
@@ -53,13 +54,15 @@ export const ExportSidebarMenu: React.FC<SpecificSidebarMenuProps> = ({
         <Trans i18nKey={'editor.documentBar.export'} />
       </SidebarButton>
       <SidebarMenu expand={expand}>
-        <ExportGistSidebarEntry />
-        <ExportGitlabSnippetSidebarEntry />
+        <ExportPrintSidebarEntry />
         <ExportMarkdownSidebarEntry />
-
         <SidebarButton icon={IconFileCode} disabled={true}>
           HTML
         </SidebarButton>
+
+        <ExportGistSidebarEntry />
+        <ExportGitlabSnippetSidebarEntry />
+
         <SidebarButton icon={IconFileCode} disabled={true}>
           <Trans i18nKey='editor.export.rawHtml' />
         </SidebarButton>
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-word-count.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-word-count.tsx
index 8e9781c43..c2bac2af8 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-word-count.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/note-info-sidebar-menu/note-info-line/note-info-line-word-count.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -35,7 +35,7 @@ export const NoteInfoLineWordCount: React.FC<NoteInfoLineWordCountProps> = ({ vi
   const rendererReady = useApplicationState((state) => state.rendererStatus.rendererReady)
   useEffect(() => {
     if (rendererReady && visible) {
-      editorToRendererCommunicator.sendMessageToOtherSide({ type: CommunicationMessageType.GET_WORD_COUNT })
+      editorToRendererCommunicator?.sendMessageToOtherSide({ type: CommunicationMessageType.GET_WORD_COUNT })
     }
   }, [editorToRendererCommunicator, rendererReady, visible])
 
diff --git a/frontend/src/components/editor-page/splitter/__snapshots__/splitter.spec.tsx.snap b/frontend/src/components/editor-page/splitter/__snapshots__/splitter.spec.tsx.snap
index e1697d629..32d3225f8 100644
--- a/frontend/src/components/editor-page/splitter/__snapshots__/splitter.spec.tsx.snap
+++ b/frontend/src/components/editor-page/splitter/__snapshots__/splitter.spec.tsx.snap
@@ -7,6 +7,7 @@ exports[`Splitter resize can change size with mouse 1`] = `
   >
     <div
       class="left"
+      id="editor-edit-pane"
       style="width: calc(50% - 5px);"
     >
       <div
@@ -18,6 +19,7 @@ exports[`Splitter resize can change size with mouse 1`] = `
     <div
       class="divider"
       data-testid="splitter-divider"
+      id="editor-splitter"
     >
       <div
         class="middle"
@@ -47,6 +49,7 @@ exports[`Splitter resize can change size with mouse 1`] = `
     </div>
     <div
       class="right"
+      id="editor-view-pane"
       style="width: calc(100% - 50%);"
     >
       <div
@@ -66,6 +69,7 @@ exports[`Splitter resize can change size with touch 1`] = `
   >
     <div
       class="left"
+      id="editor-edit-pane"
       style="width: calc(50% - 5px);"
     >
       <div
@@ -77,6 +81,7 @@ exports[`Splitter resize can change size with touch 1`] = `
     <div
       class="divider"
       data-testid="splitter-divider"
+      id="editor-splitter"
     >
       <div
         class="middle"
@@ -106,6 +111,7 @@ exports[`Splitter resize can change size with touch 1`] = `
     </div>
     <div
       class="right"
+      id="editor-view-pane"
       style="width: calc(100% - 50%);"
     >
       <div
@@ -125,6 +131,7 @@ exports[`Splitter resize can change size with touch 2`] = `
   >
     <div
       class="left"
+      id="editor-edit-pane"
       style="width: calc(50% - 5px);"
     >
       <div
@@ -136,6 +143,7 @@ exports[`Splitter resize can change size with touch 2`] = `
     <div
       class="divider"
       data-testid="splitter-divider"
+      id="editor-splitter"
     >
       <div
         class="middle"
@@ -165,6 +173,7 @@ exports[`Splitter resize can change size with touch 2`] = `
     </div>
     <div
       class="right"
+      id="editor-view-pane"
       style="width: calc(100% - 50%);"
     >
       <div
@@ -184,6 +193,7 @@ exports[`Splitter resize can change size with touch 3`] = `
   >
     <div
       class="left"
+      id="editor-edit-pane"
       style="width: calc(50% - 5px);"
     >
       <div
@@ -195,6 +205,7 @@ exports[`Splitter resize can change size with touch 3`] = `
     <div
       class="divider"
       data-testid="splitter-divider"
+      id="editor-splitter"
     >
       <div
         class="middle"
@@ -224,6 +235,7 @@ exports[`Splitter resize can change size with touch 3`] = `
     </div>
     <div
       class="right"
+      id="editor-view-pane"
       style="width: calc(100% - 50%);"
     >
       <div
@@ -243,6 +255,7 @@ exports[`Splitter resize can change size with touch 4`] = `
   >
     <div
       class="left"
+      id="editor-edit-pane"
       style="width: calc(50% - 5px);"
     >
       <div
@@ -254,6 +267,7 @@ exports[`Splitter resize can change size with touch 4`] = `
     <div
       class="divider"
       data-testid="splitter-divider"
+      id="editor-splitter"
     >
       <div
         class="middle"
@@ -283,6 +297,7 @@ exports[`Splitter resize can change size with touch 4`] = `
     </div>
     <div
       class="right"
+      id="editor-view-pane"
       style="width: calc(100% - 50%);"
     >
       <div
diff --git a/frontend/src/components/editor-page/splitter/split-divider/split-divider.tsx b/frontend/src/components/editor-page/splitter/split-divider/split-divider.tsx
index 433445057..0389901b1 100644
--- a/frontend/src/components/editor-page/splitter/split-divider/split-divider.tsx
+++ b/frontend/src/components/editor-page/splitter/split-divider/split-divider.tsx
@@ -60,7 +60,7 @@ export const SplitDivider: React.FC<SplitDividerProps> = ({
   }, [dividerButtonsShift, forceOpen])
 
   return (
-    <div className={styles.divider} {...testId('splitter-divider')}>
+    <div className={styles.divider} {...testId('splitter-divider')} id={'editor-splitter'}>
       <div className={className}>
         <div className={styles.buttons}>
           <Button variant={focusLeft ? 'secondary' : 'light'} onClick={onLeftButtonClick}>
diff --git a/frontend/src/components/editor-page/splitter/splitter.tsx b/frontend/src/components/editor-page/splitter/splitter.tsx
index f232ef2bb..6936ac0a2 100644
--- a/frontend/src/components/editor-page/splitter/splitter.tsx
+++ b/frontend/src/components/editor-page/splitter/splitter.tsx
@@ -150,7 +150,10 @@ export const Splitter: React.FC<SplitterProps> = ({ additionalContainerClassName
           onTouchEnd={onStopResizing}
           onMouseUp={onStopResizing}></div>
       )}
-      <div className={styles['left']} style={{ width: `calc(${adjustedRelativeSplitValue}% - 5px)` }}>
+      <div
+        id={'editor-edit-pane'}
+        className={styles['left']}
+        style={{ width: `calc(${adjustedRelativeSplitValue}% - 5px)` }}>
         <div className={styles['inner']}>{left}</div>
       </div>
       <SplitDivider
@@ -162,7 +165,10 @@ export const Splitter: React.FC<SplitterProps> = ({ additionalContainerClassName
         focusRight={relativeSplitValue > 100 - SNAP_PERCENTAGE}
         dividerButtonsShift={dividerButtonsShift}
       />
-      <div className={styles['right']} style={{ width: `calc(100% - ${adjustedRelativeSplitValue}%)` }}>
+      <div
+        id={'editor-view-pane'}
+        className={styles['right']}
+        style={{ width: `calc(100% - ${adjustedRelativeSplitValue}%)` }}>
         <div className={styles['inner']}>{right}</div>
       </div>
     </div>
diff --git a/frontend/src/components/editor-page/utils/print-iframe.ts b/frontend/src/components/editor-page/utils/print-iframe.ts
new file mode 100644
index 000000000..1bbffd5fa
--- /dev/null
+++ b/frontend/src/components/editor-page/utils/print-iframe.ts
@@ -0,0 +1,58 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * 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 { setPrintMode } from '../../../redux/print-mode/methods'
+import { useEditorToRendererCommunicator } from '../render-context/editor-to-renderer-communicator-context-provider'
+import { CommunicationMessageType } from '../../render-page/window-post-message-communicator/rendering-message'
+
+const TIMEOUT_BEFORE_PRINT = 25
+
+/**
+ * Prints the content of the renderer iframe.
+ */
+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
+      })
+    }, TIMEOUT_BEFORE_PRINT)
+  }, [rendererReady, iframeCommunicator])
+}
+
+/**
+ * Print the content of the iframe from within the iframe.
+ *
+ * This should only be called if you're sure you are in the iframe e.g. `window.top === window.self`
+ */
+export const usePrintSelf = () => {
+  return useCallback(() => {
+    setPrintMode(true)
+    setTimeout(() => {
+      window.print()
+      setPrintMode(false)
+    }, TIMEOUT_BEFORE_PRINT)
+  }, [])
+}
diff --git a/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.module.scss b/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.module.scss
index fc79aad30..c73795e82 100644
--- a/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.module.scss
+++ b/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.module.scss
@@ -1,11 +1,16 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+/*!
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-.click-shield {
+@media print {
+  .click-shield {
+    display: none !important;
+  }
+}
 
+.click-shield {
   position: relative;
   cursor: pointer;
   width: 100%;
diff --git a/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx b/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx
index 37755daf3..1abd7110a 100644
--- a/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx
+++ b/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -10,9 +10,11 @@ import { ProxyImageFrame } from '../../extensions/image/proxy-image-frame'
 import styles from './click-shield.module.scss'
 import type { Property } from 'csstype'
 import type { PropsWithChildren } from 'react'
+import { Fragment } from 'react'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import type { Icon } from 'react-bootstrap-icons'
 import { Trans, useTranslation } from 'react-i18next'
+import { PrintLink } from './print-link'
 
 const log = new Logger('OneClickEmbedding')
 
@@ -23,6 +25,7 @@ export interface ClickShieldProps extends PropsWithChildren<PropsWithDataCypress
   targetDescription: string
   containerClassName?: string
   fallbackBackgroundColor?: Property.BackgroundColor
+  fallbackLink: string
 }
 
 /**
@@ -44,6 +47,7 @@ export const ClickShield: React.FC<ClickShieldProps> = ({
   targetDescription,
   hoverIcon,
   fallbackBackgroundColor,
+  fallbackLink,
   ...props
 }) => {
   const [showChildren, setShowChildren] = useState(false)
@@ -114,23 +118,29 @@ export const ClickShield: React.FC<ClickShieldProps> = ({
 
   if (showChildren) {
     return (
-      <span className={containerClassName} {...cypressId(props['data-cypress-id'])}>
-        {children}
-      </span>
+      <Fragment>
+        <span className={containerClassName} {...cypressId(props['data-cypress-id'])}>
+          {children}
+        </span>
+        <PrintLink link={fallbackLink} />
+      </Fragment>
     )
   }
 
   return (
-    <span className={containerClassName} {...cypressId(props['data-cypress-id'])}>
-      <span className={`${styles['click-shield']} d-inline-block ratio ratio-16x9`} onClick={doShowChildren}>
-        {previewBackground}
-        <span className={`${styles['preview-hover']}`}>
-          <span>
-            <Trans i18nKey={'renderer.clickShield.previewHoverText'} values={hoverTextTranslationValues} />
+    <Fragment>
+      <span className={containerClassName} {...cypressId(props['data-cypress-id'])}>
+        <span className={`d-inline-block ratio ratio-16x9 ${styles['click-shield']}`} onClick={doShowChildren}>
+          {previewBackground}
+          <span className={`${styles['preview-hover']}`}>
+            <span>
+              <Trans i18nKey={'renderer.clickShield.previewHoverText'} values={hoverTextTranslationValues} />
+            </span>
+            {icon}
           </span>
-          {icon}
         </span>
       </span>
-    </span>
+      <PrintLink link={fallbackLink} />
+    </Fragment>
   )
 }
diff --git a/frontend/src/components/markdown-renderer/replace-components/click-shield/print-link.tsx b/frontend/src/components/markdown-renderer/replace-components/click-shield/print-link.tsx
new file mode 100644
index 000000000..08b9a48dd
--- /dev/null
+++ b/frontend/src/components/markdown-renderer/replace-components/click-shield/print-link.tsx
@@ -0,0 +1,26 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+
+export interface PrintLinkProps {
+  link: string
+}
+
+/**
+ * Renders a link that is only visible in print-mode.
+ * This is required as a fallback for clickshield elements.
+ * @param link The link to render.
+ */
+export const PrintLink: React.FC<PrintLinkProps> = ({ link }) => {
+  return (
+    <p>
+      <a className={'print-only'} href={link}>
+        {link}
+      </a>
+    </p>
+  )
+}
diff --git a/frontend/src/components/render-page/markdown-toc-button/markdown-toc-button.module.scss b/frontend/src/components/render-page/markdown-toc-button/markdown-toc-button.module.scss
index c54f12886..74e1a3d5c 100644
--- a/frontend/src/components/render-page/markdown-toc-button/markdown-toc-button.module.scss
+++ b/frontend/src/components/render-page/markdown-toc-button/markdown-toc-button.module.scss
@@ -15,3 +15,9 @@
     right: 0;
   }
 }
+
+@media print {
+  .markdown-toc-sidebar-button {
+    display: none;
+  }
+}
diff --git a/frontend/src/components/render-page/render-page-content.tsx b/frontend/src/components/render-page/render-page-content.tsx
index b9789840f..38e851c5d 100644
--- a/frontend/src/components/render-page/render-page-content.tsx
+++ b/frontend/src/components/render-page/render-page-content.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -17,6 +17,8 @@ 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'
+import { usePrintKeyboardShortcut } from '../editor-page/hooks/use-print-keyboard-shortcut'
 
 /**
  * Wraps the markdown rendering in an iframe.
@@ -78,6 +80,15 @@ export const RenderPageContent: React.FC = () => {
     }, [communicator])
   )
 
+  useRendererReceiveHandler(
+    CommunicationMessageType.SET_PRINT_MODE,
+    useCallback(({ printMode }) => {
+      setPrintMode(printMode)
+    }, [])
+  )
+
+  usePrintKeyboardShortcut()
+
   const onMakeScrollSource = useCallback(() => {
     sendScrolling.current = true
     communicator.sendMessageToOtherSide({
diff --git a/frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx b/frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx
index a659b8e6a..4bfa89e16 100644
--- a/frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx
+++ b/frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx
@@ -76,7 +76,7 @@ export const DocumentMarkdownRenderer: React.FC<DocumentMarkdownRendererProps> =
 
   return (
     <div
-      className={`${styles.document} vh-100`}
+      className={`vh-100 ${styles.document}`}
       ref={internalDocumentRenderPaneRef}
       onScroll={onUserScroll}
       data-scroll-element={true}
diff --git a/frontend/src/components/render-page/renderers/document/markdown-document.module.scss b/frontend/src/components/render-page/renderers/document/markdown-document.module.scss
index c8c180630..650e51360 100644
--- a/frontend/src/components/render-page/renderers/document/markdown-document.module.scss
+++ b/frontend/src/components/render-page/renderers/document/markdown-document.module.scss
@@ -27,3 +27,10 @@
     width: 900px;
   }
 }
+
+@media print {
+  .document {
+    height: auto !important;
+    color: #000;
+  }
+}
diff --git a/frontend/src/components/render-page/window-post-message-communicator/hooks/use-editor-receive-handler.ts b/frontend/src/components/render-page/window-post-message-communicator/hooks/use-editor-receive-handler.ts
index 3dfa75267..0a5837332 100644
--- a/frontend/src/components/render-page/window-post-message-communicator/hooks/use-editor-receive-handler.ts
+++ b/frontend/src/components/render-page/window-post-message-communicator/hooks/use-editor-receive-handler.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -23,7 +23,7 @@ export const useEditorReceiveHandler = <R extends RendererToEditorMessageType>(
     if (!handler) {
       return
     }
-    editorToRendererCommunicator.on(messageType, handler)
-    return () => editorToRendererCommunicator.off(messageType, handler)
+    editorToRendererCommunicator?.on(messageType, handler)
+    return () => editorToRendererCommunicator?.off(messageType, handler)
   }, [editorToRendererCommunicator, handler, messageType])
 }
diff --git a/frontend/src/components/render-page/window-post-message-communicator/hooks/use-send-to-renderer.ts b/frontend/src/components/render-page/window-post-message-communicator/hooks/use-send-to-renderer.ts
index f6665d9f6..cb8785e91 100644
--- a/frontend/src/components/render-page/window-post-message-communicator/hooks/use-send-to-renderer.ts
+++ b/frontend/src/components/render-page/window-post-message-communicator/hooks/use-send-to-renderer.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -22,7 +22,7 @@ export const useSendToRenderer = (
 
   useEffect(() => {
     if (message && rendererReady) {
-      iframeCommunicator.sendMessageToOtherSide(message)
+      iframeCommunicator?.sendMessageToOtherSide(message)
     }
   }, [iframeCommunicator, message, rendererReady])
 }
diff --git a/frontend/src/components/render-page/window-post-message-communicator/rendering-message.ts b/frontend/src/components/render-page/window-post-message-communicator/rendering-message.ts
index 919989266..a06fd3ae1 100644
--- a/frontend/src/components/render-page/window-post-message-communicator/rendering-message.ts
+++ b/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
diff --git a/frontend/src/extensions/essential-app-extensions/iframe-capsule/iframe-capsule-replacer.tsx b/frontend/src/extensions/essential-app-extensions/iframe-capsule/iframe-capsule-replacer.tsx
index b4110de90..a1afc4ff6 100644
--- a/frontend/src/extensions/essential-app-extensions/iframe-capsule/iframe-capsule-replacer.tsx
+++ b/frontend/src/extensions/essential-app-extensions/iframe-capsule/iframe-capsule-replacer.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -30,8 +30,9 @@ export class IframeCapsuleReplacer extends ComponentReplacer {
       <ClickShield
         hoverIcon={IconGlobe}
         targetDescription={node.attribs.src}
+        fallbackLink={node.attribs.src}
         data-cypress-id={'iframe-capsule-click-shield'}>
-        {nativeRenderer()}
+        <div className={'d-print-none'}>{nativeRenderer()}</div>
       </ClickShield>
     )
   }
diff --git a/frontend/src/extensions/external-lib-app-extensions/abcjs/abc.module.scss b/frontend/src/extensions/external-lib-app-extensions/abcjs/abc.module.scss
index 2b9295b29..2c4367a33 100644
--- a/frontend/src/extensions/external-lib-app-extensions/abcjs/abc.module.scss
+++ b/frontend/src/extensions/external-lib-app-extensions/abcjs/abc.module.scss
@@ -1,10 +1,9 @@
 /*!
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-
 .abcjs-score {
   :global(.markdown-body) & {
     overflow-x: auto !important;
@@ -19,3 +18,16 @@
     font-family: $font-family-base;
   }
 }
+
+@media print {
+  .abcjs-score {
+    :global(.markdown-body) & {
+      width: 100%;
+      height: auto;
+      overflow-x: hidden !important;
+    }
+    & > svg {
+      max-width: 100%;
+    }
+  }
+}
diff --git a/frontend/src/extensions/external-lib-app-extensions/asciinema/__snapshots__/asciinema-frame.spec.tsx.snap b/frontend/src/extensions/external-lib-app-extensions/asciinema/__snapshots__/asciinema-frame.spec.tsx.snap
index c1938b20d..5635b4302 100644
--- a/frontend/src/extensions/external-lib-app-extensions/asciinema/__snapshots__/asciinema-frame.spec.tsx.snap
+++ b/frontend/src/extensions/external-lib-app-extensions/asciinema/__snapshots__/asciinema-frame.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`Asciinema renders a click shield 1`] = `
   <span>
     This is a click shield for 
     <span
-      class="ratio ratio-16x9"
+      class="ratio ratio-16x9 d-print-none"
     >
       <iframe
         allowfullscreen=""
diff --git a/frontend/src/extensions/external-lib-app-extensions/asciinema/asciinema-frame.tsx b/frontend/src/extensions/external-lib-app-extensions/asciinema/asciinema-frame.tsx
index 9f17fef77..e31fdf326 100644
--- a/frontend/src/extensions/external-lib-app-extensions/asciinema/asciinema-frame.tsx
+++ b/frontend/src/extensions/external-lib-app-extensions/asciinema/asciinema-frame.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -21,8 +21,9 @@ export const AsciinemaFrame: React.FC<IdProps> = ({ id }) => {
       fallbackPreviewImageUrl={`https://asciinema.org/a/${id}.png`}
       fallbackBackgroundColor={'#d40000'}
       containerClassName={''}
+      fallbackLink={`https://asciinema.org/a/${id}`}
       data-cypress-id={'click-shield-asciinema'}>
-      <span className={'ratio ratio-16x9'}>
+      <span className={'ratio ratio-16x9 d-print-none'}>
         <iframe
           allowFullScreen={true}
           className=''
diff --git a/frontend/src/extensions/external-lib-app-extensions/asciinema/replace-asciinema-link.ts b/frontend/src/extensions/external-lib-app-extensions/asciinema/replace-asciinema-link.ts
index ea3640cda..213dd629b 100644
--- a/frontend/src/extensions/external-lib-app-extensions/asciinema/replace-asciinema-link.ts
+++ b/frontend/src/extensions/external-lib-app-extensions/asciinema/replace-asciinema-link.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
diff --git a/frontend/src/extensions/external-lib-app-extensions/gist/gist-frame.tsx b/frontend/src/extensions/external-lib-app-extensions/gist/gist-frame.tsx
index 65b552245..785db416a 100644
--- a/frontend/src/extensions/external-lib-app-extensions/gist/gist-frame.tsx
+++ b/frontend/src/extensions/external-lib-app-extensions/gist/gist-frame.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -31,9 +31,11 @@ export const GistFrame: React.FC<IdProps> = ({ id }) => {
       fallbackBackgroundColor={'#161b22'}
       hoverIcon={IconGithub}
       targetDescription={'GitHub Gist'}
+      fallbackLink={`https://gist.github.com/${id}`}
       data-cypress-id={'click-shield-gist'}>
       <iframe
         sandbox=''
+        className={'d-print-none'}
         {...cypressId('gh-gist')}
         width='100%'
         height={`${frameHeight}px`}
@@ -41,7 +43,7 @@ export const GistFrame: React.FC<IdProps> = ({ id }) => {
         title={`gist ${id}`}
         src={`https://gist.github.com/${id}.pibb`}
       />
-      <span className={styles['gist-resizer-row']}>
+      <span className={`${styles['gist-resizer-row']} d-print-none`}>
         <span className={styles['gist-resizer']} onMouseDown={onStart} onTouchStart={onStart} />
       </span>
     </ClickShield>
diff --git a/frontend/src/extensions/external-lib-app-extensions/vimeo/__snapshots__/vimeo-frame.spec.tsx.snap b/frontend/src/extensions/external-lib-app-extensions/vimeo/__snapshots__/vimeo-frame.spec.tsx.snap
index 3a35c0622..d26ad9368 100644
--- a/frontend/src/extensions/external-lib-app-extensions/vimeo/__snapshots__/vimeo-frame.spec.tsx.snap
+++ b/frontend/src/extensions/external-lib-app-extensions/vimeo/__snapshots__/vimeo-frame.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`VimeoFrame renders a click shield 1`] = `
   <span>
     This is a click shield for 
     <span
-      class="ratio ratio-16x9 d-inline-block"
+      class="ratio ratio-16x9 d-inline-block d-print-none"
     >
       <iframe
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
diff --git a/frontend/src/extensions/external-lib-app-extensions/vimeo/vimeo-frame.tsx b/frontend/src/extensions/external-lib-app-extensions/vimeo/vimeo-frame.tsx
index 43a29cc91..0f7579b7d 100644
--- a/frontend/src/extensions/external-lib-app-extensions/vimeo/vimeo-frame.tsx
+++ b/frontend/src/extensions/external-lib-app-extensions/vimeo/vimeo-frame.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -42,9 +42,10 @@ export const VimeoFrame: React.FC<IdProps> = ({ id }) => {
       hoverIcon={IconVimeo}
       targetDescription={'Vimeo'}
       onImageFetch={getPreviewImageLink}
+      fallbackLink={`https://vimeo.com/${id}`}
       fallbackBackgroundColor={'#00adef'}
       data-cypress-id={'click-shield-vimeo'}>
-      <span className={'ratio ratio-16x9 d-inline-block'}>
+      <span className={'ratio ratio-16x9 d-inline-block d-print-none'}>
         <iframe
           title={`vimeo video of ${id}`}
           src={`https://player.vimeo.com/video/${id}?autoplay=1`}
diff --git a/frontend/src/extensions/external-lib-app-extensions/youtube/__snapshots__/youtube-frame.spec.tsx.snap b/frontend/src/extensions/external-lib-app-extensions/youtube/__snapshots__/youtube-frame.spec.tsx.snap
index a0521e209..14fdeeb21 100644
--- a/frontend/src/extensions/external-lib-app-extensions/youtube/__snapshots__/youtube-frame.spec.tsx.snap
+++ b/frontend/src/extensions/external-lib-app-extensions/youtube/__snapshots__/youtube-frame.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`YoutubeFrame renders a click shield 1`] = `
   <span>
     This is a click shield for 
     <span
-      class="ratio ratio-16x9 d-inline-block"
+      class="ratio ratio-16x9 d-inline-block d-print-none"
     >
       <iframe
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
diff --git a/frontend/src/extensions/external-lib-app-extensions/youtube/youtube-frame.tsx b/frontend/src/extensions/external-lib-app-extensions/youtube/youtube-frame.tsx
index 6e9b0d713..e4cb2b0c5 100644
--- a/frontend/src/extensions/external-lib-app-extensions/youtube/youtube-frame.tsx
+++ b/frontend/src/extensions/external-lib-app-extensions/youtube/youtube-frame.tsx
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -19,9 +19,10 @@ export const YouTubeFrame: React.FC<IdProps> = ({ id }) => {
       hoverIcon={IconYoutube}
       targetDescription={'YouTube'}
       fallbackPreviewImageUrl={`https://i.ytimg.com/vi/${id}/maxresdefault.jpg`}
+      fallbackLink={`https://www.youtube.com/watch?v=${id}`}
       fallbackBackgroundColor={'#ff0000'}
       data-cypress-id={'click-shield-youtube'}>
-      <span className={'ratio ratio-16x9 d-inline-block'}>
+      <span className={'ratio ratio-16x9 d-inline-block d-print-none'}>
         <iframe
           title={`youtube video of ${id}`}
           src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1`}
diff --git a/frontend/src/hooks/dark-mode/use-dark-mode-state.ts b/frontend/src/hooks/dark-mode/use-dark-mode-state.ts
index 88c7e69b2..f3afce208 100644
--- a/frontend/src/hooks/dark-mode/use-dark-mode-state.ts
+++ b/frontend/src/hooks/dark-mode/use-dark-mode-state.ts
@@ -1,11 +1,12 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { DarkModePreference } from '../../redux/dark-mode/types'
 import { useApplicationState } from '../common/use-application-state'
 import useMediaQuery from '@restart/hooks/useMediaQuery'
+import { useMemo } from 'react'
 
 /**
  * Uses the user settings and the browser preference to determine if dark mode should be used.
@@ -14,7 +15,14 @@ import useMediaQuery from '@restart/hooks/useMediaQuery'
  */
 export const useDarkModeState = (): boolean => {
   const preference = useApplicationState((state) => state.darkMode.darkModePreference)
+  const printModeEnabled = useApplicationState((state) => state.printMode)
   const isBrowserPreferringDark = useMediaQuery('(prefers-color-scheme: dark)')
 
-  return preference === DarkModePreference.DARK || (preference === DarkModePreference.AUTO && isBrowserPreferringDark)
+  return useMemo(() => {
+    if (printModeEnabled) {
+      return false
+    }
+
+    return preference === DarkModePreference.DARK || (preference === DarkModePreference.AUTO && isBrowserPreferringDark)
+  }, [preference, printModeEnabled, isBrowserPreferringDark])
 }
diff --git a/frontend/src/redux/index.ts b/frontend/src/redux/index.ts
index ad9bed194..1a7f332e3 100644
--- a/frontend/src/redux/index.ts
+++ b/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
 })
diff --git a/frontend/src/redux/print-mode/initial-state.ts b/frontend/src/redux/print-mode/initial-state.ts
new file mode 100644
index 000000000..1341d6099
--- /dev/null
+++ b/frontend/src/redux/print-mode/initial-state.ts
@@ -0,0 +1,6 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+export const initialState: boolean = false
diff --git a/frontend/src/redux/print-mode/methods.ts b/frontend/src/redux/print-mode/methods.ts
new file mode 100644
index 000000000..3b595982d
--- /dev/null
+++ b/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)
+}
diff --git a/frontend/src/redux/print-mode/slice.ts b/frontend/src/redux/print-mode/slice.ts
new file mode 100644
index 000000000..b288febcc
--- /dev/null
+++ b/frontend/src/redux/print-mode/slice.ts
@@ -0,0 +1,21 @@
+/*
+ * 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'
+
+const printModeSlice = createSlice({
+  name: 'printMode',
+  initialState,
+  reducers: {
+    setPrintMode: (state, action: PayloadAction<boolean>) => {
+      state = action.payload
+    }
+  }
+})
+
+export const printModeActionsCreator = printModeSlice.actions
+export const printModeReducer = printModeSlice.reducer
diff --git a/frontend/src/test-utils/mock-app-state.ts b/frontend/src/test-utils/mock-app-state.ts
index 70fb1a1ce..3c8ef85fd 100644
--- a/frontend/src/test-utils/mock-app-state.ts
+++ b/frontend/src/test-utils/mock-app-state.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -32,6 +32,7 @@ export const mockAppState = (state?: DeepPartial<ApplicationState>) => {
         ...initialStateDarkMode,
         ...state?.darkMode
       },
+      printMode: false,
       editorConfig: {
         ...initialStateEditorConfig,
         ...state?.editorConfig