Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Taming Contenteditable with Ember.js
Search
paddyobrien
July 23, 2015
Technology
1
350
Taming Contenteditable with Ember.js
paddyobrien
July 23, 2015
Tweet
Share
Other Decks in Technology
See All in Technology
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
200
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
8
2.4k
MCP とマネージド PaaS で実現する大規模 AI アプリケーションの高速開発
nahokoxxx
1
1.2k
claude codeでPrompt Engineering
iori0311
0
280
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
5
3.8k
SREを知らずに SREマネージャーになった話 / How I Became an SRE Manager Without Knowing What SRE Is
moneyforward
0
220
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
Data Engineering Study#30 LT資料
tetsuroito
1
520
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
190
20150719_Amazon Nova Canvas Virtual try-onアプリ 作成裏話
riz3f7
0
110
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
850
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
GraphQLとの向き合い方2022年版
quramy
49
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Agile that works and the tools we love
rasmusluckow
329
21k
Adopting Sorbet at Scale
ufuk
77
9.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
360
Building Applications with DynamoDB
mza
95
6.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Transcript
Taming Content Editable with Ember.js paddy@intercom.io
You built your own content editor?!
3 We have lots of places where our users can
write messages
4
5
6
7
8 We need precise control of how our users write
their messages.
9 We want to make it easy to create rich
and beautiful messages
So yeah, we built our own content editor
What is content editable and why it is terrible
12
13
14 Behind this simple property lies deep wells of despair
What happens next? <div contenteditable> d| </div>
What happens next? Chrome d| d <div>|</div> becomes
What happens next? d| d <div>|</div> becomes Safari
What happens next? d| d <p>|</p> becomes IE11
What happens next? Firefox d| d <br>| <br type=“_moz”> becomes
None
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>
22
https://speakerdeck.com/patocallaghan/contenteditable and much, much more….
24 Why does this matter?
25 If you can’t guarantee consistent markup, you can’t guarantee
consistent display
26 So how did we tame this?
27 Don’t try to build a HTML editor, try to
build a block editor
None
29 Use the good bits over-ride the rest.
30 Hide as much complexity as we can behind an
API
Block Selection do Stack Block List The DOM Composer component
The BOM
The BOM The DOM Editor View Event Handling DOM Selection
UI Coordinates Rendering Composer component
The BOM Composer State BOM Selection Undo Stack Blocks The
DOM Editor View Event Handling DOM Selection UI Coordinates Rendering Composer component Commands
Composer State The BOM
Composer State Undo Stack The BOM
Composer State Block Selection Undo Stack The BOM
Composer State Block Selection Undo Stack Block List The BOM
Composer State Block Selection Undo Stack The BOM Paragraph Item
Ordered List Block List
Paragraph Composer State Block Selection Undo Stack Block List Item
Ordered List Command • Backspace • Delete • Return • Sync • Insert Attribute • Insert Character • Insert Block • Paste • ...
None
Blocks Paragraph text: “hello there” Entities Italic (0 -> 5)
Bold (6 -> 14) Selection: 0:0:1 → 0:0:1
Blocks Paragraph text: “hello there” Entities Italic (0 -> 5)
Bold (6 -> 14) Selection: 0:0:2 → 0:0:9
Blocks Paragraph text: “hello there” Entities Italic (0 -> 5)
Bold (9 -> 14) Selection: 0:0:2 → 0:0:9
Blocks Paragraph text: “hello there” Entities Italic (0 -> 5)
Bold (2 -> 14) Selection: 0:0:2 → 0:0:9
45 So now you have an editor
Syncing
Syncing UI Event Command Mutate BOM Rerender
Syncing UI Event Command Mutate BOM Rerender? Can Browser handle
it? No Do Nothing Yes
Syncing UI Event Command Mutate BOM Rerender? Can Browser handle
it? No Do Nothing Yes Should we let the BOM know? Yes
Undo Stack github.com/intercom/ember-undo-stack
51 Demo Time
How Ember helped
53 A decent Object Model
Computed Properties as a free caching mechanism
Components are helpfully strict
Ember CLI addons ❤️
Thanks for listening! paddy@intercom.io
Questions?