Not sure what's the current state of behavior for contenteditable in different browsers, but a decade ago it used to vary wildly among them. The most fun one w

Not sure what's the current state of behavior for contenteditable in different browsers, but a decade ago it used to vary wildly among them. The most fun one was how IE handled nested contenteditable attributes. I needed blocks of texts within the editable part which couldn't be edited or removed, so it was implemented with a nested contenteditable="false". This worked as expected in every browser except IE for some reason. After hours of debugging, I realized setting the nested attribute to contenteditable="true" made it work as expected in IE (and of course, broke it for every other browser). Turns out this was a know bug in IE >_> I just tested the above behavior and it seems to work fine in both Chrome and Firefox, though I have no IE to test with now ¯\\_(ツ)_/¯. So just a warning for anyone planning to use contenteditable as a quick and dirty WYSIWYG editor for their website, the final output generated can be very different based on the browser the user is using. Anyway, I poked around and found some other fun things - * Chrome supports changing the styling of the text using the keyboard shortcuts (Ctrl+I, Ctrl+B), Firefox doesn't. * Clicking at the end of a header text and pressing <Enter> adds a newline with a div containing a <br> tag in both Chrome and Firefox. On adding any text to this div, Chrome removes the <br> but Firefox keeps it. * Copying the header text and appending it as a new list item, Firefox adds a <br> tag but Chrome doesn't. * Adding a new line anywhere else, both Chrome and Firefox add an empty <p> tag. On pasting any header text there, Firefox keeps the empty <p> tag as a sibling but Chrome replaces it. This was found in just under 10 minutes, I'm sure there are loads more lurking beneath the surface.