![Page 1: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/1.jpg)
The present and future of editing our wikis
![Page 2: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/2.jpg)
Image: https://commons.wikimedia.org/wiki/File:The_Blue_Marble.jpg – public domain original from NASA; adjusted by User:Deglr6328
Overview
![Page 3: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/3.jpg)
Why a visual editor?
![Page 4: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/4.jpg)
Why a visual editor?
• Drop in new contributors is a major issue for Wikimedia
![Page 5: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/5.jpg)
Why a visual editor?
• Drop in new contributors is a major issue for Wikimedia
• Wikitext stops people becoming contributors or staying
![Page 6: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/6.jpg)
Why a visual editor?
• Drop in new contributors is a major issue for Wikimedia
• Wikitext stops people becoming contributors or staying
• Not an appropriate environment for the 21st Century
![Page 7: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/7.jpg)
Why a visual editor?
• Drop in new contributors is a major issue for Wikimedia
• Wikitext stops people becoming contributors or staying
• Not an appropriate environment for the 21st Century
• Prevents us from providing other helpful editing tools
![Page 8: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/8.jpg)
Development history
![Page 9: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/9.jpg)
Development history
• Discussion for many years since 2004
![Page 10: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/10.jpg)
Development history
• Discussion for many years since 2004
• Became a core goal in mid-2011 and we started work
![Page 11: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/11.jpg)
Development history
• Discussion for many years since 2004
• Became a core goal in mid-2011 and we started work
• Working out if we can do it
![Page 12: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/12.jpg)
Development history
• Discussion for many years since 2004
• Became a core goal in mid-2011 and we started work
• Working out if we can do it
• Iterative code development based on feedback & data
![Page 13: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/13.jpg)
Deployment history
![Page 14: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/14.jpg)
Deployment history
Available:
![Page 15: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/15.jpg)
Deployment history
Available:
• … on a wiki (mediawiki.org) from Jun 2012
![Page 16: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/16.jpg)
Deployment history
Available:
• … on a wiki (mediawiki.org) from Jun 2012
• … for real edits by users (opt-in alpha) from Dec 2012
![Page 17: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/17.jpg)
Deployment history
Available:
• … on a wiki (mediawiki.org) from Jun 2012
• … for real edits by users (opt-in alpha) from Dec 2012
• English only at first; other Wikipedias since Apr 2013
![Page 18: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/18.jpg)
Deployment history
Available:
• … on a wiki (mediawiki.org) from Jun 2012
• … for real edits by users (opt-in alpha) from Dec 2012
• English only at first; other Wikipedias since Apr 2013
• … for real edits by all users (opt-out beta) from Jul 2013
![Page 19: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/19.jpg)
Deployment history
Available:
• … on a wiki (mediawiki.org) from Jun 2012
• … for real edits by users (opt-in alpha) from Dec 2012
• English only at first; other Wikipedias since Apr 2013
• … for real edits by all users (opt-out beta) from Jul 2013
• English only at first; more Wikipedias since & to come
![Page 20: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/20.jpg)
Image: https://commons.wikimedia.org/wiki/File:Arch_(PSF).png – public domain original from Pearson Scott Foresman
Architecture
![Page 21: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/21.jpg)
How it works
![Page 22: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/22.jpg)
How it works
VisualEditor:
• JavaScript client-side editor of our HTML+RDFa
![Page 23: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/23.jpg)
How it works
VisualEditor:
• JavaScript client-side editor of our HTML+RDFa
• Unique needs – rich data model, generated content
![Page 24: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/24.jpg)
How it works
VisualEditor:
• JavaScript client-side editor of our HTML+RDFa
• Unique needs – rich data model, generated content
Parsoid:
• Node.js server-side wikitext ⟷ HTML parser service
![Page 25: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/25.jpg)
How it works
VisualEditor:
• JavaScript client-side editor of our HTML+RDFa
• Unique needs – rich data model, generated content
Parsoid:
• Node.js server-side wikitext ⟷ HTML parser service
• Will eventually replace MediaWiki’s core PHP parser
![Page 26: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/26.jpg)
Anatomy of editing a pageWikitext
Parsoid
HTML+RDFa
HTML+RDFa
Serializer
Visual EditorData Model
ContentEditable
User Interface
![Page 27: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/27.jpg)
Anatomy of editing a page
![Page 28: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/28.jpg)
Anatomy of editing a page
• VisualEditor assets load when clicking Edit
![Page 29: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/29.jpg)
Anatomy of editing a page
• VisualEditor assets load when clicking Edit
• Integration asks for the HTML from Parsoid
![Page 30: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/30.jpg)
Anatomy of editing a page
• VisualEditor assets load when clicking Edit
• Integration asks for the HTML from Parsoid
• Data Model builds a linear model from this HTML
![Page 31: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/31.jpg)
Anatomy of editing a page
• VisualEditor assets load when clicking Edit
• Integration asks for the HTML from Parsoid
• Data Model builds a linear model from this HTML
• Content Editable builds surface from the data model
![Page 32: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/32.jpg)
Anatomy of editing a page
• VisualEditor assets load when clicking Edit
• Integration asks for the HTML from Parsoid
• Data Model builds a linear model from this HTML
• Content Editable builds surface from the data model
• Editing tools give you a way to edit the surface
![Page 33: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/33.jpg)
Anatomy of editing a page
• VisualEditor assets load when clicking Edit
• Integration asks for the HTML from Parsoid
• Data Model builds a linear model from this HTML
• Content Editable builds surface from the data model
• Editing tools give you a way to edit the surface
• The integration lets you save via Parsoid to MediaWiki
![Page 34: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/34.jpg)
Transformations
Parsoid HTML+RDFa
Linear Data Model (ve.dm)
Toolbars andInspectors (ve.ui)
Rendering, selectionand input/typing (ve.ce)
![Page 35: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/35.jpg)
Flexibility and modularity
![Page 36: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/36.jpg)
Flexibility and modularity
• Designed to be very modular
![Page 37: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/37.jpg)
Flexibility and modularity
• Designed to be very modular
• Can easily replace or extend existing tools
![Page 38: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/38.jpg)
Flexibility and modularity
• Designed to be very modular
• Can easily replace or extend existing tools
• Even with a user script or a gadget
![Page 39: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/39.jpg)
Flexibility and modularity
• Designed to be very modular
• Can easily replace or extend existing tools
• Even with a user script or a gadget
• Can expand for new content, uses and platforms
![Page 40: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/40.jpg)
Image: https://commons.wikimedia.org/wiki/File:Xmatrix.png – screenshot of XMatrix by Jamie Zawinski, licensed under the MIT/Expat licence
Data Model
![Page 41: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/41.jpg)
Outline
![Page 42: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/42.jpg)
Outline
• We can’t edit the Parsoid HTML+RDFa directly
![Page 43: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/43.jpg)
Outline
• We can’t edit the Parsoid HTML+RDFa directly
• Reliable conversion from HTML to a thing we can edit
![Page 44: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/44.jpg)
Outline
• We can’t edit the Parsoid HTML+RDFa directly
• Reliable conversion from HTML to a thing we can edit
• Round-trip back to HTML without corruption
![Page 45: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/45.jpg)
Outline
• We can’t edit the Parsoid HTML+RDFa directly
• Reliable conversion from HTML to a thing we can edit
• Round-trip back to HTML without corruption
• Synchronise with ContentEditable (both ways)
![Page 46: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/46.jpg)
Outline
• We can’t edit the Parsoid HTML+RDFa directly
• Reliable conversion from HTML to a thing we can edit
• Round-trip back to HTML without corruption
• Synchronise with ContentEditable (both ways)
• Needs to support real-time collaborative editing
![Page 47: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/47.jpg)
Example
![Page 48: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/48.jpg)
Example
• Gives us a linear view of the HTML tree:<p>Hi</p>→[{type:‘paragraph’},‘H’,‘i’,{type:‘/paragraph’}]
![Page 49: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/49.jpg)
Example
• Gives us a linear view of the HTML tree:<p>Hi</p>→[{type:‘paragraph’},‘H’,‘i’,{type:‘/paragraph’}]
• Lets us create linear, fully reversible transactions (diffs)
![Page 50: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/50.jpg)
Example
• Gives us a linear view of the HTML tree:<p>Hi</p>→[{type:‘paragraph’},‘H’,‘i’,{type:‘/paragraph’}]
• Lets us create linear, fully reversible transactions (diffs)
• Keeps track of every change for undo/redo
![Page 51: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/51.jpg)
Example
• Gives us a linear view of the HTML tree:<p>Hi</p>→[{type:‘paragraph’},‘H’,‘i’,{type:‘/paragraph’}]
• Lets us create linear, fully reversible transactions (diffs)
• Keeps track of every change for undo/redo
• ...and collaboration
![Page 52: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/52.jpg)
Language challenges
![Page 53: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/53.jpg)
Language challenges
• Data Model stores characters as an array of objects
![Page 54: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/54.jpg)
Language challenges
• Data Model stores characters as an array of objects
• We changed from code units to grapheme clusters
![Page 55: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/55.jpg)
Language challenges
• Data Model stores characters as an array of objects
• We changed from code units to grapheme clusters
• ng (code units): [‘n’, ‘^’, ‘g’]
![Page 56: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/56.jpg)
Language challenges
• Data Model stores characters as an array of objects
• We changed from code units to grapheme clusters
• ng (code units): [‘n’, ‘^’, ‘g’]
• ng (grapheme clusters): [‘n^’, ‘g’]
![Page 57: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/57.jpg)
Language challenges
• Data Model stores characters as an array of objects
• We changed from code units to grapheme clusters
• ng (code units): [‘n’, ‘^’, ‘g’]
• ng (grapheme clusters): [‘n^’, ‘g’]
• This doesn’t work, so we’re reverting to code units
![Page 58: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/58.jpg)
Language issues
![Page 59: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/59.jpg)
Language issues
• Supplementary characters: �
![Page 60: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/60.jpg)
Language issues
• Supplementary characters: �
• Complex grapheme clusters: !"
![Page 61: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/61.jpg)
Language issues
• Supplementary characters: �
• Complex grapheme clusters: !"
• Combining accents: fac on
![Page 62: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/62.jpg)
Language issues
• Supplementary characters: �
• Complex grapheme clusters: !"
• Combining accents: fac on
• Bi-directional: עב12345רית
![Page 63: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/63.jpg)
Language issues
• Supplementary characters: �
• Complex grapheme clusters: !"
• Combining accents: fac on
• Bi-directional: עב12345רית• Input methods (East Asian, Indic, ...)
![Page 64: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/64.jpg)
Language testing
We need your feedback!
![Page 65: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/65.jpg)
Image: https://commons.wikimedia.org/wiki/File:Polytechnic.svg – Available under CC-BY-SA 3.0 by [[User:Μηχανικός1]]
Content Editable
![Page 66: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/66.jpg)
Browser Content Editable
![Page 67: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/67.jpg)
Browser Content Editable
• Messes up HTML
![Page 68: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/68.jpg)
Browser Content Editable
• Messes up HTML
• Inconsistent key handling
![Page 69: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/69.jpg)
Browser Content Editable
• Messes up HTML
• Inconsistent key handling
• Adds <br> tags
![Page 70: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/70.jpg)
Browser Content Editable
• Messes up HTML
• Inconsistent key handling
• Adds <br> tags
• Native text insertion
![Page 71: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/71.jpg)
Browser Content Editable
• Messes up HTML
• Inconsistent key handling
• Adds <br> tags
• Native text insertion
• Spellcheck
![Page 72: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/72.jpg)
Browser Content Editable
• Messes up HTML
• Inconsistent key handling
• Adds <br> tags
• Native text insertion
• Spellcheck
• Selection & cursor
![Page 73: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/73.jpg)
Browser Content Editable
• Messes up HTML
• Inconsistent key handling
• Adds <br> tags
• Native text insertion
• Spellcheck
• Selection & cursor
• Equal rendering
![Page 74: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/74.jpg)
Programatic cursor handling
![Page 75: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/75.jpg)
Programatic cursor handling
• Stop the browser’s native cursor handling
![Page 76: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/76.jpg)
Programatic cursor handling
• Stop the browser’s native cursor handling
• Prevent the cursor from entering protected elements
![Page 77: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/77.jpg)
Programatic cursor handling
• Stop the browser’s native cursor handling
• Prevent the cursor from entering protected elements
• Allows us to skip over non-editable elements
![Page 78: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/78.jpg)
Programatic cursor handling
• Stop the browser’s native cursor handling
• Prevent the cursor from entering protected elements
• Allows us to skip over non-editable elements
• Keyboard deleting is more predictable(we have control)
![Page 79: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/79.jpg)
SurfaceObserver
![Page 80: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/80.jpg)
SurfaceObserver
• Poll for content changes and notify model
![Page 81: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/81.jpg)
SurfaceObserver
• Poll for content changes and notify model
• Use compositionStart + compositionEnd
![Page 82: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/82.jpg)
SurfaceObserver
• Poll for content changes and notify model
• Use compositionStart + compositionEnd
• May be replaced with native MutationObservers
![Page 83: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/83.jpg)
Image: https://commons.wikimedia.org/wiki/File:Blacksmith_anvil_hammer.svg – Public domain, uploaded by [[User: Midnightcomm]]
Editing Tools
![Page 84: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/84.jpg)
Actually editing stuff!
![Page 85: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/85.jpg)
Actually editing stuff!
Text formatting
![Page 86: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/86.jpg)
Actually editing stuff!
Text formatting
• “Annotations” – things like bold, italic, link, …
![Page 87: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/87.jpg)
Actually editing stuff!
Text formatting
• “Annotations” – things like bold, italic, link, …
• Includes more complex ones which need inspectors
![Page 88: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/88.jpg)
Actually editing stuff!
Text formatting
• “Annotations” – things like bold, italic, link, …
• Includes more complex ones which need inspectors
Generated content
![Page 89: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/89.jpg)
Actually editing stuff!
Text formatting
• “Annotations” – things like bold, italic, link, …
• Includes more complex ones which need inspectors
Generated content
• References, templates, meta-data, media items, …
![Page 90: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/90.jpg)
Actually editing stuff!
Text formatting
• “Annotations” – things like bold, italic, link, …
• Includes more complex ones which need inspectors
Generated content
• References, templates, meta-data, media items, …
• Where VisualEditor is unique – a generic capability
![Page 91: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/91.jpg)
Current & future tools
![Page 92: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/92.jpg)
• Bold
Current & future tools
![Page 93: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/93.jpg)
• Bold
• Italic
Current & future tools
![Page 94: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/94.jpg)
• Bold
• Italic
• Link
Current & future tools
![Page 95: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/95.jpg)
• Bold
• Italic
• Link
• Lists
Current & future tools
![Page 96: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/96.jpg)
• Bold
• Italic
• Link
• Lists
• In/outdenting lists
Current & future tools
![Page 97: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/97.jpg)
• Bold
• Italic
• Link
• Lists
• In/outdenting lists
Coming soon:
Current & future tools
![Page 98: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/98.jpg)
• Bold
• Italic
• Link
• Lists
• In/outdenting lists
Coming soon:
• Language (lang="en")
Current & future tools
![Page 99: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/99.jpg)
• Bold
• Italic
• Link
• Lists
• In/outdenting lists
Coming soon:
• Language (lang="en")
• Underline/Strikethrough
Current & future tools
![Page 100: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/100.jpg)
• Bold
• Italic
• Link
• Lists
• In/outdenting lists
Coming soon:
• Language (lang="en")
• Underline/Strikethrough
• Superscript/Subscript
Current & future tools
![Page 101: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/101.jpg)
• Bold
• Italic
• Link
• Lists
• In/outdenting lists
Coming soon:
• Language (lang="en")
• Underline/Strikethrough
• Superscript/Subscript
• In/outdenting paragraphs
Current & future tools
![Page 102: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/102.jpg)
Current & future dialogs
![Page 103: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/103.jpg)
• Transclusion editing
Current & future dialogs
![Page 104: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/104.jpg)
• Transclusion editing
• Reference editing/re-use
Current & future dialogs
![Page 105: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/105.jpg)
• Transclusion editing
• Reference editing/re-use
• Reference list editing
Current & future dialogs
![Page 106: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/106.jpg)
• Transclusion editing
• Reference editing/re-use
• Reference list editing
• Page settings
Current & future dialogs
![Page 107: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/107.jpg)
• Transclusion editing
• Reference editing/re-use
• Reference list editing
• Page settings
• Media inserting/settings
Current & future dialogs
![Page 108: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/108.jpg)
• Transclusion editing
• Reference editing/re-use
• Reference list editing
• Page settings
• Media inserting/settings
Coming soon:
Current & future dialogs
![Page 109: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/109.jpg)
• Transclusion editing
• Reference editing/re-use
• Reference list editing
• Page settings
• Media inserting/settings
Coming soon:
• Code (<syntaxhighlight>)
Current & future dialogs
![Page 110: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/110.jpg)
• Transclusion editing
• Reference editing/re-use
• Reference list editing
• Page settings
• Media inserting/settings
Coming soon:
• Code (<syntaxhighlight>)
• Equation (<math>)
Current & future dialogs
![Page 111: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/111.jpg)
• Transclusion editing
• Reference editing/re-use
• Reference list editing
• Page settings
• Media inserting/settings
Coming soon:
• Code (<syntaxhighlight>)
• Equation (<math>)
• Hieroglyphics (<hiero>)
Current & future dialogs
![Page 112: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/112.jpg)
• Transclusion editing
• Reference editing/re-use
• Reference list editing
• Page settings
• Media inserting/settings
Coming soon:
• Code (<syntaxhighlight>)
• Equation (<math>)
• Hieroglyphics (<hiero>)
• Tables ({| … |- … |})
Current & future dialogs
![Page 113: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/113.jpg)
Usability is key
![Page 114: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/114.jpg)
Usability is key
• Editing tools are critical to using VisualEditor
![Page 115: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/115.jpg)
Usability is key
• Editing tools are critical to using VisualEditor
• Continuous iteration for improvement
![Page 116: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/116.jpg)
Usability is key
• Editing tools are critical to using VisualEditor
• Continuous iteration for improvement
• Unlike wikitext editing, discoverability is possible
![Page 117: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/117.jpg)
Usability is key
• Editing tools are critical to using VisualEditor
• Continuous iteration for improvement
• Unlike wikitext editing, discoverability is possible
• Provide full functionality but push “norms”
![Page 118: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/118.jpg)
Usability is key
• Editing tools are critical to using VisualEditor
• Continuous iteration for improvement
• Unlike wikitext editing, discoverability is possible
• Provide full functionality but push “norms”
• Balance ease of use with consistency
![Page 119: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/119.jpg)
Image: https://commons.wikimedia.org/wiki/File:Future_plate.svg – Public domain, created and uploaded by [[User:Ltljltlj]]
Next steps
![Page 120: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/120.jpg)
What we’re working on now
![Page 121: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/121.jpg)
What we’re working on now
• Main focus is stability, usability, and performance
![Page 122: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/122.jpg)
What we’re working on now
• Main focus is stability, usability, and performance
• Language features (IME, variants, section mark-up, …)
![Page 123: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/123.jpg)
What we’re working on now
• Main focus is stability, usability, and performance
• Language features (IME, variants, section mark-up, …)
• Editing of tables, galleries, formulæ, code blocks, …
![Page 124: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/124.jpg)
What we’re working on now
• Main focus is stability, usability, and performance
• Language features (IME, variants, section mark-up, …)
• Editing of tables, galleries, formulæ, code blocks, …
• Support editing on mobile, as part of Flow, and others
![Page 125: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/125.jpg)
What we’re working on now
• Main focus is stability, usability, and performance
• Language features (IME, variants, section mark-up, …)
• Editing of tables, galleries, formulæ, code blocks, …
• Support editing on mobile, as part of Flow, and others
• Make available for other Wikimedia wikis & 3rd parties
![Page 126: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/126.jpg)
Questions?
![Page 127: Overview - Wikimedia · • English only at first; other Wikipedias since Apr 2013 • … for real edits by all users (opt-out beta) from Jul 2013 • English only at first; more](https://reader036.vdocuments.us/reader036/viewer/2022081619/60eb2db00e3d0a01f57f331b/html5/thumbnails/127.jpg)
The present and future of editing our wikis