feat: custom emoji font in editor

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 }
+        },
+      }),
+    ]
+  },
+})

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 }
         },
       }),
     ]