From 8a1b29fddc443b89b84234616ea0190c6479ca7d 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>
---
 frontend/locales/en.json                      |  6 +++++
 .../renderer-iframe/renderer-iframe.tsx       |  5 +++-
 .../common/renderer-iframe/style.module.scss  |  6 +++++
 .../editor-page/editor-page-content.tsx       |  6 ++++-
 .../hooks/use-print-keyboard-shortcut.ts      | 27 +++++++++++++++++++
 .../print-warning/print-warning.tsx           | 24 +++++++++++++++++
 .../src/components/editor-page/print.scss     | 15 +++++++++++
 .../editor-page/sidebar/sidebar.tsx           |  2 +-
 .../entries/export-print-sidebar-entry.tsx    |  3 ++-
 .../splitter/split-divider/split-divider.tsx  |  2 +-
 .../editor-page/splitter/splitter.tsx         | 10 +++++--
 .../editor-page/utils/print-iframe.ts         | 16 +++++++++++
 .../document/document-markdown-renderer.tsx   |  2 +-
 .../document/markdown-document.module.scss    |  7 +++++
 14 files changed, 123 insertions(+), 8 deletions(-)
 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/utils/print-iframe.ts

diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 3cb91813f..367a44309 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -971,5 +971,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/renderer-iframe/renderer-iframe.tsx b/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx
index cf8fe8409..e7b69dfe5 100644
--- a/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx
+++ b/frontend/src/components/common/renderer-iframe/renderer-iframe.tsx
@@ -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..6f6f66341
--- /dev/null
+++ b/frontend/src/components/editor-page/hooks/use-print-keyboard-shortcut.ts
@@ -0,0 +1,27 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { printIframe } from '../utils/print-iframe'
+import { useEffect } from 'react'
+
+/**
+ * Hook to listen for the print keyboard shortcut and print the content of the renderer iframe.
+ */
+export const usePrintKeyboardShortcut = (): void => {
+  useEffect(() => {
+    const handlePrint = (event: KeyboardEvent): void => {
+      if (event.key === 'p' && (event.ctrlKey || event.metaKey)) {
+        event.preventDefault()
+        printIframe()
+      }
+    }
+
+    window.addEventListener('keydown', handlePrint)
+
+    return () => {
+      window.removeEventListener('keydown', 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..cd85ca58e
--- /dev/null
+++ b/frontend/src/components/editor-page/print-warning/print-warning.tsx
@@ -0,0 +1,24 @@
+/*
+ * 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'
+
+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/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
index 2b94d39f2..34938447f 100644
--- 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
@@ -8,13 +8,14 @@ import { SidebarButton } from '../../../sidebar-button/sidebar-button'
 import React, { useCallback } from 'react'
 import { PrinterFill as IconPrinterFill } from 'react-bootstrap-icons'
 import { Trans } from 'react-i18next'
+import { printIframe } from '../../../../utils/print-iframe'
 
 /**
  * Editor sidebar entry for exporting the markdown content into a local file.
  */
 export const ExportPrintSidebarEntry: React.FC = () => {
   const onClick = useCallback(() => {
-    window.print()
+    printIframe()
   }, [])
 
   return (
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..51ffad7b5
--- /dev/null
+++ b/frontend/src/components/editor-page/utils/print-iframe.ts
@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+/**
+ * Prints the content of the renderer iframe.
+ */
+export const printIframe = (): void => {
+  const iframe = document.getElementById('editor-renderer-iframe') as HTMLIFrameElement
+  if (!iframe) {
+    return
+  }
+  iframe.contentWindow.print()
+}
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;
+  }
+}