From 0c15aa55d851bd60bf7528e370cbb8db5b3c8222 Mon Sep 17 00:00:00 2001
From: nonnullish <20538005+nonnullish@users.noreply.github.com>
Date: Mon, 4 Mar 2024 20:56:59 +0100
Subject: [PATCH] fix: fix emoji placement (#2626) (#2645)

---
 composables/tiptap/emoji.ts | 35 ++++++++++++++++++++++++++++++++---
 mocks/tiptap.ts             |  2 ++
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/composables/tiptap/emoji.ts b/composables/tiptap/emoji.ts
index 3597c515..1429a21e 100644
--- a/composables/tiptap/emoji.ts
+++ b/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() {
diff --git a/mocks/tiptap.ts b/mocks/tiptap.ts
index 9872644b..46ef0014 100644
--- a/mocks/tiptap.ts
+++ b/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 }