VisualEditor/Diffs

From mediawiki.org

Since 2017, VisualEditor provides Visual diffs (visual difference displays). These are available in two places in the interface: when previewing changes to the document before the user saves the page, and (as a beta feature) within the standard MediaWiki diff display, accessed from the history page. In both cases, the visual diff shows up alongside the traditional two-column wikitext diff, and the user can toggle between the two displays.

Visual diffs have two main advantages over wikitext diffs. The first is that editors can directly see the changes they and others have made without needing to understand wikitext. This is particularly helpful when looking at changes to graphical structures such as tables; for example, if an edit deletes a column from a table, the wikitext diff for it would be hard to understand, while the visual diff would be immediately obvious.

The second is that the technology can be used to more accurately represent the change to the reader. For example, if an edit swapped two paragraphs (with or without changes to the paragraphs), the visual diff will identify that this is what occurred, while a wikitext diff makes it appear that a paragraph was deleted and an entirely new paragraph was added.

On regular diff pages

Most of the examples and screenshots below are about using visual diffs during page previews when editing. However, VisualEditor's visual diffs can also be used on regular diff pages, on any wiki that has VisualEditor installed. You can see an example of it in use on the English-language Wikipedia here.

For wikis that have VisualEditor, there are several ways to activate this visual diff display:

  • Add the following to LocalSettings.php:
$wgVisualEditorEnableDiffPage = true;
  • If your wiki has a "Beta features" tab within Special:Preferences, and you want to make visual diffs an "opt-in" feature for users, you can add the following to LocalSettings.php:
$wgVisualEditorEnableDiffPageBetaFeature = true;
  • As seen in the Wikipedia example linked above, the visual diff mode can also be activated by simply adding "&visualdiff" to the URL of a diff page.

How it works

Screenshot showing some changes to an article. Most changes are highlighted with text formatting.
When you are finished editing the page, type your edit summary and then choose "Review your changes". In visual mode, you will see additions, removals, new links, and formatting highlighted. Other changes, such as changing the size of an image, are described in notes on the side.
Toggle button showing visual and wikitext options; visual option is selected.
Click the toggle button to switch between visual and wikitext diffs.
Screenshot showing the same changes, in the two-column wikitext diff display.
The wikitext diff is the same diff tool that is used in the wikitext editors and in the page history.

Examples

Technology used

Thalia Chan, Unifying editing and visual diffs, Wikimania 2017

Current limitations

  • No notices for changes to "invisible" page metadata , such as categories or TOC keywords.
  • Has issues with complex changes to tables.[3]
  • Unavailable on certain special pages:
    • Undo "diff" pages.[4]
    • Edit conflict pages[5]

History

This feature has been available as the first diff tool in the desktop VisualEditor from the 1.31.0-wmf-20 branch onwards (released to Wikimedia production on 6 February 2018). Before that, it was a secondary tool from the 1.29.0-wmf-17 branch onwards (released to Wikimedia production on 21 March 2017).

See also

Footnotes