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
340
Taming Contenteditable with Ember.js
paddyobrien
July 23, 2015
Tweet
Share
Other Decks in Technology
See All in Technology
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
250
End of Barrel Files: New Modularization Techniques with Sheriff
rainerhahnekamp
0
280
障害対応指揮の意思決定と情報共有における価値観 / Waroom Meetup #2
arthur1
3
280
地理情報データをデータベースに格納しよう~ GPUを活用した爆速データベース PG-Stromの紹介 ~
sakaik
1
110
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
2
150
Deno+JSRでパッケージを作って公開する
askua
0
120
マルチモーダル / AI Agent / LLMOps 3つの技術トレンドで理解するLLMの今後の展望
hirosatogamo
1
230
Spring Frameworkの新標準!? ~ RestClientとHTTPインターフェース入門 ~
ogiwarat
2
260
DMARC 対応の話 - MIXI CTO オフィスアワー #04
bbqallstars
1
130
エンジニア候補者向け資料2024.11.07.pdf
macloud
0
4.5k
Microsoft MVPになる前、なってから/Fukuoka_Tech_Women_Community_1_baba
nina01
0
170
データの信頼性を支える仕組みと技術
chanyou0311
6
1.6k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
Thoughts on Productivity
jonyablonski
67
4.3k
Facilitating Awesome Meetings
lara
49
6.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Teambox: Starting and Learning
jrom
133
8.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
3
76
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
GitHub's CSS Performance
jonrohan
1030
460k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Writing Fast Ruby
sferik
627
61k
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?