Cursor & Backspace Issues with Non-Editable Elements in Tiptap Editor

[niraj-dobariya79]

Affected Packages

"@tiptap/extension-color": "^3.11.0",     "@tiptap/extension-dropcursor": "^3.11.0",     "@tiptap/extension-gapcursor": "^3.11.0",     "@tiptap/extension-link": "^3.11.0",     "@tiptap/extension-placeholder": "^3.11.0",     "@tiptap/extension-text-style": "^3.11.0",     "@tiptap/extension-underline": "^3.11.0",     "@tiptap/react": "^3.11.0",     "@tiptap/starter-kit": "^3.11.0",

Version(s)

3.11.0

Bug Description

When working with non-editable elements in the Tiptap editor, the cursor is not behaving as expected. This includes cursor visibility problems, incorrect cursor positioning, and inconsistent backspace behavior.

Issues Observed

1. Cursor not visible properly

When the caret is placed before or after a non-editable element, the cursor becomes partially or completely invisible.

This makes it difficult for the user to understand where the typing position currently is.

2. Incorrect cursor positioning

The caret often jumps to an unexpected location when navigating around a non-editable node.

Sometimes it becomes impossible to place the caret immediately before or after the element.

3. Backspace not working as expected

Pressing backspace near a non-editable element does not delete content as expected.

In some cases, the backspace key gets ignored or not working as expacted

Browser Used

Safari

Code Example URL

No response

Expected Behavior

Cursor should remain fully visible when placed around non-editable elements.

Cursor movement should be stable and predictable before/after these elements.

Backspace should behave consistently, either deleting the element (if allowed) or moving the cursor appropriately without glitches.

Additional Context (Optional)

Sample HTML:-

<div contenteditable="true" translate="no" class="tiptap ProseMirror tiptap-editor-content" tabindex="0"><p style="margin: 0px; padding: 0px;">&nbsp;hfgh <span><span class="react-renderer node-variable" contenteditable="false" draggable="true"><span as="span" class="soap-builder-narrative-variable" contenteditable="false" draggable="true" data-drag-handle="" data-attributetype="variable" data-attributeidentifier="patientName" data-attributelabel="patient name" data-menuid="4339" data-node-view-wrapper="" style="white-space: normal; border-radius: 3px; padding: 2px 4px; cursor: grab; display: inline-block;">patient name</span></span></span> <span><span class="react-renderer node-variable" contenteditable="false" draggable="true"><span as="span" class="soap-builder-narrative-variable" contenteditable="false" draggable="true" data-drag-handle="" data-attributetype="variable" data-attributeidentifier="heShe" data-attributelabel="he/she" data-menuid="4339" data-node-view-wrapper="" style="white-space: normal; border-radius: 3px; padding: 2px 4px; cursor: grab; display: inline-block;">he/she</span></span></span> </p><p style="margin: 0px; padding: 0px;"><span class="react-renderer node-question" contenteditable="false" draggable="true"><span as="span" class="soap-builder-narrative-question" contenteditable="false" draggable="true" data-drag-handle="" data-attributetype="question" data-attributeidentifier="row-1763459851627-s3j0guvfd" data-attributelabel="Accident Type" data-menuid="4339" data-node-view-wrapper="" style="white-space: normal; border-radius: 3px; padding: 2px 4px; display: inline-block; cursor: grab;">Accident Type</span></span>&nbsp; tre ter ertt &nbsp; <span class="react-renderer node-variable" contenteditable="false" draggable="true"><span as="span" class="soap-builder-narrative-variable" contenteditable="false" draggable="true" data-drag-handle="" data-attributetype="variable" data-attributeidentifier="hisHer" data-attributelabel="his/her" data-menuid="4339" data-node-view-wrapper="" style="white-space: normal; border-radius: 3px; padding: 2px 4px; cursor: grab; display: inline-block;">his/her</span></span><img class="ProseMirror-separator" alt=""><br class="ProseMirror-trailingBreak"></p></div>

Dependency Updates

• Yes, I've updated all my dependencies.