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 <h1>A<b>b</b>c</h1> 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 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 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.