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
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
250
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.7k
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
130
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
270
Sidekiq その前に:Webアプリケーションにおける非同期ジョブ設計原則
morihirok
17
7k
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
140
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
150
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
23
16k
C# 14 / .NET 10 の新機能 (RC 1 時点)
nenonaninu
1
1.4k
Railsアプリケーション開発者のためのブックガイド
takahashim
14
5.9k
コンテキストエンジニアリングとは? 考え方と応用方法
findy_eventslides
4
870
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
570
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Code Reviewing Like a Champion
maltzj
525
40k
Context Engineering - Making Every Token Count
addyosmani
4
160
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Rails Girls Zürich Keynote
gr2m
95
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Faster Mobile Websites
deanohume
310
31k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Practical Orchestrator
shlominoach
190
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
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?