feat(print): add more fixes to print mode

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

frontend/global-styles/github-markdown.scss

@@ -1,5 +1,5 @@
 /*!
- * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file) & Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -107,12 +107,6 @@
     font-size: 1em;
   }
 
-  hr {
-    box-sizing: initial;
-    height: 0;
-    overflow: visible;
-  }
-
   input {
     font: inherit;
     margin: 0;

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
  */
@@ -49,14 +49,6 @@
     }
   }
 
-  hr {
-    color: #bbbcbf;
-    @media print {
-      color: transparent !important;
-      border-bottom: 2px solid #bbbcbf;
-    }
-  }
-
   blockquote .blockquote-extra {
     font-size: 0.85em;
     margin-inline-start: 0.5em;

frontend/global-styles/print.scss

@@ -16,19 +16,24 @@
     break-after: avoid;
   }
 
-  table, figure {
+  table, figure, p, img, ul, ol, pre  {
     break-inside: avoid;
   }
 
   @page {
     size: A4;
-    margin: 0 15pt;
+    padding: 1.5cm;
+    margin: 1cm auto;
   }
 
   .print-link {
-    display: block;
+    display: inline;
   }
 
+  .markdown-body hr {
+    background-color: transparent !important;
+    border-bottom: 2px solid #bbbcbf;
+  }
 }
 
 @media screen {

frontend/src/components/editor-page/hooks/use-print-keyboard-shortcut.ts

@@ -3,25 +3,36 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { printIframe } from '../utils/print-iframe'
-import { useEffect } from 'react'
+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 => {
-  useEffect(() => {
-    const handlePrint = (event: KeyboardEvent): 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()
-        printIframe()
+        if (isIframe) {
+          printCallbackInside()
+        } else {
+          printCallbackOutside()
+        }
       }
-    }
+    },
+    [isIframe, printCallbackInside, printCallbackOutside]
+  )
 
+  useEffect(() => {
     window.addEventListener('keydown', handlePrint)
 
     return () => {
       window.removeEventListener('keydown', handlePrint)
     }
-  }, [])
+  }, [handlePrint])
 }

frontend/src/components/editor-page/render-context/editor-to-renderer-communicator-context-provider.tsx

@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2024 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
 'use client'
 
 /*
@@ -19,7 +25,7 @@ const EditorToRendererCommunicatorContext = createContext<EditorToRendererCommun
  * @return the received communicator
  * @throws {Error} if no communicator was received
  */
-export const useEditorToRendererCommunicator: () => EditorToRendererCommunicator = () => {
+export const useEditorToRendererCommunicator = (): EditorToRendererCommunicator => {
   const communicatorFromContext = useContext(EditorToRendererCommunicatorContext)
   if (!communicatorFromContext) {
     throw new Error('No editor-to-renderer-iframe-communicator received. Did you forget to use the provider component?')

frontend/src/components/editor-page/sidebar/specific-sidebar-entries/export-sidebar-menu/entries/export-print-sidebar-entry.tsx

@@ -5,21 +5,19 @@
  */
 import { cypressId } from '../../../../../../utils/cypress-attribute'
 import { SidebarButton } from '../../../sidebar-button/sidebar-button'
-import React, { useCallback } from 'react'
+import React from 'react'
 import { PrinterFill as IconPrinterFill } from 'react-bootstrap-icons'
 import { Trans } from 'react-i18next'
-import { printIframe } from '../../../../utils/print-iframe'
+import { usePrintIframe } from '../../../../utils/print-iframe'
 
 /**
  * Editor sidebar entry for exporting the markdown content into a local file.
  */
 export const ExportPrintSidebarEntry: React.FC = () => {
-  const onClick = useCallback(() => {
-    printIframe()
-  }, [])
+  const printIframe = usePrintIframe()
 
   return (
-    <SidebarButton {...cypressId('menu-export-print')} onClick={onClick} icon={IconPrinterFill}>
+    <SidebarButton {...cypressId('menu-export-print')} onClick={printIframe} icon={IconPrinterFill}>
       <Trans i18nKey={'editor.export.print'} />
     </SidebarButton>
   )

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

@@ -6,34 +6,55 @@
 
 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 { 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()
+  try {
+    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()
+    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: false
+        printMode: true
       })
-    }, 50)
-  }, [rendererReady, iframeCommunicator])
+      setTimeout(() => {
+        iframe.contentWindow?.print()
+        iframeCommunicator.sendMessageToOtherSide({
+          type: CommunicationMessageType.SET_PRINT_MODE,
+          printMode: false
+        })
+      }, TIMEOUT_BEFORE_PRINT)
+    }, [rendererReady])
+  } catch {}
+}
+
+/**
+ * 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)
+  }, [])
 }

frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.module.scss

@@ -1,15 +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 {
-    display: none;
+@media print {
+  .click-shield {
+    display: none !important;
   }
+}
 
+.click-shield {
   position: relative;
   cursor: pointer;
   width: 100%;

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
  */
