@tiptap/extension-emoji 3.27.0 → 3.27.2

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@tiptap/extension-emoji",
-  "version": "3.27.0",
+  "version": "3.27.2",
   "description": "emoji extension for tiptap",
   "keywords": [
     "tiptap",
     "tiptap extension"
   ],
   "homepage": "https://tiptap.dev/api/nodes/emoji",
+  "bugs": {
+    "url": "https://github.com/ueberdosis/tiptap/issues"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",
     "directory": "packages/extension-emoji"
   },
-  "bugs": {
-    "url": "https://github.com/ueberdosis/tiptap/issues"
-  },
   "funding": {
     "type": "github",
     "url": "https://github.com/sponsors/ueberdosis"
@@ -47,14 +47,14 @@
     "emoji-datasource": "^16.0.0",
     "json5": "^2.2.3",
     "tsm": "^2.3.0",
-    "@tiptap/core": "^3.27.0",
-    "@tiptap/pm": "^3.27.0",
-    "@tiptap/suggestion": "^3.27.0"
+    "@tiptap/core": "^3.27.2",
+    "@tiptap/pm": "^3.27.2",
+    "@tiptap/suggestion": "^3.27.2"
   },
   "peerDependencies": {
-    "@tiptap/core": "3.27.0",
-    "@tiptap/pm": "3.27.0",
-    "@tiptap/suggestion": "3.27.0"
+    "@tiptap/core": "3.27.2",
+    "@tiptap/pm": "3.27.2",
+    "@tiptap/suggestion": "3.27.2"
   },
   "scripts": {
     "build": "tsup"

package/src/emoji.ts

@@ -4,13 +4,14 @@ import {
   findChildrenInRange,
   getChangedRanges,
   InputRule,
+  isFirefox,
   mergeAttributes,
   Node,
   nodeInputRule,
   PasteRule,
 } from '@tiptap/core'
 import type { Transaction } from '@tiptap/pm/state'
-import { Plugin, PluginKey } from '@tiptap/pm/state'
+import { Plugin, PluginKey, TextSelection } from '@tiptap/pm/state'
 import type { SuggestionOptions } from '@tiptap/suggestion'
 import { Suggestion } from '@tiptap/suggestion'
 import emojiRegex from 'emoji-regex'
@@ -385,8 +386,75 @@ export const Emoji = Node.create<EmojiOptions, EmojiStorage>({
       new Plugin({
         key: new PluginKey('emoji'),
         props: {
-          // double click to select emoji doesn’t work by default
-          // that’s why we simulate this behavior
+          // Firefox cannot move the cursor past emoji nodes at paragraph
+          // boundaries using arrow keys. We intercept plain (unmodified)
+          // ArrowLeft/ArrowRight and manually resolve the correct position.
+          // Only handles emoji nodes — other inline non-selectable nodes
+          // (mentions, hard breaks) are out of scope for this extension.
+          // See: https://github.com/ProseMirror/prosemirror/issues/1220
+          handleKeyDown: (view, event) => {
+            if (!isFirefox()) {
+              return false
+            }
+
+            const isLeft = event.key === 'ArrowLeft'
+            const isRight = event.key === 'ArrowRight'
+
+            if (!isLeft && !isRight) {
+              return false
+            }
+
+            // Don't interfere with selection extension (Shift), word
+            // navigation (Ctrl/Alt), or OS shortcuts (Meta).
+            if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) {
+              return false
+            }
+
+            const { state } = view
+            const { selection } = state
+
+            if (!selection.empty || !(selection instanceof TextSelection)) {
+              return false
+            }
+
+            const $pos = selection.$from
+            const emojiType = this.type
+
+            if (isLeft) {
+              const nodeBefore = $pos.nodeBefore
+
+              if (!nodeBefore || nodeBefore.type !== emojiType) {
+                return false
+              }
+
+              // Cursor is right after an emoji node. Move past it to the left.
+              const newPos = $pos.pos - nodeBefore.nodeSize
+
+              if (newPos >= $pos.start()) {
+                view.dispatch(state.tr.setSelection(TextSelection.create(state.doc, newPos)))
+                return true
+              }
+            } else {
+              const nodeAfter = $pos.nodeAfter
+
+              if (!nodeAfter || nodeAfter.type !== emojiType) {
+                return false
+              }
+
+              // Cursor is right before an emoji node. Skip over it to the right.
+              const newPos = $pos.pos + nodeAfter.nodeSize
+
+              if (newPos <= $pos.end()) {
+                view.dispatch(state.tr.setSelection(TextSelection.create(state.doc, newPos)))
+                return true
+              }
+            }
+
+            return false
+          },
+
+          // double click to select emoji doesn't work by default
+          // that's why we simulate this behavior
           handleDoubleClickOn: (view, pos, node) => {
             if (node.type !== this.type) {
               return false