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>

src/components/editor/editor.tsx

@@ -6,7 +6,7 @@ import { setEditorModeConfig } from '../../redux/editor/methods'
 import { Splitter } from '../common/splitter/splitter'
 import { InfoBanner } from '../landing/layout/info-banner'
 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 { TaskBar } from './task-bar/task-bar'
 
@@ -50,7 +50,7 @@ https://vimeo.com/23237102
           showLeft={editorMode === EditorMode.EDITOR || editorMode === EditorMode.BOTH}
           left={<EditorWindow onContentChange={content => setMarkdownContent(content)} content={markdownContent}/>}
           showRight={editorMode === EditorMode.PREVIEW || (editorMode === EditorMode.BOTH)}
-          right={<MarkdownPreview content={markdownContent}/>}
+          right={<MarkdownRenderer content={markdownContent}/>}
           containerClassName={'overflow-hidden'}/>
       </div>
     </Fragment>

src/components/editor/markdown-preview/replace-components/video-util.ts

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

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

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

src/components/editor/markdown-renderer/regex-plugins/replace-pdf-short-code.ts

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

src/components/editor/markdown-renderer/replace-components/codi-md-tag-utils.ts

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

src/components/editor/markdown-renderer/replace-components/gist/gist-frame.tsx

@@ -1,7 +1,7 @@
 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 { getIdFromCodiMdTag } from '../video-util'
 import './gist-frame.scss'
 import preview from './gist-preview.png'
 
@@ -15,8 +15,9 @@ interface resizeEvent {
 }
 
 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
     counterMap.set(gistId, count)
     return (

src/components/editor/markdown-renderer/replace-components/pdf/pdf-frame.tsx

@@ -1,26 +1,31 @@
 import { DomElement } from 'domhandler'
 import React, { ReactElement } from 'react'
 import { ExternalLink } from '../../../../common/links/external-link'
+import { getAttributesFromCodiMdTag } from '../codi-md-tag-utils'
 import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
-import { getIdFromCodiMdTag, VideoFrameProps } from '../video-util'
 import './pdf-frame.scss'
 
 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
     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 (
     <OneClickEmbedding containerClassName={'embed-responsive embed-responsive-4by3'}
       previewContainerClassName={'embed-responsive-item bg-danger'} hoverIcon={'file-pdf-o'}
       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>
     </OneClickEmbedding>
   )

src/components/editor/markdown-renderer/replace-components/vimeo/vimeo-frame.tsx

@@ -1,11 +1,12 @@
 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 { getIdFromCodiMdTag, VideoFrameProps } from '../video-util'
 
 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
     counterMap.set(videoId, count)
     return <VimeoFrame key={`vimeo_${videoId}_${count}`} id={videoId}/>
@@ -18,7 +19,11 @@ interface VimeoApiResponse {
   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 response = await fetch(`https://vimeo.com/api/v2/video/${id}.json`, {
       credentials: 'omit',

src/components/editor/markdown-renderer/replace-components/youtube/youtube-frame.tsx

@@ -1,18 +1,23 @@
 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 { getIdFromCodiMdTag, VideoFrameProps } from '../video-util'
 
 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
     counterMap.set(videoId, count)
     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 (
     <OneClickEmbedding containerClassName={'embed-responsive embed-responsive-16by9'}
       previewContainerClassName={'embed-responsive-item'} hoverIcon={'youtube-play'}