/** * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.md. */ import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor'; 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; beforeEach( () => { return VirtualTestEditor.create( { 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.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.batch() .insert( doc.selection.getFirstPosition(), 'zzz' ) .insert( new Position( root, [ 1, 0 ] ), 'xxx' ); output( 'fozzz[]oxxxbar' ); 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.batch().insert( doc.selection.getFirstPosition(), 'zzz' ); output( 'fozzz[]obar' ); setSelection( [ 1, 0 ], [ 1, 0 ] ); doc.batch().insert( doc.selection.getFirstPosition(), 'yyy' ); output( 'fozzzoyyy[]bar' ); editor.execute( 'undo' ); output( 'fozzzo[]bar' ); 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.batch().remove( Range.createFromPositionAndShift( doc.selection.getFirstPosition(), 2 ) ); output( '[]obar' ); 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.batch().insert( doc.selection.getFirstPosition(), 'zzz' ); output( 'fozzz[]obar' ); 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.batch().insert( doc.selection.getFirstPosition(), 'zzz' ); output( 'fozzz[]obar' ); 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(); } ); } ); describe( 'moving', () => { it( 'move same content twice then undo', () => { input( 'f[o]zbar' ); doc.batch().move( doc.selection.getFirstRange(), new Position( root, [ 1, 0 ] ) ); output( 'fz[o]bar' ); 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.batch().move( doc.selection.getFirstRange(), new Position( root, [ 1, 0 ] ) ); output( 'fz[o]bar' ); 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.batch().setAttribute( doc.selection.getFirstRange(), 'bold', true ); output( 'fo[<$text bold="true">ob]ar' ); setSelection( [ 0, 3 ], [ 0, 3 ] ); doc.batch().insert( doc.selection.getFirstPosition(), 'zzz' ); output( 'fo<$text bold="true">ozzz<$text bold="true">[]bar' ); expect( doc.selection.getAttribute( 'bold' ) ).to.true; editor.execute( 'undo' ); output( 'fo<$text bold="true">o[]bar' ); 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.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.batch().wrap( doc.selection.getFirstRange(), 'paragraph' ); // Would be better if selection was inside P. output( 'fo[zb]ar' ); 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.batch().unwrap( doc.selection.getFirstPosition().parent ); output( 'foo[]bar' ); editor.execute( 'undo' ); output( 'foo[]bar' ); undoDisabled(); } ); it( 'merge and undo', () => { input( 'foo[]bar' ); 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.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( '
[]FooBar
' ); doc.batch().split( new Position( root, [ 0, 0, 1 ] ) ); output( '
[]FooBar
' ); editor.execute( 'undo' ); output( '
[]FooBar
' ); 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">[]

Bar

' ); editor.execute( 'forwardDelete' ); output( '

Foo

[]Bar

' ); editor.execute( 'undo' ); output( '

Foo

<$text bold="true">[]

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', () => { input( 'Foo[]' ); pasteHtml( editor, '

a

b

' ); output( 'Fooab[]' ); 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' ); 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; } ); } ); } );