Building a Visual Editor for

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 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