All problems start with caret placing and multi browser support and ends with undo or collaborative editing (when you go deep into the rabbit whole).
When I think about it: Never develop an editor on your own ;)
All problems start with caret placing and multi browser support and ends with undo or collaborative editing (when you go deep into the rabbit whole).
When I think about it: Never develop an editor on your own ;)
Undo/redo logic was another nightmare. And copy paste required a ton of clean up before.
Next issue I faced was that if the container element had certain css formatting applied (can't remember which one) then if I hit enter, then backspace won't work. If I remember right, this had something to do with a well reported bug related to pre-wrap, white-space, break-line etc. This was also when I discovered that the content editable would work differently across browsers. This was basically when I dumped content editable and went with a simple textarea and a "fake dummy" hidden textarea used for calculating the size, formatting etc.
To this extent, I've written a hook for React/Preact that attempts to be a decent code editor basis on contentEditables: https://github.com/kitten/use-editable
Funnily enough, if you just search the code for "// Quirk" it's easy to see that this experience wasn't pleasant in the slightest. But it did allow me to write a code editor in just about a day which can be found here: https://trygql.formidable.dev/
I'd say, there's plenty of edge cases to take care of. But on the other hand, things like composition, selection behaviour, and other niceties are things that you just have to take care of much less
The biggest problem I have with it is that layering on collaborative editing is nontrivial.
If you are planning to write a custom editor Tiptap is a good starting point, but it's weirdly over-complicated in places.
There are still nights I wake up screaming, remembering the time I tried to build an editor with contentEditable. Is there a special place in hell for those who forced this spawn of Cthulhu upon us? Or should we pity these souls, who were the first to lay eyes on these unimaginable horrors?
If you ever meet someone who thinks that the lovecraftian amalgamation of HTML/JS/CSS is a sane platform for developing applications, just tell them to build an editor using only contentEditable and the standard browser APIs. Then wait a few days. They will hate you, but at least they'll be forever cured of their delusion.
Yes, it's that bad. No matter how long you have been programming, no matter what you have built before, contentEditable will defeat you. Decades of experience, written your own programming language, database, editor? Oh you poor soul, contentEditable will laugh in your face, because there is no logic to it. It is the very embodiment of edge cases built upon edge cases, with a smidge of browser incompatibilities sprinkled on top, then all dumped onto the garbage dump that is caret handling.
I'm a contentEditable survivor. The dark episode is now behind me, yet no matter how much time passes, I will forever be scarred by the experience.
It's a perfectly reasonable mistake, but damn are the implications of that phrasing unpleasant to think about...
It's "rabbit hole", btw, in case this was an /r/boneappletea moment :)
could you expand on this? what's the high level