diff --git a/frontend/src/components/editor-page/renderer-pane/render-iframe.tsx b/frontend/src/components/editor-page/renderer-pane/render-iframe.tsx index 1a024817f..900f764c5 100644 --- a/frontend/src/components/editor-page/renderer-pane/render-iframe.tsx +++ b/frontend/src/components/editor-page/renderer-pane/render-iframe.tsx @@ -10,16 +10,17 @@ import { isTestMode } from '../../../utils/test-modes' import { ShowIf } from '../../common/show-if/show-if' import { WaitSpinner } from '../../common/wait-spinner/wait-spinner' import { useExtensionEventEmitter } from '../../markdown-renderer/hooks/use-extension-event-emitter' -import type { RendererProps } from '../../render-page/markdown-document' +import type { CommonMarkdownRendererProps } from '../../render-page/renderers/common-markdown-renderer-props' import { useEditorReceiveHandler } from '../../render-page/window-post-message-communicator/hooks/use-editor-receive-handler' import type { ExtensionEvent, OnHeightChangeMessage, - RendererType, SetScrollStateMessage } from '../../render-page/window-post-message-communicator/rendering-message' +import type { RendererType } from '../../render-page/window-post-message-communicator/rendering-message' import { CommunicationMessageType } from '../../render-page/window-post-message-communicator/rendering-message' import { useEditorToRendererCommunicator } from '../render-context/editor-to-renderer-communicator-context-provider' +import type { ScrollProps } from '../synced-scroll/scroll-props' import { useEffectOnRenderTypeChange } from './hooks/use-effect-on-render-type-change' import { useForceRenderPageUrlOnIframeLoadCallback } from './hooks/use-force-render-page-url-on-iframe-load-callback' import { useSendAdditionalConfigurationToRenderer } from './hooks/use-send-additional-configuration-to-renderer' @@ -27,7 +28,7 @@ import { useSendMarkdownToRenderer } from './hooks/use-send-markdown-to-renderer import { useSendScrollState } from './hooks/use-send-scroll-state' import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react' -export interface RenderIframeProps extends RendererProps { +export interface RenderIframeProps extends Omit { rendererType: RendererType forcedDarkMode?: DarkModePreference frameClasses?: string @@ -90,11 +91,6 @@ export const RenderIframe: React.FC = ({ onRendererStatusChange?.(rendererReady) }, [onRendererStatusChange, rendererReady]) - useEditorReceiveHandler( - CommunicationMessageType.ENABLE_RENDERER_SCROLL_SOURCE, - useCallback(() => onMakeScrollSource?.(), [onMakeScrollSource]) - ) - const eventEmitter = useExtensionEventEmitter() useEditorReceiveHandler( @@ -147,12 +143,16 @@ export const RenderIframe: React.FC = ({ useEffectOnRenderTypeChange(rendererType, onIframeLoad) useSendAdditionalConfigurationToRenderer(rendererReady, forcedDarkMode) useSendMarkdownToRenderer(markdownContentLines, rendererReady) - useSendScrollState(scrollState, rendererReady) + useSendScrollState(scrollState, rendererReady) useEditorReceiveHandler( CommunicationMessageType.SET_SCROLL_STATE, useCallback((values: SetScrollStateMessage) => onScroll?.(values.scrollState), [onScroll]) ) + useEditorReceiveHandler( + CommunicationMessageType.ENABLE_RENDERER_SCROLL_SOURCE, + useCallback(() => onMakeScrollSource?.(), [onMakeScrollSource]) + ) return ( diff --git a/frontend/src/components/markdown-renderer/common-markdown-renderer-props.ts b/frontend/src/components/markdown-renderer/common-markdown-renderer-props.ts deleted file mode 100644 index 46343fdef..000000000 --- a/frontend/src/components/markdown-renderer/common-markdown-renderer-props.ts +++ /dev/null @@ -1,15 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ -import type { Ref } from 'react' - -export interface CommonMarkdownRendererProps { - baseUrl: string - outerContainerRef?: Ref - newlinesAreBreaks?: boolean - lineOffset?: number - className?: string - markdownContentLines: string[] -} diff --git a/frontend/src/components/markdown-renderer/document-markdown-renderer.tsx b/frontend/src/components/markdown-renderer/document-markdown-renderer.tsx deleted file mode 100644 index 51029f458..000000000 --- a/frontend/src/components/markdown-renderer/document-markdown-renderer.tsx +++ /dev/null @@ -1,75 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ -import { cypressId } from '../../utils/cypress-attribute' -import type { CommonMarkdownRendererProps } from './common-markdown-renderer-props' -import { HeadlineAnchorsMarkdownExtension } from './extensions/headline-anchors-markdown-extension' -import type { LineMarkers } from './extensions/linemarker/add-line-marker-markdown-it-plugin' -import { LinemarkerMarkdownExtension } from './extensions/linemarker/linemarker-markdown-extension' -import type { LineMarkerPosition } from './extensions/linemarker/types' -import { useCalculateLineMarkerPosition } from './hooks/use-calculate-line-marker-positions' -import { useMarkdownExtensions } from './hooks/use-markdown-extensions' -import { MarkdownToReact } from './markdown-to-react/markdown-to-react' -import React, { useMemo, useRef } from 'react' -import { useTranslation } from 'react-i18next' - -export interface DocumentMarkdownRendererProps extends CommonMarkdownRendererProps { - onLineMarkerPositionChanged?: (lineMarkerPosition: LineMarkerPosition[]) => void -} - -/** - * Renders the note as normal document. - * - * @param className Additional class names directly given to the div - * @param markdownContentLines The markdown lines - * @param onLineMarkerPositionChanged The callback to call with changed {@link LineMarkers} - * @param baseUrl The base url of the renderer - * @param outerContainerRef A reference for the outer container - * @param newlinesAreBreaks If newlines are rendered as breaks or not - */ -export const DocumentMarkdownRenderer: React.FC = ({ - className, - markdownContentLines, - onLineMarkerPositionChanged, - baseUrl, - outerContainerRef, - newlinesAreBreaks -}) => { - const markdownBodyRef = useRef(null) - const currentLineMarkers = useRef() - - const extensions = useMarkdownExtensions( - baseUrl, - useMemo( - () => [ - new HeadlineAnchorsMarkdownExtension(), - new LinemarkerMarkdownExtension((values) => (currentLineMarkers.current = values)) - ], - [] - ) - ) - - useTranslation() - useCalculateLineMarkerPosition(markdownBodyRef, currentLineMarkers.current, onLineMarkerPositionChanged) - - return ( -
-
- -
-
- ) -} - -export default DocumentMarkdownRenderer diff --git a/frontend/src/components/render-page/markdown-document.tsx b/frontend/src/components/render-page/markdown-document.tsx deleted file mode 100644 index 42774b0a4..000000000 --- a/frontend/src/components/render-page/markdown-document.tsx +++ /dev/null @@ -1,104 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ -import { useApplicationState } from '../../hooks/common/use-application-state' -import type { ScrollProps } from '../editor-page/synced-scroll/scroll-props' -import { DocumentMarkdownRenderer } from '../markdown-renderer/document-markdown-renderer' -import { DocumentTocSidebar } from './document-toc-sidebar' -import { useDocumentSyncScrolling } from './hooks/sync-scroll/use-document-sync-scrolling' -import styles from './markdown-document.module.scss' -import useResizeObserver from '@react-hook/resize-observer' -import type { MutableRefObject } from 'react' -import React, { useEffect, useMemo, useRef, useState } from 'react' - -export interface RendererProps extends ScrollProps { - documentRenderPaneRef?: MutableRefObject - markdownContentLines: string[] - onHeightChange?: (height: number) => void -} - -export interface MarkdownDocumentProps extends RendererProps { - additionalOuterContainerClasses?: string - additionalRendererClasses?: string - disableToc?: boolean - baseUrl: string - newLinesAreBreaks?: boolean -} - -/** - * Renders a Markdown document and handles scrolling, yaml metadata and a floating table of contents. - * - * @param additionalOuterContainerClasses Additional classes given to the outer container directly - * @param additionalRendererClasses Additional classes given {@link DocumentMarkdownRenderer} directly - * @param onMakeScrollSource The callback to call if a change of the scroll source is requested- - * @param baseUrl The base url for the renderer - * @param markdownContentLines The current content of the markdown document. - * @param onScroll The callback to call if the renderer is scrolling. - * @param scrollState The current {@link ScrollState} - * @param onHeightChange The callback to call if the height of the document changes - * @param disableToc If the table of contents should be disabled. - * @param newLinesAreBreaks Defines if the provided markdown content should treat new lines as breaks - */ -export const MarkdownDocument: React.FC = ({ - additionalOuterContainerClasses, - additionalRendererClasses, - onMakeScrollSource, - baseUrl, - markdownContentLines, - onScroll, - scrollState, - onHeightChange, - disableToc, - newLinesAreBreaks -}) => { - const rendererRef = useRef(null) - const [rendererSize, setRendererSize] = useState() - useResizeObserver(rendererRef.current, (entry) => { - setRendererSize(entry.contentRect) - }) - useEffect(() => onHeightChange?.((rendererSize?.height ?? 0) + 1), [rendererSize, onHeightChange]) - - const internalDocumentRenderPaneRef = useRef(null) - const [internalDocumentRenderPaneSize, setInternalDocumentRenderPaneSize] = useState() - useResizeObserver(internalDocumentRenderPaneRef.current, (entry) => - setInternalDocumentRenderPaneSize(entry.contentRect) - ) - - const contentLineCount = useMemo(() => markdownContentLines.length, [markdownContentLines]) - const [recalculateLineMarkers, onUserScroll] = useDocumentSyncScrolling( - internalDocumentRenderPaneRef, - rendererRef, - contentLineCount, - scrollState, - onScroll - ) - - return ( -
-
-
- -
- -
- ) -} diff --git a/frontend/src/components/render-page/render-page-content.tsx b/frontend/src/components/render-page/render-page-content.tsx index cf4d2b85c..51635f238 100644 --- a/frontend/src/components/render-page/render-page-content.tsx +++ b/frontend/src/components/render-page/render-page-content.tsx @@ -7,13 +7,14 @@ import { setDarkModePreference } from '../../redux/dark-mode/methods' import { useRendererToEditorCommunicator } from '../editor-page/render-context/renderer-to-editor-communicator-context-provider' import type { ScrollState } from '../editor-page/synced-scroll/scroll-props' import { eventEmitterContext } from '../markdown-renderer/hooks/use-extension-event-emitter' -import { SlideshowMarkdownRenderer } from '../markdown-renderer/slideshow-markdown-renderer' -import { MarkdownDocument } from './markdown-document' +import { DocumentMarkdownRenderer } from './renderers/document/document-markdown-renderer' +import { SimpleMarkdownRenderer } from './renderers/simple/simple-markdown-renderer' +import { SlideshowMarkdownRenderer } from './renderers/slideshow/slideshow-markdown-renderer' import { useRendererReceiveHandler } from './window-post-message-communicator/hooks/use-renderer-receive-handler' import type { BaseConfiguration } from './window-post-message-communicator/rendering-message' import { CommunicationMessageType, RendererType } from './window-post-message-communicator/rendering-message' import { countWords } from './word-counter' -import type { SlideOptions } from '@hedgedoc/commons/src/title-extraction/types/slide-show-options' +import type { SlideOptions } from '@hedgedoc/commons' import { EventEmitter2 } from 'eventemitter2' import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' @@ -24,12 +25,10 @@ export const RenderPageContent: React.FC = () => { const [markdownContentLines, setMarkdownContentLines] = useState([]) const [scrollState, setScrollState] = useState({ firstLineInView: 1, scrolledPercentage: 0 }) const [baseConfiguration, setBaseConfiguration] = useState(undefined) - const [slideOptions, setSlideOptions] = useState() - const [newLinesAreBreaks, setNewLinesAreBreaks] = useState(true) - const communicator = useRendererToEditorCommunicator() - const sendScrolling = useRef(false) + const [newLinesAreBreaks, setNewLinesAreBreaks] = useState(true) + const [slideOptions, setSlideOptions] = useState() useRendererReceiveHandler( CommunicationMessageType.SET_SLIDE_OPTIONS, @@ -119,8 +118,7 @@ export const RenderPageContent: React.FC = () => { switch (baseConfiguration.rendererType) { case RendererType.DOCUMENT: return ( - { ) case RendererType.SIMPLE: return ( - ) default: diff --git a/frontend/src/components/render-page/renderers/common-markdown-renderer-props.ts b/frontend/src/components/render-page/renderers/common-markdown-renderer-props.ts new file mode 100644 index 000000000..4beed994f --- /dev/null +++ b/frontend/src/components/render-page/renderers/common-markdown-renderer-props.ts @@ -0,0 +1,15 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +export interface CommonMarkdownRendererProps { + baseUrl: string + newLinesAreBreaks?: boolean + markdownContentLines: string[] +} + +export interface HeightChangeRendererProps { + onHeightChange?: (height: number) => void +} diff --git a/frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx b/frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx new file mode 100644 index 000000000..215b10c09 --- /dev/null +++ b/frontend/src/components/render-page/renderers/document/document-markdown-renderer.tsx @@ -0,0 +1,108 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import { cypressId } from '../../../../utils/cypress-attribute' +import type { ScrollProps } from '../../../editor-page/synced-scroll/scroll-props' +import { HeadlineAnchorsMarkdownExtension } from '../../../markdown-renderer/extensions/headline-anchors-markdown-extension' +import type { LineMarkers } from '../../../markdown-renderer/extensions/linemarker/add-line-marker-markdown-it-plugin' +import { LinemarkerMarkdownExtension } from '../../../markdown-renderer/extensions/linemarker/linemarker-markdown-extension' +import { useCalculateLineMarkerPosition } from '../../../markdown-renderer/hooks/use-calculate-line-marker-positions' +import { useMarkdownExtensions } from '../../../markdown-renderer/hooks/use-markdown-extensions' +import { MarkdownToReact } from '../../../markdown-renderer/markdown-to-react/markdown-to-react' +import { useDocumentSyncScrolling } from '../../hooks/sync-scroll/use-document-sync-scrolling' +import type { CommonMarkdownRendererProps, HeightChangeRendererProps } from '../common-markdown-renderer-props' +import { DocumentTocSidebar } from './document-toc-sidebar' +import styles from './markdown-document.module.scss' +import useResizeObserver from '@react-hook/resize-observer' +import React, { useEffect, useMemo, useRef, useState } from 'react' + +export type DocumentMarkdownRendererProps = CommonMarkdownRendererProps & ScrollProps & HeightChangeRendererProps + +/** + * Renders a Markdown document and handles scrolling, yaml metadata and a floating table of contents. + * + * @param onMakeScrollSource The callback to call if a change of the scroll source is requested- + * @param baseUrl The base url for the renderer + * @param markdownContentLines The current content of the Markdown document. + * @param onScroll The callback to call if the renderer is scrolling. + * @param scrollState The current {@link ScrollState} + * @param onHeightChange The callback to call if the height of the document changes + * @param newlinesAreBreaks Defines if the provided markdown content should treat new lines as breaks + */ +export const DocumentMarkdownRenderer: React.FC = ({ + onMakeScrollSource, + baseUrl, + markdownContentLines, + onScroll, + scrollState, + onHeightChange, + newLinesAreBreaks +}) => { + const rendererRef = useRef(null) + const [rendererSize, setRendererSize] = useState() + useResizeObserver(rendererRef.current, (entry) => { + setRendererSize(entry.contentRect) + }) + useEffect(() => onHeightChange?.((rendererSize?.height ?? 0) + 1), [rendererSize, onHeightChange]) + + const internalDocumentRenderPaneRef = useRef(null) + const [internalDocumentRenderPaneSize, setInternalDocumentRenderPaneSize] = useState() + useResizeObserver(internalDocumentRenderPaneRef.current, (entry) => + setInternalDocumentRenderPaneSize(entry.contentRect) + ) + + const contentLineCount = useMemo(() => markdownContentLines.length, [markdownContentLines]) + const [recalculateLineMarkers, onUserScroll] = useDocumentSyncScrolling( + internalDocumentRenderPaneRef, + rendererRef, + contentLineCount, + scrollState, + onScroll + ) + + const markdownBodyRef = useRef(null) + const currentLineMarkers = useRef() + + const extensions = useMarkdownExtensions( + baseUrl, + useMemo( + () => [ + new HeadlineAnchorsMarkdownExtension(), + new LinemarkerMarkdownExtension((values) => (currentLineMarkers.current = values)) + ], + [] + ) + ) + useCalculateLineMarkerPosition(markdownBodyRef, currentLineMarkers.current, recalculateLineMarkers) + + return ( +
+
+
+
+
+ +
+
+
+ +
+ ) +} diff --git a/frontend/src/components/render-page/document-toc-sidebar.tsx b/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx similarity index 58% rename from frontend/src/components/render-page/document-toc-sidebar.tsx rename to frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx index 41fd7cd51..61f867d3d 100644 --- a/frontend/src/components/render-page/document-toc-sidebar.tsx +++ b/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx @@ -3,9 +3,8 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import { ShowIf } from '../common/show-if/show-if' -import { TableOfContentsMarkdownExtension } from '../markdown-renderer/extensions/table-of-contents/table-of-contents-markdown-extension' -import { useExtensionEventEmitterHandler } from '../markdown-renderer/hooks/use-extension-event-emitter' +import { TableOfContentsMarkdownExtension } from '../../../markdown-renderer/extensions/table-of-contents/table-of-contents-markdown-extension' +import { useExtensionEventEmitterHandler } from '../../../markdown-renderer/hooks/use-extension-event-emitter' import styles from './markdown-document.module.scss' import { WidthBasedTableOfContents } from './width-based-table-of-contents' import type { TocAst } from '@hedgedoc/markdown-it-plugins' @@ -13,18 +12,15 @@ import React, { useState } from 'react' export interface DocumentTocSidebarProps { width: number - disableToc: boolean baseUrl: string } -export const DocumentTocSidebar: React.FC = ({ disableToc, width, baseUrl }) => { +export const DocumentTocSidebar: React.FC = ({ width, baseUrl }) => { const [tocAst, setTocAst] = useState() useExtensionEventEmitterHandler(TableOfContentsMarkdownExtension.EVENT_NAME, setTocAst) return (
- - - +
) } diff --git a/frontend/src/components/render-page/markdown-document.module.scss b/frontend/src/components/render-page/renderers/document/markdown-document.module.scss similarity index 100% rename from frontend/src/components/render-page/markdown-document.module.scss rename to frontend/src/components/render-page/renderers/document/markdown-document.module.scss diff --git a/frontend/src/components/render-page/width-based-table-of-contents.tsx b/frontend/src/components/render-page/renderers/document/width-based-table-of-contents.tsx similarity index 86% rename from frontend/src/components/render-page/width-based-table-of-contents.tsx rename to frontend/src/components/render-page/renderers/document/width-based-table-of-contents.tsx index 255d8efb6..f8fa7e31d 100644 --- a/frontend/src/components/render-page/width-based-table-of-contents.tsx +++ b/frontend/src/components/render-page/renderers/document/width-based-table-of-contents.tsx @@ -3,8 +3,8 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import { TableOfContents } from '../editor-page/table-of-contents/table-of-contents' -import { TableOfContentsHoveringButton } from './markdown-toc-button/table-of-contents-hovering-button' +import { TableOfContents } from '../../../editor-page/table-of-contents/table-of-contents' +import { TableOfContentsHoveringButton } from '../../markdown-toc-button/table-of-contents-hovering-button' import type { TocAst } from '@hedgedoc/markdown-it-plugins' import React from 'react' diff --git a/frontend/src/components/render-page/renderers/simple/simple-markdown-renderer.tsx b/frontend/src/components/render-page/renderers/simple/simple-markdown-renderer.tsx new file mode 100644 index 000000000..2073948d8 --- /dev/null +++ b/frontend/src/components/render-page/renderers/simple/simple-markdown-renderer.tsx @@ -0,0 +1,54 @@ +/* + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import { cypressId } from '../../../../utils/cypress-attribute' +import { useMarkdownExtensions } from '../../../markdown-renderer/hooks/use-markdown-extensions' +import { MarkdownToReact } from '../../../markdown-renderer/markdown-to-react/markdown-to-react' +import type { CommonMarkdownRendererProps, HeightChangeRendererProps } from '../common-markdown-renderer-props' +import useResizeObserver from '@react-hook/resize-observer' +import React, { useEffect, useRef, useState } from 'react' + +export type SimpleMarkdownRendererProps = CommonMarkdownRendererProps & HeightChangeRendererProps + +/** + * Renders just the given Markdown content without scrolling, slideshow, toc notifying and other additions. + * + * @param additionalOuterContainerClasses Additional classes given to the outer container directly + * @param baseUrl The base url for the renderer + * @param markdownContentLines The current content of the markdown document. + * @param onHeightChange The callback to call if the height of the document changes + */ +export const SimpleMarkdownRenderer: React.FC = ({ + baseUrl, + markdownContentLines, + onHeightChange, + newLinesAreBreaks +}) => { + const rendererRef = useRef(null) + const [rendererSize, setRendererSize] = useState() + useResizeObserver(rendererRef.current, (entry) => { + setRendererSize(entry.contentRect) + }) + useEffect(() => onHeightChange?.((rendererSize?.height ?? 0) + 1), [rendererSize, onHeightChange]) + const extensions = useMarkdownExtensions(baseUrl, []) + + return ( +
+
+
+ +
+
+
+ ) +} diff --git a/frontend/src/components/markdown-renderer/loading-slide.tsx b/frontend/src/components/render-page/renderers/slideshow/loading-slide.tsx similarity index 86% rename from frontend/src/components/markdown-renderer/loading-slide.tsx rename to frontend/src/components/render-page/renderers/slideshow/loading-slide.tsx index 469e956ff..2e6efdc72 100644 --- a/frontend/src/components/markdown-renderer/loading-slide.tsx +++ b/frontend/src/components/render-page/renderers/slideshow/loading-slide.tsx @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file) * * SPDX-License-Identifier: AGPL-3.0-only */ diff --git a/frontend/src/components/markdown-renderer/slideshow-markdown-renderer.tsx b/frontend/src/components/render-page/renderers/slideshow/slideshow-markdown-renderer.tsx similarity index 62% rename from frontend/src/components/markdown-renderer/slideshow-markdown-renderer.tsx rename to frontend/src/components/render-page/renderers/slideshow/slideshow-markdown-renderer.tsx index 4f63d6858..18e7bec26 100644 --- a/frontend/src/components/markdown-renderer/slideshow-markdown-renderer.tsx +++ b/frontend/src/components/render-page/renderers/slideshow/slideshow-markdown-renderer.tsx @@ -3,13 +3,12 @@ * * SPDX-License-Identifier: AGPL-3.0-only */ -import type { ScrollProps } from '../editor-page/synced-scroll/scroll-props' -import type { CommonMarkdownRendererProps } from './common-markdown-renderer-props' -import { RevealMarkdownExtension } from './extensions/reveal/reveal-markdown-extension' -import { useMarkdownExtensions } from './hooks/use-markdown-extensions' -import { REVEAL_STATUS, useReveal } from './hooks/use-reveal' +import { RevealMarkdownExtension } from '../../../markdown-renderer/extensions/reveal/reveal-markdown-extension' +import { useMarkdownExtensions } from '../../../markdown-renderer/hooks/use-markdown-extensions' +import { REVEAL_STATUS, useReveal } from '../../../markdown-renderer/hooks/use-reveal' +import { MarkdownToReact } from '../../../markdown-renderer/markdown-to-react/markdown-to-react' +import type { CommonMarkdownRendererProps } from '../common-markdown-renderer-props' import { LoadingSlide } from './loading-slide' -import { MarkdownToReact } from './markdown-to-react/markdown-to-react' import type { SlideOptions } from '@hedgedoc/commons' import React, { useMemo, useRef } from 'react' @@ -23,14 +22,12 @@ export interface SlideshowMarkdownRendererProps extends CommonMarkdownRendererPr * @param className Additional class names directly given to the div * @param markdownContentLines The markdown lines * @param baseUrl The base url of the renderer - * @param newlinesAreBreaks If newlines are rendered as breaks or not - * @param slideOptions The {@link SlideOptions} to use + * @param newLinesAreBreaks If newlines are rendered as breaks or not */ -export const SlideshowMarkdownRenderer: React.FC = ({ - className, +export const SlideshowMarkdownRenderer: React.FC = ({ markdownContentLines, baseUrl, - newlinesAreBreaks, + newLinesAreBreaks, slideOptions }) => { const markdownBodyRef = useRef(null) @@ -49,17 +46,17 @@ export const SlideshowMarkdownRenderer: React.FC ) : ( ), - [extensions, markdownContentLines, newlinesAreBreaks, revealStatus] + [extensions, markdownContentLines, newLinesAreBreaks, revealStatus] ) return (
-
+
{slideShowDOM}