Add slide mode with reveal.js

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

src/components/render-page/hooks/sync-scroll/use-document-sync-scrolling.ts

@@ -0,0 +1,43 @@
+/*
+ * 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 '../../../editor-page/synced-scroll/scroll-props'
+import { useOnUserScroll } from './use-on-user-scroll'
+import { useScrollToLineMark } from './use-scroll-to-line-mark'
+
+export const useDocumentSyncScrolling = (
+  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]
+}

src/components/render-page/hooks/sync-scroll/use-on-user-scroll.ts

@@ -0,0 +1,52 @@
+/*
+ * 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 '../../../editor-page/synced-scroll/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/render-page/hooks/sync-scroll/use-scroll-to-line-mark.ts

@@ -0,0 +1,60 @@
+/*
+ * 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 '../../../editor-page/synced-scroll/scroll-props'
+import { findLineMarks } from '../../../editor-page/synced-scroll/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/render-page/iframe-markdown-renderer.tsx

@@ -19,16 +19,14 @@ import { countWords } from './word-counter'
 import { RendererFrontmatterInfo } from '../common/note-frontmatter/types'
 import { useRendererToEditorCommunicator } from '../editor-page/render-context/renderer-to-editor-communicator-context-provider'
 import { useRendererReceiveHandler } from './window-post-message-communicator/hooks/use-renderer-receive-handler'
+import { SlideshowMarkdownRenderer } from '../markdown-renderer/slideshow-markdown-renderer'
+import { initialState } from '../../redux/note-details/initial-state'
 
 export const IframeMarkdownRenderer: React.FC = () => {
   const [markdownContent, setMarkdownContent] = useState('')
   const [scrollState, setScrollState] = useState<ScrollState>({ firstLineInView: 1, scrolledPercentage: 0 })
   const [baseConfiguration, setBaseConfiguration] = useState<BaseConfiguration | undefined>(undefined)
-  const [frontmatterInfo, setFrontmatterInfo] = useState<RendererFrontmatterInfo>({
-    offsetLines: 0,
-    frontmatterInvalid: false,
-    deprecatedSyntax: false
-  })
+  const [frontmatterInfo, setFrontmatterInfo] = useState<RendererFrontmatterInfo>(initialState.frontmatterRendererInfo)
 
   const communicator = useRendererToEditorCommunicator()
 
@@ -122,6 +120,18 @@ export const IframeMarkdownRenderer: React.FC = () => {
           frontmatterInfo={frontmatterInfo}
         />
       )
+    case RendererType.SLIDESHOW:
+      return (
+        <SlideshowMarkdownRenderer
+          content={markdownContent}
+          baseUrl={baseConfiguration.baseUrl}
+          onFirstHeadingChange={onFirstHeadingChange}
+          onImageClick={onImageClick}
+          scrollState={scrollState}
+          lineOffset={frontmatterInfo.lineOffset}
+          slideOptions={frontmatterInfo.slideOptions}
+        />
+      )
     case RendererType.INTRO:
       return (
         <MarkdownDocument

src/components/render-page/markdown-document.tsx

@@ -8,9 +8,9 @@ import { TocAst } from 'markdown-it-toc-done-right'
 import React, { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react'
 import useResizeObserver from 'use-resize-observer'
 import { YamlArrayDeprecationAlert } from '../editor-page/renderer-pane/yaml-array-deprecation-alert'
-import { useSyncedScrolling } from '../editor-page/synced-scroll/hooks/use-synced-scrolling'
+import { useDocumentSyncScrolling } from './hooks/sync-scroll/use-document-sync-scrolling'
 import { ScrollProps } from '../editor-page/synced-scroll/scroll-props'
-import { BasicMarkdownRenderer } from '../markdown-renderer/basic-markdown-renderer'
+import { DocumentMarkdownRenderer } from '../markdown-renderer/document-markdown-renderer'
 import { ImageClickHandler } from '../markdown-renderer/replace-components/image/image-replacer'
 import './markdown-document.scss'
 import { WidthBasedTableOfContents } from './width-based-table-of-contents'
@@ -70,7 +70,7 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = ({
   }, [rendererSize.height, onHeightChange])
 
   const contentLineCount = useMemo(() => markdownContent.split('\n').length, [markdownContent])
-  const [onLineMarkerPositionChanged, onUserScroll] = useSyncedScrolling(
+  const [onLineMarkerPositionChanged, onUserScroll] = useDocumentSyncScrolling(
     internalDocumentRenderPaneRef,
     rendererRef,
     contentLineCount,
@@ -88,7 +88,7 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = ({
       <div className={'markdown-document-content'}>
         <InvalidYamlAlert show={!!frontmatterInfo?.frontmatterInvalid} />
         <YamlArrayDeprecationAlert show={!!frontmatterInfo?.deprecatedSyntax} />
-        <BasicMarkdownRenderer
+        <DocumentMarkdownRenderer
           outerContainerRef={rendererRef}
           className={`mb-3 ${additionalRendererClasses ?? ''}`}
           content={markdownContent}
@@ -99,7 +99,7 @@ export const MarkdownDocument: React.FC<MarkdownDocumentProps> = ({
           baseUrl={baseUrl}
           onImageClick={onImageClick}
           useAlternativeBreaks={useAlternativeBreaks}
-          frontmatterLineOffset={frontmatterInfo?.offsetLines}
+          lineOffset={frontmatterInfo?.lineOffset}
         />
       </div>
       <div className={'markdown-document-side pt-4'}>