building a visual editor for wikipedia...building a visual editor for wikipedia wikimania d.c. 2012...
TRANSCRIPT
![Page 1: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/1.jpg)
Wikimania D.C. 2012
Trevor Parscal and Roan Kattouw
Building a Visual Editor for Wikipedia
![Page 2: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/2.jpg)
Wikimania D.C. 2012
Trevor ParscalLead Designer and Engineer
Wikimedia
Roan KattouwData Model Engineer
Wikimedia
Rob MoenUser Interface Engineer
Wikimedia
Christian WilliamsEdit Surface Engineer
Wikia
Inez KorczynskiEdit Surface Engineer
Wikia
The People
James ForresterProduct Analyst
Wikimedia
![Page 3: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/3.jpg)
Wikimania D.C. 2012
Parsoid Team
The People
Gabriel WickeLead Parser Engineer
Wikimedia
Subbu SastryParser Engineer
Wikimedia
![Page 4: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/4.jpg)
Wikimania D.C. 2012
The Project
![Page 5: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/5.jpg)
Wikimania D.C. 2012
The Complexity Problem
![Page 6: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/6.jpg)
Wikimania D.C. 2012
Active Editors0
The Complexity Problem
20k
2001 2007 TodayGrowth Stagnation
![Page 7: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/7.jpg)
Wikimania D.C. 2012
The Complexity Problem
![Page 8: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/8.jpg)
Wikimania D.C. 2012
The Complexity Problem
![Page 9: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/9.jpg)
Wikimania D.C. 2012
The Complexity Problem
Testing testing 123...
just messing around
![Page 10: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/10.jpg)
Wikimania D.C. 2012
The Complexity Problem
Testing testing 123...
![Page 11: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/11.jpg)
Wikimania D.C. 2012
The Review Problem
![Page 12: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/12.jpg)
Wikimania D.C. 2012
Diffi
culty
Balancing the ecosystem
Editing Reviewing
The Review Problem
![Page 13: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/13.jpg)
Wikimania D.C. 2012
Diffi
culty
Balancing the ecosystem
Editing Reviewing
The Review Problem
![Page 14: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/14.jpg)
Wikimania D.C. 2012
Diffi
culty
Balancing the ecosystem
Editing Reviewing
The Review Problem
![Page 15: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/15.jpg)
Wikimania D.C. 2012
Diffi
culty
Balancing the ecosystem
Editing Reviewing
The Review Problem
![Page 16: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/16.jpg)
Wikimania D.C. 2012
Wikitext enthusiasts
The Expert Problem
CC-BY-SA-3.0, http://commons.wikimedia.org/wiki/File:Usfa-heston.gif
![Page 17: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/17.jpg)
Wikimania D.C. 2012
Exit strategy
The Expert Problem
Capabilities ofvisual tools
Preference forWikitext
0%
100%
![Page 18: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/18.jpg)
Wikimania D.C. 2012
To what extent?
The Expert Problem
CC-BY-SA-3.0, http://commons.wikimedia.org/wiki/File:TriMet_MAX_Green_Line_Train_on_Portland_Transit_Mall.jpg
![Page 19: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/19.jpg)
Wikimania D.C. 2012
To what extent?
The Expert Problem
CC-BY-SA-3.0, http://commons.wikimedia.org/wiki/File:TriMet_MAX_Green_Line_Train_on_Portland_Transit_Mall.jpgCC-BY-SA-3.0, http://commons.wikimedia.org/wiki/File:TriMet_1990_Gillig_bus_carrying_bike.jpg
![Page 20: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/20.jpg)
Wikimania D.C. 2012
Here to stay
The Expert Problem
CC-BY-SA-3.0, http://commons.wikimedia.org/wiki/File:MVI_2533_Ada_Jack_Snell_grave.jpg
![Page 21: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/21.jpg)
Wikimania D.C. 2012
GFDL, http://commons.wikimedia.org/wiki/File:I-80_Eastshore_Fwy.jpg
Scale and speed
The Collision Problem
![Page 22: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/22.jpg)
Wikimania D.C. 2012
GFDL, http://commons.wikimedia.org/wiki/File:I-80_Eastshore_Fwy.jpg
Scale and speed
The Collision Problem
Public Domain, http://commons.wikimedia.org/wiki/File:Two-car_collision_in_the_USA.jpg
![Page 23: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/23.jpg)
Wikimania D.C. 2012
Merge often fails
The Collision Problem
A D
B (several changes in one)
C (several changes in one)
![Page 24: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/24.jpg)
Wikimania D.C. 2012
Rebase often works
The Collision Problem
B1
A D
C3
B2 B3
C2C1
C3ʹC2ʹC1ʹ
![Page 25: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/25.jpg)
Wikimania D.C. 2012
Missing Pieces
The Focus
CC-BY-NC-SA-3.0, http://www.becausewecan.org/Wiki_globe
![Page 26: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/26.jpg)
Wikimania D.C. 2012
ve.dm
The Data Model
==A’’‘b’’’c==
![Page 27: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/27.jpg)
Wikimania D.C. 2012
ve.dm
The Data Model
<h1>A<b>b</b>c</h1>
![Page 28: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/28.jpg)
Wikimania D.C. 2012
ve.dm
The Data Model
[{ ‘type’: ‘heading’, ‘attributes’: { ‘level’: 1 } },‘A’,[‘b’, {‘{“type”:”textStyle/bold”}’: { ‘type’: ’textStyle/bold’ }
}],‘c’,{ ‘type’: ‘/heading’ }
]
![Page 29: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/29.jpg)
Wikimania D.C. 2012
ve.dm
The Data Model
H HA b c
![Page 30: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/30.jpg)
Wikimania D.C. 2012
ve.dm
The Data Model
H HA b c
![Page 31: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/31.jpg)
Wikimania D.C. 2012
ve.dm
The Data Model
H H
![Page 32: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/32.jpg)
Wikimania D.C. 2012
ve.dm
The Data Model
H HD
![Page 33: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/33.jpg)
Wikimania D.C. 2012
ve.dm
The Data Model
H HD P PH e l l o w o r l d ! P PB o l d , I t a l i c
![Page 34: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/34.jpg)
Wikimania D.C. 2012
ve.dm
The Data Model
H HD P H e l l o w o r Pl d ! P B o l d , I Pt a l i c
![Page 35: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/35.jpg)
Wikimania D.C. 2012
ve.dm
The Data Model
H HD P H e l l o w o r Pt a l i c
![Page 36: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/36.jpg)
Wikimania D.C. 2012
ve.dm
The Data Model
H HD P H e l l o w o r Pl d ! P B o l d , I Pt a l i c
retain 13 replace [selection] with [] retain 6
![Page 37: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/37.jpg)
Wikimania D.C. 2012
ve.dm
The Data Model
H HD P H e l l o w o r Pl d ! P B o l d , I Pt a l i c
retain 13 replace [selection] with [] retain 6
![Page 38: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/38.jpg)
Wikimania D.C. 2012
ve.dm
The Data Model
H HD P H e l l o w o r Pl d ! P B o l d , I Pt a l i c
retain 13 replace [selection] with [] retain 6
replace [] with [selection]
![Page 39: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/39.jpg)
Wikimania D.C. 2012
ve.dm
The Node Tree
H
H
H
P
P
a
r
a
g
r
a
p
h
P
e
a
d
Linear Model
Head
Paragraph
User Interface
![Page 40: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/40.jpg)
Wikimania D.C. 2012
ve.dm
The Node Tree
Head
Paragraph
User Interface
ve.dm.DocumentNode(17)
ve.dm.HeadingNode(6)
ve.dm.ParagraphNode(11)
ve.dm.TextNode(4)
ve.dm. TextNode(9)
Node Tree
H
H
H
P
P
a
r
a
g
r
a
p
h
P
e
a
d
Linear Model
![Page 41: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/41.jpg)
Wikimania D.C. 2012
ve.dm
The Node Tree
Head
Paragraph
User Interface
ve.dm.DocumentNode(17)
ve.dm.ParagraphNode(11)
ve.dm. TextNode(9)
ve.dm.HeadingNode(6)
ve.dm.TextNode(4)
Node Tree
H
H
H
P
P
a
r
a
g
r
a
p
h
P
e
a
d
Linear Model
![Page 42: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/42.jpg)
Wikimania D.C. 2012
ve.dm
The Node Tree
Head
User Interface
ve.dm.HeadingNode(6)
ve.dm.TextNode(4)
Node Tree
H
H
H
P
P
a
r
a
g
r
P
e
a
d
Linear Model
ve.dm.DocumentNode(14)
ve.dm.ParagraphNode(8)
ve.dm. TextNode(6)
Paragr
![Page 43: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/43.jpg)
Wikimania D.C. 2012
Content editable is poison
Native Edit Surface
Custom Edit Surface
Development Effort
Supp
orte
d Fe
atur
es
A Theory
![Page 44: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/44.jpg)
Wikimania D.C. 2012
ve.es
Some Progress
A text-flow algorithm can be a tricky thing to write. Using a div for
each line requires measuring the line each time a word is added and breaking
the line when it no longer fits. It’s also gotta be pretty darn fast.
![Page 45: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/45.jpg)
Wikimania D.C. 2012
ve.es
Some Progress
A text-flow algorithm can be a tricky thing to write.
Using a div for each line requires measuring the line
each time a word is added and breaking the line when it
no longer fits. It’s also gotta be pretty darn fast.
![Page 46: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/46.jpg)
Wikimania D.C. 2012
ve.es
Some Progress
A text-flow algorithm can
be a tricky thing to
write. Using a div for
each line requires
measuring the line each
time a word is added and
breaking the line when it
no longer fits. It’s also gotta be pretty darn fast.
![Page 47: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/47.jpg)
Wikimania D.C. 2012
ve.es
Some Progress
A text-flow algorithm can
be a tricky thing to
write. Using a div for
each line requires
measuring the line each
time a word is added and
breaking the line when it
no longer fits. It’s also gotta be pretty darn fast.
![Page 48: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/48.jpg)
Wikimania D.C. 2012
ve.es
Some Progress
A text-flow algorithm can
be a tricky thing to
write. Using a div for
each line requires
measuring the line each
time a word is added and
breaking the line when it
no longer fits. It’s also gotta be pretty darn fast.
Hi.
![Page 49: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/49.jpg)
Wikimania D.C. 2012
ve.es
Some Progress
A text-flow algorithm can
be a tricky thing to
write. It’s also gotta
be pretty darn fast.
Hi.
![Page 50: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/50.jpg)
Wikimania D.C. 2012
ve.es
Some Progress
![Page 51: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/51.jpg)
Wikimania D.C. 2012
Content editable is poison
Native Edit Surface
Custom Edit Surface
Development Effort
Supp
orte
d Fe
atur
es
Mobile selection, native spell check, auto-correct, etc. {
���������
A New Theory
![Page 52: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/52.jpg)
Wikimania D.C. 2012
ve.ce
More Progress
Input & Rendering
ContentEditableFeatures Things worth using
![Page 53: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/53.jpg)
Wikimania D.C. 2012
ve.ce
More Progress
ContentEditableHTML
Keyboard and Mouse Input ExecCommand
HTML
![Page 54: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/54.jpg)
Wikimania D.C. 2012
ve.ce
More Progress
View & Controller
Keyboard and Mouse Input ExecCommand
Model
Rendering Observation
Synchronization Processing
ContentEditable
HTML HTML
![Page 55: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/55.jpg)
Wikimania D.C. 2012
ve.ce
More Progress
YesTransactSpecial?
Event
YesTransact
Render
Changes?
Events Polling
Interval Render
(Maybe)
![Page 56: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/56.jpg)
Wikimania D.C. 2012
Demo
A Demo
![Page 57: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/57.jpg)
Wikimania D.C. 2012
What’s next?
The Future
CC-BY-SA-3.0, http://commons.wikimedia.org/wiki/File:Hover_board.jpg
![Page 58: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/58.jpg)
Wikimania D.C. 2012
More Features
The Future
• Nested lists• Definition lists• Tables• Images• Videos• Infoboxes• References
• Image galleries• Real-time
collaboration• Conflict resolution• Edit playback• Integration with
discussion system
![Page 59: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/59.jpg)
Wikimania D.C. 2012
More Platforms
Wikis
Blogs
Forums
The Future
![Page 60: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/60.jpg)
Wikimania D.C. 2012
Get Involved
Community Development
git clone https://gerrit.wikimedia.org/r/p/mediawiki/extensions/VisualEditor.git
Clone our repository
http://www.mediawiki.org/wiki/VisualEditor
Learn more about VisualEditor
![Page 61: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/61.jpg)
Wikimania D.C. 2012
Work @ Wikimedia
http://jobs.wikimedia.org
CC-BY-SA-3.0, http://commons.wikimedia.org/wiki/File:New_Wikimedia_Foundation_Office_11.jpg
![Page 62: Building a Visual Editor for Wikipedia...Building a Visual Editor for Wikipedia Wikimania D.C. 2012 Trevor Parscal Lead Designer and Engineer Wikimedia Roan Kattouw Data Model Engineer](https://reader034.vdocuments.site/reader034/viewer/2022050208/5f5aff17cbfd606e503dccde/html5/thumbnails/62.jpg)
Wikimania D.C. 2012
Trevor [email protected] [email protected]
Roan Kattouw
@trevorparscal @catrope
http://wikitech.wikimedia.org/view/Presentations
Download these slides
http://www.mediawiki.org/wiki/VisualEditor
Learn more about VisualEditor