It's not "something", I know exactly what causes this. I'm intentionally showcasing it. This makes perfect sense if you know anything about Web dev.
It's just not super easy to do this on accident. If I add an emoji from the menu and then just keep typing normally, it's fine.
If I add an emoji from the menu abcs and then left-click (anywhere), it goes into that element and I can type in it (vertically because of other things I won't go into).
ssdf ← you can also do this with the arrow keys (not always). This creates a lot of unpredictability. The problem isn't that I can type inside the kaomoji, it's that the reason why I can do it, is also the reason for other issues. Kaomoji should ideally be embedded in a way that makes this interaction impossible.
You can also simply click into the kaomoji sfdsdfsf and get the same result.
There are a few ways to fix this, like adding contenteditable="false" to the span. Along with a few other tweaks. They should ideally be non-editable atomic inline elements, preventing the caret from entering them and avoiding any weird cursor instability.
For example something like this:
<p>
<span class="icon icon-text" contenteditable="false">
<i class="kao_icon kao_icon_24 e_kao_drink"></i>
</span> ← you can add a zero-width space here so the caret has a place to land
</p>
This is very much worth fixing. It can easily lead to other editor issues. The backspace issue I have is likely related.
@Icepick87 I appreciate the input, but this is a webdev-specific matter and I'm simply documenting it for Michael. This is, in my professional opinion, a very real design flaw, that is in no way limited to that specific example :)
I don't want to needlessly clutter the thread any further.