3
We have lots of
places where our
users can write
messages
Slide 4
Slide 4 text
4
Slide 5
Slide 5 text
5
Slide 6
Slide 6 text
6
Slide 7
Slide 7 text
7
Slide 8
Slide 8 text
8
We need precise
control of how our
users write their
messages.
Slide 9
Slide 9 text
9
We want to make it
easy to create rich
and beautiful
messages
Slide 10
Slide 10 text
So yeah, we built
our own content
editor
Slide 11
Slide 11 text
What is content
editable and why it
is terrible
Slide 12
Slide 12 text
12
Slide 13
Slide 13 text
13
Slide 14
Slide 14 text
14
Behind this simple
property lies deep
wells of despair
Slide 15
Slide 15 text
What happens next?
d|
Slide 16
Slide 16 text
What happens next? Chrome
d|
d
|
becomes
Slide 17
Slide 17 text
What happens next?
d|
d
|
becomes
Safari
Slide 18
Slide 18 text
What happens next?
d|
d
|
becomes
IE11
Slide 19
Slide 19 text
What happens next? Firefox
d|
d
|
becomes
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
contenteditable
• What about backspace?
•
has a line-height of 1.5em
Chrome
becomes
d|d
d|
Slide 22
Slide 22 text
22
Slide 23
Slide 23 text
https://speakerdeck.com/patocallaghan/contenteditable
and much, much more….
Slide 24
Slide 24 text
24
Why does this
matter?
Slide 25
Slide 25 text
25
If you can’t guarantee
consistent markup,
you can’t guarantee
consistent display
Slide 26
Slide 26 text
26
So how did we
tame this?
Slide 27
Slide 27 text
27
Don’t try to build a
HTML editor, try to
build a block editor
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
29
Use the good bits
over-ride the rest.
Slide 30
Slide 30 text
30
Hide as much
complexity as we
can behind an API
Slide 31
Slide 31 text
Block Selection
do Stack
Block List
The DOM
Composer component
The BOM
Slide 32
Slide 32 text
The BOM
The DOM
Editor View
Event Handling
DOM Selection
UI Coordinates
Rendering
Composer component
Slide 33
Slide 33 text
The BOM
Composer State
BOM Selection
Undo Stack
Blocks
The DOM
Editor View
Event Handling
DOM Selection
UI Coordinates
Rendering
Composer component
Commands
Slide 34
Slide 34 text
Composer State
The BOM
Slide 35
Slide 35 text
Composer State
Undo Stack
The BOM
Slide 36
Slide 36 text
Composer State
Block Selection
Undo Stack
The BOM
Slide 37
Slide 37 text
Composer State
Block Selection
Undo Stack
Block List
The BOM
Slide 38
Slide 38 text
Composer State
Block Selection
Undo Stack
The BOM
Paragraph
Item
Ordered List
Block List
Slide 39
Slide 39 text
Paragraph
Composer State
Block Selection
Undo Stack
Block List
Item
Ordered List
Command
● Backspace
● Delete
● Return
● Sync
● Insert Attribute
● Insert Character
● Insert Block
● Paste
● ...