|
@@ -3,7 +3,7 @@
|
|
|
* For licensing, see LICENSE.md.
|
|
* For licensing, see LICENSE.md.
|
|
|
*/
|
|
*/
|
|
|
|
|
|
|
|
-/* globals setTimeout, Range, document */
|
|
|
|
|
|
|
+/* globals setTimeout, document */
|
|
|
/* bender-tags: view, browser-only */
|
|
/* bender-tags: view, browser-only */
|
|
|
|
|
|
|
|
import ViewRange from 'ckeditor5/engine/view/range.js';
|
|
import ViewRange from 'ckeditor5/engine/view/range.js';
|
|
@@ -13,7 +13,6 @@ import ViewDocument from 'ckeditor5/engine/view/document.js';
|
|
|
import SelectionObserver from 'ckeditor5/engine/view/observer/selectionobserver.js';
|
|
import SelectionObserver from 'ckeditor5/engine/view/observer/selectionobserver.js';
|
|
|
import MutationObserver from 'ckeditor5/engine/view/observer/mutationobserver.js';
|
|
import MutationObserver from 'ckeditor5/engine/view/observer/mutationobserver.js';
|
|
|
|
|
|
|
|
-import EmitterMixin from 'ckeditor5/utils/emittermixin.js';
|
|
|
|
|
import log from 'ckeditor5/utils/log.js';
|
|
import log from 'ckeditor5/utils/log.js';
|
|
|
|
|
|
|
|
import { parse } from 'ckeditor5/engine/dev-utils/view.js';
|
|
import { parse } from 'ckeditor5/engine/dev-utils/view.js';
|
|
@@ -21,15 +20,13 @@ import { parse } from 'ckeditor5/engine/dev-utils/view.js';
|
|
|
testUtils.createSinonSandbox();
|
|
testUtils.createSinonSandbox();
|
|
|
|
|
|
|
|
describe( 'SelectionObserver', () => {
|
|
describe( 'SelectionObserver', () => {
|
|
|
- let viewDocument, viewRoot, mutationObserver, selectionObserver, listenter, domRoot;
|
|
|
|
|
|
|
+ let viewDocument, viewRoot, mutationObserver, selectionObserver, domRoot;
|
|
|
|
|
|
|
|
- before( () => {
|
|
|
|
|
|
|
+ beforeEach( ( done ) => {
|
|
|
domRoot = document.createElement( 'div' );
|
|
domRoot = document.createElement( 'div' );
|
|
|
domRoot.innerHTML = `<div contenteditable="true" id="main"></div><div contenteditable="true" id="additional"></div>`;
|
|
domRoot.innerHTML = `<div contenteditable="true" id="main"></div><div contenteditable="true" id="additional"></div>`;
|
|
|
document.body.appendChild( domRoot );
|
|
document.body.appendChild( domRoot );
|
|
|
|
|
|
|
|
- listenter = Object.create( EmitterMixin );
|
|
|
|
|
-
|
|
|
|
|
viewDocument = new ViewDocument();
|
|
viewDocument = new ViewDocument();
|
|
|
viewDocument.createRoot( document.getElementById( 'main' ) );
|
|
viewDocument.createRoot( document.getElementById( 'main' ) );
|
|
|
|
|
|
|
@@ -43,30 +40,26 @@ describe( 'SelectionObserver', () => {
|
|
|
'<container:p>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</container:p>' ) );
|
|
'<container:p>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</container:p>' ) );
|
|
|
|
|
|
|
|
viewDocument.render();
|
|
viewDocument.render();
|
|
|
- } );
|
|
|
|
|
-
|
|
|
|
|
- after( () => {
|
|
|
|
|
- domRoot.parentElement.removeChild( domRoot );
|
|
|
|
|
- } );
|
|
|
|
|
|
|
|
|
|
- beforeEach( ( done ) => {
|
|
|
|
|
viewDocument.selection.removeAllRanges();
|
|
viewDocument.selection.removeAllRanges();
|
|
|
document.getSelection().removeAllRanges();
|
|
document.getSelection().removeAllRanges();
|
|
|
|
|
|
|
|
viewDocument.isFocused = true;
|
|
viewDocument.isFocused = true;
|
|
|
|
|
|
|
|
- viewDocument.getObserver( SelectionObserver ).enable();
|
|
|
|
|
|
|
+ selectionObserver.enable();
|
|
|
|
|
|
|
|
// Ensure selectionchange will not be fired.
|
|
// Ensure selectionchange will not be fired.
|
|
|
setTimeout( () => done(), 100 );
|
|
setTimeout( () => done(), 100 );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
afterEach( () => {
|
|
afterEach( () => {
|
|
|
- listenter.stopListening();
|
|
|
|
|
|
|
+ domRoot.parentElement.removeChild( domRoot );
|
|
|
|
|
+
|
|
|
|
|
+ viewDocument.destroy();
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should fire selectionChange when it is the only change', ( done ) => {
|
|
it( 'should fire selectionChange when it is the only change', ( done ) => {
|
|
|
- listenter.listenTo( viewDocument, 'selectionChange', ( evt, data ) => {
|
|
|
|
|
|
|
+ viewDocument.on( 'selectionChange', ( evt, data ) => {
|
|
|
expect( data ).to.have.property( 'domSelection' ).that.equals( document.getSelection() );
|
|
expect( data ).to.have.property( 'domSelection' ).that.equals( document.getSelection() );
|
|
|
|
|
|
|
|
expect( data ).to.have.property( 'oldSelection' ).that.is.instanceof( ViewSelection );
|
|
expect( data ).to.have.property( 'oldSelection' ).that.is.instanceof( ViewSelection );
|
|
@@ -79,7 +72,7 @@ describe( 'SelectionObserver', () => {
|
|
|
const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
|
|
const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
|
|
|
|
|
|
|
|
expect( newViewRange.start.parent ).to.equal( viewFoo );
|
|
expect( newViewRange.start.parent ).to.equal( viewFoo );
|
|
|
- expect( newViewRange.start.offset ).to.equal( 1 );
|
|
|
|
|
|
|
+ expect( newViewRange.start.offset ).to.equal( 2 );
|
|
|
expect( newViewRange.end.parent ).to.equal( viewFoo );
|
|
expect( newViewRange.end.parent ).to.equal( viewFoo );
|
|
|
expect( newViewRange.end.offset ).to.equal( 2 );
|
|
expect( newViewRange.end.offset ).to.equal( 2 );
|
|
|
|
|
|
|
@@ -93,7 +86,7 @@ describe( 'SelectionObserver', () => {
|
|
|
// Add second roots to ensure that listener is added once.
|
|
// Add second roots to ensure that listener is added once.
|
|
|
viewDocument.createRoot( document.getElementById( 'additional' ), 'additional' );
|
|
viewDocument.createRoot( document.getElementById( 'additional' ), 'additional' );
|
|
|
|
|
|
|
|
- listenter.listenTo( viewDocument, 'selectionChange', () => {
|
|
|
|
|
|
|
+ viewDocument.on( 'selectionChange', () => {
|
|
|
done();
|
|
done();
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
@@ -101,11 +94,11 @@ describe( 'SelectionObserver', () => {
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should not fire selectionChange on render', ( done ) => {
|
|
it( 'should not fire selectionChange on render', ( done ) => {
|
|
|
- listenter.listenTo( viewDocument, 'selectionChange', () => {
|
|
|
|
|
|
|
+ viewDocument.on( 'selectionChange', () => {
|
|
|
throw 'selectionChange on render';
|
|
throw 'selectionChange on render';
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- setTimeout( () => done(), 70 );
|
|
|
|
|
|
|
+ setTimeout( done, 70 );
|
|
|
|
|
|
|
|
const viewBar = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
|
|
const viewBar = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
|
|
|
viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewBar, 1, viewBar, 2 ) );
|
|
viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewBar, 1, viewBar, 2 ) );
|
|
@@ -115,11 +108,11 @@ describe( 'SelectionObserver', () => {
|
|
|
it( 'should not fired if observer is disabled', ( done ) => {
|
|
it( 'should not fired if observer is disabled', ( done ) => {
|
|
|
viewDocument.getObserver( SelectionObserver ).disable();
|
|
viewDocument.getObserver( SelectionObserver ).disable();
|
|
|
|
|
|
|
|
- listenter.listenTo( viewDocument, 'selectionChange', () => {
|
|
|
|
|
|
|
+ viewDocument.on( 'selectionChange', () => {
|
|
|
throw 'selectionChange on render';
|
|
throw 'selectionChange on render';
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- setTimeout( () => done(), 70 );
|
|
|
|
|
|
|
+ setTimeout( done, 70 );
|
|
|
|
|
|
|
|
changeDomSelection();
|
|
changeDomSelection();
|
|
|
} );
|
|
} );
|
|
@@ -127,28 +120,38 @@ describe( 'SelectionObserver', () => {
|
|
|
it( 'should not fired if there is no focus', ( done ) => {
|
|
it( 'should not fired if there is no focus', ( done ) => {
|
|
|
viewDocument.isFocused = false;
|
|
viewDocument.isFocused = false;
|
|
|
|
|
|
|
|
- listenter.listenTo( viewDocument, 'selectionChange', () => {
|
|
|
|
|
|
|
+ // changeDomSelection() may focus the editable element (happens on Chrome)
|
|
|
|
|
+ // so cancel this because it sets the isFocused flag.
|
|
|
|
|
+ viewDocument.on( 'focus', ( evt ) => evt.stop(), { priority: 'highest' } );
|
|
|
|
|
+
|
|
|
|
|
+ viewDocument.on( 'selectionChange', () => {
|
|
|
|
|
+ // Validate the correctness of the test. May help tracking issue with this test.
|
|
|
|
|
+ expect( viewDocument.isFocused ).to.be.false;
|
|
|
|
|
+
|
|
|
throw 'selectionChange on render';
|
|
throw 'selectionChange on render';
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- setTimeout( () => done(), 70 );
|
|
|
|
|
|
|
+ setTimeout( done, 70 );
|
|
|
|
|
|
|
|
changeDomSelection();
|
|
changeDomSelection();
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
it( 'should warn and not enter infinite loop', ( done ) => {
|
|
it( 'should warn and not enter infinite loop', ( done ) => {
|
|
|
- let counter = 30;
|
|
|
|
|
|
|
+ // Reset infinite loop counters so other tests won't mess up with this test.
|
|
|
|
|
+ selectionObserver._clearInfiniteLoop();
|
|
|
|
|
+
|
|
|
|
|
+ let counter = 100;
|
|
|
|
|
|
|
|
const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
|
|
const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
|
|
|
viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
|
|
viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
|
|
|
|
|
|
|
|
- listenter.listenTo( viewDocument, 'selectionChange', () => {
|
|
|
|
|
|
|
+ viewDocument.on( 'selectionChange', () => {
|
|
|
counter--;
|
|
counter--;
|
|
|
|
|
|
|
|
if ( counter > 0 ) {
|
|
if ( counter > 0 ) {
|
|
|
setTimeout( changeDomSelection );
|
|
setTimeout( changeDomSelection );
|
|
|
} else {
|
|
} else {
|
|
|
- throw( 'Infinite loop!' );
|
|
|
|
|
|
|
+ throw 'Infinite loop!';
|
|
|
}
|
|
}
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
@@ -168,86 +171,69 @@ describe( 'SelectionObserver', () => {
|
|
|
changeDomSelection();
|
|
changeDomSelection();
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'should not be treated as an infinite loop if the position is different', ( done ) => {
|
|
|
|
|
- let counter = 30;
|
|
|
|
|
-
|
|
|
|
|
|
|
+ it( 'should not be treated as an infinite loop if selection is changed only few times', ( done ) => {
|
|
|
const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
|
|
const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
|
|
|
- viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
|
|
|
|
|
-
|
|
|
|
|
- listenter.listenTo( viewDocument, 'selectionChange', () => {
|
|
|
|
|
- counter--;
|
|
|
|
|
-
|
|
|
|
|
- if ( counter > 0 ) {
|
|
|
|
|
- setTimeout( () => changeCollapsedDomSelection( counter ) );
|
|
|
|
|
- } else {
|
|
|
|
|
- done();
|
|
|
|
|
- }
|
|
|
|
|
- } );
|
|
|
|
|
-
|
|
|
|
|
- changeCollapsedDomSelection( counter );
|
|
|
|
|
- } );
|
|
|
|
|
|
|
|
|
|
- it( 'should not be treated as an infinite loop if it is less then 3 times', ( done ) => {
|
|
|
|
|
- let counter = 3;
|
|
|
|
|
|
|
+ // Reset infinite loop counters so other tests won't mess up with this test.
|
|
|
|
|
+ selectionObserver._clearInfiniteLoop();
|
|
|
|
|
|
|
|
- const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
|
|
|
|
|
viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
|
|
viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
|
|
|
|
|
|
|
|
- listenter.listenTo( viewDocument, 'selectionChange', () => {
|
|
|
|
|
- counter--;
|
|
|
|
|
|
|
+ const spy = testUtils.sinon.spy( log, 'warn' );
|
|
|
|
|
|
|
|
- if ( counter > 0 ) {
|
|
|
|
|
- setTimeout( () => changeDomSelection() );
|
|
|
|
|
- } else {
|
|
|
|
|
- done();
|
|
|
|
|
- }
|
|
|
|
|
- } );
|
|
|
|
|
|
|
+ for ( let i = 0; i < 10; i++ ) {
|
|
|
|
|
+ changeDomSelection();
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- changeDomSelection();
|
|
|
|
|
|
|
+ setTimeout( () => {
|
|
|
|
|
+ expect( spy.called ).to.be.false;
|
|
|
|
|
+ done();
|
|
|
|
|
+ }, 400 );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
- it( 'should call render after selection change which reset selection if it was not changed', ( done ) => {
|
|
|
|
|
- const viewBar = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
|
|
|
|
|
- viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewBar, 0, viewBar, 1 ) );
|
|
|
|
|
|
|
+ it( 'should not be treated as an infinite loop if changes are not often', ( done ) => {
|
|
|
|
|
+ const clock = testUtils.sinon.useFakeTimers( 'setInterval', 'clearInterval' );
|
|
|
|
|
+ const spy = testUtils.sinon.spy( log, 'warn' );
|
|
|
|
|
|
|
|
- listenter.listenTo( viewDocument, 'selectionChange', () => {
|
|
|
|
|
- setTimeout( () => {
|
|
|
|
|
- const domSelection = document.getSelection();
|
|
|
|
|
|
|
+ // We need to recreate SelectionObserver, so it will use mocked setInterval.
|
|
|
|
|
+ selectionObserver.disable();
|
|
|
|
|
+ selectionObserver.destroy();
|
|
|
|
|
+ viewDocument._observers.delete( SelectionObserver );
|
|
|
|
|
+ viewDocument.addObserver( SelectionObserver );
|
|
|
|
|
+
|
|
|
|
|
+ // Inf-loop kicks in after 50th time the selection is changed in 2s.
|
|
|
|
|
+ // We will test 30 times, tick sinon clock to clean counter and then test 30 times again.
|
|
|
|
|
+ // Note that `changeDomSelection` fires two events.
|
|
|
|
|
+ let changeCount = 15;
|
|
|
|
|
|
|
|
- expect( domSelection.rangeCount ).to.equal( 1 );
|
|
|
|
|
|
|
+ for ( let i = 0; i < changeCount; i++ ) {
|
|
|
|
|
+ setTimeout( () => {
|
|
|
|
|
+ changeDomSelection();
|
|
|
|
|
+ }, i * 20 );
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- const domRange = domSelection.getRangeAt( 0 );
|
|
|
|
|
- const domBar = document.getElementById( 'main' ).childNodes[ 1 ].childNodes[ 0 ];
|
|
|
|
|
|
|
+ setTimeout( () => {
|
|
|
|
|
+ // Move the clock by 2100ms which will trigger callback added to `setInterval` and reset the inf-loop counter.
|
|
|
|
|
+ clock.tick( 2100 );
|
|
|
|
|
|
|
|
- expect( domRange.startContainer ).to.equal( domBar );
|
|
|
|
|
- expect( domRange.startOffset ).to.equal( 0 );
|
|
|
|
|
- expect( domRange.endContainer ).to.equal( domBar );
|
|
|
|
|
- expect( domRange.endOffset ).to.equal( 1 );
|
|
|
|
|
|
|
+ for ( let i = 0; i < changeCount; i++ ) {
|
|
|
|
|
+ changeDomSelection();
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
|
|
+ setTimeout( () => {
|
|
|
|
|
+ expect( spy.called ).to.be.false;
|
|
|
|
|
+ clock.restore();
|
|
|
done();
|
|
done();
|
|
|
- } );
|
|
|
|
|
- } );
|
|
|
|
|
-
|
|
|
|
|
- changeDomSelection();
|
|
|
|
|
|
|
+ }, 200 );
|
|
|
|
|
+ }, 400 );
|
|
|
} );
|
|
} );
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
-function changeCollapsedDomSelection( pos = 1 ) {
|
|
|
|
|
|
|
+function changeDomSelection() {
|
|
|
const domSelection = document.getSelection();
|
|
const domSelection = document.getSelection();
|
|
|
- domSelection.removeAllRanges();
|
|
|
|
|
const domFoo = document.getElementById( 'main' ).childNodes[ 0 ].childNodes[ 0 ];
|
|
const domFoo = document.getElementById( 'main' ).childNodes[ 0 ].childNodes[ 0 ];
|
|
|
- const domRange = new Range();
|
|
|
|
|
- domRange.setStart( domFoo, pos );
|
|
|
|
|
- domRange.setEnd( domFoo, pos );
|
|
|
|
|
- domSelection.addRange( domRange );
|
|
|
|
|
-}
|
|
|
|
|
|
|
+ const offset = domSelection.anchorOffset;
|
|
|
|
|
|
|
|
-function changeDomSelection() {
|
|
|
|
|
- const domSelection = document.getSelection();
|
|
|
|
|
domSelection.removeAllRanges();
|
|
domSelection.removeAllRanges();
|
|
|
- const domFoo = document.getElementById( 'main' ).childNodes[ 0 ].childNodes[ 0 ];
|
|
|
|
|
- const domRange = new Range();
|
|
|
|
|
- domRange.setStart( domFoo, 1 );
|
|
|
|
|
- domRange.setEnd( domFoo, 2 );
|
|
|
|
|
- domSelection.addRange( domRange );
|
|
|
|
|
|
|
+ domSelection.collapse( domFoo, offset == 2 ? 3 : 2 );
|
|
|
}
|
|
}
|