I'm working on an admin-panel where the inputs are contenteditable divs. I also have a toolbar (containing some formatting buttons), that shows up if you have any selected text inside the div, and will be removed if not.
The problem is, that when I click to any button in the toolbar, the selection from the document will be removed, so I can't insert for example a tag before and after the text.
Can I prevent this behaviour, or is there any workaround for this?
It's not inevitable that the selection is lost when the user clicks a button. The two ways I know to avoid it are:
pointerdown
event (or both the specific mousedown
and touchstart
events), rather than the click
event on the button and prevent the event's default action