selectionobserver.js 7.2 KB

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