Refactor video-util.ts and rename markdown-preview (#233)

* Refactor video-util.ts
* Rename markdown-preview to markdown-renderer and refactor some methods

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
mrdrogdrog 2020-06-20 21:05:24 +02:00 committed by GitHub
parent 5f4cc63eb4
commit 7e9a828d44
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 51 additions and 39 deletions

View file

@ -6,7 +6,7 @@ import { setEditorModeConfig } from '../../redux/editor/methods'
import { Splitter } from '../common/splitter/splitter' import { Splitter } from '../common/splitter/splitter'
import { InfoBanner } from '../landing/layout/info-banner' import { InfoBanner } from '../landing/layout/info-banner'
import { EditorWindow } from './editor-window/editor-window' import { EditorWindow } from './editor-window/editor-window'
import { MarkdownPreview } from './markdown-preview/markdown-preview' import { MarkdownRenderer } from './markdown-renderer/markdown-renderer'
import { EditorMode } from './task-bar/editor-view-mode' import { EditorMode } from './task-bar/editor-view-mode'
import { TaskBar } from './task-bar/task-bar' import { TaskBar } from './task-bar/task-bar'
@ -50,7 +50,7 @@ https://vimeo.com/23237102
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={<MarkdownPreview content={markdownContent}/>} right={<MarkdownRenderer content={markdownContent}/>}
containerClassName={'overflow-hidden'}/> containerClassName={'overflow-hidden'}/>
</div> </div>
</Fragment> </Fragment>

View file

@ -1,12 +0,0 @@
import { DomElement } from 'domhandler'
export const getIdFromCodiMdTag = (node: DomElement, tagName: string): (string | undefined) => {
if (node.name !== `codimd-${tagName}` || !node.attribs || !node.attribs.id) {
return
}
return node.attribs.id
}
export interface VideoFrameProps {
id: string
}

View file

@ -15,7 +15,7 @@ import React, { ReactElement, useMemo } from 'react'
import ReactHtmlParser, { convertNodeToElement, Transform } from 'react-html-parser' import ReactHtmlParser, { convertNodeToElement, Transform } from 'react-html-parser'
import { createRenderContainer, validAlertLevels } from './container-plugins/alert' import { createRenderContainer, validAlertLevels } from './container-plugins/alert'
import { MarkdownItParserDebugger } from './markdown-it-plugins/parser-debugger' import { MarkdownItParserDebugger } from './markdown-it-plugins/parser-debugger'
import './markdown-preview.scss' import './markdown-renderer.scss'
import { replaceGistLink } from './regex-plugins/replace-gist-link' import { replaceGistLink } from './regex-plugins/replace-gist-link'
import { replaceLegacyGistShortCode } from './regex-plugins/replace-legacy-gist-short-code' import { replaceLegacyGistShortCode } from './regex-plugins/replace-legacy-gist-short-code'
import { replaceLegacySlideshareShortCode } from './regex-plugins/replace-legacy-slideshare-short-code' import { replaceLegacySlideshareShortCode } from './regex-plugins/replace-legacy-slideshare-short-code'
@ -47,7 +47,7 @@ const tryToReplaceNode = (node: DomElement, componentReplacer2Identifier2Counter
.find((replacement) => !!replacement) .find((replacement) => !!replacement)
} }
const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({ content }) => { const MarkdownRenderer: React.FC<MarkdownPreviewProps> = ({ content }) => {
const markdownIt = useMemo(() => { const markdownIt = useMemo(() => {
const md = new MarkdownIt('default', { const md = new MarkdownIt('default', {
html: true, html: true,
@ -98,4 +98,4 @@ const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({ content }) => {
) )
} }
export { MarkdownPreview } export { MarkdownRenderer }

View file

@ -6,6 +6,6 @@ export const replacePdfShortCode: RegexOptions = {
replace: (match) => { replace: (match) => {
// ESLint wants to collapse this tag, but then the tag won't be valid html anymore. // ESLint wants to collapse this tag, but then the tag won't be valid html anymore.
// noinspection CheckTagEmptyBody // noinspection CheckTagEmptyBody
return `<codimd-pdf id="${match}"></codimd-pdf>` return `<codimd-pdf url="${match}"></codimd-pdf>`
} }
} }

View file

@ -0,0 +1,8 @@
import { DomElement } from 'domhandler'
export const getAttributesFromCodiMdTag = (node: DomElement, tagName: string): ({ [s: string]: string; }|undefined) => {
if (node.name !== `codimd-${tagName}` || !node.attribs) {
return
}
return node.attribs
}

View file

@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react' import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { ComponentReplacer } from '../../markdown-preview' import { ComponentReplacer } from '../../markdown-renderer'
import { getAttributesFromCodiMdTag } from '../codi-md-tag-utils'
import { OneClickEmbedding } from '../one-click-frame/one-click-embedding' import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
import { getIdFromCodiMdTag } from '../video-util'
import './gist-frame.scss' import './gist-frame.scss'
import preview from './gist-preview.png' import preview from './gist-preview.png'
@ -15,8 +15,9 @@ interface resizeEvent {
} }
const getElementReplacement:ComponentReplacer = (node, counterMap) => { const getElementReplacement:ComponentReplacer = (node, counterMap) => {
const gistId = getIdFromCodiMdTag(node, 'gist') const attributes = getAttributesFromCodiMdTag(node, 'gist')
if (gistId) { if (attributes && attributes.id) {
const gistId = attributes.id
const count = (counterMap.get(gistId) || 0) + 1 const count = (counterMap.get(gistId) || 0) + 1
counterMap.set(gistId, count) counterMap.set(gistId, count)
return ( return (

View file

@ -1,26 +1,31 @@
import { DomElement } from 'domhandler' import { DomElement } from 'domhandler'
import React, { ReactElement } from 'react' import React, { ReactElement } from 'react'
import { ExternalLink } from '../../../../common/links/external-link' import { ExternalLink } from '../../../../common/links/external-link'
import { getAttributesFromCodiMdTag } from '../codi-md-tag-utils'
import { OneClickEmbedding } from '../one-click-frame/one-click-embedding' import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
import { getIdFromCodiMdTag, VideoFrameProps } from '../video-util'
import './pdf-frame.scss' import './pdf-frame.scss'
const getElementReplacement = (node: DomElement, counterMap: Map<string, number>): (ReactElement | undefined) => { const getElementReplacement = (node: DomElement, counterMap: Map<string, number>): (ReactElement | undefined) => {
const pdfUrl = getIdFromCodiMdTag(node, 'pdf') const attributes = getAttributesFromCodiMdTag(node, 'pdf')
if (pdfUrl) { if (attributes && attributes.url) {
const pdfUrl = attributes.url
const count = (counterMap.get(pdfUrl) || 0) + 1 const count = (counterMap.get(pdfUrl) || 0) + 1
counterMap.set(pdfUrl, count) counterMap.set(pdfUrl, count)
return <PdfFrame key={`pdf_${pdfUrl}_${count}`} id={pdfUrl}/> return <PdfFrame key={`pdf_${pdfUrl}_${count}`} url={pdfUrl}/>
} }
} }
export const PdfFrame: React.FC<VideoFrameProps> = ({ id }) => { export interface PdfFrameProps {
url: string
}
export const PdfFrame: React.FC<PdfFrameProps> = ({ url }) => {
return ( return (
<OneClickEmbedding containerClassName={'embed-responsive embed-responsive-4by3'} <OneClickEmbedding containerClassName={'embed-responsive embed-responsive-4by3'}
previewContainerClassName={'embed-responsive-item bg-danger'} hoverIcon={'file-pdf-o'} previewContainerClassName={'embed-responsive-item bg-danger'} hoverIcon={'file-pdf-o'}
loadingImageUrl={''}> loadingImageUrl={''}>
<object type={'application/pdf'} data={id} className={'pdf-frame'}> <object type={'application/pdf'} data={url} className={'pdf-frame'}>
<ExternalLink text={id} href={id}/> <ExternalLink text={url} href={url}/>
</object> </object>
</OneClickEmbedding> </OneClickEmbedding>
) )

View file

@ -1,11 +1,12 @@
import React, { useCallback } from 'react' import React, { useCallback } from 'react'
import { ComponentReplacer } from '../../markdown-preview' import { ComponentReplacer } from '../../markdown-renderer'
import { getAttributesFromCodiMdTag } from '../codi-md-tag-utils'
import { OneClickEmbedding } from '../one-click-frame/one-click-embedding' import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
import { getIdFromCodiMdTag, VideoFrameProps } from '../video-util'
const getElementReplacement:ComponentReplacer = (node, counterMap) => { const getElementReplacement:ComponentReplacer = (node, counterMap) => {
const videoId = getIdFromCodiMdTag(node, 'vimeo') const attributes = getAttributesFromCodiMdTag(node, 'vimeo')
if (videoId) { if (attributes && attributes.id) {
const videoId = attributes.id
const count = (counterMap.get(videoId) || 0) + 1 const count = (counterMap.get(videoId) || 0) + 1
counterMap.set(videoId, count) counterMap.set(videoId, count)
return <VimeoFrame key={`vimeo_${videoId}_${count}`} id={videoId}/> return <VimeoFrame key={`vimeo_${videoId}_${count}`} id={videoId}/>
@ -18,7 +19,11 @@ interface VimeoApiResponse {
thumbnail_large?: string thumbnail_large?: string
} }
export const VimeoFrame: React.FC<VideoFrameProps> = ({ id }) => { export interface VimeoFrameProps {
id: string
}
export const VimeoFrame: React.FC<VimeoFrameProps> = ({ id }) => {
const getPreviewImageLink = useCallback(async () => { const getPreviewImageLink = useCallback(async () => {
const response = await fetch(`https://vimeo.com/api/v2/video/${id}.json`, { const response = await fetch(`https://vimeo.com/api/v2/video/${id}.json`, {
credentials: 'omit', credentials: 'omit',

View file

@ -1,18 +1,23 @@
import React from 'react' import React from 'react'
import { ComponentReplacer } from '../../markdown-preview' import { ComponentReplacer } from '../../markdown-renderer'
import { getAttributesFromCodiMdTag } from '../codi-md-tag-utils'
import { OneClickEmbedding } from '../one-click-frame/one-click-embedding' import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
import { getIdFromCodiMdTag, VideoFrameProps } from '../video-util'
const getElementReplacement: ComponentReplacer = (node, counterMap) => { const getElementReplacement: ComponentReplacer = (node, counterMap) => {
const videoId = getIdFromCodiMdTag(node, 'youtube') const attributes = getAttributesFromCodiMdTag(node, 'youtube')
if (videoId) { if (attributes && attributes.id) {
const videoId = attributes.id
const count = (counterMap.get(videoId) || 0) + 1 const count = (counterMap.get(videoId) || 0) + 1
counterMap.set(videoId, count) counterMap.set(videoId, count)
return <YouTubeFrame key={`youtube_${videoId}_${count}`} id={videoId}/> return <YouTubeFrame key={`youtube_${videoId}_${count}`} id={videoId}/>
} }
} }
export const YouTubeFrame: React.FC<VideoFrameProps> = ({ id }) => { export interface YouTubeFrameProps {
id: string
}
export const YouTubeFrame: React.FC<YouTubeFrameProps> = ({ id }) => {
return ( return (
<OneClickEmbedding containerClassName={'embed-responsive embed-responsive-16by9'} <OneClickEmbedding containerClassName={'embed-responsive embed-responsive-16by9'}
previewContainerClassName={'embed-responsive-item'} hoverIcon={'youtube-play'} previewContainerClassName={'embed-responsive-item'} hoverIcon={'youtube-play'}