fix: Move content into to frontend directory

Doing this BEFORE the merge prevents a lot of merge conflicts.

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

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

@@ -0,0 +1,56 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type React from 'react'
+import { useCallback, useMemo, useState } from 'react'
+import type { ScrollState } from '../../../editor-page/synced-scroll/scroll-props'
+import { useOnUserScroll } from './use-on-user-scroll'
+import { useScrollToLineMark } from './use-scroll-to-line-mark'
+import type { LineMarkerPosition } from '../../../markdown-renderer/extensions/linemarker/types'
+
+/**
+ * Synchronizes the scroll status of the given container with the given scroll state and posts changes if the user scrolls.
+ *
+ * @param outerContainerRef A reference for the outer container.
+ * @param rendererRef A reference for the renderer
+ * @param numberOfLines The number of lines
+ * @param scrollState The current {@link ScrollState}
+ * @param onScroll A callback that posts new scroll states
+ * @return A tuple of two callbacks.
+ *         The first one should be executed if the {@link LineMarkerPosition line marker positions} are updated.
+ *         The second one should be executed if the user actually scrolls. Usually it should be attached to the DOM element that the user scrolls.
+ */
+export const useDocumentSyncScrolling = (
+  outerContainerRef: React.RefObject<HTMLElement>,
+  rendererRef: React.RefObject<HTMLElement>,
+  numberOfLines: number,
+  scrollState?: ScrollState,
+  onScroll?: (scrollState: ScrollState) => void
+): [(lineMarkers: LineMarkerPosition[]) => void, React.UIEventHandler<HTMLElement>] => {
+  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 useMemo(() => [onLineMarkerPositionChanged, onUserScroll], [onLineMarkerPositionChanged, onUserScroll])
+}

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

@@ -0,0 +1,61 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type React from 'react'
+import { useCallback } from 'react'
+import type { ScrollState } from '../../../editor-page/synced-scroll/scroll-props'
+import type { LineMarkerPosition } from '../../../markdown-renderer/extensions/linemarker/types'
+
+/**
+ * Provides a callback to handle user scrolling.
+ *
+ * @param lineMarks An array of the current {@link LineMarkerPosition LineMarkerPositions}
+ * @param scrollContainer The container to scroll in
+ * @param onScroll A callback that posts new scroll states.
+ * @return A callback that can be called when the user is scrolling.
+ */
+export const useOnUserScroll = (
+  lineMarks: LineMarkerPosition[] | undefined,
+  scrollContainer: React.RefObject<HTMLElement>,
+  onScroll: ((newScrollState: ScrollState) => void) | undefined
+): React.UIEventHandler<HTMLElement> => {
+  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])
+}

frontend/src/components/render-page/hooks/sync-scroll/use-scroll-to-line-mark.ts

@@ -0,0 +1,69 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { RefObject } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
+import type { ScrollState } from '../../../editor-page/synced-scroll/scroll-props'
+import { findLineMarks } from '../../../editor-page/synced-scroll/utils'
+import type { LineMarkerPosition } from '../../../markdown-renderer/extensions/linemarker/types'
+
+/**
+ * Scrolls the given container to the correct {@link LineMarkerPosition}.
+ *
+ * @param scrollState The current {@link ScrollState}
+ * @param lineMarks An array of the current {@link LineMarkerPosition LineMarkerPositions}.
+ * @param contentLineCount The number of lines
+ * @param scrollContainer The container to scroll in
+ */
+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])
+}