modularize renderer (#552)

src/components/editor/app-bar/help-button/cheatsheet.tsx

@@ -1,7 +1,10 @@
-import React from 'react'
+import MarkdownIt from 'markdown-it'
+import markdownItContainer from 'markdown-it-container'
+import React, { useCallback } from 'react'
 import { Table } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { MarkdownRenderer } from '../../../markdown-renderer/markdown-renderer'
+import { BasicMarkdownRenderer } from '../../../markdown-renderer/basic-markdown-renderer'
+import { createRenderContainer, validAlertLevels } from '../../../markdown-renderer/markdown-it-plugins/alert-container'
 import { HighlightedCode } from '../../../markdown-renderer/replace-components/highlighted-fence/highlighted-code/highlighted-code'
 import './cheatsheet.scss'
 
@@ -27,6 +30,13 @@ export const Cheatsheet: React.FC = () => {
     ':smile:',
     `:::info\n${t('editor.help.cheatsheet.exampleAlert')}\n:::`
   ]
+
+  const markdownItPlugins = useCallback((md: MarkdownIt) => {
+    validAlertLevels.forEach(level => {
+      md.use(markdownItContainer, level, { render: createRenderContainer(level) })
+    })
+  }, [])
+
   return (
     <Table className="table-condensed table-cheatsheet">
       <thead>
@@ -40,14 +50,10 @@ export const Cheatsheet: React.FC = () => {
           return (
             <tr key={key}>
               <td>
-                <MarkdownRenderer
+                <BasicMarkdownRenderer
                   content={code}
                   wide={false}
-                  onTaskCheckedChange={(_) => null}
-                  onTocChange={() => false}
-                  onMetaDataChange={() => false}
-                  onFirstHeadingChange={() => false}
-                  onLineMarkerPositionChanged={() => false}
+                  onConfigureMarkdownIt={markdownItPlugins}
                 />
               </td>
               <td className={'markdown-body'}>

src/components/editor/app-bar/help-button/help-button.tsx

@@ -6,7 +6,7 @@ import { Cheatsheet } from './cheatsheet'
 import { Links } from './links'
 import { Shortcut } from './shortcuts'
 
-enum HelpTabStatus {
+export enum HelpTabStatus {
   Cheatsheet='cheatsheet.title',
   Shortcuts='shortcuts.title',
   Links='links.title'

src/components/editor/document-renderer-pane/document-render-pane.tsx

@@ -4,7 +4,8 @@ import useResizeObserver from 'use-resize-observer'
 import { TocAst } from '../../../external-types/markdown-it-toc-done-right/interface'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { ShowIf } from '../../common/show-if/show-if'
-import { LineMarkerPosition, MarkdownRenderer } from '../../markdown-renderer/markdown-renderer'
+import { LineMarkerPosition } from '../../markdown-renderer/types'
+import { FullMarkdownRenderer } from '../../markdown-renderer/full-markdown-renderer'
 import { ScrollProps, ScrollState } from '../scroll/scroll-props'
 import { findLineMarks } from '../scroll/utils'
 import { TableOfContents } from '../table-of-contents/table-of-contents'
@@ -108,16 +109,18 @@ export const DocumentRenderPane: React.FC<DocumentRenderPaneProps & ScrollProps>
     <div className={'bg-light flex-fill pb-5 flex-row d-flex w-100 h-100 overflow-y-scroll'}
       ref={renderer} onScroll={userScroll} onMouseEnter={onMakeScrollSource}>
       <div className={'col-md'}/>
-      <MarkdownRenderer
-        className={'flex-fill mb-3'}
-        content={content}
-        onFirstHeadingChange={onFirstHeadingChange}
-        onLineMarkerPositionChanged={setLineMarks}
-        onMetaDataChange={onMetadataChange}
-        onTaskCheckedChange={onTaskCheckedChange}
-        onTocChange={(tocAst) => setTocAst(tocAst)}
-        wide={wide}
-      />
+      <div className={'bg-light flex-fill'}>
+        <FullMarkdownRenderer
+          className={'flex-fill mb-3'}
+          content={content}
+          onFirstHeadingChange={onFirstHeadingChange}
+          onLineMarkerPositionChanged={setLineMarks}
+          onMetaDataChange={onMetadataChange}
+          onTaskCheckedChange={onTaskCheckedChange}
+          onTocChange={(tocAst) => setTocAst(tocAst)}
+          wide={wide}
+        />
+      </div>
 
       <div className={'col-md'}>
         <ShowIf condition={realWidth >= 1280 && !!tocAst}>

src/components/editor/scroll/utils.ts

@@ -1,4 +1,5 @@
-import { LineMarkerPosition } from '../../markdown-renderer/markdown-renderer'
+import { LineMarkerPosition } from '../../markdown-renderer/types'
+
 export const findLineMarks = (lineMarks: LineMarkerPosition[], lineNumber: number): { lastMarkBefore: LineMarkerPosition | undefined, firstMarkAfter: LineMarkerPosition | undefined } => {
   let lastMarkBefore
   let firstMarkAfter