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

@@ -369,7 +369,8 @@
         }
       },
       "rawHtml": "Raw HTML",
-      "markdown-file": "Markdown file"
+      "markdown-file": "Markdown file",
+      "print": "Print"
     },
     "import": {
       "clipboard": "Clipboard",

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>
+  )
+}

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>