Add slide mode with reveal.js

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/editor-page/app-bar/help-button/cheatsheet-line.tsx

@@ -15,7 +15,7 @@ export interface CheatsheetLineProps {
 const HighlightedCode = React.lazy(
   () => import('../../../markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code')
 )
-const BasicMarkdownRenderer = React.lazy(() => import('../../../markdown-renderer/basic-markdown-renderer'))
+const DocumentMarkdownRenderer = React.lazy(() => import('../../../markdown-renderer/document-markdown-renderer'))
 
 export const CheatsheetLine: React.FC<CheatsheetLineProps> = ({ code, onTaskCheckedChange }) => {
   const checkboxClick = useCallback(
@@ -36,7 +36,11 @@ export const CheatsheetLine: React.FC<CheatsheetLineProps> = ({ code, onTaskChec
       }>
       <tr>
         <td>
-          <BasicMarkdownRenderer content={code} baseUrl={'https://example.org'} onTaskCheckedChange={checkboxClick} />
+          <DocumentMarkdownRenderer
+            content={code}
+            baseUrl={'https://example.org'}
+            onTaskCheckedChange={checkboxClick}
+          />
         </td>
         <td className={'markdown-body'}>
           <HighlightedCode code={code} wrapLines={true} startLineNumber={1} language={'markdown'} />

src/components/editor-page/editor-document-renderer/editor-document-renderer.tsx

@@ -21,5 +21,5 @@ export const EditorDocumentRenderer: React.FC<EditorDocumentRendererProps> = (pr
 
   useSendFrontmatterInfoFromReduxToRenderer()
 
-  return <RenderIframe frameClasses={'h-100 w-100'} markdownContent={markdownContent} {...props} />
+  return <RenderIframe markdownContent={markdownContent} {...props} />
 }

src/components/editor-page/editor-page.tsx

@@ -29,6 +29,7 @@ import { useApplicationState } from '../../hooks/common/use-application-state'
 import { EditorDocumentRenderer } from './editor-document-renderer/editor-document-renderer'
 import { EditorToRendererCommunicatorContextProvider } from './render-context/editor-to-renderer-communicator-context-provider'
 import { Logger } from '../../utils/logger'
+import { NoteType } from '../common/note-frontmatter/types'
 
 export interface EditorPagePathParams {
   id: string
@@ -107,6 +108,7 @@ export const EditorPage: React.FC = () => {
     ),
     [onEditorScroll, scrollState.editorScrollState, setEditorToScrollSource]
   )
+  const noteType: NoteType = useApplicationState((state) => state.noteDetails.frontmatter.type)
 
   const rightPane = useMemo(
     () => (
@@ -117,10 +119,10 @@ export const EditorPage: React.FC = () => {
         onTaskCheckedChange={setCheckboxInMarkdownContent}
         onScroll={onMarkdownRendererScroll}
         scrollState={scrollState.rendererScrollState}
-        rendererType={RendererType.DOCUMENT}
+        rendererType={noteType === NoteType.SLIDE ? RendererType.SLIDESHOW : RendererType.DOCUMENT}
       />
     ),
-    [onMarkdownRendererScroll, scrollState.rendererScrollState, setRendererToScrollSource]
+    [noteType, onMarkdownRendererScroll, scrollState.rendererScrollState, setRendererToScrollSource]
   )
 
   return (

src/components/editor-page/renderer-pane/hooks/use-effect-on-render-type-change.ts

@@ -0,0 +1,26 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { useEffect, useRef } from 'react'
+import { RendererType } from '../../../render-page/window-post-message-communicator/rendering-message'
+
+/**
+ * Execute the given reload callback if the given render type changes.
+ *
+ * @param rendererType The render type to watch
+ * @param effectCallback The callback that should be executed if the render type changes.
+ */
+export const useEffectOnRenderTypeChange = (rendererType: RendererType, effectCallback: () => void): void => {
+  const lastRendererType = useRef<RendererType>(rendererType)
+
+  useEffect(() => {
+    if (lastRendererType.current === rendererType) {
+      return
+    }
+    effectCallback()
+    lastRendererType.current = rendererType
+  }, [effectCallback, rendererType])
+}

src/components/editor-page/renderer-pane/hooks/use-send-frontmatter-info-from-redux-to-renderer.ts

@@ -5,9 +5,11 @@
  */
 
 import { useSendToRenderer } from '../../../render-page/window-post-message-communicator/hooks/use-send-to-renderer'
-import { useMemo } from 'react'
+import { useMemo, useRef } from 'react'
 import { CommunicationMessageType } from '../../../render-page/window-post-message-communicator/rendering-message'
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { RendererFrontmatterInfo } from '../../../common/note-frontmatter/types'
+import equal from 'fast-deep-equal'
 
 /**
  * Extracts the {@link RendererFrontmatterInfo frontmatter data}
@@ -15,14 +17,24 @@ import { useApplicationState } from '../../../../hooks/common/use-application-st
  */
 export const useSendFrontmatterInfoFromReduxToRenderer = (): void => {
   const frontmatterInfo = useApplicationState((state) => state.noteDetails.frontmatterRendererInfo)
+  const lastFrontmatter = useRef<RendererFrontmatterInfo | undefined>(undefined)
+
+  const cachedFrontmatterInfo = useMemo(() => {
+    if (lastFrontmatter.current !== undefined && equal(lastFrontmatter.current, frontmatterInfo)) {
+      return lastFrontmatter.current
+    } else {
+      lastFrontmatter.current = frontmatterInfo
+      return frontmatterInfo
+    }
+  }, [frontmatterInfo])
 
   return useSendToRenderer(
     useMemo(
       () => ({
         type: CommunicationMessageType.SET_FRONTMATTER_INFO,
-        frontmatterInfo
+        frontmatterInfo: cachedFrontmatterInfo
       }),
-      [frontmatterInfo]
+      [cachedFrontmatterInfo]
     )
   )
 }

src/components/editor-page/renderer-pane/render-iframe.tsx

@@ -25,6 +25,7 @@ import { useSendMarkdownToRenderer } from './hooks/use-send-markdown-to-renderer
 import { useSendScrollState } from './hooks/use-send-scroll-state'
 import { useApplicationState } from '../../../hooks/common/use-application-state'
 import { Logger } from '../../../utils/logger'
+import { useEffectOnRenderTypeChange } from './hooks/use-effect-on-render-type-change'
 
 export interface RenderIframeProps extends RendererProps {
   rendererType: RendererType
@@ -50,9 +51,8 @@ export const RenderIframe: React.FC<RenderIframeProps> = ({
   const iframeCommunicator = useEditorToRendererCommunicator()
   const resetRendererReady = useCallback(() => {
     log.debug('Reset render status')
-    iframeCommunicator.unsetMessageTarget()
     setRendererStatus(false)
-  }, [iframeCommunicator])
+  }, [])
   const rendererReady = useIsRendererReady()
   const onIframeLoad = useForceRenderPageUrlOnIframeLoadCallback(frameReference, rendererOrigin, resetRendererReady)
   const [frameHeight, setFrameHeight] = useState<number>(0)
@@ -65,6 +65,12 @@ export const RenderIframe: React.FC<RenderIframeProps> = ({
     [iframeCommunicator]
   )
 
+  useEffect(() => {
+    if (!rendererReady) {
+      iframeCommunicator.unsetMessageTarget()
+    }
+  }, [iframeCommunicator, rendererReady])
+
   useEditorReceiveHandler(
     CommunicationMessageType.ON_FIRST_HEADING_CHANGE,
     useCallback(
@@ -123,6 +129,7 @@ export const RenderIframe: React.FC<RenderIframeProps> = ({
     }, [iframeCommunicator, rendererOrigin, rendererType])
   )
 
+  useEffectOnRenderTypeChange(rendererType, onIframeLoad)
   useSendScrollState(scrollState)
   useSendDarkModeStatusToRenderer(forcedDarkMode)
   useSendMarkdownToRenderer(markdownContent)
@@ -136,7 +143,9 @@ export const RenderIframe: React.FC<RenderIframeProps> = ({
         onLoad={onIframeLoad}
         title='render'
         {...(isTestMode() ? {} : { sandbox: 'allow-downloads allow-same-origin allow-scripts allow-popups' })}
+        allowFullScreen={true}
         ref={frameReference}
+        referrerPolicy={'no-referrer'}
         className={`border-0 ${frameClasses ?? ''}`}
         data-content-ready={rendererReady}
       />

src/components/editor-page/synced-scroll/hooks/use-on-user-scroll.ts

@@ -1,52 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { RefObject, useCallback } from 'react'
-import { LineMarkerPosition } from '../../../markdown-renderer/types'
-import { ScrollState } from '../scroll-props'
-
-export const useOnUserScroll = (
-  lineMarks: LineMarkerPosition[] | undefined,
-  scrollContainer: RefObject<HTMLElement>,
-  onScroll: ((newScrollState: ScrollState) => void) | undefined
-): (() => void) => {
-  return useCallback(() => {
-    if (!scrollContainer.current || !lineMarks || lineMarks.length === 0 || !onScroll) {
-      return
-    }
-
-    const scrollTop = scrollContainer.current.scrollTop
-
-    const lineMarksBeforeScrollTop = lineMarks.filter((lineMark) => lineMark.position <= scrollTop)
-    if (lineMarksBeforeScrollTop.length === 0) {
-      return
-    }
-
-    const lineMarksAfterScrollTop = lineMarks.filter((lineMark) => lineMark.position > scrollTop)
-    if (lineMarksAfterScrollTop.length === 0) {
-      return
-    }
-
-    const beforeLineMark = lineMarksBeforeScrollTop.reduce((prevLineMark, currentLineMark) =>
-      prevLineMark.line >= currentLineMark.line ? prevLineMark : currentLineMark
-    )
-
-    const afterLineMark = lineMarksAfterScrollTop.reduce((prevLineMark, currentLineMark) =>
-      prevLineMark.line < currentLineMark.line ? prevLineMark : currentLineMark
-    )
-
-    const componentHeight = afterLineMark.position - beforeLineMark.position
-    const distanceToBefore = scrollTop - beforeLineMark.position
-    const percentageRaw = distanceToBefore / componentHeight
-    const lineCount = afterLineMark.line - beforeLineMark.line
-    const line = Math.floor(lineCount * percentageRaw + beforeLineMark.line)
-    const lineHeight = componentHeight / lineCount
-    const innerScrolling = Math.floor(((distanceToBefore % lineHeight) / lineHeight) * 100)
-
-    const newScrollState: ScrollState = { firstLineInView: line, scrolledPercentage: innerScrolling }
-    onScroll(newScrollState)
-  }, [lineMarks, onScroll, scrollContainer])
-}

src/components/editor-page/synced-scroll/hooks/use-scroll-to-line-mark.ts

@@ -1,60 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { RefObject, useCallback, useEffect, useRef } from 'react'
-import { LineMarkerPosition } from '../../../markdown-renderer/types'
-import { ScrollState } from '../scroll-props'
-import { findLineMarks } from '../utils'
-
-export const useScrollToLineMark = (
-  scrollState: ScrollState | undefined,
-  lineMarks: LineMarkerPosition[] | undefined,
-  contentLineCount: number,
-  scrollContainer: RefObject<HTMLElement>
-): void => {
-  const lastScrollPosition = useRef<number>()
-
-  const scrollTo = useCallback(
-    (targetPosition: number): void => {
-      if (!scrollContainer.current || targetPosition === lastScrollPosition.current) {
-        return
-      }
-      lastScrollPosition.current = targetPosition
-      scrollContainer.current.scrollTo({
-        top: targetPosition
-      })
-    },
-    [scrollContainer]
-  )
-
-  useEffect(() => {
-    if (!scrollContainer.current || !lineMarks || lineMarks.length === 0 || !scrollState) {
-      return
-    }
-    if (scrollState.firstLineInView < lineMarks[0].line) {
-      scrollTo(0)
-      return
-    }
-    if (scrollState.firstLineInView > lineMarks[lineMarks.length - 1].line) {
-      scrollTo(scrollContainer.current.offsetHeight)
-      return
-    }
-    const { lastMarkBefore, firstMarkAfter } = findLineMarks(lineMarks, scrollState.firstLineInView)
-    const positionBefore = lastMarkBefore ? lastMarkBefore.position : lineMarks[0].position
-    const positionAfter = firstMarkAfter ? firstMarkAfter.position : scrollContainer.current.offsetHeight
-    const lastMarkBeforeLine = lastMarkBefore ? lastMarkBefore.line : 1
-    const firstMarkAfterLine = firstMarkAfter ? firstMarkAfter.line : contentLineCount
-    const linesBetweenMarkers = firstMarkAfterLine - lastMarkBeforeLine
-    const blockHeight = positionAfter - positionBefore
-    const lineHeight = blockHeight / linesBetweenMarkers
-    const position =
-      positionBefore +
-      (scrollState.firstLineInView - lastMarkBeforeLine) * lineHeight +
-      (scrollState.scrolledPercentage / 100) * lineHeight
-    const correctedPosition = Math.floor(position)
-    scrollTo(correctedPosition)
-  }, [contentLineCount, lineMarks, scrollContainer, scrollState, scrollTo])
-}

src/components/editor-page/synced-scroll/hooks/use-synced-scrolling.ts

@@ -1,43 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import React, { useCallback, useState } from 'react'
-import { LineMarkerPosition } from '../../../markdown-renderer/types'
-import { ScrollState } from '../scroll-props'
-import { useOnUserScroll } from './use-on-user-scroll'
-import { useScrollToLineMark } from './use-scroll-to-line-mark'
-
-export const useSyncedScrolling = (
-  outerContainerRef: React.RefObject<HTMLElement>,
-  rendererRef: React.RefObject<HTMLElement>,
-  numberOfLines: number,
-  scrollState?: ScrollState,
-  onScroll?: (scrollState: ScrollState) => void
-): [(lineMarkers: LineMarkerPosition[]) => void, () => void] => {
-  const [lineMarks, setLineMarks] = useState<LineMarkerPosition[]>()
-
-  const onLineMarkerPositionChanged = useCallback(
-    (linkMarkerPositions: LineMarkerPosition[]) => {
-      if (!outerContainerRef.current || !rendererRef.current) {
-        return
-      }
-      const documentRenderPaneTop = outerContainerRef.current.offsetTop ?? 0
-      const rendererTop = rendererRef.current.offsetTop ?? 0
-      const offset = rendererTop - documentRenderPaneTop
-      const adjustedLineMakerPositions = linkMarkerPositions.map((oldMarker) => ({
-        line: oldMarker.line,
-        position: oldMarker.position + offset
-      }))
-      setLineMarks(adjustedLineMakerPositions)
-    },
-    [outerContainerRef, rendererRef]
-  )
-
-  const onUserScroll = useOnUserScroll(lineMarks, outerContainerRef, onScroll)
-  useScrollToLineMark(scrollState, lineMarks, numberOfLines, outerContainerRef)
-
-  return [onLineMarkerPositionChanged, onUserScroll]
-}