Playground: https://uhm0pk9mp2n40.julianrbryant.com/iwEWUXo/2/edit?js,console,output
- Firefox: When the
contenteditableelement is a custom element, an error is thrown when trying to apply one of the following commands. As per: https://uhm0pk9mp2n40.julianrbryant.com/etepiPOn/1/edit?html,css,js,console,output - Chrome has some magic to re-focus the
contenteditablewhen a command is executed and the selection is not collapsed: https://uhm0pk9mp2n40.julianrbryant.com/papi/1/edit?html,js,output - "
insertBrOnReturn": https://uhm0pk9mp2n40.julianrbryant.com/IQUraXA/1/edit?html,js,output - "
insertHTML":- https://uhm0pk9mp2n40.julianrbryant.com/elicInov/2/edit?html,js,output
- Chrome tries to be clever by applying inline styles/SPANs with
line- height: https://uhm0pk9mp2n40.julianrbryant.com/ilEmudi/4/edit?css,js,output - Chrome applies styling to invalid markup, Firefox allows invalid markup: https://uhm0pk9mp2n40.julianrbryant.com/ObiBoweG/1/edit?js,console,output
- Given an empty P element, Chrome will wrap inserted text nodes not in a P, whereas Firefox will not: https://uhm0pk9mp2n40.julianrbryant.com/olEbecEM/1/edit?js,output
- Given content of
<p>1|</p>, when inserting HTML of<p>2</p>, Chrome will merge the inserted P element into the existing P element, whereas Firefox will not: https://uhm0pk9mp2n40.julianrbryant.com/uvEdacoz/6/edit?js,output - Given content of
<p>1|</p>, when inserting HTML of<p>2<o></o></p>, Chrome will merge the inserted P element into the existing P element excluding any custom elements, whereas Firefox will not: https://uhm0pk9mp2n40.julianrbryant.com/tuleq/3/edit?js,output - Given content of
<p>1<br>|</p>, when inserting HTML of2<p>3</p>, Chrome will append the inserted unwrapped text node immediately into the existing paragraph, whereas Firefox will append a BR element followed by the text node: https://uhm0pk9mp2n40.julianrbryant.com/uvEdacoz/7/edit?js,output - Given a selection across multiple P elements, Firefox will insert the content outside of any P element: https://uhm0pk9mp2n40.julianrbryant.com/jiviniti/4/edit?js,output
- "
formatBlock": https://uhm0pk9mp2n40.julianrbryant.com/UTUDaPoC/1/edit?html,js,output - "
bold": https://uhm0pk9mp2n40.julianrbryant.com/IxiSeYO/4/edit?html,js,output - "
outdent":- Chrome removes BLOCKQUOTE content formatting: https://uhm0pk9mp2n40.julianrbryant.com/okAYaHa/1/edit?html,js,output
- Chrome removes collapsed selection formatting: https://uhm0pk9mp2n40.julianrbryant.com/IfaRaFO/1/edit?html,js,output
- "
insertOrderedList"/"insertOrderedList":- Chrome nests list inside of block elements: https://uhm0pk9mp2n40.julianrbryant.com/eFiRedUc/1/edit?html,js,output
- Chrome removes SPAN: https://uhm0pk9mp2n40.julianrbryant.com/abOLUNU/1/edit?html,js,output
- Chrome tries to be clever by applying inline styles/SPANs with
line- height: https://uhm0pk9mp2n40.julianrbryant.com/OtemujAY/10/edit?html,css,js,output - Chrome does not add a BR element when there is no
DOCTYPE: https://uhm0pk9mp2n40.julianrbryant.com/sasec/1/edit?js,console,output https://un5kwkagu6hvpvz93w.julianrbryant.com/p/chromium/issues/detail?id=396654&thanks=396654&ts=1406132418
- "
indent":- Chrome nests BLOCKQUOTE inside of P: https://uhm0pk9mp2n40.julianrbryant.com/oDOriyU/3/edit?html,js,output
- Chrome nests ULs inside of ULs:
- Chrome adds redundant
styleattribute: https://uhm0pk9mp2n40.julianrbryant.com/AkasOzu/1/edit?html,js,output - Chrome converts BRs to Ps: https://uhm0pk9mp2n40.julianrbryant.com/zeti/2/edit?js,output
- Firefox does not perform transformation upon Ps containing BRs: https://uhm0pk9mp2n40.julianrbryant.com/yiyaq/1/edit?js,output
- "
createLink"- Firefox does not create A if selection is empty: https://uhm0pk9mp2n40.julianrbryant.com/tutufi/2/edit?js,output
- "
delete":- Given a selection across multiple P elements, Firefox will place the caret outside of any P element: https://uhm0pk9mp2n40.julianrbryant.com/xopivama/3/edit?js,output
- Browser magic: Chrome and Firefox report command state to be true after applying a command to a collapsed selection, but why?: https://uhm0pk9mp2n40.julianrbryant.com/eDOxacI/1/edit?js,console,output
superscript: Firefox: Returns false when a wholeSUPis selected: https://uhm0pk9mp2n40.julianrbryant.com/marox/1/edit?js,console,outputsubscript: Firefox: Returns false when a wholeSUBis selected: https://uhm0pk9mp2n40.julianrbryant.com/marox/1/edit?js,console,output- True for all inline elements?
- Firefox throws
NS_ERROR_UNEXPECTEDerror forinsertUnorderedListandinsertOrderedListwhen a contenteditable is not focussed, see: #208
- Firefox: Giving focus to a
contenteditablewill place the caret outside of any block elements. Chrome behaves correctly by placing the caret at the earliest point possible inside the first block element: https://uhm0pk9mp2n40.julianrbryant.com/eLoFOku/1/edit?js,console,output
- Chrome tries to be clever by applying inline styles/SPANs with
line-heighton <backspace> or <delete> keyboard events: https://uhm0pk9mp2n40.julianrbryant.com/isIdoKA/3/edit?html,css,js,output - Firefox breaks out of P mode on <backspace> or <delete> keyboard events when HTML has indentation between block elements: https://uhm0pk9mp2n40.julianrbryant.com/EyuKase/1/edit?js,output
- Chrome (<= 28(?)):
TreeWalkerdoes not work properly withDocumentFragments: https://umn0dj60g6hnmy58wjzj8.julianrbryant.com/questions/21803827/chrome-28 -treewalker-not-working-with-documentfragments - Firefox: Selection object never gets access to text nodes, only parent elements: https://uhm0pk9mp2n40.julianrbryant.com/rotus/2/edit?js,output,console
- Firefox: Returns
Pwhen a wholeSUPis selected: https://uhm0pk9mp2n40.julianrbryant.com/xoqul/1/edit?js,console,output
- Chrome (< 42): Selection.getRangeAt() returns an incorrect range when in shadow DOM https://un5kwkagu6hvpvz93w.julianrbryant.com/p/chromium/issues/detail?id=380690
- Chrome: Selection.isCollapsed is incorrect when in shadow DOM https://un5kwkagu6hvpvz93w.julianrbryant.com/p/chromium/issues/detail?id=447523 https://uhm0pk9mrt4aa0ygd7yg.julianrbryant.com/7zgegoda/2/