VisualEditor/Diffs

From MediaWiki.org
Jump to navigation Jump to search
Translate this page; This page contains changes which are not marked for translation.

Other languages:
English • ‎français • ‎日本語 • ‎polski • ‎português do Brasil • ‎русский • ‎српски / srpski • ‎українська • ‎Tiếng Việt

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

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

On regular diff pages[edit]

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[edit]

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[edit]

Technology used[edit]

Thalia Chan, Unifying editing and visual diffs, Wikimania 2017

Current limitations[edit]

  • Some edits aren't shown very clearly, as we haven't added custom explanations for all kinds of content. In particular, references, custom extension tags, and templates need better, more sensible explanations.
  • Some behaviour switches that add UI elements such as TOC or edit links aren't shown.
  • No notices for changes to "invisible" page metadata.
  • Has issues with complex changes to lists[3] and tables[4].
  • Unavailable in certain special pages:
  • Breaks twinkle rollback on wikipedia https://phabricator.wikimedia.org/T192755#4165632

See also[edit]

Footnotes[edit]