diff --git a/src/components/editor/markdown-renderer/markdown-renderer.tsx b/src/components/editor/markdown-renderer/markdown-renderer.tsx index 6b4b6339c..5b1eaf7c1 100644 --- a/src/components/editor/markdown-renderer/markdown-renderer.tsx +++ b/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 = ({ content, onMetaDataChange, onFirstHeadingChange, onTocChange, className, wide }) => { const [tocAst, setTocAst] = useState() const [lastTocAst, setLastTocAst] = useState() @@ -142,7 +153,9 @@ export const MarkdownRenderer: React.FC = ({ content, onM } else { md.use(plantumlError) } - md.use(emoji) + md.use(emoji, { + defs: markdownItTwitterEmojis + }) md.use(abbreviation) md.use(definitionList) md.use(subscript) diff --git a/src/external-types/markdown-it-emoji/index.d.ts b/src/external-types/markdown-it-emoji/index.d.ts index eafe7ff75..fcf6b632e 100644 --- a/src/external-types/markdown-it-emoji/index.d.ts +++ b/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 export = markdownItEmoji } diff --git a/src/external-types/markdown-it-emoji/interface.d.ts b/src/external-types/markdown-it-emoji/interface.d.ts new file mode 100644 index 000000000..d91c3f6c2 --- /dev/null +++ b/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 } +}