VisualEditor/Developer glossary

VisualEditor has a rich set of developer terminology used to describe its inner workings.

Structure

Target

The VE target is the highest level container of a VE instance. Different VE environments typicall implement their own target, extending ve.init.mw.Target, for example ArticleTarget (with desktop and mobile sub-classes) for article editing, CommentTarget in DiscussionTools (and before that mw.flow.ve.Target) as well as custom targets in ContentTranslation.

When mini VE editors are required, such as the caption editor in the media dialog, we use a TargetWidget, which is an OOUI widget containing an instance of a target.

Targets contain a surface and a toolbar, as well listening to global shortcuts, such as ctrl+?.

Toolbar

Toolbar configuration is usually stored statically in the Target and passed to the toolbar when constructed. Toolbars consist of ToolGroups, which contain Tools

ToolGroups

TODO

Surface

The UI surface is the main container for the editing surface (where content is shown and edited).

Context

TODO

Historically known as Edit cards or Bottom sheet on mobile in some tasks.

Context items

TODO

Inspector

TODO

Dialogs

TODO

Concepts

See also the OOUI demos.

• Window: any element that pops up over the interface
  • Dialog: a window with a specific flow of associated actions: opening, a user choice, closing...
  • Inspector: a dialog that is specifically related to a node or annotation on the page (the desktop presentation is a tooltip-style popup; the mobile presentation is a modal window)
  • Panel: a individual page within a dialog (whether accessed from a tab or a sidebar)
• Context menu:
• Context items: a pop-up that appears anytime the cursor or focus is within the context of a specific node or annotation. It shows information, but doesn’t let you edit directly. Multiple context items can appear at once as a stack when one cursor position is in multiple contexts.
• Edit cards: the new design of the Context items on mobile. These "edit cards" will show details about, and actions related to, different elements within articles, like links, citations, images, infoboxes, templates, etc.
• Edit flow: The different steps involved with making and saving an edit. These steps vary between editing interfaces and platforms (i.e. mobile and desktop).
• Rich element: parts of articles that are added and edited "outside" of the document. Examples: citations, images, links, tables, templates, etc.
• Shortcut: keyboard shortcut (e.g. cmd/ctrl-K to insert a citation)
• Target:
• Selection:
• Action:
• Command:
• Sequence: a sequences of typed characters that causes some action and deletes the typed characters (e.g. [[ to open the link dialog)
• Toolbar: a bar containing buttons that activate particular tools
• Tool:

Data model

• Annotation: a tag that adds a special meaning to text (e.g. link, bold text, a language annotation).
• Node: a standalone "item" like an image, a table, or a table cell. Nodes can have annotations (e.g. an image can carry a link).
• Meta item: an invisible node, e.g. the representation of category links or wikitext behavior switches like __NOTOC__
• Linear data: internal data format in the editor that represents HTML documents as a list of tokens rather than a tree. This makes operations on the document easier to describe, because even for complex structural changes, you just need an index and the content to add/remove.

Linear data example

HTML document	Visual representation	Tree representation	Linear representation
<p>Foo</p><ul><li>Foo</li><li>Foo</li><ul>	Foo Foo Foo	p text: Foo ul li text: Foo li text: Foo	p, F, o, o, /p, ul, li, F, o, o, /li, li, F, o, o, /li, ul

Shorthand/abbreviations

• VE: abbreviation for VisualEditor, MediaWiki's rich-text editing interface.
• Mobile VE: MediaWiki's rich-text editing interface, implemented for mobile devices.
• Mobile: The mobile site, regardless of what device you use to reach it.
• DM: Data model. Code in the ve.dm namespace manipulates the internal data structures representing the document being edited.
• CE: Content-editable. Code in the ve.ce namespace manipulates the editing surface, which is built on top of the HTML contentEditable feature and the data model.
• UI: User interface. Code in the ve.ui namespace defines the various elements of the user interface (buttons, popups, dialogs, menus) and implements some high-level operations that can be performed by the user.
• SA: Standalone HTML editor (not depending on MediaWiki).