selectionobserver.js 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. /**
  2. * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals setTimeout, Range, document, KeyboardEvent, MouseEvent */
  6. /* bender-tags: view, browser-only */
  7. import ViewRange from '/ckeditor5/engine/view/range.js';
  8. import testUtils from '/tests/core/_utils/utils.js';
  9. import ViewSelection from '/ckeditor5/engine/view/selection.js';
  10. import ViewDocument from '/ckeditor5/engine/view/document.js';
  11. import SelectionObserver from '/ckeditor5/engine/view/observer/selectionobserver.js';
  12. import MutationObserver from '/ckeditor5/engine/view/observer/mutationobserver.js';
  13. import EmitterMixin from '/ckeditor5/utils/emittermixin.js';
  14. import log from '/ckeditor5/utils/log.js';
  15. import { parse } from '/ckeditor5/engine/dev-utils/view.js';
  16. testUtils.createSinonSandbox();
  17. describe( 'SelectionObserver', () => {
  18. let viewDocument, viewRoot, mutationObserver, selectionObserver, listenter;
  19. before( () => {
  20. listenter = Object.create( EmitterMixin );
  21. viewDocument = new ViewDocument();
  22. viewDocument.createRoot( document.getElementById( 'main' ) );
  23. mutationObserver = viewDocument.getObserver( MutationObserver );
  24. selectionObserver = viewDocument.getObserver( SelectionObserver );
  25. viewRoot = viewDocument.getRoot();
  26. viewRoot.appendChildren( parse(
  27. '<container:p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</container:p>' +
  28. '<container:p>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</container:p>' ) );
  29. viewDocument.render();
  30. } );
  31. beforeEach( ( done ) => {
  32. viewDocument.selection.removeAllRanges();
  33. document.getSelection().removeAllRanges();
  34. viewDocument.isFocused = true;
  35. viewDocument.getObserver( SelectionObserver ).enable();
  36. // Ensure selectionchange will not be fired.
  37. setTimeout( () => done(), 100 );
  38. } );
  39. afterEach( () => {
  40. listenter.stopListening();
  41. } );
  42. it( 'should fire selectionChange when it is the only change', ( done ) => {
  43. listenter.listenTo( viewDocument, 'selectionChange', ( evt, data ) => {
  44. expect( data ).to.have.property( 'domSelection' ).that.equals( document.getSelection() );
  45. expect( data ).to.have.property( 'oldSelection' ).that.is.instanceof( ViewSelection );
  46. expect( data.oldSelection.rangeCount ).to.equal( 0 );
  47. expect( data ).to.have.property( 'newSelection' ).that.is.instanceof( ViewSelection );
  48. expect( data.newSelection.rangeCount ).to.equal( 1 );
  49. const newViewRange = data.newSelection.getFirstRange();
  50. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  51. expect( newViewRange.start.parent ).to.equal( viewFoo );
  52. expect( newViewRange.start.offset ).to.equal( 1 );
  53. expect( newViewRange.end.parent ).to.equal( viewFoo );
  54. expect( newViewRange.end.offset ).to.equal( 2 );
  55. done();
  56. } );
  57. changeDomSelection();
  58. } );
  59. it( 'should add only one listener to one document', ( done ) => {
  60. // Add second roots to ensure that listener is added once.
  61. viewDocument.createRoot( document.getElementById( 'additional' ), 'additional' );
  62. listenter.listenTo( viewDocument, 'selectionChange', () => {
  63. done();
  64. } );
  65. changeDomSelection();
  66. } );
  67. it( 'should not fire selectionChange on render', ( done ) => {
  68. listenter.listenTo( viewDocument, 'selectionChange', () => {
  69. throw 'selectionChange on render';
  70. } );
  71. setTimeout( () => done(), 70 );
  72. const viewBar = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
  73. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewBar, 1, viewBar, 2 ) );
  74. viewDocument.render();
  75. } );
  76. it( 'should not fired if observer is disabled', ( done ) => {
  77. viewDocument.getObserver( SelectionObserver ).disable();
  78. listenter.listenTo( viewDocument, 'selectionChange', () => {
  79. throw 'selectionChange on render';
  80. } );
  81. setTimeout( () => done(), 70 );
  82. changeDomSelection();
  83. } );
  84. it( 'should not fired if there is no focus', ( done ) => {
  85. viewDocument.isFocused = false;
  86. listenter.listenTo( viewDocument, 'selectionChange', () => {
  87. throw 'selectionChange on render';
  88. } );
  89. setTimeout( () => done(), 70 );
  90. changeDomSelection();
  91. } );
  92. it( 'should warn and not enter infinite loop', ( done ) => {
  93. let counter = 30;
  94. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  95. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
  96. listenter.listenTo( viewDocument, 'selectionChange', () => {
  97. counter--;
  98. if ( counter > 0 ) {
  99. setTimeout( changeDomSelection );
  100. } else {
  101. throw( 'Infinite loop!' );
  102. }
  103. } );
  104. let warnedOnce = false;
  105. testUtils.sinon.stub( log, 'warn', ( msg ) => {
  106. if ( !warnedOnce ) {
  107. warnedOnce = true;
  108. setTimeout( () => {
  109. expect( msg ).to.match( /^selectionchange-infinite-loop/ );
  110. done();
  111. }, 200 );
  112. }
  113. } );
  114. changeDomSelection();
  115. } );
  116. it( 'should not be treated as an infinite loop if the position is different', ( done ) => {
  117. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  118. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
  119. let counter = 0;
  120. const spy = testUtils.sinon.spy( log, 'warn' );
  121. listenter.listenTo( viewDocument, 'selectionChange', () => {
  122. counter++;
  123. if ( counter < 15 ) {
  124. setTimeout( changeCollapsedDomSelection, 100 );
  125. }
  126. } );
  127. changeCollapsedDomSelection();
  128. setTimeout( () => {
  129. expect( spy.called ).to.be.false;
  130. done();
  131. }, 1500 );
  132. } );
  133. it( 'should not be treated as an infinite loop if selection is changed only few times', ( done ) => {
  134. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  135. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
  136. const spy = testUtils.sinon.spy( log, 'warn' );
  137. for ( let i = 0; i < 4; i++ ) {
  138. changeDomSelection();
  139. }
  140. setTimeout( () => {
  141. expect( spy.called ).to.be.false;
  142. done();
  143. }, 1500 );
  144. } );
  145. const events = {
  146. keydown: KeyboardEvent,
  147. mousedown: MouseEvent,
  148. mousemove: MouseEvent
  149. };
  150. for ( let event in events ) {
  151. it( 'should not be treated as an infinite loop if change is triggered by ' + event + ' event', ( done ) => {
  152. let counter = 0;
  153. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  154. viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
  155. const spy = testUtils.sinon.spy( log, 'warn' );
  156. listenter.listenTo( viewDocument, 'selectionChange', () => {
  157. counter++;
  158. if ( counter < 15 ) {
  159. setTimeout( () => {
  160. document.dispatchEvent( new events[ event ]( event ) );
  161. changeDomSelection();
  162. }, 100 );
  163. }
  164. } );
  165. setTimeout( () => {
  166. expect( spy.called ).to.be.false;
  167. done();
  168. }, 1000 );
  169. document.dispatchEvent( new events[ event ]( event ) );
  170. changeDomSelection();
  171. } );
  172. }
  173. } );
  174. function changeCollapsedDomSelection() {
  175. const domSelection = document.getSelection();
  176. const pos = domSelection.anchorOffset + 1;
  177. if ( pos > 20 ) {
  178. return;
  179. }
  180. domSelection.removeAllRanges();
  181. const domFoo = document.getElementById( 'main' ).childNodes[ 0 ].childNodes[ 0 ];
  182. const domRange = new Range();
  183. domRange.setStart( domFoo, pos );
  184. domRange.setEnd( domFoo, pos );
  185. domSelection.addRange( domRange );
  186. }
  187. function changeDomSelection() {
  188. const domSelection = document.getSelection();
  189. domSelection.removeAllRanges();
  190. const domFoo = document.getElementById( 'main' ).childNodes[ 0 ].childNodes[ 0 ];
  191. const domRange = new Range();
  192. domRange.setStart( domFoo, 1 );
  193. domRange.setEnd( domFoo, 2 );
  194. domSelection.addRange( domRange );
  195. }