As an editor using the visual editor I can see a visual diff of my change before I click save, so that I can check that the change is as I intended.**Overview**
Acceptance criteria:
- Status quo is that you see a two-column wikitext diff
- See side-by-side before and after, as the document looks (look into mobile too)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:
- Highlight- Indicate the visual state of the differencesocument before and after the changes
- Align- Highlight the differences as far as possible (section/paragraph level?(could be side-by-side or inline)
- Show onl- Display the changed area pluss within the relevant context (aligned, if side-by-side)
- Meets performance target (tbd)- Generate the diff at an acceptable speed
- Handles block nodes- Detect and display different types of changes (text changes, structural changes, changes to tables, galleries, text nodesformulae, alien nodesetc)
Work to do:
Define**Research, requirements and design**
Research for defining requirements:
- Make list- Types of edge cases of types of diffsits made
- Look at other common diff tools (code/plain text/rich text- Diffing algorithms, etc)bearing in mind the types of edits made
- Decide what is worth covering- Existing diff tools (their functionality, design, performance)
- Who are the users and who represents the- Particular needs of different classeslanguages, what are their concerns, etc.
Design: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
- Prototype does anything at all
- Prototype demonstrates that the chosen approach can meet performance target
- Complete research of existing tools and decide what to incorporate, including context and highlighting
- Design first look
- Prototype handles different types of nodes**Work steps**
Research:
- Prototype highlights changes- Choose a suitable diff library (existing or make a new one) for preliminary work
- List of edge cases- Use the library to gather data on the types of diffs generated by edits
Build:
- List of edge cases within the scope of this project plus level of handling (e.g.- Build prototype, integrated into visual editor, don't crash)that can produce sensible diffs at an acceptable speed from typical and edge-case edits
- Have a - Decide what to incorpusorate from research of diffsexisting tools, including all edge casescontext and highlighting
- Prototype passes corups test- Discuss design with designers, implement user interface accordingly and do more formal testing on typical and edge-cases
- D- Discuss further design make-overimprovements with designers
- Release alpha
- P- Make improvements until prototype passes usability tests
- Release beta