Dentro de una aplicación web, estoy usando una instancia de editorjs para permitir que el usuario escriba algún texto con estilo. Por lo tanto, estoy usando algunas InlineTools de editorjs.

Al final, es un contenteditable con algunas etiquetas en línea como mark .

Mi problema ahora es que los diferentes navegadores manejan la posición del cursor de manera diferente. En Firefox, puedo usar las teclas de flecha para ir a cada posición anterior, interna, última y externa de la etiqueta en línea.

Como aquí:

Cuando navego por la misma página con Chrome, el cursor no se puede colocar en la posición 0 en la etiqueta en línea y tampoco directamente detrás de la etiqueta en línea.

Luego experimenté con caracteres ZeroWidthSpace . Coloco un U+200B en la posición 0 en el espacio y un U+200B directamente detrás del espacio en línea. Esto está funcionando dentro de Chrome, pero Firefox incluye estos caracteres y también necesita usar la tecla de flecha dos veces para superar el carácter ZeroWidthSpace.

¿Hay alguna manera de unificar este comportamiento del cursor? Quiero que el usuario use las teclas de flecha para ir a cada posición antes y dentro de la etiqueta en línea, como el comportamiento predeterminado de Firefox en otra versión de Chrome con el uso de ZeroWidthSpaces.

¿Hay alguna forma de hacer esto?

Aquí hay un ejemplo.

 [contenteditable] { padding: 1em; border: 1px dashed black; } [contenteditable] mark { padding: 0.2em; border: 1px solid gray; }

 <h1>Works in Firefox - but not in Chrome</h1> <div contenteditable>Here is some <mark>Text</mark> for testing.</div> <h1>Works in Chrome (with ZeroWidthSpace) - but not in Firefox</h1> <div contenteditable>Here is some <mark>&ZeroWidthSpace;Text</mark>&ZeroWidthSpace; for testing.</div>