/**
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/
/* global document */
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Range from '@ckeditor/ckeditor5-engine/src/model/range';
import Position from '@ckeditor/ckeditor5-engine/src/model/position';
import UndoEngine from '../src/undoengine';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import HeadingEngine from '@ckeditor/ckeditor5-heading/src/headingengine';
import Typing from '@ckeditor/ckeditor5-typing/src/typing';
import Enter from '@ckeditor/ckeditor5-enter/src/enter';
import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
import BoldEngine from '@ckeditor/ckeditor5-basic-styles/src/boldengine';
import buildModelConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter';
import buildViewConverter from '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter';
import { setData, getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
describe( 'UndoEngine integration', () => {
let editor, doc, root, div;
beforeEach( () => {
div = document.createElement( 'div' );
document.body.appendChild( div );
return ClassicEditor.create( div, { plugins: [ Paragraph, HeadingEngine, Typing, Enter, Clipboard, BoldEngine, UndoEngine ] } )
.then( newEditor => {
editor = newEditor;
doc = editor.document;
// Add "div feature".
doc.schema.registerItem( 'div', '$block' );
buildModelConverter().for( editor.data.modelToView, editor.editing.modelToView ).fromElement( 'div' ).toElement( 'div' );
buildViewConverter().for( editor.data.viewToModel ).fromElement( 'div' ).toElement( 'div' );
root = doc.getRoot();
} );
} );
function setSelection( pathA, pathB ) {
doc.selection.setRanges( [ new Range( new Position( root, pathA ), new Position( root, pathB ) ) ] );
}
function input( input ) {
setData( doc, input );
}
function output( output ) {
expect( getData( doc ) ).to.equal( output );
}
function undoDisabled() {
expect( editor.commands.get( 'undo' ).isEnabled ).to.be.false;
}
function redoDisabled() {
expect( editor.commands.get( 'redo' ).isEnabled ).to.be.false;
}
describe( 'adding and removing content', () => {
it( 'add and undo', () => {
input( 'fo[]obar' );
doc.enqueueChanges( () => {
doc.batch().insert( doc.selection.getFirstPosition(), 'zzz' );
} );
output( 'fozzz[]obar' );
editor.execute( 'undo' );
output( 'fo[]obar' );
undoDisabled();
} );
it( 'multiple adding and undo', () => {
input( 'fo[]obar' );
doc.enqueueChanges( () => {
doc.batch()
.insert( doc.selection.getFirstPosition(), 'zzz' )
.insert( new Position( root, [ 1, 0 ] ), 'xxx' );
} );
output( 'fozzz[]oxxxbar' );
doc.enqueueChanges( () => {
setSelection( [ 1, 0 ], [ 1, 0 ] );
doc.batch().insert( doc.selection.getFirstPosition(), 'yyy' );
} );
output( 'fozzzoyyy[]xxxbar' );
editor.execute( 'undo' );
output( 'fozzzo[]xxxbar' );
editor.execute( 'undo' );
output( 'fo[]obar' );
undoDisabled();
} );
it( 'multiple adding mixed with undo', () => {
input( 'fo[]obar' );
doc.enqueueChanges( () => {
doc.batch().insert( doc.selection.getFirstPosition(), 'zzz' );
} );
output( 'fozzz[]obar' );
doc.enqueueChanges( () => {
setSelection( [ 1, 0 ], [ 1, 0 ] );
doc.batch().insert( doc.selection.getFirstPosition(), 'yyy' );
} );
output( 'fozzzoyyy[]bar' );
editor.execute( 'undo' );
output( 'fozzzo[]bar' );
doc.enqueueChanges( () => {
setSelection( [ 0, 0 ], [ 0, 0 ] );
doc.batch().insert( doc.selection.getFirstPosition(), 'xxx' );
} );
output( 'xxx[]fozzzobar' );
editor.execute( 'undo' );
output( '[]fozzzobar' );
editor.execute( 'undo' );
output( 'fo[]obar' );
undoDisabled();
} );
it( 'multiple remove and undo', () => {
input( '[]foobar' );
doc.enqueueChanges( () => {
doc.batch().remove( Range.createFromPositionAndShift( doc.selection.getFirstPosition(), 2 ) );
} );
output( '[]obar' );
doc.enqueueChanges( () => {
setSelection( [ 1, 1 ], [ 1, 1 ] );
doc.batch().remove( Range.createFromPositionAndShift( doc.selection.getFirstPosition(), 2 ) );
} );
output( 'ob[]' );
editor.execute( 'undo' );
// Here is an edge case that selection could be before or after `ar`.
output( 'obar[]' );
editor.execute( 'undo' );
// As above.
output( 'fo[]obar' );
undoDisabled();
} );
it( 'add and remove different parts and undo', () => {
input( 'fo[]obar' );
doc.enqueueChanges( () => {
doc.batch().insert( doc.selection.getFirstPosition(), 'zzz' );
} );
output( 'fozzz[]obar' );
doc.enqueueChanges( () => {
setSelection( [ 1, 2 ], [ 1, 2 ] );
doc.batch().remove( Range.createFromPositionAndShift( new Position( root, [ 1, 1 ] ), 1 ) );
} );
output( 'fozzzob[]r' );
editor.execute( 'undo' );
output( 'fozzzoba[]r' );
editor.execute( 'undo' );
output( 'fo[]obar' );
undoDisabled();
} );
it( 'add and remove same part and undo', () => {
input( 'fo[]obar' );
doc.enqueueChanges( () => {
doc.batch().insert( doc.selection.getFirstPosition(), 'zzz' );
} );
output( 'fozzz[]obar' );
doc.enqueueChanges( () => {
doc.batch().remove( Range.createFromPositionAndShift( new Position( root, [ 0, 2 ] ), 3 ) );
} );
output( 'fo[]obar' );
editor.execute( 'undo' );
output( 'fozzz[]obar' );
editor.execute( 'undo' );
output( 'fo[]obar' );
undoDisabled();
} );
it( 'undo remove all content', () => {
input( '
foo[]
' );
doc.batch().remove( Range.createIn( root ) );
output( '[]' );
editor.execute( 'undo' );
output( 'foo[]
' );
undoDisabled();
} );
it( 'undo insert first content', () => {
input( '' );
doc.batch().insert( doc.selection.getFirstPosition(), new Element( 'p' ) );
output( '[]
' );
editor.execute( 'undo' );
output( '[]' );
undoDisabled();
} );
// #72.
it( 'undo paste multiple elements simulation', () => {
input( '' );
const p = root.getChild( 0 );
const pos = new Position( root, [ 0 ] );
doc.batch().remove( p ).insert( pos, new Element( 'p' ) ).insert( pos.getShiftedBy( 1 ), new Element( 'p' ) );
output( '[]
' );
editor.execute( 'undo' );
output( '[]
' );
undoDisabled();
} );
} );
describe( 'moving', () => {
it( 'move same content twice then undo', () => {
input( 'f[o]zbar' );
doc.enqueueChanges( () => {
doc.batch().move( doc.selection.getFirstRange(), new Position( root, [ 1, 0 ] ) );
} );
output( 'fz[o]bar' );
doc.enqueueChanges( () => {
doc.batch().move( doc.selection.getFirstRange(), new Position( root, [ 0, 2 ] ) );
} );
output( 'fz[o]bar' );
editor.execute( 'undo' );
output( 'fz[o]bar' );
editor.execute( 'undo' );
output( 'f[o]zbar' );
undoDisabled();
} );
it( 'move content and new parent then undo', () => {
input( 'f[o]zbar' );
doc.enqueueChanges( () => {
doc.batch().move( doc.selection.getFirstRange(), new Position( root, [ 1, 0 ] ) );
} );
output( 'fz[o]bar' );
doc.enqueueChanges( () => {
setSelection( [ 1 ], [ 2 ] );
doc.batch().move( doc.selection.getFirstRange(), new Position( root, [ 0 ] ) );
} );
output( '[obar]fz' );
editor.execute( 'undo' );
output( 'fz[obar]' );
editor.execute( 'undo' );
output( 'f[o]zbar' );
undoDisabled();
} );
} );
describe( 'attributes with other', () => {
it( 'attributes then insert inside then undo', () => {
input( 'fo[ob]ar' );
doc.enqueueChanges( () => {
doc.batch().setAttribute( doc.selection.getFirstRange(), 'bold', true );
} );
output( 'fo[<$text bold="true">ob$text>]ar' );
doc.enqueueChanges( () => {
setSelection( [ 0, 3 ], [ 0, 3 ] );
doc.batch().insert( doc.selection.getFirstPosition(), 'zzz' );
} );
output( 'fo<$text bold="true">o$text>zzz<$text bold="true">[]b$text>ar' );
expect( doc.selection.getAttribute( 'bold' ) ).to.true;
editor.execute( 'undo' );
output( 'fo<$text bold="true">o[]b$text>ar' );
expect( doc.selection.getAttribute( 'bold' ) ).to.true;
editor.execute( 'undo' );
output( 'fo[ob]ar' );
undoDisabled();
} );
} );
describe( 'wrapping, unwrapping, merging, splitting', () => {
it( 'wrap and undo', () => {
doc.schema.allow( { name: '$text', inside: '$root' } );
input( 'fo[zb]ar' );
doc.enqueueChanges( () => {
doc.batch().wrap( doc.selection.getFirstRange(), 'paragraph' );
} );
output( 'fo[zb]ar' );
editor.execute( 'undo' );
output( 'fo[zb]ar' );
undoDisabled();
} );
it( 'wrap, move and undo', () => {
doc.schema.allow( { name: '$text', inside: '$root' } );
input( 'fo[zb]ar' );
doc.enqueueChanges( () => {
doc.batch().wrap( doc.selection.getFirstRange(), 'paragraph' );
} );
// Would be better if selection was inside P.
output( 'fo[zb]ar' );
doc.enqueueChanges( () => {
setSelection( [ 2, 0 ], [ 2, 1 ] );
doc.batch().move( doc.selection.getFirstRange(), new Position( root, [ 0 ] ) );
} );
output( '[z]fobar' );
editor.execute( 'undo' );
output( 'fo[z]bar' );
editor.execute( 'undo' );
output( 'fo[zb]ar' );
undoDisabled();
} );
it( 'unwrap and undo', () => {
input( 'foo[]bar' );
doc.enqueueChanges( () => {
doc.batch().unwrap( doc.selection.getFirstPosition().parent );
} );
output( 'foo[]bar' );
editor.execute( 'undo' );
output( 'foo[]bar' );
undoDisabled();
} );
it( 'merge and undo', () => {
input( 'foo[]bar' );
doc.enqueueChanges( () => {
doc.batch().merge( new Position( root, [ 1 ] ) );
// Because selection is stuck with it ends up in graveyard. We have to manually move it to correct node.
setSelection( [ 0, 3 ], [ 0, 3 ] );
} );
output( 'foo[]bar' );
editor.execute( 'undo' );
output( 'foobar[]' );
undoDisabled();
} );
it( 'split and undo', () => {
input( 'foo[]bar' );
doc.enqueueChanges( () => {
doc.batch().split( doc.selection.getFirstPosition() );
// Because selection is stuck with it ends up in wrong node. We have to manually move it to correct node.
setSelection( [ 1, 0 ], [ 1, 0 ] );
} );
output( 'foo[]bar' );
editor.execute( 'undo' );
output( 'foobar[]' );
undoDisabled();
} );
} );
// Restoring selection in those examples may be completely off.
describe( 'multiple enters, deletes and typing', () => {
function split( path ) {
setSelection( path.slice(), path.slice() );
editor.execute( 'enter' );
}
function merge( path ) {
const selPath = path.slice();
selPath.push( 0 );
setSelection( selPath, selPath.slice() );
editor.execute( 'delete' );
}
function type( path, text ) {
setSelection( path.slice(), path.slice() );
editor.execute( 'input', { text } );
}
function remove( path ) {
setSelection( path.slice(), path.slice() );
editor.execute( 'delete' );
}
it( 'split, split, split', () => {
input( '12345678' );
split( [ 0, 3 ] );
output( '123[]45678' );
split( [ 1, 4 ] );
output( '1234567[]8' );
split( [ 1, 2 ] );
output( '12345[]678' );
editor.execute( 'undo' );
output( '1234567[]8' );
editor.execute( 'undo' );
output( '12345678[]' );
editor.execute( 'undo' );
output( '12345678[]' );
undoDisabled();
editor.execute( 'redo' );
output( '123[]45678' );
editor.execute( 'redo' );
output( '1234567[]8' );
editor.execute( 'redo' );
output( '12345[]678' );
redoDisabled();
} );
it( 'merge, merge, merge', () => {
input( '12345678' );
merge( [ 1 ] );
output( '123[]45678' );
merge( [ 2 ] );
output( '1234567[]8' );
merge( [ 1 ] );
output( '12345[]678' );
editor.execute( 'undo' );
output( '12345678[]' );
editor.execute( 'undo' );
output( '12345678[]' );
editor.execute( 'undo' );
output( '12345[]678' );
undoDisabled();
editor.execute( 'redo' );
output( '12345[]678' );
editor.execute( 'redo' );
output( '12345678[]' );
editor.execute( 'redo' );
output( '12345678[]' );
redoDisabled();
} );
it( 'split, merge, split, merge (same position)', () => {
input( '12345678' );
split( [ 0, 3 ] );
output( '123[]45678' );
merge( [ 1 ] );
output( '123[]45678' );
split( [ 0, 3 ] );
output( '123[]45678' );
merge( [ 1 ] );
output( '123[]45678' );
editor.execute( 'undo' );
output( '12345678[]' );
editor.execute( 'undo' );
output( '12345678[]' );
editor.execute( 'undo' );
output( '12345678[]' );
editor.execute( 'undo' );
output( '12345678[]' );
undoDisabled();
editor.execute( 'redo' );
output( '123[]45678' );
editor.execute( 'redo' );
output( '12345678[]' );
editor.execute( 'redo' );
output( '123[]45678' );
editor.execute( 'redo' );
output( '12345678[]' );
redoDisabled();
} );
it( 'split, split, split, merge, merge, merge', () => {
input( '12345678' );
split( [ 0, 3 ] );
output( '123[]45678' );
split( [ 1, 4 ] );
output( '1234567[]8' );
split( [ 1, 2 ] );
output( '12345[]678' );
merge( [ 1 ] );
output( '123[]45678' );
merge( [ 2 ] );
output( '1234567[]8' );
merge( [ 1 ] );
output( '12345[]678' );
editor.execute( 'undo' );
output( '12345678[]' );
editor.execute( 'undo' );
output( '12345678[]' );
editor.execute( 'undo' );
output( '12345[]678' );
editor.execute( 'undo' );
output( '1234567[]8' );
editor.execute( 'undo' );
output( '12345678[]' );
editor.execute( 'undo' );
output( '12345678[]' );
undoDisabled();
editor.execute( 'redo' );
output( '123[]45678' );
editor.execute( 'redo' );
output( '1234567[]8' );
editor.execute( 'redo' );
output( '12345[]678' );
editor.execute( 'redo' );
output( '12345[]678' );
editor.execute( 'redo' );
output( '12345678[]' );
editor.execute( 'redo' );
output( '12345678[]' );
redoDisabled();
} );
it( 'split, split, merge, split, merge (different order)', () => {
input( '12345678' );
split( [ 0, 3 ] );
output( '123[]45678' );
split( [ 1, 2 ] );
output( '12345[]678' );
merge( [ 1 ] );
output( '123[]45678' );
split( [ 1, 1 ] );
output( '123456[]78' );
merge( [ 1 ] );
output( '12345[]678' );
editor.execute( 'undo' );
output( '123456[]78' );
editor.execute( 'undo' );
output( '12345678[]' );
editor.execute( 'undo' );
output( '12345[]678' );
editor.execute( 'undo' );
output( '12345678[]' );
editor.execute( 'undo' );
output( '12345678[]' );
undoDisabled();
editor.execute( 'redo' );
output( '123[]45678' );
editor.execute( 'redo' );
output( '12345[]678' );
editor.execute( 'redo' );
output( '12345[]678' );
editor.execute( 'redo' );
output( '123456[]78' );
editor.execute( 'redo' );
output( '123456[]78' );
redoDisabled();
} );
it( 'split, remove, split, merge, merge', () => {
input( '12345678' );
split( [ 0, 3 ] );
output( '123[]45678' );
remove( [ 1, 4 ] );
remove( [ 1, 3 ] );
output( '12345[]8' );
split( [ 1, 1 ] );
output( '1234[]58' );
merge( [ 1 ] );
output( '123[]458' );
merge( [ 1 ] );
output( '1234[]58' );
editor.execute( 'undo' );
output( '123458[]' );
editor.execute( 'undo' );
output( '1234[]58' );
editor.execute( 'undo' );
output( '123458[]' );
editor.execute( 'undo' );
output( '1234567[]8' );
editor.execute( 'undo' );
output( '12345678[]' );
undoDisabled();
editor.execute( 'redo' );
output( '123[]45678' );
editor.execute( 'redo' );
output( '123458[]' );
editor.execute( 'redo' );
output( '1234[]58' );
editor.execute( 'redo' );
output( '1234[]58' );
editor.execute( 'redo' );
output( '123458[]' );
redoDisabled();
} );
it( 'split, typing, split, merge, merge', () => {
input( '12345678' );
split( [ 0, 3 ] );
output( '123[]45678' );
type( [ 1, 4 ], 'x' );
type( [ 1, 5 ], 'y' );
output( '1234567xy[]8' );
split( [ 1, 2 ] );
output( '12345[]67xy8' );
merge( [ 1 ] );
output( '123[]4567xy8' );
merge( [ 1 ] );
output( '12345[]67xy8' );
editor.execute( 'undo' );
output( '1234567xy8[]' );
editor.execute( 'undo' );
output( '12345[]67xy8' );
editor.execute( 'undo' );
output( '1234567xy8[]' );
editor.execute( 'undo' );
output( '1234567[]8' );
editor.execute( 'undo' );
output( '12345678[]' );
undoDisabled();
editor.execute( 'redo' );
output( '123[]45678' );
editor.execute( 'redo' );
output( '1234567xy8[]' );
editor.execute( 'redo' );
output( '12345[]67xy8' );
editor.execute( 'redo' );
output( '12345[]67xy8' );
editor.execute( 'redo' );
output( '1234567xy8[]' );
redoDisabled();
} );
} );
describe( 'other reported cases', () => {
// ckeditor5-engine#t/1051
it( 'rename leaks to other elements on undo #1', () => {
input( '[]FooBar' );
doc.batch().rename( root.getChild( 0 ), 'paragraph' );
output( '[]FooBar' );
doc.batch().split( Position.createAt( root.getChild( 0 ), 1 ) );
output( '[]FooBar' );
doc.batch().merge( Position.createAt( root, 2 ) );
output( '[]FooBar' );
editor.execute( 'undo' );
output( '[]FooBar' );
editor.execute( 'undo' );
output( '[]FooBar' );
editor.execute( 'undo' );
output( '[]FooBar' );
} );
// Similar issue that bases on the same error as above, however here we first merge (above we first split).
it( 'rename leaks to other elements on undo #2', () => {
input( '[]FooBar' );
doc.batch().rename( root.getChild( 0 ), 'heading2' );
output( '[]FooBar' );
doc.batch().merge( Position.createAt( root, 1 ) );
output( '[]FooBar' );
editor.execute( 'undo' );
output( '[]FooBar' );
editor.execute( 'undo' );
output( '[]FooBar' );
} );
// Reverse issue, this time first operation is merge and then rename.
it( 'merge, rename, undo, undo is correct', () => {
input( '[]FooBar' );
doc.batch().merge( Position.createAt( root, 1 ) );
output( '[]FooBar' );
doc.batch().rename( root.getChild( 0 ), 'heading2' );
output( '[]FooBar' );
editor.execute( 'undo' );
output( '[]FooBar' );
editor.execute( 'undo' );
output( '[]FooBar' );
} );
// ckeditor5-engine#t/1053
it( 'wrap, split, undo, undo is correct', () => {
input( '[]FooBar' );
doc.batch().wrap( Range.createIn( root ), 'div' );
output( '' );
doc.batch().split( new Position( root, [ 0, 0, 1 ] ) );
output( '' );
editor.execute( 'undo' );
output( '' );
editor.execute( 'undo' );
output( '[]FooBar' );
} );
// ckeditor5-engine#t/1055
it( 'selection attribute setting: split, bold, merge, undo, undo, undo', () => {
input( 'Foo[]Bar' );
editor.execute( 'enter' );
output( 'Foo[]Bar' );
editor.execute( 'bold' );
output(
'Foo' +
'<$text bold="true">[]$text>' +
'Bar'
);
editor.execute( 'forwardDelete' );
output( 'Foo[]Bar' );
editor.execute( 'undo' );
output(
'Foo' +
'<$text bold="true">[]$text>' +
'Bar'
);
editor.execute( 'undo' );
output( 'Foo[]Bar' );
editor.execute( 'undo' );
output( 'Foo[]Bar' );
} );
} );
describe( 'pasting', () => {
function pasteHtml( editor, html ) {
editor.editing.view.fire( 'paste', {
dataTransfer: createDataTransfer( { 'text/html': html } ),
preventDefault() {}
} );
}
function createDataTransfer( data ) {
return {
getData( type ) {
return data[ type ];
}
};
}
// ckeditor5-engine#t/1065
it( 'undo paste into non empty element should not throw and be correct', () => {
doc.enqueueChanges( () => {
input( 'Foo[]' );
} );
doc.enqueueChanges( () => {
pasteHtml( editor, 'a
b
' );
} );
output( 'Fooab[]' );
doc.enqueueChanges( () => {
pasteHtml( editor, 'c
d
' );
} );
output( 'Fooabcd[]' );
editor.execute( 'undo' );
output( 'Fooab[]' );
editor.execute( 'undo' );
output( 'Foo[]' );
} );
} );
describe( 'other edge cases', () => {
it( 'deleteContent between two nodes', () => {
input( 'fo[ob]ar' );
doc.enqueueChanges( () => {
editor.data.deleteContent( doc.selection, doc.batch() );
} );
output( 'fo[]ar' );
editor.execute( 'undo' );
output( 'fo[ob]ar' );
} );
// Related to ckeditor5-engine#891 and ckeditor5-list#51.
it( 'change attribute of removed node then undo and redo', () => {
input( '' );
const gy = doc.graveyard;
const p = doc.getRoot().getChild( 0 );
doc.enqueueChanges( () => {
doc.batch().remove( p );
doc.batch().setAttribute( p, 'bold', true );
} );
editor.execute( 'undo' );
editor.execute( 'redo' );
expect( p.root ).to.equal( gy );
expect( p.getAttribute( 'bold' ) ).to.be.true;
} );
} );
} );