Taming Content Editable with Ember.js - Ember NYC

Transcript

1. Taming Content Editable with Ember.js @gavinjoyce gavin.joyce@intercom.io
2. Intercom Composer
3. Intercom Composer Direct messages
4. Intercom Composer Email Messages
5. Intercom Composer In-App Messages
6. Intercom Composer Shared Inbox
7. blog.intercom.io/ember-delivers-rapid-improvements-at-intercom
8. Creating content in Intercom (demo) simple composer, auto message wizard, inbox, mentions, emoji, saved replies
10. embercom-composer cli addon (demo) selection, undo stack, outlines, editors, rules
11. yeah, but why? https://speakerdeck.com/patocallaghan/contenteditable
12. https://speakerdeck.com/patocallaghan/contenteditable
13. https://speakerdeck.com/patocallaghan/contenteditable
14. https://speakerdeck.com/patocallaghan/contenteditable
15. https://speakerdeck.com/patocallaghan/contenteditable
16. https://speakerdeck.com/patocallaghan/contenteditable
17. https://speakerdeck.com/patocallaghan/contenteditable
18. https://speakerdeck.com/patocallaghan/contenteditable and much more….
19. Block Object Model (build a block editor, not an HTML editor)
20. Block Selection do Stack Block List The DOM Composer component The BOM
21. The BOM The DOM Editor View Event Handling DOM Selection UI Coordinates Rendering Composer component
22. The BOM Composer State BOM Selection Undo Stack Blocks The DOM Editor View Event Handling DOM Selection UI Coordinates Rendering Composer component
23. Composer State The BOM
24. Composer State Undo Stack The BOM
25. Composer State Block Selection Undo Stack The BOM
26. Composer State Block Selection Undo Stack Block List The BOM
27. Composer State Block Selection Undo Stack The BOM Paragraph Item Ordered List Block List
28. Paragraph Composer State Block Selection Undo Stack Block List Item Ordered List Command • Backspace • Delete • Return • Sync • Insert Attribute • Insert Character • Insert Block • Paste • ...
31. Blocks Paragraph text: “hello there” Entities Italic (0 -> 5) Bold (6 -> 14) Selection: 0:0:1 → 0:0:1
32. Blocks Paragraph text: “hello there” Entities Italic (0 -> 5) Bold (6 -> 14) Selection: 0:0:2 → 0:0:9
33. Blocks Paragraph text: “hello there” Entities Italic (0 -> 5) Bold (9 -> 14) Selection: 0:0:2 → 0:0:9
34. Blocks Paragraph text: “hello there” Entities Italic (0 -> 5) Bold (2 -> 14) Selection: 0:0:2 → 0:0:9
37. > 1.5k Tests
38. Syncing
39. Syncing UI Event
40. Syncing UI Event Command
41. Syncing UI Event Command Sync or
42. Syncing UI Event Command Sync Mutate BOM or
43. Syncing UI Event Command Sync Mutate BOM Rerender? or
44. Undo Stack github.com/intercom/ember-undo-stack
45. intercom.io/careers
46. We believe Intercom is a place to come and deliver career defining achievements intercom.io/careers
47. We believe Intercom is a place to come and deliver career defining achievements intercom.io/careers Dublin & San Francisco
48. Thanks for listening! @gavinjoyce gavin.joyce@intercom.io
49. Questions? @gavinjoyce