Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
WolfBearGames opened this issue Jul 26, 2024 · 0 comments
Labels

Comments

@WolfBearGames
Copy link

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);

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant