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
ソフトウェアは捨てやすく作ろう/Let's make software easy to discard
sanogemaru
10
5.8k
令和最新版TypeScriptでのnpmパッケージ開発
lycorptech_jp
PRO
0
110
kintone開発組織のDevOpsへの移り変わりと実践
ueokande
1
150
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.2k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
8
65k
TechBull Membersの開発進捗どうですか!?
rvirus0817
0
230
組織とセキュリティ文化と、自分の一歩
maimyyym
3
1.2k
Swiftは最高だよの話
yuukiw00w
2
290
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
lycorptech_jp
PRO
1
300
Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
0
500
Scale Security Programs with Scorecarding
ramimac
0
440
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
660
Music & Morning Musume
bryan
47
6.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
750
Product Roadmaps are Hard
iamctodd
PRO
53
11k
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?