feat: replace emoji with SVGs (#129) (#584)

Co-authored-by: Anthony Fu <[email protected]>

.gitignore

@@ -10,6 +10,7 @@ dist
 .netlify/
 
 public/shiki
+public/emojis
 
 *~
 *swp

composables/content-parse.ts

@@ -2,9 +2,8 @@
 import type { Emoji } from 'masto'
 import type { Node } from 'ultrahtml'
 import { TEXT_NODE, parse, render, walkSync } from 'ultrahtml'
-import createEmojiRegex from 'emoji-regex'
-
-export const EMOJI_REGEX = createEmojiRegex()
+import { findAndReplaceEmojisInText } from '@iconify/utils'
+import { emojiRegEx, getEmojiAttributes } from '../config/emojis'
 
 const decoder = process.client ? document.createElement('textarea') : null as any as HTMLTextAreaElement
 export function decodeHtml(text: string) {
@@ -16,17 +15,17 @@ export function decodeHtml(text: string) {
  * Parse raw HTML form Mastodon server to AST,
  * with interop of custom emojis and inline Markdown syntax
  */
-export function parseMastodonHTML(html: string, customEmojis: Record<string, Emoji> = {}, markdown = true) {
-  let processed = html
-    // custom emojis
-    .replace(/:([\w-]+?):/g, (_, name) => {
-      const emoji = customEmojis[name]
-
-      return emoji
-        ? `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" data-emoji-id="${name}" />`
-        : `:${name}:`
-    })
-    .replace(EMOJI_REGEX, '<em-emoji native="$&" fallback="$&" />')
+export function parseMastodonHTML(html: string, customEmojis: Record<string, Emoji> = {}, markdown = true, forTiptap = false) {
+  // unicode emojis to images, but only if not converting HTML for Tiptap
+  let processed = forTiptap ? html : replaceUnicodeEmoji(html)
+
+  // custom emojis
+  processed = processed.replace(/:([\w-]+?):/g, (_, name) => {
+    const emoji = customEmojis[name]
+    if (emoji)
+      return `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" data-emoji-id="${name}" />`
+    return `:${name}:`
+  })
 
   if (markdown) {
     // handle code blocks
@@ -66,8 +65,11 @@ export function parseMastodonHTML(html: string, customEmojis: Record<string, Emo
   return parse(processed)
 }
 
+/**
+ * Converts raw HTML form Mastodon server to HTML for Tiptap editor
+ */
 export function convertMastodonHTML(html: string, customEmojis: Record<string, Emoji> = {}) {
-  const tree = parseMastodonHTML(html, customEmojis)
+  const tree = parseMastodonHTML(html, customEmojis, true, true)
   return render(tree)
 }
 
@@ -118,12 +120,22 @@ export function treeToText(input: Node): string {
   if ('children' in input)
     body = (input.children as Node[]).map(n => treeToText(n)).join('')
 
-  // add spaces around emoji to prevent parsing errors: 2 or more consecutive emojis will not be parsed
-  if (input.name === 'img' && input.attributes.class?.includes('custom-emoji'))
-    return ` :${input.attributes['data-emoji-id']}: `
-
-  if (input.name === 'em-emoji')
-    return `${input.attributes.native}`
+  if (input.name === 'img') {
+    if (input.attributes.class?.includes('custom-emoji'))
+      return `:${input.attributes['data-emoji-id']}:`
+    if (input.attributes.class?.includes('iconify-emoji'))
+      return input.attributes.alt
+  }
 
   return pre + body + post
 }
+
+/**
+ * Replace unicode emojis with locally hosted images
+ */
+export function replaceUnicodeEmoji(html: string) {
+  return findAndReplaceEmojisInText(emojiRegEx, html, (match) => {
+    const attrs = getEmojiAttributes(match)
+    return `<img src="${attrs.src}" alt="${attrs.alt}" class="${attrs.class}" />`
+  }) || html
+}

composables/tiptap/emoji.ts

@@ -3,6 +3,7 @@ import {
   mergeAttributes,
   nodeInputRule,
 } from '@tiptap/core'
+import { emojiRegEx, getEmojiAttributes } from '~/config/emojis'
 
 export const Emoji = Node.create({
   name: 'em-emoji',
@@ -14,50 +15,47 @@ export const Emoji = Node.create({
   parseHTML() {
     return [
       {
-        tag: 'em-emoji[native]',
+        tag: 'img.iconify-emoji',
       },
     ]
   },
 
   addAttributes() {
     return {
-      native: {
+      alt: {
         default: null,
       },
-      fallback: {
+      src: {
+        default: null,
+      },
+      class: {
         default: null,
       },
     }
   },
 
   renderHTML(args) {
-    return ['em-emoji', mergeAttributes(this.options.HTMLAttributes, args.HTMLAttributes)]
+    return ['img', mergeAttributes(this.options.HTMLAttributes, args.HTMLAttributes)]
   },
 
   addCommands() {
     return {
-      insertEmoji: name => ({ commands }) => {
+      insertEmoji: code => ({ commands }) => {
         return commands.insertContent({
           type: this.name,
-          attrs: {
-            native: name,
-            fallback: name,
-          },
+          attrs: getEmojiAttributes(code),
         })
       },
     }
   },
 
   addInputRules() {
     const inputRule = nodeInputRule({
-      find: EMOJI_REGEX,
+      find: emojiRegEx as RegExp,
       type: this.type,
       getAttributes: (match) => {
         const [native] = match
-        return {
-          native,
-          fallback: native,
-        }
+        return getEmojiAttributes(native)
       },
     })
     // Error catch for unsupported emoji

config/emojis.ts

@@ -0,0 +1,22 @@
+import { emojiFilename, emojiPrefix, emojiRegEx } from '@iconify-emoji/twemoji'
+import type { EmojiRegexMatch } from '@iconify/utils/lib/emoji/replace/find'
+import { getEmojiMatchesInText } from '@iconify/utils/lib/emoji/replace/find'
+
+// Re-export everything from package
+export * from '@iconify-emoji/twemoji'
+
+// Package name
+export const iconifyEmojiPackage = '@iconify-emoji/twemoji'
+
+export function getEmojiAttributes(input: EmojiRegexMatch | string) {
+  const match = typeof input === 'string'
+    ? getEmojiMatchesInText(emojiRegEx, input)?.[0]
+    : input
+  const file = emojiFilename(match)
+  const className = `iconify-emoji iconify-emoji--${emojiPrefix}${file.padding ? ' iconify-emoji-padded' : ''}`
+  return {
+    class: className,
+    src: `/emojis/${emojiPrefix}/${file.filename}`,
+    alt: match.match,
+  }
+}

package.json

@@ -26,6 +26,8 @@
   },
   "dependencies": {
     "@fnando/sparkline": "^0.3.10",
+    "@iconify-emoji/twemoji": "^1.0.2",
+    "@iconify/utils": "^2.0.7",
     "@nuxtjs/color-mode": "^3.2.0",
     "@tiptap/extension-character-count": "2.0.0-beta.204",
     "@tiptap/extension-code-block": "2.0.0-beta.204",