@@ -9,10 +9,11 @@ import { Logger } from '../../../../utils/logger'
 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, PropsWithChildren } 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 +24,7 @@ export interface ClickShieldProps extends PropsWithChildren<PropsWithDataCypress
   targetDescription: string
   containerClassName?: string
   fallbackBackgroundColor?: Property.BackgroundColor
+  fallbackLink: string
 }
 
 /**
@@ -44,6 +46,7 @@ export const ClickShield: React.FC<ClickShieldProps> = ({
   targetDescription,
   hoverIcon,
   fallbackBackgroundColor,
+  fallbackLink,
   ...props
 }) => {
   const [showChildren, setShowChildren] = useState(false)
@@ -114,23 +117,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>
   )
 }

frontend/src/components/markdown-renderer/replace-components/click-shield/print-link.tsx

@@ -0,0 +1,21 @@
+/*
+ * 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
+}
+
+export const PrintLink: React.FC<PrintLinkProps> = ({ link }) => {
+  return (
+    <p>
+      <a className={'print-link'} href={link}>
+        {link}
+      </a>
+    </p>
+  )
+}

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
  */
@@ -18,6 +18,10 @@ 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 { Logger } from '../../utils/logger'
+import { usePrintKeyboardShortcut } from '../editor-page/hooks/use-print-keyboard-shortcut'
+
+const logger = new Logger('RenderPageContent')
 
 /**
  * Wraps the markdown rendering in an iframe.
@@ -86,6 +90,8 @@ export const RenderPageContent: React.FC = () => {
     }, [])
   )
 
+  usePrintKeyboardShortcut()
+
   const onMakeScrollSource = useCallback(() => {
     sendScrolling.current = true
     communicator.sendMessageToOtherSide({

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

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=''

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
  */
@@ -16,7 +16,7 @@ const replaceAsciinemaLink: RegexOptions = {
   replace: (match) => {
     // ESLint wants to collapse this tag, but then the tag won't be valid html anymore.
     // noinspection CheckTagEmptyBody
-    return `<${AsciinemaMarkdownExtension.tagName} id='${match}'></${AsciinemaMarkdownExtension.tagName}><br /><a class='print-link' href='https://asciinema.org/a/${match}'>https://asciinema.org/a/${match}</a>`
+    return `<${AsciinemaMarkdownExtension.tagName} id='${match}'></${AsciinemaMarkdownExtension.tagName}>`
   }
 }
 

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>

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`}

frontend/src/extensions/external-lib-app-extensions/youtube/youtube-frame.tsx

@@ -1,11 +1,11 @@
 /*
- * 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
  */
 import { ClickShield } from '../../../components/markdown-renderer/replace-components/click-shield/click-shield'
 import type { IdProps } from '../../../components/markdown-renderer/replace-components/custom-tag-with-id-component-replacer'
-import React from 'react'
+import React, { Fragment } from 'react'
 import { Youtube as IconYoutube } from 'react-bootstrap-icons'
 
 /**
@@ -15,19 +15,22 @@ import { Youtube as IconYoutube } from 'react-bootstrap-icons'
  */
 export const YouTubeFrame: React.FC<IdProps> = ({ id }) => {
   return (
-    <ClickShield
-      hoverIcon={IconYoutube}
-      targetDescription={'YouTube'}
-      fallbackPreviewImageUrl={`https://i.ytimg.com/vi/${id}/maxresdefault.jpg`}
-      fallbackBackgroundColor={'#ff0000'}
-      data-cypress-id={'click-shield-youtube'}>
-      <span className={'ratio ratio-16x9 d-inline-block'}>
-        <iframe
-          title={`youtube video of ${id}`}
-          src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1`}
-          allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
-        />
-      </span>
-    </ClickShield>
+    <Fragment>
+      <ClickShield
+        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 d-print-none'}>
+          <iframe
+            title={`youtube video of ${id}`}
+            src={`https://www.youtube-nocookie.com/embed/${id}?autoplay=1`}
+            allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
+          />
+        </span>
+      </ClickShield>
+    </Fragment>
   )
 }

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

@@ -1,14 +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 { Logger } from '../../utils/logger'
-
-const logger = new Logger('useDarkModeState')
+import { useMemo } from 'react'
 
 /**
  * Uses the user settings and the browser preference to determine if dark mode should be used.
@@ -20,11 +18,11 @@ export const useDarkModeState = (): boolean => {
   const printModeEnabled = useApplicationState((state) => state.printMode.printModeEnabled)
   const isBrowserPreferringDark = useMediaQuery('(prefers-color-scheme: dark)')
 
-  logger.info(`SET_PRINT_MODE ${printModeEnabled}`)
+  return useMemo(() => {
+    if (printModeEnabled) {
+      return false
+    }
 
-  if (printModeEnabled) {
-    return false
-  }
-
-  return preference === DarkModePreference.DARK || (preference === DarkModePreference.AUTO && isBrowserPreferringDark)
+    return preference === DarkModePreference.DARK || (preference === DarkModePreference.AUTO && isBrowserPreferringDark)
+  }, [preference, printModeEnabled, isBrowserPreferringDark])
 }