Building a Visual Editor for Wikipedia
Trevor Parscal and Roan Kattouw
Wikimania D.C. 2012 Trevor Parscal Roan Kattouw Rob Moen Lead Designer and Engineer Data Model Engineer User Interface Engineer Wikimedia Wikimedia Wikimedia
Inez Korczynski Christian Williams James Forrester Edit Surface Engineer Edit Surface Engineer Product Analyst Wikia Wikia Wikimedia
The People Wikimania D.C. 2012 Parsoid Team
Gabriel Wicke Subbu Sastry Lead Parser Engineer Parser Engineer Wikimedia Wikimedia
The People Wikimania D.C. 2012
The Complexity Problem Wikimania D.C. 2012 Active Editors 20k 0
2001 2007 Today Growth Stagnation
The Complexity Problem Wikimania D.C. 2012
just messing around Testing testing 123...
The Complexity Problem Wikimania D.C. 2012
The Review Problem Wikimania D.C. 2012 Balancing the ecosystem Difficulty
Editing Reviewing
The Review Problem Wikimania D.C. 2012 Balancing the ecosystem Difficulty
Editing Reviewing
The Review Problem Wikimania D.C. 2012 Balancing the ecosystem Difficulty
Editing Reviewing
The Review Problem Wikimania D.C. 2012 Balancing the ecosystem Difficulty
Editing Reviewing
The Review Problem Wikimania D.C. 2012 Wikitext enthusiasts
CC-BY-SA-3.0, http://commons.wikimedia.org/wiki/File:Usfa-heston.gif
The Expert Problem Wikimania D.C. 2012 Exit strategy
100%
Preference for Wikitext
Capabilities of visual tools
0%
The Expert Problem Wikimania D.C. 2012 To what extent?
CC-BY-SA-3.0, http://commons.wikimedia.org/wiki/File:TriMet_MAX_Green_Line_Train_on_Portland_Transit_Mall.jpg
The Expert Problem Wikimania D.C. 2012 To what extent?
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
The Expert Problem Wikimania D.C. 2012 Here to stay
CC-BY-SA-3.0, http://commons.wikimedia.org/wiki/File:MVI_2533_Ada_Jack_Snell_grave.jpg
The Expert Problem Wikimania D.C. 2012 Scale and speed
GFDL, http://commons.wikimedia.org/wiki/File:I-80_Eastshore_Fwy.jpg
The Collision Problem Wikimania D.C. 2012 Scale and speed
GFDL, http://commons.wikimedia.org/wiki/File:I-80_Eastshore_Fwy.jpg
Public Domain, http://commons.wikimedia.org/wiki/File:Two-car_collision_in_the_USA.jpg
The Collision Problem Wikimania D.C. 2012 Merge often fails
B (several changes in one)
A D
C (several changes in one)
The Collision Problem Wikimania D.C. 2012 Rebase often works
B1 B2 B3
A C1ʹ C2ʹ C3ʹ D
C1 C2 C3
The Collision Problem Wikimania D.C. 2012 Missing Pieces
CC-BY-NC-SA-3.0, http://www.becausewecan.org/Wiki_globe
The Focus Wikimania D.C. 2012 ve.dm
==A’’‘b’’’c==
The Data Model Wikimania D.C. 2012 ve.dm
Abc
The Data Model Wikimania D.C. 2012 ve.dm
[ { ‘type’: ‘heading’, ‘attributes’: { ‘level’: 1 } }, ‘A’, [‘b’, { ‘{“type”:”textStyle/bold”}’: { ‘type’: ’textStyle/bold’ } }], ‘c’, { ‘type’: ‘/heading’ } ]
The Data Model Wikimania D.C. 2012 ve.dm
H A b c H
The Data Model Wikimania D.C. 2012 ve.dm
H A b c H
The Data Model Wikimania D.C. 2012 ve.dm
H H
The Data Model Wikimania D.C. 2012 ve.dm
H D H
The Data Model Wikimania D.C. 2012 ve.dm
H D H P H e l l o w o r l d ! P P B o l d , I t a l i c P
The Data Model Wikimania D.C. 2012 ve.dm
H D H P H e l l o w o r l d ! P P B o l d , I t a l i c P
The Data Model Wikimania D.C. 2012 ve.dm
H D H P H e l l o w o r t a l i c P
The Data Model Wikimania D.C. 2012 ve.dm
H D H P H e l l o w o r l d ! P P B o l d , I t a l i c P
retain 13 replace [selection] with [] retain 6
The Data Model Wikimania D.C. 2012 ve.dm
H D H P H e l l o w o r l d ! P P B o l d , I t a l i c P
retain 13 replace [selection] with [] retain 6
The Data Model Wikimania D.C. 2012 ve.dm
H D H P H e l l o w o r l d ! P P B o l d , I t a l i c P
retain 13 replace [selection] with [] retain 6
replace [] with [selection]
The Data Model Wikimania D.C. 2012 ve.dm
Linear Model User Interface
H P
H P
e a Head
a r
d a H g Paragraph r
a
p
h
P
The Node Tree Wikimania D.C. 2012 ve.dm
Linear Model Node Tree User Interface
H P ve.dm.DocumentNode(17) H P
e a Head
a r ve.dm.HeadingNode(6)
d a H g ve.dm.TextNode(4) Paragraph r
a ve.dm.ParagraphNode(11) p
h
P ve.dm. TextNode(9)
The Node Tree Wikimania D.C. 2012 ve.dm
Linear Model Node Tree User Interface
H P ve.dm.DocumentNode(14) H P
e a Head
a r ve.dm.HeadingNode(6)
d a H g ve.dm.TextNode(4) Paragraph r
P ve.dm.ParagraphNode(8)
ve.dm. TextNode(6)
The Node Tree Wikimania D.C. 2012 ve.dm
Linear Model Node Tree User Interface
H P ve.dm.DocumentNode(14) H P
e a Head
a r ve.dm.HeadingNode(6)
d a
H g ve.dm.TextNode(4) Paragr r
P ve.dm.ParagraphNode(8)
ve.dm. TextNode(6)
The Node Tree Wikimania D.C. 2012 Content editable is poison
Native Edit Surface
Custom Edit Surface Supported Features Supported
Development Effort
A Theory Wikimania D.C. 2012 ve.es
Browsers don’t provide a way to get the graphical coordinates of a character in rendered text. This sucks, because if we want to make sure a cursor is in the right place we need to know exactly where everything is.
Some Progress Wikimania D.C. 2012 ve.es
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.
Some Progress Wikimania D.C. 2012 ve.es
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.
Some Progress Wikimania D.C. 2012 ve.es
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.
Some Progress Wikimania D.C. 2012 ve.es
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.
Some Progress Wikimania D.C. 2012 ve.es
A text-flow algorithm can be a tricky thing to write. Hi. It’s also gotta be pretty darn fast.
Some Progress Wikimania D.C. 2012 ve.es
Some Progress Wikimania D.C. 2012 Content editable is poison
Native Edit Surface
Mobile selection, native spell check, auto-correct, etc. {
Custom Edit Surface Supported Features Supported
Development Effort
A New Theory Wikimania D.C. 2012 ve.ce
Input & Rendering
ContentEditable Things worth using Features
More Progress Wikimania D.C. 2012 ve.ce
Keyboard and Mouse Input ExecCommand
HTML ContentEditable HTML
More Progress Wikimania D.C. 2012 ve.ce
Keyboard and Mouse Input ExecCommand
ContentEditable
Rendering Observation
View & Controller
Synchronization Processing
HTML Model HTML
More Progress Wikimania D.C. 2012 ve.ce
Events Polling
Event Render Interval Render
(Maybe)
Special? Transact Changes? Transact Yes Yes
More Progress Wikimania D.C. 2012 Demo
A Demo Wikimania D.C. 2012 What’s next?
CC-BY-SA-3.0, http://commons.wikimedia.org/wiki/File:Hover_board.jpg
The Future Wikimania D.C. 2012 More Features
• Nested lists • Image galleries • Definition lists • Real-time • Tables collaboration • Images • Conflict resolution • Videos • Edit playback • Infoboxes • Integration with • References discussion system
The Future Wikimania D.C. 2012 More Platforms
Blogs
Wikis Forums
The Future Wikimania D.C. 2012 Get Involved
Learn more about VisualEditor
http://www.mediawiki.org/wiki/VisualEditor
Clone our repository git clone https://gerrit.wikimedia.org/r/p/mediawiki/extensions/VisualEditor.git
Community Development Wikimania D.C. 2012 Work @ Wikimedia
CC-BY-SA-3.0, http://commons.wikimedia.org/wiki/File:New_Wikimedia_Foundation_Office_11.jpg
http://jobs.wikimedia.org
Wikimania D.C. 2012 Trevor Parscal Roan Kattouw [email protected] [email protected] @trevorparscal @catrope
Learn more about VisualEditor
http://www.mediawiki.org/wiki/VisualEditor
Download these slides
http://wikitech.wikimedia.org/view/Presentations
Wikimania D.C. 2012