VisualEditor/Developer glossary

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

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