From 8f68fa12e4fd686a456ca6d95e99bee5d350f750 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 27 Dec 2022 20:13:50 +0100
Subject: [PATCH] feat: custom emoji font in editor

---
 components/publish/PublishWidget.vue |  15 ++--
 composables/content-parse.ts         |   8 +-
 composables/emojis.ts                |   1 +
 composables/tiptap.ts                |   3 +-
 composables/tiptap/custom-emoji.ts   | 112 +++++++++++++++++++++++++++
 composables/tiptap/emoji.ts          |  93 ++++++----------------
 styles/global.css                    |   7 +-
 7 files changed, 153 insertions(+), 86 deletions(-)
 create mode 100644 composables/tiptap/custom-emoji.ts

diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index 635f9152..484d8041 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -65,11 +65,11 @@ async function handlePaste(evt: ClipboardEvent) {
   await uploadAttachments(Array.from(files))
 }
 
-function insertText(text: string) {
-  editor.value?.chain().insertContent(text).focus().run()
+function insertEmoji(name: string) {
+  editor.value?.chain().focus().insertEmoji(name).run()
 }
-function insertEmoji(image: any) {
-  editor.value?.chain().focus().setEmoji(image).run()
+function insertCustomEmoji(image: any) {
+  editor.value?.chain().focus().insertCustomEmoji(image).run()
 }
 
 async function pickAttachments() {
@@ -196,7 +196,7 @@ defineExpose({
       <div border="b dashed gray/40" />
     </template>
 
-    <div flex gap-4 flex-1>
+    <div flex gap-3 flex-1>
       <NuxtLink :to="getAccountRoute(currentUser.account)">
         <AccountAvatar :account="currentUser.account" account-avatar-normal />
       </NuxtLink>
@@ -280,7 +280,10 @@ defineExpose({
         v-if="shouldExpanded" flex="~ gap-2 1" m="l--1" pt-2 justify="between" max-full
         border="t base"
       >
-        <PublishEmojiPicker @select="insertText" @select-custom="insertEmoji" />
+        <PublishEmojiPicker
+          @select="insertEmoji"
+          @select-custom="insertCustomEmoji"
+        />
 
         <CommonTooltip placement="bottom" :content="$t('tooltip.add_media')">
           <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
diff --git a/composables/content-parse.ts b/composables/content-parse.ts
index 8b00c676..2549d4b7 100644
--- a/composables/content-parse.ts
+++ b/composables/content-parse.ts
@@ -1,8 +1,9 @@
+// @unimport-disable
 import type { Emoji } from 'masto'
 import type { Node } from 'ultrahtml'
 import { TEXT_NODE, parse, render, walkSync } from 'ultrahtml'
 
-const EMOJI_REGEX = /(\p{Emoji_Presentation})/ug
+export const EMOJI_REGEX = /(\p{Emoji_Presentation})/ug
 
 const decoder = process.client ? document.createElement('textarea') : null as any as HTMLTextAreaElement
 export function decodeHtml(text: string) {
@@ -118,7 +119,10 @@ export function treeToText(input: Node): string {
 
   // 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']}: `
+    return `:${input.attributes['data-emoji-id']}:`
+
+  if (input.name === 'em-emoji')
+    return `${input.attributes.native}`
 
   return pre + body + post
 }
diff --git a/composables/emojis.ts b/composables/emojis.ts
index 5e466c16..17a3c8d9 100644
--- a/composables/emojis.ts
+++ b/composables/emojis.ts
@@ -1,6 +1,7 @@
 import type { Emoji } from 'masto'
 import type { CustomEmojisInfo } from './push-notifications/types'
 import { STORAGE_KEY_CUSTOM_EMOJIS } from '~/constants'
+import { useUserLocalStorage } from '~/composables/users'
 
 const TTL = 1000 * 60 * 60 * 24 // 1 day
 
diff --git a/composables/tiptap.ts b/composables/tiptap.ts
index 3aed2fe8..1886e6a5 100644
--- a/composables/tiptap.ts
+++ b/composables/tiptap.ts
@@ -14,6 +14,7 @@ import { Plugin } from 'prosemirror-state'
 import type { Ref } from 'vue'
 import { HashSuggestion, MentionSuggestion } from './tiptap/suggestion'
 import { CodeBlockShiki } from './tiptap/shiki'
+import { CustomEmoji } from './tiptap/custom-emoji'
 import { Emoji } from './tiptap/emoji'
 
 export interface UseTiptapOptions {
@@ -43,7 +44,7 @@ export function useTiptap(options: UseTiptapOptions) {
       Code,
       Text,
       Emoji,
-      Emoji.configure({
+      CustomEmoji.configure({
         inline: true,
         HTMLAttributes: {
           class: 'custom-emoji',
diff --git a/composables/tiptap/custom-emoji.ts b/composables/tiptap/custom-emoji.ts
new file mode 100644
index 00000000..025a3f38
--- /dev/null
+++ b/composables/tiptap/custom-emoji.ts
@@ -0,0 +1,112 @@
+import {
+  Node,
+  mergeAttributes,
+  nodeInputRule,
+} from '@tiptap/core'
+
+export interface EmojiOptions {
+  inline: boolean
+  allowBase64: boolean
+  HTMLAttributes: Record<string, any>
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    emoji: {
+      /**
+       * Insert a custom emoji.
+       */
+      insertCustomEmoji: (options: { src: string; alt?: string; title?: string }) => ReturnType
+      /**
+       * Insert a emoji.
+       */
+      insertEmoji: (native: string) => ReturnType
+    }
+  }
+}
+
+export const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
+
+export const CustomEmoji = Node.create<EmojiOptions>({
+  name: 'custom-emoji',
+
+  addOptions() {
+    return {
+      inline: false,
+      allowBase64: false,
+      HTMLAttributes: {},
+    }
+  },
+
+  inline() {
+    return this.options.inline
+  },
+
+  group() {
+    return this.options.inline ? 'inline' : 'block'
+  },
+
+  draggable: false,
+
+  addAttributes() {
+    return {
+      'src': {
+        default: null,
+      },
+      'alt': {
+        default: null,
+      },
+      'title': {
+        default: null,
+      },
+      'width': {
+        default: null,
+      },
+      'height': {
+        default: null,
+      },
+      'data-emoji-id': {
+        default: null,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: this.options.allowBase64
+          ? 'img[src]'
+          : 'img[src]:not([src^="data:"])',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
+  },
+
+  addCommands() {
+    return {
+      insertCustomEmoji: options => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: options,
+        })
+      },
+    }
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: (match) => {
+          const [,, alt, src, title] = match
+
+          return { src, alt, title }
+        },
+      }),
+    ]
+  },
+})
diff --git a/composables/tiptap/emoji.ts b/composables/tiptap/emoji.ts
index 3ea83758..eb2d00e4 100644
--- a/composables/tiptap/emoji.ts
+++ b/composables/tiptap/emoji.ts
@@ -4,89 +4,41 @@ import {
   nodeInputRule,
 } from '@tiptap/core'
 
-export interface EmojiOptions {
-  inline: boolean
-  allowBase64: boolean
-  HTMLAttributes: Record<string, any>
-}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    emoji: {
-      /**
-       * Add an emoji.
-       */
-      setEmoji: (options: { src: string; alt?: string; title?: string }) => ReturnType
-    }
-  }
-}
-
-export const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
-
-export const Emoji = Node.create<EmojiOptions>({
-  name: 'custom-emoji',
-
-  addOptions() {
-    return {
-      inline: false,
-      allowBase64: false,
-      HTMLAttributes: {},
-    }
-  },
-
-  inline() {
-    return this.options.inline
-  },
-
-  group() {
-    return this.options.inline ? 'inline' : 'block'
-  },
+export const Emoji = Node.create({
+  name: 'em-emoji',
 
+  inline: () => true,
+  group: () => 'inline',
   draggable: false,
 
-  addAttributes() {
-    return {
-      'src': {
-        default: null,
-      },
-      'alt': {
-        default: null,
-      },
-      'title': {
-        default: null,
-      },
-      'width': {
-        default: null,
-      },
-      'height': {
-        default: null,
-      },
-      'data-emoji-id': {
-        default: null,
-      },
-    }
-  },
-
   parseHTML() {
     return [
       {
-        tag: this.options.allowBase64
-          ? 'img[src]'
-          : 'img[src]:not([src^="data:"])',
+        tag: 'em-emoji[native]',
       },
     ]
   },
 
-  renderHTML({ HTMLAttributes }) {
-    return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
+  addAttributes() {
+    return {
+      native: {
+        default: null,
+      },
+    }
+  },
+
+  renderHTML(args) {
+    return ['em-emoji', mergeAttributes(this.options.HTMLAttributes, args.HTMLAttributes)]
   },
 
   addCommands() {
     return {
-      setEmoji: options => ({ commands }) => {
+      insertEmoji: name => ({ commands }) => {
         return commands.insertContent({
           type: this.name,
-          attrs: options,
+          attrs: {
+            native: name,
+          },
         })
       },
     }
@@ -95,12 +47,11 @@ export const Emoji = Node.create<EmojiOptions>({
   addInputRules() {
     return [
       nodeInputRule({
-        find: inputRegex,
+        find: EMOJI_REGEX,
         type: this.type,
         getAttributes: (match) => {
-          const [,, alt, src, title] = match
-
-          return { src, alt, title }
+          const [native] = match
+          return { native }
         },
       }),
     ]
diff --git a/styles/global.css b/styles/global.css
index 6963019f..6ddbe00c 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -85,6 +85,7 @@ body {
   overflow: hidden;
   max-height: 1.3em;
   max-width: 1.3em;
+  margin: 0 0.2em;
   vertical-align: text-bottom;
 }
 
@@ -133,12 +134,6 @@ body {
   max-width: 100%;
 }
 
-.content-editor.content-rich {
-  p {
-    --at-apply: my-0;
-  }
-}
-
 .skeleton-loading-bg {
   background: linear-gradient(
     90deg,