8
0

selectionobserver.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* globals setTimeout, document, console */
  6. import ViewRange from '../../../src/view/range';
  7. import DocumentSelection from '../../../src/view/documentselection';
  8. import ViewSelection from '../../../src/view/selection';
  9. import View from '../../../src/view/view';
  10. import SelectionObserver from '../../../src/view/observer/selectionobserver';
  11. import FocusObserver from '../../../src/view/observer/focusobserver';
  12. import createViewRoot from '../_utils/createroot';
  13. import { parse } from '../../../src/dev-utils/view';
  14. import { StylesProcessor } from '../../../src/view/stylesmap';
  15. describe( 'SelectionObserver', () => {
  16. let view, viewDocument, viewRoot, selectionObserver, domRoot, domMain, domDocument;
  17. let stylesProcessor;
  18. before( () => {
  19. stylesProcessor = new StylesProcessor();
  20. } );
  21. beforeEach( done => {
  22. domDocument = document;
  23. domRoot = domDocument.createElement( 'div' );
  24. domRoot.innerHTML = '<div contenteditable="true"></div><div contenteditable="true" id="additional"></div>';
  25. domMain = domRoot.childNodes[ 0 ];
  26. domDocument.body.appendChild( domRoot );
  27. view = new View( stylesProcessor );
  28. viewDocument = view.document;
  29. createViewRoot( viewDocument );
  30. view.attachDomRoot( domMain );
  31. selectionObserver = view.getObserver( SelectionObserver );
  32. viewRoot = viewDocument.getRoot();
  33. view.change( writer => {
  34. viewRoot._appendChild( parse(
  35. '<container:p>xxx<ui:span></ui:span></container:p>' +
  36. '<container:p>yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy</container:p>' ) );
  37. writer.setSelection( null );
  38. domDocument.getSelection().removeAllRanges();
  39. viewDocument.isFocused = true;
  40. domMain.focus();
  41. } );
  42. selectionObserver.enable();
  43. // Ensure selectionchange will not be fired.
  44. setTimeout( () => done(), 100 );
  45. } );
  46. afterEach( () => {
  47. sinon.restore();
  48. domRoot.parentElement.removeChild( domRoot );
  49. view.destroy();
  50. } );
  51. it( 'should fire selectionChange when it is the only change', done => {
  52. viewDocument.on( 'selectionChange', ( evt, data ) => {
  53. expect( data ).to.have.property( 'domSelection' ).that.equals( domDocument.getSelection() );
  54. expect( data ).to.have.property( 'oldSelection' ).that.is.instanceof( DocumentSelection );
  55. expect( data.oldSelection.rangeCount ).to.equal( 0 );
  56. expect( data ).to.have.property( 'newSelection' ).that.is.instanceof( ViewSelection );
  57. expect( data.newSelection.rangeCount ).to.equal( 1 );
  58. const newViewRange = data.newSelection.getFirstRange();
  59. const viewFoo = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
  60. expect( newViewRange.start.parent ).to.equal( viewFoo );
  61. expect( newViewRange.start.offset ).to.equal( 2 );
  62. expect( newViewRange.end.parent ).to.equal( viewFoo );
  63. expect( newViewRange.end.offset ).to.equal( 2 );
  64. done();
  65. } );
  66. changeDomSelection();
  67. } );
  68. it( 'should add only one listener to one document', done => {
  69. // Add second roots to ensure that listener is added once.
  70. createViewRoot( viewDocument, 'div', 'additional' );
  71. view.attachDomRoot( domDocument.getElementById( 'additional' ), 'additional' );
  72. viewDocument.on( 'selectionChange', () => {
  73. done();
  74. } );
  75. changeDomSelection();
  76. } );
  77. it( 'should not fire selectionChange on render', done => {
  78. viewDocument.on( 'selectionChange', () => {
  79. throw 'selectionChange on render';
  80. } );
  81. setTimeout( done, 70 );
  82. const viewBar = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
  83. view.change( writer => {
  84. writer.setSelection( ViewRange._createFromParentsAndOffsets( viewBar, 1, viewBar, 2 ) );
  85. } );
  86. } );
  87. it( 'should not fire if observer is disabled', done => {
  88. view.getObserver( SelectionObserver ).disable();
  89. viewDocument.on( 'selectionChange', () => {
  90. throw 'selectionChange on render';
  91. } );
  92. setTimeout( done, 70 );
  93. changeDomSelection();
  94. } );
  95. it( 'should not fire if the DOM selection was set outside editable', done => {
  96. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  97. view.change( writer => {
  98. writer.setSelection( viewFoo, 0 );
  99. } );
  100. const spy = sinon.spy();
  101. viewDocument.on( 'selectionChange', spy );
  102. setTimeout( () => {
  103. expect( spy.called ).to.be.false;
  104. done();
  105. }, 70 );
  106. const domSelection = domDocument.getSelection();
  107. const editable = domRoot.childNodes[ 1 ];
  108. editable.focus();
  109. domSelection.collapse( editable, 0 );
  110. } );
  111. it( 'should not enter infinite loop', () => {
  112. let counter = 70;
  113. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  114. view.change( writer => {
  115. writer.setSelection( viewFoo, 0 );
  116. } );
  117. const selectionChangeSpy = sinon.spy();
  118. // Catches the "Selection change observer detected an infinite rendering loop." warning in the CK_DEBUG mode.
  119. sinon.stub( console, 'warn' );
  120. viewDocument.on( 'selectionChange', selectionChangeSpy );
  121. return new Promise( resolve => {
  122. viewDocument.on( 'selectionChangeDone', () => {
  123. expect( selectionChangeSpy.callCount ).to.equal( 60 );
  124. resolve();
  125. } );
  126. while ( counter > 0 ) {
  127. changeDomSelection();
  128. counter--;
  129. }
  130. } );
  131. } );
  132. it( 'should not be treated as an infinite loop if selection is changed only few times', done => {
  133. const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
  134. viewDocument.selection._setTo( ViewRange._createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
  135. const consoleWarnSpy = sinon.spy( console, 'warn' );
  136. viewDocument.on( 'selectionChangeDone', () => {
  137. expect( consoleWarnSpy.called ).to.be.false;
  138. done();
  139. } );
  140. for ( let i = 0; i < 10; i++ ) {
  141. changeDomSelection();
  142. }
  143. } );
  144. it( 'should not be treated as an infinite loop if changes are not often', () => {
  145. const clock = sinon.useFakeTimers( {
  146. toFake: [ 'setInterval', 'clearInterval' ]
  147. } );
  148. const consoleWarnStub = sinon.stub( console, 'warn' );
  149. // We need to recreate SelectionObserver, so it will use mocked setInterval.
  150. selectionObserver.disable();
  151. selectionObserver.destroy();
  152. view._observers.delete( SelectionObserver );
  153. view.addObserver( SelectionObserver );
  154. return doChanges()
  155. .then( doChanges )
  156. .then( () => {
  157. sinon.assert.notCalled( consoleWarnStub );
  158. clock.restore();
  159. } );
  160. function doChanges() {
  161. return new Promise( resolve => {
  162. viewDocument.once( 'selectionChangeDone', () => {
  163. clock.tick( 1100 );
  164. resolve();
  165. } );
  166. for ( let i = 0; i < 50; i++ ) {
  167. changeDomSelection();
  168. }
  169. } );
  170. }
  171. } );
  172. it( 'should fire `selectionChangeDone` event after selection stop changing', done => {
  173. const spy = sinon.spy();
  174. viewDocument.on( 'selectionChangeDone', spy );
  175. // Disable focus observer to not re-render view on each focus.
  176. view.getObserver( FocusObserver ).disable();
  177. // Change selection.
  178. changeDomSelection();
  179. // Wait 100ms.
  180. setTimeout( () => {
  181. // Check if spy was called.
  182. expect( spy.notCalled ).to.true;
  183. // Change selection one more time.
  184. changeDomSelection();
  185. // Wait 210ms (debounced function should be called).
  186. setTimeout( () => {
  187. const data = spy.firstCall.args[ 1 ];
  188. expect( spy.calledOnce ).to.true;
  189. expect( data ).to.have.property( 'domSelection' ).to.equal( domDocument.getSelection() );
  190. expect( data ).to.have.property( 'oldSelection' ).to.instanceof( DocumentSelection );
  191. expect( data.oldSelection.rangeCount ).to.equal( 0 );
  192. expect( data ).to.have.property( 'newSelection' ).to.instanceof( ViewSelection );
  193. expect( data.newSelection.rangeCount ).to.equal( 1 );
  194. const newViewRange = data.newSelection.getFirstRange();
  195. const viewFoo = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
  196. expect( newViewRange.start.parent ).to.equal( viewFoo );
  197. expect( newViewRange.start.offset ).to.equal( 3 );
  198. expect( newViewRange.end.parent ).to.equal( viewFoo );
  199. expect( newViewRange.end.offset ).to.equal( 3 );
  200. done();
  201. }, 210 );
  202. }, 100 );
  203. } );
  204. it( 'should not fire `selectionChangeDone` event when observer will be destroyed', done => {
  205. const spy = sinon.spy();
  206. viewDocument.on( 'selectionChangeDone', spy );
  207. // Change selection.
  208. changeDomSelection();
  209. // Wait 100ms.
  210. setTimeout( () => {
  211. // And destroy observer.
  212. selectionObserver.destroy();
  213. // Wait another 110ms.
  214. setTimeout( () => {
  215. // Check that event won't be called.
  216. expect( spy.notCalled ).to.true;
  217. done();
  218. }, 110 );
  219. }, 100 );
  220. } );
  221. it( 'should re-render view if selections are similar if DOM selection is in incorrect place', done => {
  222. const sel = domDocument.getSelection();
  223. const domParagraph = domMain.childNodes[ 0 ];
  224. const domText = domParagraph.childNodes[ 0 ];
  225. const domUI = domParagraph.childNodes[ 1 ];
  226. const viewRenderSpy = sinon.spy();
  227. // Add rendering on selectionChange event to check this feature.
  228. viewDocument.on( 'selectionChange', () => {
  229. // Manually set selection because no handlers are set for selectionChange event in this test.
  230. // Normally this is handled by view -> model -> view selection converters chain.
  231. const viewAnchor = view.domConverter.domPositionToView( sel.anchorNode, sel.anchorOffset );
  232. const viewFocus = view.domConverter.domPositionToView( sel.focusNode, sel.focusOffset );
  233. view.change( writer => {
  234. writer.setSelection( viewAnchor );
  235. writer.setSelectionFocus( viewFocus );
  236. } );
  237. } );
  238. viewDocument.once( 'selectionChange', () => {
  239. // 2. Selection change has been handled.
  240. selectionObserver.listenTo( domDocument, 'selectionchange', () => {
  241. // 4. Check if view was re-rendered.
  242. sinon.assert.calledOnce( viewRenderSpy );
  243. done();
  244. }, { priority: 'lowest' } );
  245. // 3. Now, collapse selection in similar position, but in UI element.
  246. // Current and new selection position are similar in view (but not equal!).
  247. // Also add a spy to `viewDocument#render` to see if view will be re-rendered.
  248. sel.collapse( domUI, 0 );
  249. view.on( 'render', viewRenderSpy );
  250. // Some browsers like Safari won't allow to put selection inside empty ui element.
  251. // In that situation selection should stay in correct place.
  252. if ( sel.anchorNode !== domUI ) {
  253. expect( sel.anchorNode ).to.equal( domText );
  254. expect( sel.anchorOffset ).to.equal( 3 );
  255. expect( sel.isCollapsed ).to.be.true;
  256. done();
  257. }
  258. }, { priority: 'lowest' } );
  259. // 1. Collapse in a text node, before ui element, and wait for async selectionchange to fire selection change handling.
  260. sel.collapse( domText, 3 );
  261. } );
  262. function changeDomSelection() {
  263. const domSelection = domDocument.getSelection();
  264. const domFoo = domMain.childNodes[ 1 ].childNodes[ 0 ];
  265. const offset = domSelection.anchorOffset;
  266. domSelection.collapse( domFoo, offset == 2 ? 3 : 2 );
  267. }
  268. } );