8
0

selectionobserver.js 11 KB

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