codex-team / codex-team/editor.js

Caret/Cursor jumping to other contenteditable fields when using backspace/delete key

Open
#2,796 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
31.9k
Forks
2.2k
Avg merge
1d 1h
Merged PRs (30d)
1

Description

In a table or in a list (list, nested list, checklist) the cursor jumps to another entry/cell after clicking on the entry/cell and then hitting backspace or delete. Typing something works as expected.
I could not identify the exact bug, but is has to do with EditorJs handling of moving to another contenteditbale field (either table cell or list entry) when the cursor is at the start of the contenteditable field and the user types backspace/delete.

Steps to reproduce:
1. create a list or table with some entries
2. click between the entries and hit backspace somewhere in the text
3. sometimes the cursoe jumps to another field instead of deleting

Expected behavior:
cursors deletes where it was positioned

Device, Browser, OS: PC, Edge/Chrome/Firefox Windows 11

Editor.js version: 2.30.2

Plugins you use with their versions:
table
nested.-list

I have attached this listener to the redactor (.codex-editor__redactor)
`redactor.addEventListener("keydown", this.handleKeyDownCaretFix.bind(this),true);`

```typescript
handleKeyDownCaretFix(event: KeyboardEvent) {
const target = event.target as HTMLElement;

if (!target.isContentEditable || (event.key !== 'Backspace' && event.key !== 'Delete')) {
return;
}

const selection = window.getSelection();
if (!selection || selection.rangeCount === 0) return;

const range = selection.getRangeAt(0);
if (range.collapsed && range.startOffset === 0) {
Logger.log(logName, "caret at start... let the editor do it's thing");
} else {
event.stopImmediatePropagation();
}
}
```

This crude workaround seems to "fix" the issue for now by preventing any Editorjs event handler to happen unless the cursor ist at the start of a contenteditable field.

The workaround proved, that the isse must lie with EditorJs's handling of the backspace/delete key.

The EditorJs demo version that is used on the official website does not seem to have this bug, so it might have been introduced recently?

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.