From d726e6d94e388af90281b0ffaffedf757fa79f1c Mon Sep 17 00:00:00 2001
From: Philip Molares <philip.molares@udo.edu>
Date: Fri, 1 Nov 2024 17:47:29 +0100
Subject: [PATCH] feat: add print button to export sidebar

As we want to support the browser print dialog why not make it possible
to access that from our UI?

Signed-off-by: Philip Molares <philip.molares@udo.edu>
---
 frontend/locales/en.json                      |  3 ++-
 .../entries/export-print-sidebar-entry.tsx    | 25 +++++++++++++++++++
 .../export-sidebar-menu.tsx                   |  9 ++++---
 3 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-sidebar-menu/entries/export-print-sidebar-entry.tsx

diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 4f9671488..3cb91813f 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -369,7 +369,8 @@
         }
       },
       "rawHtml": "Raw HTML",
-      "markdown-file": "Markdown file"
+      "markdown-file": "Markdown file",
+      "print": "Print"
     },
     "import": {
       "clipboard": "Clipboard",
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..2b94d39f2
--- /dev/null
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-sidebar-menu/entries/export-print-sidebar-entry.tsx
@@ -0,0 +1,25 @@
+/*
+ * 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, { useCallback } from 'react'
+import { PrinterFill as IconPrinterFill } from 'react-bootstrap-icons'
+import { Trans } from 'react-i18next'
+
+/**
+ * Editor sidebar entry for exporting the markdown content into a local file.
+ */
+export const ExportPrintSidebarEntry: React.FC = () => {
+  const onClick = useCallback(() => {
+    window.print()
+  }, [])
+
+  return (
+    <SidebarButton {...cypressId('menu-export-print')} onClick={onClick} 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>