mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-20 10:15:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: reorganize props and locations of markdown renderers

Browse source 
Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
This commit is contained in:
Tilman Vatteroth 2023-04-11 17:12:30 +02:00
parent 7abbe79ec9
commit 6b3743e6a3
13 changed files with 214 additions and 243 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/components/markdown-renderer/common-markdown-renderer-props.ts
View file

@ -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<HTMLDivElement>
newlinesAreBreaks?: boolean
lineOffset?: number
className?: string
markdownContentLines: string[]
}

75
frontend/src/components/markdown-renderer/document-markdown-renderer.tsx
View file

@ -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<DocumentMarkdownRendererProps> = ({
className,
markdownContentLines,
onLineMarkerPositionChanged,
baseUrl,
outerContainerRef,
newlinesAreBreaks
}) => {
const markdownBodyRef = useRef<HTMLDivElement>(null)
const currentLineMarkers = useRef<LineMarkers[]>()
const extensions = useMarkdownExtensions(
baseUrl,
useMemo(
() => [
new HeadlineAnchorsMarkdownExtension(),
new LinemarkerMarkdownExtension((values) => (currentLineMarkers.current = values))
],
[]
)
)
useTranslation()
useCalculateLineMarkerPosition(markdownBodyRef, currentLineMarkers.current, onLineMarkerPositionChanged)
return (
<div ref={outerContainerRef} className={`position-relative`}>
<div
{...cypressId('markdown-body')}
ref={markdownBodyRef}
data-word-count-target={true}
className={`${className ?? ''} markdown-body w-100 d-flex flex-column align-items-center`}>
<MarkdownToReact
markdownContentLines={markdownContentLines}
markdownRenderExtensions={extensions}
newlinesAreBreaks={newlinesAreBreaks}
allowHtml={true}
/>
</div>
</div>
)
}
export default DocumentMarkdownRenderer

21
frontend/src/components/markdown-renderer/loading-slide.tsx
View file

@ -1,21 +0,0 @@
/*
* SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import React from 'react'
import { Trans, useTranslation } from 'react-i18next'
/**
* Shows a static text placeholder while reveal.js is loading.
*/
export const LoadingSlide: React.FC = () => {
useTranslation()
return (
<section>
<h1>
<Trans i18nKey={'common.loading'} />
</h1>
</section>
)
}

67
frontend/src/components/markdown-renderer/slideshow-markdown-renderer.tsx
View file

@ -1,67 +0,0 @@
/*
* SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
*
* 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 { 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'
export interface SlideshowMarkdownRendererProps extends CommonMarkdownRendererProps {
slideOptions?: SlideOptions
}
/**
* Renders the note as a reveal.js presentation.
*
* @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
*/
export const SlideshowMarkdownRenderer: React.FC<SlideshowMarkdownRendererProps & ScrollProps> = ({
className,
markdownContentLines,
baseUrl,
newlinesAreBreaks,
slideOptions
}) => {
const markdownBodyRef = useRef<HTMLDivElement>(null)
const extensions = useMarkdownExtensions(
baseUrl,
useMemo(() => [new RevealMarkdownExtension()], [])
)
const revealStatus = useReveal(markdownContentLines, slideOptions)
const slideShowDOM = useMemo(
() =>
revealStatus === REVEAL_STATUS.INITIALISED ? (
<MarkdownToReact
markdownContentLines={markdownContentLines}
markdownRenderExtensions={extensions}
allowHtml={true}
newlinesAreBreaks={newlinesAreBreaks}
/>
) : (
<LoadingSlide />
),
[extensions, markdownContentLines, newlinesAreBreaks, revealStatus]
)
return (
<div className={'reveal'}>
<div ref={markdownBodyRef} className={`${className ?? ''} slides`}>
{slideShowDOM}
</div>
</div>
)
}