Overview

It is not currently possible to see a visual diff before saving an edit made in visual editor. It would be nice to offer the option of visual diffs, in case a user is not fluent in wikitext or would prefer a visual diff for some other reason.

A visual diff should:

• Indicate the visual state of the document before and after the changes
• Highlight the differences (could be side-by-side or inline)
• Display the changes within the relevant context (aligned, if side-by-side)
• Generate the diff at an acceptable speed
• Detect and display different types of changes (text changes, structural changes, changes to tables, galleries, formulae, etc)

Research, requirements and design

Research for defining requirements:

• Types of edits made
• Diffing algorithms, bearing in mind the types of edits made
• Existing diff tools (their functionality, design, performance)
• Particular needs of different languages, platforms and user groups

As always, design should consider:

• Interface design
  • Workflow, graphics
  • API design (provide/use... available outside of VE?)
• Internal design
  • Client-server model
  • Language/libraries/browsers/versioning
  • Algorithms
  • Data storage
  • Performance optimisation
  • Security

Work steps

Research:

• Choose a suitable diff library (existing or make a new one) for preliminary work
• Use the library to gather data on the types of diffs generated by edits

Build:

• Build prototype, integrated into visual editor, that can produce sensible diffs at an acceptable speed from typical and edge-case edits
• Decide what to incorporate from research of existing tools, including context and highlighting
• Discuss design with designers, implement user interface accordingly and do more formal testing on typical and edge-cases
• Discuss further design improvements with designers
• Release alpha
• Make improvements until prototype passes usability tests
• Release beta