VisualEditor/Diffs

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

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.

Click the toggle button to switch between visual and wikitext diffs.

The wikitext diff is the same diff tool that is used in the wikitext editors and in the page history.

Examples

• Rich text edits
• 
  Visual diff
• 
  Wikitext diff

• Paragraph move with subtle vandalism
• 
  Visual diff
• 
  Wikitext diff (2017). This feature was added to the wikitext diff engine in 2018; see File:VisualEditor new wikitext diff with paragraph move and vandalism.png.

• Table column removed
• 
  Visual diff
• 
  Wikitext diff

• Text, formatting and list changes
• 
  Visual diff
• 
  Wikitext diff

• Insert new multimedia (sheet music)
• 
  Visual diff
• 
  Wikitext diff

Technology used

Thalia Chan, Unifying editing and visual diffs, Wikimania 2017

• Google Diff, Match and Patch
• TreeDiffer.js

Current limitations

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

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

• 2016 Community Wishlist Survey/Categories/Reading#CW2016-R094
• Community Tech/Improved diffs