View mode wider (#271)

made some components wider in View Mode
These objects include
- `<img>` alone in a paragraph
- `<codimd-youtube>`
- `<codimd-vimeo>`
- `<codimd-pdf>`

This can be toggled via the `wider` prop in `MarkdownRenderer`

Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

CHANGELOG.md

@@ -28,6 +28,7 @@
 - Better support for RTL-languages (and LTR-content in a RTL-page)
 - Users may now change their display name and password (only email accounts) on the new profile page
 - Highlighted code blocks can now use line wrapping and line numbers at once
+- Images, videos, and other non-text content is now wider in View Mode
 
 ### Changed
 

src/components/editor/editor.tsx

@@ -78,7 +78,7 @@ let a = 1
           showLeft={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}
           left={<EditorWindow onContentChange={content => setMarkdownContent(content)} content={markdownContent}/>}
           showRight={editorMode === EditorMode.PREVIEW || (editorMode === EditorMode.BOTH)}
-          right={<MarkdownRenderer content={markdownContent}/>}
+          right={<MarkdownRenderer content={markdownContent} wide={editorMode === EditorMode.PREVIEW}/>}
           containerClassName={'overflow-hidden'}/>
       </div>
     </Fragment>

src/components/editor/markdown-renderer/markdown-renderer.scss

@@ -1,13 +1,26 @@
 @import '../../../../node_modules/github-markdown-css/github-markdown.css';
 
 .markdown-body {
-  max-width: 758px;
   font-family: 'Source Sans Pro', "twemoji", sans-serif;
 
   .alert > p, .alert > ul {
     margin-bottom: 0;
   }
 
+  // I know this is bad :( sry
+  & > * {
+    width: 100%;
+    max-width: 900px;
+  }
+
+  &.wider {
+    max-width: 1500px;
+
+    & > .wider-possible {
+      max-width: 1500px;
+    }
+  }
+
   a.heading-anchor {
     margin-left: -1.25em;
     font-size: 0.75em;

src/components/editor/markdown-renderer/markdown-renderer.tsx

@@ -38,6 +38,7 @@ import { replaceYouTubeLink } from './regex-plugins/replace-youtube-link'
 import { ComponentReplacer, SubNodeConverter } from './replace-components/ComponentReplacer'
 import { GistReplacer } from './replace-components/gist/gist-replacer'
 import { HighlightedCodeReplacer } from './replace-components/highlighted-fence/highlighted-fence-replacer'
+import { PossibleWiderReplacer } from './replace-components/possible-wider/possible-wider-replacer'
 import { ImageReplacer } from './replace-components/image/image-replacer'
 import { MathjaxReplacer } from './replace-components/mathjax/mathjax-replacer'
 import { PdfReplacer } from './replace-components/pdf/pdf-replacer'
@@ -48,6 +49,7 @@ import { YoutubeReplacer } from './replace-components/youtube/youtube-replacer'
 
 export interface MarkdownPreviewProps {
   content: string
+  wide?: boolean
 }
 
 const createMarkdownIt = ():MarkdownIt => {
@@ -115,11 +117,12 @@ const tryToReplaceNode = (node: DomElement, index: number, allReplacers: Compone
     .find((replacement) => !!replacement)
 }
 
-const MarkdownRenderer: React.FC<MarkdownPreviewProps> = ({ content }) => {
+const MarkdownRenderer: React.FC<MarkdownPreviewProps> = ({ content, wide }) => {
   const markdownIt = useMemo(createMarkdownIt, [])
 
   const result: ReactElement[] = useMemo(() => {
     const allReplacers: ComponentReplacer[] = [
+      new PossibleWiderReplacer(),
       new GistReplacer(),
       new YoutubeReplacer(),
       new VimeoReplacer(),
@@ -140,7 +143,7 @@ const MarkdownRenderer: React.FC<MarkdownPreviewProps> = ({ content }) => {
 
   return (
     <div className={'bg-light container-fluid flex-fill h-100 overflow-y-scroll pb-5'}>
-      <div className={'markdown-body container-fluid'}>
+      <div className={`markdown-body d-flex flex-column align-items-center container-fluid ${wide ? 'wider' : ''}`}>
         <MathJaxReact.Provider>
           {result}
         </MathJaxReact.Provider>

src/components/editor/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.tsx

@@ -0,0 +1,24 @@
+import { DomElement } from 'domhandler'
+import React from 'react'
+import { ComponentReplacer, SubNodeConverter } from '../ComponentReplacer'
+
+export class PossibleWiderReplacer implements ComponentReplacer {
+  getReplacement (node: DomElement, index: number, subNodeConverter: SubNodeConverter): React.ReactElement | undefined {
+    if (node.name !== 'p') {
+      return
+    }
+    if (!node.children || node.children.length !== 1) {
+      return
+    }
+    const childIsImage = node.children[0].name === 'img'
+    const childIsYoutube = node.children[0].name === 'codimd-youtube'
+    const childIsVimeo = node.children[0].name === 'codimd-vimeo'
+    const childIsPDF = node.children[0].name === 'codimd-pdf'
+    if (!(childIsImage || childIsYoutube || childIsVimeo || childIsPDF)) {
+      return
+    }
+    return (<p className='wider-possible'>
+      {subNodeConverter(node, index)}
+    </p>)
+  }
+}