contenteditable

A talk I gave at DublinJS about contenteditable and its related JS APIs. The accompanying video is at https://www.youtube.com/watch?v=zB3PexOSvhg

Transcript

1. contenteditable Pat O’Callaghan == @patocallaghan == littleglitch.io
3. Agenda • What is contenteditable? • History • Editing APIs • execCommand • Selection APIs • Paste • Editor case studies
4. What is contenteditable? • designMode document.designMode = ‘on’; • Make document or elements editable • contenteditable <div contenteditable></div>
6. But…
7. History • circa 2000 • designMode and contenteditable
9. The APIs specified here were originally introduced in Microsoft’s Internet Explorer, but have subsequently been copied by other browsers in a haphazard and imprecise fashion. Although the behaviour specified here does not exactly match any browser at the time of writing, it can serve as a target to converge to in the future ! - W3C HTML Editing APIs, Feb 2014
10. contenteditable • Add a contenteditable attribute and away you go • Same set of operations in different browsers can lead to different markup • When you hit enter, what does it create?
11. What happens next? <div contenteditable> d| </div>
12. What happens next? Chrome d| d <div>|</div> becomes
13. What happens next? d| d <div>|</div> becomes Safari
14. What happens next? d| d <p>|</p> becomes IE11
15. What happens next? Firefox d| d <br>| <br type=“_moz”> becomes
17. contenteditable • What about backspace? • <p> has a line-height of 1.5em Chrome becomes <p contenteditable> d|d </p> <p contenteditable> d|<span style="line-height: 1.5em;”>d</span> </p>
18. contenteditable • And there are numerous other “bugs” like this • Markup isn’t generated consistently in different browsers • Makes it difficult to use HTML as a data format • A markup sanitisation step is a necessity
19. HTML Editing APIs • execCommand • Selection APIs • Selection object • Range object
20. document.execCommand • Provides commands to manipulate an editable region document.execCommand(command, showUI, value) document.execCommand(‘createLink’, false, ‘http://www.intercom.io')
21. document.execCommand • Lots of commands with varying degrees of cross-browser support Inline Commands backColor bold createLink fontName fontSize foreColor hiliteColor italic removeFormat strikethrough subscript superscript underline unlink Block Commands delete formatBlock forwardDelete indent insertHorizontalRule insertHTML insertImage insertLineBreak insertOrderedList insertParagraph insertText insertUnorderedList justifyCenter justifyFull justifyLeft justifyRight outdent Miscellaneous Commands copy cut defaultParagraphSeparator paste redo selectAll styleWithCSS undo useCSS
22. Inline commands • Bold and Italic document.execCommand(‘bold’)
 document.execCommand(‘italic’) • <b> and <i> tags in Safari, Chrome & Firefox • <strong> and <em> tags in Internet Explorer :(
23. Inline commands • fontSize and fontName document.execCommand(‘fontSize’, false, 7)
 document.execCommand(‘fontName’, ‘Times’) <font size=“7” face=“Times”> Selected Text </font> <span style="font-family: Times; font-size: -webkit-xxx-large;”> Selected Text </span>
24. Block commands • insertParagraph document.execCommand(‘insertParagraph’) • Might not actually insert a paragraph • How the “paragraph” is inserted differs between browsers
25. Block commands • formatBlock document.execCommand(‘formatBlock’, false, ‘<H2>’) • Converts a block level element to another • IE caveats • only supports H1-H6, PRE and ADDRESS • requires block to be pre-formatted
26. Block commands • insertHTML document.execCommand(‘insertHTML’, false, ‘<p>test</p>’) • Supported in Safari, Chrome and Firefox • Not supported in any version of IE
27. Miscellaneous commands • undo and redo document.execCommand(‘undo’)
 document.execCommand(‘redo’) • undo works in all browsers, but redo does not work in IE • Inserting custom content will mess up the undo stack
28. Miscellaneous commands • selectAll document.execCommand(‘selectAll’) • Works in all browsers (kind of) except IE
29. Selection APIs • Selection and Range • Used in combination to read and create text selections, and control the caret • Use the Range API to add nodes to a range • Add range to a Selection to show it on screen
30. Selection API ! • Get the current text selection var selection = window.getSelection(); • Find out where the selection starts and ends: ! ! ! ! • It’s a caret if the nodes and offsets are the same selection.anchorNode selection.focusNode selection.anchorOffset selection.focusOffset
31. Selection offsets • ELEMENT_NODE • Offset is its index in its parent’s childNodes collection • Example: • node is <i>index 1</i>, offset is 1 <p> <b>index 0</b> <i>index 1</i> </p>
32. Selection offsets • TEXT_NODE • Offset is its index in its own textContent string • Example: • node is “index 1”, offset is 2 <p> <b>index 0</b> <i>index 1</i> </p> |
33. Manipulating the selection var selection = window.getSelection();
 var range = document.createRange();
 range.setStart(startNode, offset);
 range.setEnd(endNode, offset);
 selection.removeAllRanges();
 selection.addRange(range); ! • You can now • Apply an execCommand on the selection • Save the range with selection.getRangeAt(0), do some work, re-add the range and it will be reinstated. • Collapse the selection to a caret with selection.collapse() • Get position of the selection or caret with selection.getBoundingClientRect()
34. Selection issues • In general, the API works fine cross-browser • …except for a crappy bug in Chrome • Can’t place your cursor inside empty nodes |<p></p> • Zero-width spaces to the rescue! <p>&#8203;|</p>
35. Paste
37. Paste • 2 approaches 1. Let the paste happen and sanitise afterwards 2. e.preventDefault the paste event, sanitise and input the pasted content yourself
38. Paste • paste event has access to: ! e.clipboardData.getData(‘text/plain'); e.clipboardData.getData(‘text/html’);
39. But…
40. Paste • IE window.clipboardData.getData(‘Text’) window.clipboardData.getData(‘URL’) ! • Safari Content always comes back as plaintext.
41. Paste To get access to formatted HTML for Safari & IE 1. Create an offscreen contenteditable div 2. On the beforepaste event redirect your caret to the offscreen <div> 3. Don’t e.preventDefault the paste event as your pasted content will now be sent to the offscreen <div> 4. You now have the formatted version of the pasted content
42. Paste - Google Docs • Can detect when it’s Google Docs by the presence of: id=“docs-internal-guid-234234” • bold and italic styles are inlined rather than using <b> and <i> elements • Some Google Doc styles are hard to detect
43. Paste - Microsoft Word • Chucks <o:p> tags throughout the content • Easier to translate than Google Docs as they use HTML classes • MsoTitle
 MsoSubtitle
 MsoNormal -> <p>
 MsoQuote -> <blockquote>
 <h1> -> <h6>, <b>, <i>, <a>
44. Microsoft Word - Lists • Lists are bat-shit craaaaaaazy!!
45. But Word ain’t done with us yet!
46. Microsoft Word - Online version • Microsoft Word’s Online version has different markup and classes than the desktop application • Lists again are typically mental
47. So if you contenteditable et al. are so to work with, what are the alternatives?
48. Google Docs • Don’t use contenteditable at all • Google created their own layout engine to overcome its limitations • Caret is a 2px <div>, text selection highlighting is a <div> • They intercept all keyboard inputs and insert into an area offscreen • Calculate where to put it onscreen
49. Intercom Composer v1 • v1 in production: Leans heavily on contenteditable behaviour and execCommand • Lots of cross-browser headaches and jumping through hoops to sanitise the output • Hard to do automated testing • We are currently undergoing a rewrite of our editor
50. • Have taken a similar approach to Medium.com • Use contenteditable backed by a model of the document • Have a mapping between the DOM and our model • Define a set strict of editing operations • Map user input and key events to these editing operations • Flush the DOM frequently so the Model and DOM is in sync Intercom Composer v2
51. Wrap up • contenteditable, a cool technology but beware. Know what you’re getting yourself into. • Possibly leverage an open source library to save you the pain • If going the pure contenteditable route, DOM sanitisation is a must • There are ways of leveraging the useful bits of contenteditable (selections and events) and minimising the “bad” parts
52. Thanks! Questions?
53. Links • http://www.quirksmode.org/dom/execCommand.html • https://blog.whatwg.org/the-road-to-html-5-contenteditable • https://dvcs.w3.org/hg/editing/raw-file/tip/editing.html • http://w3c.github.io/selection-api/ • https://annevankesteren.nl/2005/07/more-contenteditable • https://annevankesteren.nl/projects/whatwg/spec • contenteditable: Roll for sanity by Garann Means http://vimeo.com/76219173 • https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md • http://features.jsomers.net/how-i-reverse-engineered-google-docs/ • http://googledocs.blogspot.ie/2010/05/whats-different-about-new-google-docs.html • https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480 • http://garann.github.io/contenteditable/