Como se puede ver a continuación, en lugar de <button> o <input> he usado <div> para crear mis botones de interfaz de usuario. Ahora, el problema es que tan pronto como hago clic en cualquiera de los botones, la selección en el área de edición (un <div> contentEditable) colapsa.
Curiosamente, si uso <button> en lugar de <div> para crear mis botones de interfaz de usuario, todo funciona a la perfección. He visto esta pregunta muchas veces antes en stackoverflow, pero todos usan <button> . ¿Alguna idea?
Su problema es que sus elementos div son seleccionables, por lo que hacer clic en ellos colapsa automáticamente la selección existente. Puede solucionar esto haciéndolos "no seleccionables" configurando la propiedad CSS user-select en none . Esto es compatible con la mayoría de los navegadores actuales.