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
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
260
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
4.7k
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
350
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
240
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
150
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
250
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
2.9k
Lambda Web Adapterについて自分なりに理解してみた
smt7174
5
140
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.4k
How Community Opened Global Doors
hiroramos4
PRO
1
130
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
160
Model Mondays S2E03: SLMs & Reasoning
nitya
0
240
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
69
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
A designer walks into a library…
pauljervisheath
207
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Cult of Friendly URLs
andyhume
79
6.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Optimizing for Happiness
mojombo
379
70k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
How GitHub (no longer) Works
holman
314
140k
Transcript
Taming Content Editable with Ember.js
[email protected]
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!
[email protected]
Questions?