I am building a WYSIWYG text editor that is built on Meta’s Lexical Editor.

For the use case it is necessary to prevent the browser default behaviour when typing one of the dead-key characters, e.g. `, ´, ^, … and to execute some own function instead.

Desired behavior:

The user presses the dead key, the browser does not insert the respective character and does not start a composition session.

So when consecutively typing ` and then w, the browser does not insert „`w“ into the content editable, but only w.

When consecutively typing „´“ and then „e“, the browser does not insert „é“ into the content editable, but only e.

Approaches I tried to far:

Approach 1:

Listening on keydown-events of the content-editable of the lexical editor and calling preventDefault(), stopPropergation() and stopImmediatePropagation() on the event
Listening on the composition start, composition update and composition end events and calling preventDefault(), stopPropergation() and stopImmediatePropagation() on the event

This approach works fine in Chrome under MacOS, but does not work in Safari.

In Safari, the character is still appearing in the content-editable and the input event for the character resulting from pressing the Dead Key is still dispatched. I found no way to prevent this to happen.

Approach 2:

All Steps from Approach 2
Immediately remove the character in the callback function of the event listener for the respective input even

When doing this, the character disappears at first, but the browser still holds the composition session. After typing the next character, the browser inserts the dead-key character together with the next character.

Thanks in advance – would be happy for any ideas, experience or insights. We’ve been hitting a wall here for a while.

Environment:
macOs Sonoma 14.3.1
Safari Version 17.3.1