fix: fix emoji placement (#2626) (#2645)

composables/tiptap/emoji.ts

@@ -1,8 +1,10 @@
-import type { ExtendedRegExpMatchArray } from '@tiptap/core'
+import type { ExtendedRegExpMatchArray, InputRuleFinder, nodeInputRule } from '@tiptap/core'
+import type { NodeType } from '@tiptap/pm/model'
 import {
+  InputRule,
   Node,
+  callOrReturn,
   mergeAttributes,
-  nodeInputRule,
   nodePasteRule,
 } from '@tiptap/core'
 import { emojiRegEx, getEmojiAttributes } from '~/config/emojis'
@@ -80,7 +82,34 @@ export const TiptapPluginEmoji = Node.create({
   },
 
   addInputRules() {
-    return createEmojiRule(nodeInputRule, this.type)
+    function emojiInputRule(config: {
+      find: InputRuleFinder
+      type: NodeType
+      getAttributes?:
+      | Record<string, any>
+      | ((match: ExtendedRegExpMatchArray) => Record<string, any>)
+      | false
+      | null
+    }) {
+      return new InputRule({
+        find: config.find,
+        handler: ({ state, range, match }) => {
+          const attributes = callOrReturn(config.getAttributes, undefined, match) || {}
+          const { tr } = state
+          const start = range.from
+          const end = range.to
+
+          tr.insert(start, config.type.create(attributes)).delete(
+            tr.mapping.map(start),
+            tr.mapping.map(end),
+          )
+
+          tr.scrollIntoView()
+        },
+      })
+    }
+
+    return createEmojiRule(emojiInputRule, this.type)
   },
 
   addPasteRules() {

mocks/tiptap.ts

@@ -13,5 +13,7 @@ export const nodePasteRule = proxy
 export const VueNodeViewRenderer = proxy
 export const findChildren = proxy
 export const VueRenderer = proxy
+export const callOrReturn = proxy
+export const InputRule = proxy
 
 export { proxy as default }