Backspace on decoration work strangely in mobile keyboard

v6
1

I want to replace emoji with custom element, here I use span element instead my component.

The deletion is work perfectly on desktop browser.
When I using mobile to test, it will just selecting the decoration, keyboard hide and show again, then the decoration will not be deleted.
This only happen on using English Gboard keyboard, no problem on other Gboard languages.

Recording

Here is my code:

import { MatchDecorator, Decoration, WidgetType, EditorView, ViewPlugin, DecorationSet, ViewUpdate } from "@codemirror/view";

class EmojiWidget extends WidgetType {
    text: string;
    constructor(text: string) {
        super();
        this.text = text;
    }
    toDOM(view: EditorView): HTMLElement {
        const span = document.createElement('span');
        span.append(this.text);
        return span
    }
}

const emojiMatcher = new MatchDecorator({
    regexp: /\p{Emoji_Presentation}/gu,
    decoration: match => Decoration.replace({
        widget: new EmojiWidget(match[0])
    }),
})

export const emojiPlugin = ViewPlugin.fromClass(class {
    decorations : DecorationSet;
    constructor(view : EditorView) {
        this.decorations = emojiMatcher.createDeco(view)
    }
    update(update : ViewUpdate) {
        this.decorations = emojiMatcher.updateDeco(update, this.decorations)
    }
}, {
    decorations: instance => instance.decorations,
    provide: plugin => EditorView.atomicRanges.of(view => {
        const value = view.plugin(plugin);
        return value ? value.decorations : Decoration.none;
    })
})
2

I also tried input on this example editor, deletion is not working.
https://codemirror.net/examples/decoration/#atomic-ranges

3

Thanks, I managed to reproduce this. This patch seems to help.

1 Like
4

I test the newest version on Android. The backspace deletion still have the same bug.

5

I was only able to reproduce this on the decoration demo, not on the code you pasted. That problem was fixed by the patch I linked. Your example doesn’t actually create an editor view, so I’m not entirely sure what you may be doing. Are you sure you are including a keymap that actually binds backspace in your configuration?

6

I am using defaultKeymap and that included standardKeymap, backspace are work normally on other situation.
I try on demo, deletion also work on my device, but keyboard will hide and show again.

7

I found the one of reason that backspace not work correctly, if my custom element is fill with text only, then deletion is working (but keyboard still hide and show again). If fill with emoji character or image element, deletion will be crashed.

8

The hiding of the keyboard is a chrome bug that CodeMirror cannot really do anything about. I cannot reproduce the thing where the widget is not deleted in your demo. But since it doesn’t provide any content for the editor, maybe you are using a different emoji or different text than I am? Could you provide a bit more detailed reproduction instructions?