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>
This commit is contained in:
Philip Molares 2020-06-25 22:38:10 +02:00 committed by GitHub
parent 0df90c1a2a
commit 937a2e9eb9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 45 additions and 4 deletions

View file

@ -28,6 +28,7 @@
- Better support for RTL-languages (and LTR-content in a RTL-page) - 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 - 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 - 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 ### Changed

View file

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

View file

@ -1,13 +1,26 @@
@import '../../../../node_modules/github-markdown-css/github-markdown.css'; @import '../../../../node_modules/github-markdown-css/github-markdown.css';
.markdown-body { .markdown-body {
max-width: 758px;
font-family: 'Source Sans Pro', "twemoji", sans-serif; font-family: 'Source Sans Pro', "twemoji", sans-serif;
.alert > p, .alert > ul { .alert > p, .alert > ul {
margin-bottom: 0; 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 { a.heading-anchor {
margin-left: -1.25em; margin-left: -1.25em;
font-size: 0.75em; font-size: 0.75em;

View file

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

View file

@ -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>)
}
}