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 Content Editable with Ember.js - Ember NYC
Search
Gavin Joyce
May 29, 2015
Technology
1
100
Taming Content Editable with Ember.js - Ember NYC
Gavin Joyce
May 29, 2015
Tweet
Share
More Decks by Gavin Joyce
See All by Gavin Joyce
Scaling Ember at Intercom - EmberCamp London
gavinjoyce
1
220
Taming large Rails apps with Mutations
gavinjoyce
2
370
Taming Content Editable with Ember.js
gavinjoyce
1
350
Other Decks in Technology
See All in Technology
【基本】データベース設計
oracle4engineer
PRO
2
210
AWS学習者向けにAzureの解説スライドを作成した話
handy
3
210
web-application-security
matsuihidetoshi
1
200
いいたいことちゃんという
tkengo
0
250
Cloud Service Mesh に触れ合う
phaya72
1
260
止まらないLinuxシステムを構築する_高信頼性クラスタ入門
koedoyoshida
3
1.5k
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
190
Max out Local LLM in Challenging Environments
sashimimochi
2
160
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.6k
IaCからAWSに入門した初心者が CloudFormationを通して考えた「AWS操作」の使い分け
maimyyym
2
490
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
160
認知症フレンドリーテックとスタックチャン
naokiuc
0
300
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
238
11k
In The Pink: A Labor of Love
frogandcode
138
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
188
16k
KATA
mclloyd
16
12k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Facilitating Awesome Meetings
lara
43
5.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
9
1.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
YesSQL, Process and Tooling at Scale
rocio
165
13k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Transcript
Taming Content Editable with Ember.js @gavinjoyce
[email protected]
Intercom Composer
Intercom Composer Direct messages
Intercom Composer Email Messages
Intercom Composer In-App Messages
Intercom Composer Shared Inbox
blog.intercom.io/ember-delivers-rapid-improvements-at-intercom
Creating content in Intercom (demo) simple composer, auto message wizard,
inbox, mentions, emoji, saved replies
None
embercom-composer cli addon (demo) selection, undo stack, outlines, editors, rules
yeah, but why? https://speakerdeck.com/patocallaghan/contenteditable
https://speakerdeck.com/patocallaghan/contenteditable
https://speakerdeck.com/patocallaghan/contenteditable
https://speakerdeck.com/patocallaghan/contenteditable
https://speakerdeck.com/patocallaghan/contenteditable
https://speakerdeck.com/patocallaghan/contenteditable
https://speakerdeck.com/patocallaghan/contenteditable
https://speakerdeck.com/patocallaghan/contenteditable and much more….
Block Object Model (build a block editor, not an HTML
editor)
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
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
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
None
None
> 1.5k Tests
Syncing
Syncing UI Event
Syncing UI Event Command
Syncing UI Event Command Sync or
Syncing UI Event Command Sync Mutate BOM or
Syncing UI Event Command Sync Mutate BOM Rerender? or
Undo Stack github.com/intercom/ember-undo-stack
intercom.io/careers
We believe Intercom is a place to come and deliver
career defining achievements intercom.io/careers
We believe Intercom is a place to come and deliver
career defining achievements intercom.io/careers Dublin & San Francisco
Thanks for listening! @gavinjoyce
[email protected]
Questions? @gavinjoyce