Basic markdown renderer (#197)

* Add basic markdown it rendering
* Add markdown preview
* Add embedings for vimeo, youtube, gist
* Add support for legacy shortcodes and link detection
* Set "both" as editor default
* Add markdown-it-task-lists
* Add twemoji
* Changed SlideShare short-code behaviour from embedding to generating a link
* Extract markdown it parser debugger into separate component
* Deactivate markdown it linkify for now
* Add link safety attributes
* Add one-click-embedding component and use it
* Added embedding changes and deprecations to CHANGELOG.md

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Philip Molares <philip@mauricedoepke.de>
Co-authored-by: Erik Michelson <github@erik.michelson.eu>

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

@@ -0,0 +1,49 @@
+import { DomElement } from 'domhandler'
+import React, { ReactElement, useCallback } from 'react'
+import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
+import { getIdFromCodiMdTag, VideoFrameProps } from '../video-util'
+
+const getElementReplacement = (node: DomElement, counterMap: Map<string, number>): (ReactElement | undefined) => {
+  const videoId = getIdFromCodiMdTag(node, 'vimeo')
+  if (videoId) {
+    const count = (counterMap.get(videoId) || 0) + 1
+    counterMap.set(videoId, count)
+    return <VimeoFrame key={`vimeo_${videoId}_${count}`} id={videoId}/>
+  }
+}
+
+interface VimeoApiResponse {
+  // Vimeo uses strange names for their fields. ESLint doesn't like that.
+  // eslint-disable-next-line camelcase
+  thumbnail_large?: string
+}
+
+export const VimeoFrame: React.FC<VideoFrameProps> = ({ id }) => {
+  const getPreviewImageLink = useCallback(async () => {
+    const response = await fetch(`https://vimeo.com/api/v2/video/${id}.json`, {
+      credentials: 'omit',
+      referrerPolicy: 'no-referrer'
+    })
+    if (response.status !== 200) {
+      throw new Error('Error while loading data from vimeo api')
+    }
+    const vimeoResponse: VimeoApiResponse[] = await response.json() as VimeoApiResponse[]
+
+    if (vimeoResponse[0] && vimeoResponse[0].thumbnail_large) {
+      return vimeoResponse[0].thumbnail_large
+    } else {
+      throw new Error('Invalid vimeo response')
+    }
+  }, [id])
+
+  return (
+    <OneClickEmbedding containerClassName={'embed-responsive embed-responsive-16by9'} previewContainerClassName={'embed-responsive-item'} loadingImageUrl={'https://i.vimeocdn.com/video/'} hoverIcon={'vimeo-square'}
+      onImageFetch={getPreviewImageLink}>
+      <iframe className='embed-responsive-item' title={`vimeo video of ${id}`}
+        src={`https://player.vimeo.com/video/${id}?autoplay=1`}
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"/>
+    </OneClickEmbedding>
+  )
+}
+
+export { getElementReplacement as getVimeoReplacement }