Use twitter emojis for markdown-it-emoji

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

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

@@ -1,5 +1,6 @@
 import equal from 'deep-equal'
 import { DomElement } from 'domhandler'
+import { Data } from 'emoji-mart/dist-es/utils/data'
 import yaml from 'js-yaml'
 import MarkdownIt from 'markdown-it'
 import abbreviation from 'markdown-it-abbr'
@@ -62,6 +63,7 @@ import { QuoteOptionsReplacer } from './replace-components/quote-options/quote-o
 import { TocReplacer } from './replace-components/toc/toc-replacer'
 import { VimeoReplacer } from './replace-components/vimeo/vimeo-replacer'
 import { YoutubeReplacer } from './replace-components/youtube/youtube-replacer'
+import emojiData from 'emoji-mart/data/twitter.json'
 
 export interface MarkdownRendererProps {
   content: string
@@ -72,6 +74,15 @@ export interface MarkdownRendererProps {
   onFirstHeadingChange?: (firstHeading: string | undefined) => void
 }
 
+const markdownItTwitterEmojis = Object.keys((emojiData as unknown as Data).emojis)
+  .reduce((reduceObject, emojiIdentifier) => {
+    const emoji = (emojiData as unknown as Data).emojis[emojiIdentifier]
+    if (emoji.b) {
+      reduceObject[emojiIdentifier] = `&#x${emoji.b};`
+    }
+    return reduceObject
+  }, {} as { [key: string]: string })
+
 export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content, onMetaDataChange, onFirstHeadingChange, onTocChange, className, wide }) => {
   const [tocAst, setTocAst] = useState<TocAst>()
   const [lastTocAst, setLastTocAst] = useState<TocAst>()
@@ -142,7 +153,9 @@ export const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content, onM
     } else {
       md.use(plantumlError)
     }
-    md.use(emoji)
+    md.use(emoji, {
+      defs: markdownItTwitterEmojis
+    })
     md.use(abbreviation)
     md.use(definitionList)
     md.use(subscript)

src/external-types/markdown-it-emoji/index.d.ts

@@ -1,6 +1,6 @@
-
 declare module 'markdown-it-emoji' {
   import MarkdownIt from 'markdown-it/lib'
-  const markdownItEmoji: MarkdownIt.PluginSimple
+  import { EmojiOptions } from './interface'
+  const markdownItEmoji: MarkdownIt.PluginWithOptions<EmojiOptions>
   export = markdownItEmoji
 }

src/external-types/markdown-it-emoji/interface.d.ts

@@ -0,0 +1,5 @@
+export interface EmojiOptions {
+  defs?: { [key: string]: string },
+  enabled: string[],
+  shortcuts?: { [key: string]: string }
+}