Taming Contenteditable with Ember.js

Transcript

1. Taming Content Editable with Ember.js paddy@intercom.io
2. You built your own content editor?!
3. 3 We have lots of places where our users can write messages
8. 8 We need precise control of how our users write their messages.
9. 9 We want to make it easy to create rich and beautiful messages
10. So yeah, we built our own content editor
11. What is content editable and why it is terrible
14. 14 Behind this simple property lies deep wells of despair
15. What happens next? <div contenteditable> d| </div>
16. What happens next? Chrome d| d <div>|</div> becomes
17. What happens next? d| d <div>|</div> becomes Safari
18. What happens next? d| d <p>|</p> becomes IE11
19. What happens next? Firefox d| d <br>| <br type=“_moz”> becomes
21. 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>
23. https://speakerdeck.com/patocallaghan/contenteditable and much, much more….
24. 24 Why does this matter?
25. 25 If you can’t guarantee consistent markup, you can’t guarantee consistent display
26. 26 So how did we tame this?
27. 27 Don’t try to build a HTML editor, try to build a block editor
29. 29 Use the good bits over-ride the rest.
30. 30 Hide as much complexity as we can behind an API
31. Block Selection do Stack Block List The DOM Composer component The BOM
32. The BOM The DOM Editor View Event Handling DOM Selection UI Coordinates Rendering Composer component
33. The BOM Composer State BOM Selection Undo Stack Blocks The DOM Editor View Event Handling DOM Selection UI Coordinates Rendering Composer component Commands
34. Composer State The BOM
35. Composer State Undo Stack The BOM
36. Composer State Block Selection Undo Stack The BOM
37. Composer State Block Selection Undo Stack Block List The BOM
38. Composer State Block Selection Undo Stack The BOM Paragraph Item Ordered List Block List
39. Paragraph Composer State Block Selection Undo Stack Block List Item Ordered List Command • Backspace • Delete • Return • Sync • Insert Attribute • Insert Character • Insert Block • Paste • ...
41. Blocks Paragraph text: “hello there” Entities Italic (0 -> 5) Bold (6 -> 14) Selection: 0:0:1 → 0:0:1
42. Blocks Paragraph text: “hello there” Entities Italic (0 -> 5) Bold (6 -> 14) Selection: 0:0:2 → 0:0:9
43. Blocks Paragraph text: “hello there” Entities Italic (0 -> 5) Bold (9 -> 14) Selection: 0:0:2 → 0:0:9
44. Blocks Paragraph text: “hello there” Entities Italic (0 -> 5) Bold (2 -> 14) Selection: 0:0:2 → 0:0:9
45. 45 So now you have an editor
46. Syncing
47. Syncing UI Event Command Mutate BOM Rerender
48. Syncing UI Event Command Mutate BOM Rerender? Can Browser handle it? No Do Nothing Yes
49. Syncing UI Event Command Mutate BOM Rerender? Can Browser handle it? No Do Nothing Yes Should we let the BOM know? Yes
50. Undo Stack github.com/intercom/ember-undo-stack
51. 51 Demo Time
52. How Ember helped
53. 53 A decent Object Model
54. Computed Properties as a free caching mechanism
55. Components are helpfully strict
56. Ember CLI addons ❤️
57. Thanks for listening! paddy@intercom.io
58. Questions?