Add markdown renderer for motd (#1840)

* Add markdown renderer for motd

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

src/components/application-loader/initializers/fetch-motd.ts

@@ -17,12 +17,12 @@ const log = new Logger('Motd')
  * To check if the motd has changed the "last modified" header from the request
  * will be compared to the saved value from the browser's local storage.
  *
- * @param customizeAssetsUrl the URL where the motd.txt can be found.
+ * @param customizeAssetsUrl the URL where the motd.md can be found.
  * @return A promise that gets resolved if the motd was fetched successfully.
  */
 export const fetchMotd = async (customizeAssetsUrl: string): Promise<void> => {
   const cachedLastModified = window.localStorage.getItem(MOTD_LOCAL_STORAGE_KEY)
-  const motdUrl = `${customizeAssetsUrl}motd.txt`
+  const motdUrl = `${customizeAssetsUrl}motd.md`
 
   if (cachedLastModified) {
     const response = await fetch(motdUrl, {
@@ -48,7 +48,7 @@ export const fetchMotd = async (customizeAssetsUrl: string): Promise<void> => {
 
   const lastModified = response.headers.get('Last-Modified') || response.headers.get('etag')
   if (!lastModified) {
-    log.warn("'Last-Modified' or 'Etag' not found for motd.txt!")
+    log.warn("'Last-Modified' or 'Etag' not found for motd.md!")
   }
 
   const motdText = await response.text()

src/components/common/motd-modal/motd-modal.tsx

@@ -4,13 +4,16 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { Fragment, useCallback, useMemo } from 'react'
+import React, { Suspense, useCallback } from 'react'
 import { Button, Modal } from 'react-bootstrap'
 import { CommonModal } from '../modals/common-modal'
 import { Trans, useTranslation } from 'react-i18next'
 import { useApplicationState } from '../../../hooks/common/use-application-state'
 import { dismissMotd } from '../../../redux/motd/methods'
 import { cypressId } from '../../../utils/cypress-attribute'
+import { WaitSpinner } from '../wait-spinner/wait-spinner'
+
+const MotdRenderer = React.lazy(() => import('./motd-renderer'))
 
 /**
  * Reads the motd from the global application state and shows it in a modal.
@@ -21,23 +24,6 @@ export const MotdModal: React.FC = () => {
   useTranslation()
   const motdState = useApplicationState((state) => state.motd)
 
-  const domContent = useMemo(() => {
-    if (!motdState) {
-      return null
-    }
-    let index = 0
-    return motdState.text
-      ?.split('\n')
-      .map((line) => <span key={(index += 1)}>{line}</span>)
-      .reduce((previousLine, currentLine, currentLineIndex) => (
-        <Fragment key={currentLineIndex}>
-          {previousLine}
-          <br />
-          {currentLine}
-        </Fragment>
-      ))
-  }, [motdState])
-
   const dismiss = useCallback(() => {
     if (!motdState) {
       return
@@ -49,8 +35,12 @@ export const MotdModal: React.FC = () => {
     return null
   } else {
     return (
-      <CommonModal {...cypressId('motd')} show={!!motdState} title={'motd.title'}>
-        <Modal.Body>{domContent}</Modal.Body>
+      <CommonModal {...cypressId('motd')} show={true} title={'motd.title'}>
+        <Modal.Body>
+          <Suspense fallback={<WaitSpinner />}>
+            <MotdRenderer />
+          </Suspense>
+        </Modal.Body>
         <Modal.Footer>
           <Button variant={'success'} onClick={dismiss} {...cypressId('motd-dismiss')}>
             <Trans i18nKey={'common.dismiss'} />

src/components/common/motd-modal/motd-renderer.tsx

@@ -0,0 +1,48 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { useMemo } from 'react'
+import { GenericSyntaxMarkdownExtension } from '../../markdown-renderer/markdown-extension/generic-syntax-markdown-extension'
+import { useConvertMarkdownToReactDom } from '../../markdown-renderer/hooks/use-convert-markdown-to-react-dom'
+import { LinkifyFixMarkdownExtension } from '../../markdown-renderer/markdown-extension/linkify-fix-markdown-extension'
+import { EmojiMarkdownExtension } from '../../markdown-renderer/markdown-extension/emoji/emoji-markdown-extension'
+import { DebuggerMarkdownExtension } from '../../markdown-renderer/markdown-extension/debugger-markdown-extension'
+import { useApplicationState } from '../../../hooks/common/use-application-state'
+import { ProxyImageMarkdownExtension } from '../../markdown-renderer/markdown-extension/image/proxy-image-markdown-extension'
+import { YoutubeMarkdownExtension } from '../../markdown-renderer/markdown-extension/youtube/youtube-markdown-extension'
+import { AlertMarkdownExtension } from '../../markdown-renderer/markdown-extension/alert-markdown-extension'
+import { SpoilerMarkdownExtension } from '../../markdown-renderer/markdown-extension/spoiler-markdown-extension'
+import { BlockquoteExtraTagMarkdownExtension } from '../../markdown-renderer/markdown-extension/blockquote/blockquote-extra-tag-markdown-extension'
+import { VimeoMarkdownExtension } from '../../markdown-renderer/markdown-extension/vimeo/vimeo-markdown-extension'
+
+/**
+ * Reads the motd from the global application state and renders it as markdown with a subset of the usual features and without HTML support.
+ */
+export const MotdRenderer: React.FC = () => {
+  const extensions = useMemo(
+    () => [
+      new YoutubeMarkdownExtension(),
+      new VimeoMarkdownExtension(),
+      new ProxyImageMarkdownExtension(),
+      new BlockquoteExtraTagMarkdownExtension(),
+      new AlertMarkdownExtension(),
+      new SpoilerMarkdownExtension(),
+      new GenericSyntaxMarkdownExtension(),
+      new LinkifyFixMarkdownExtension(),
+      new EmojiMarkdownExtension(),
+      new DebuggerMarkdownExtension()
+    ],
+    []
+  )
+
+  const motdState = useApplicationState((state) => state.motd)
+  const lines = useMemo(() => (motdState ? motdState.text.split('\n') : []), [motdState])
+  const dom = useConvertMarkdownToReactDom(lines, extensions, true, false)
+
+  return <div className={'markdown-body'}>{dom}</div>
+}
+
+export default MotdRenderer

src/components/markdown-renderer/hooks/use-convert-markdown-to-react-dom.ts

@@ -21,12 +21,14 @@ import { SanitizerMarkdownExtension } from '../markdown-extension/sanitizer/sani
  * @param markdownContentLines The markdown code lines that should be rendered
  * @param additionalMarkdownExtensions A list of {@link MarkdownExtension markdown extensions} that should be used
  * @param newlinesAreBreaks Defines if the alternative break mode of markdown it should be used
+ * @param allowHtml Defines if html is allowed in markdown
  * @return The React DOM that represents the rendered markdown code
  */
 export const useConvertMarkdownToReactDom = (
   markdownContentLines: string[],
   additionalMarkdownExtensions: MarkdownExtension[],
-  newlinesAreBreaks?: boolean
+  newlinesAreBreaks = true,
+  allowHtml = true
 ): ValidReactDomElement[] => {
   const lineNumberMapper = useMemo(() => new LineIdMapper(), [])
   const htmlToReactTransformer = useMemo(() => new NodeToReactTransformer(), [])
@@ -40,8 +42,8 @@ export const useConvertMarkdownToReactDom = (
 
   const markdownIt = useMemo(() => {
     const newMarkdownIt = new MarkdownIt('default', {
-      html: true,
-      breaks: newlinesAreBreaks ?? true,
+      html: allowHtml,
+      breaks: newlinesAreBreaks,
       langPrefix: '',
       typographer: true
     })
@@ -52,7 +54,7 @@ export const useConvertMarkdownToReactDom = (
       newMarkdownIt.use((markdownIt) => extension.configureMarkdownItPost(markdownIt))
     )
     return newMarkdownIt
-  }, [markdownExtensions, newlinesAreBreaks])
+  }, [allowHtml, markdownExtensions, newlinesAreBreaks])
 
   useMemo(() => {
     const replacers = markdownExtensions.reduce(

src/components/markdown-renderer/replace-components/component-replacer.ts

@@ -6,7 +6,6 @@
 
 import type { Element, Node } from 'domhandler'
 import { isText } from 'domhandler'
-import type MarkdownIt from 'markdown-it'
 import type { ReactElement } from 'react'
 
 export type ValidReactDomElement = ReactElement | string | null
@@ -15,8 +14,6 @@ export type SubNodeTransform = (node: Node, subKey: number | string) => NodeRepl
 
 export type NativeRenderer = () => ValidReactDomElement
 
-export type MarkdownItPlugin = MarkdownIt.PluginSimple | MarkdownIt.PluginWithOptions | MarkdownIt.PluginWithParams
-
 export const REPLACE_WITH_NOTHING = null
 export const DO_NOT_REPLACE = undefined
 export type NodeReplacement = ValidReactDomElement | typeof REPLACE_WITH_NOTHING | typeof DO_NOT_REPLACE