Taming Content Editable with Ember.js

A talk I gave to Ember London: http://www.meetup.com/London-Emberjs-User-Group/events/221220636/

Transcript

1. Taming Content Editable with Ember.js @gavinjoyce gavin.joyce@intercom.io
2. http://blog.intercom.io/ember-delivers-rapid-improvements-at-intercom
3. Creating content in Intercom (demo) simple composer, auto message wizard, inbox, mentions, emoji, saved replies
5. embercom-composer cli addon
6. yeah, but why? https://speakerdeck.com/patocallaghan/contenteditable
7. Block Object Model (build a block editor, not a HTML editor)
8. Block Selection do Stack Block List The DOM Composer component The BOM
9. The BOM The DOM Editor View Event Handling DOM Selection UI Coordinates Rendering Composer component
10. The BOM Composer State BOM Selection Undo Stack Blocks The DOM Editor View Event Handling DOM Selection UI Coordinates Rendering Composer component
11. Composer State The BOM
12. Composer State Undo Stack The BOM
13. Composer State Block Selection Undo Stack The BOM
14. Composer State Block Selection Undo Stack Block List The BOM
15. Composer State Block Selection Undo Stack The BOM Paragraph Item Ordered List Block List
16. Paragraph Composer State Block Selection Undo Stack Block List Item Ordered List Command • Backspace • Delete • Return • Sync • Insert Attribute • Insert Character • Insert Block • Paste • ...
19. Blocks Paragraph text: “hello there” Entities Italic (0 -> 5) Bold (6 -> 14) Selection: 0:0:1 → 0:0:1
20. Blocks Paragraph text: “hello there” Entities Italic (0 -> 5) Bold (6 -> 14) Selection: 0:0:2 → 0:0:9
21. Blocks Paragraph text: “hello there” Entities Italic (0 -> 5) Bold (9 -> 14) Selection: 0:0:2 → 0:0:9
22. Blocks Paragraph text: “hello there” Entities Italic (0 -> 5) Bold (2 -> 14) Selection: 0:0:2 → 0:0:9
23. Syncing
24. Syncing UI Event
25. Syncing UI Event Command
26. Syncing UI Event Command Sync or
27. Syncing UI Event Command Sync Mutate BOM or
28. Syncing UI Event Command Sync Mutate BOM Rerender? or
29. Undo Stack github.com/intercom/ember-undo-stack
30. • Open Source • CSS Slurping • Editors • Performance • Testing
31. • Open Source • CSS Slurping • Editors • Performance • Testing
32. • Open Source • CSS Slurping • Editors • Performance • Testing
33. • Open Source • CSS Slurping • Editors • Performance • Testing
34. • Open Source • CSS Slurping • Editors • Performance • Testing (2k+ tests)
35. Questions? @gavinjoyce gavin.joyce@intercom.io