selectionobserver.js 7.5 KB

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