8
0

mentionui.js 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* global window, document, setTimeout, Event */
  6. import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
  7. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  8. import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  9. import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
  10. import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
  11. import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
  12. import global from '@ckeditor/ckeditor5-utils/src/dom/global';
  13. import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  14. import DomEventData from '@ckeditor/ckeditor5-engine/src/view/observer/domeventdata';
  15. import EventInfo from '@ckeditor/ckeditor5-utils/src/eventinfo';
  16. import MentionUI from '../src/mentionui';
  17. import MentionEditing from '../src/mentionediting';
  18. import MentionsView from '../src/ui/mentionsview';
  19. describe( 'MentionUI', () => {
  20. let editor, model, doc, editingView, mentionUI, editorElement, mentionsView, panelView, listView;
  21. const staticConfig = {
  22. feeds: [
  23. { feed: [ 'Barney', 'Lily', 'Marshall', 'Robin', 'Ted' ] }
  24. ]
  25. };
  26. testUtils.createSinonSandbox();
  27. beforeEach( () => {
  28. editorElement = document.createElement( 'div' );
  29. document.body.appendChild( editorElement );
  30. } );
  31. afterEach( () => {
  32. sinon.restore();
  33. editorElement.remove();
  34. return editor.destroy();
  35. } );
  36. it( 'should create a plugin instance', () => {
  37. return createClassicTestEditor().then( () => {
  38. expect( mentionUI ).to.instanceOf( Plugin );
  39. expect( mentionUI ).to.instanceOf( MentionUI );
  40. } );
  41. } );
  42. describe( 'pluginName', () => {
  43. it( 'should return plugin by its name', () => {
  44. return createClassicTestEditor().then( () => {
  45. expect( editor.plugins.get( 'MentionUI' ) ).to.equal( mentionUI );
  46. } );
  47. } );
  48. } );
  49. describe( 'child views', () => {
  50. beforeEach( () => createClassicTestEditor() );
  51. describe( 'panelView', () => {
  52. it( 'should create a view instance', () => {
  53. expect( panelView ).to.instanceof( BalloonPanelView );
  54. } );
  55. it( 'should be added to the ui.view.body collection', () => {
  56. expect( Array.from( editor.ui.view.body ) ).to.include( panelView );
  57. } );
  58. it( 'should have disabled arrow', () => {
  59. expect( panelView.withArrow ).to.be.false;
  60. } );
  61. it( 'should have added MentionView as a child', () => {
  62. expect( panelView.content.get( 0 ) ).to.be.instanceof( MentionsView );
  63. } );
  64. } );
  65. } );
  66. describe( 'position', () => {
  67. let pinSpy;
  68. const caretRect = {
  69. bottom: 118,
  70. height: 18,
  71. left: 500,
  72. right: 501,
  73. top: 100,
  74. width: 1
  75. };
  76. const balloonRect = {
  77. bottom: 150,
  78. height: 150,
  79. left: 0,
  80. right: 200,
  81. top: 0,
  82. width: 200
  83. };
  84. beforeEach( () => {
  85. return createClassicTestEditor( staticConfig ).then( () => {
  86. pinSpy = sinon.spy( panelView, 'pin' );
  87. } );
  88. } );
  89. it( 'should properly calculate position data', () => {
  90. setData( model, '<paragraph>foo []</paragraph>' );
  91. stubSelectionRects( [ caretRect ] );
  92. model.change( writer => {
  93. writer.insertText( '@', doc.selection.getFirstPosition() );
  94. } );
  95. return waitForDebounce()
  96. .then( () => {
  97. const pinArgument = pinSpy.firstCall.args[ 0 ];
  98. const { target, positions } = pinArgument;
  99. expect( target() ).to.deep.equal( caretRect );
  100. expect( positions ).to.have.length( 4 );
  101. const caretSouthEast = positions[ 0 ];
  102. const caretNorthEast = positions[ 1 ];
  103. const caretSouthWest = positions[ 2 ];
  104. const caretNorthWest = positions[ 3 ];
  105. expect( caretSouthEast( caretRect, balloonRect ) ).to.deep.equal( {
  106. left: 501,
  107. name: 'caret_se',
  108. top: 123
  109. } );
  110. expect( caretNorthEast( caretRect, balloonRect ) ).to.deep.equal( {
  111. left: 501,
  112. name: 'caret_ne',
  113. top: -55
  114. } );
  115. expect( caretSouthWest( caretRect, balloonRect ) ).to.deep.equal( {
  116. left: 301,
  117. name: 'caret_sw',
  118. top: 123
  119. } );
  120. expect( caretNorthWest( caretRect, balloonRect ) ).to.deep.equal( {
  121. left: 301,
  122. name: 'caret_nw',
  123. top: -55
  124. } );
  125. } );
  126. } );
  127. it( 'should re-calculate position on typing', () => {
  128. setData( model, '<paragraph>foo []</paragraph>' );
  129. stubSelectionRects( [ caretRect ] );
  130. model.change( writer => {
  131. writer.insertText( '@', doc.selection.getFirstPosition() );
  132. } );
  133. return waitForDebounce()
  134. .then( () => {
  135. sinon.assert.calledOnce( pinSpy );
  136. model.change( writer => {
  137. writer.insertText( 't', doc.selection.getFirstPosition() );
  138. } );
  139. } )
  140. .then( waitForDebounce )
  141. .then( () => {
  142. sinon.assert.calledTwice( pinSpy );
  143. } );
  144. } );
  145. } );
  146. describe( 'typing integration', () => {
  147. it( 'should show panel for matched marker after typing minimum characters', () => {
  148. return createClassicTestEditor( { feeds: [ Object.assign( { minimumCharacters: 2 }, staticConfig.feeds[ 0 ] ) ] } )
  149. .then( () => {
  150. setData( model, '<paragraph>foo []</paragraph>' );
  151. model.change( writer => {
  152. writer.insertText( '@', doc.selection.getFirstPosition() );
  153. } );
  154. } )
  155. .then( () => {
  156. model.change( writer => {
  157. writer.insertText( 'B', doc.selection.getFirstPosition() );
  158. } );
  159. } )
  160. .then( waitForDebounce )
  161. .then( () => {
  162. expect( panelView.isVisible ).to.be.false;
  163. } )
  164. .then( waitForDebounce )
  165. .then( () => {
  166. model.change( writer => {
  167. writer.insertText( 'a', doc.selection.getFirstPosition() );
  168. } );
  169. } )
  170. .then( waitForDebounce )
  171. .then( () => {
  172. expect( panelView.isVisible ).to.be.true;
  173. expect( listView.items ).to.have.length( 1 );
  174. model.change( writer => {
  175. writer.insertText( 'r', doc.selection.getFirstPosition() );
  176. } );
  177. } )
  178. .then( waitForDebounce )
  179. .then( () => {
  180. expect( panelView.isVisible ).to.be.true;
  181. expect( listView.items ).to.have.length( 1 );
  182. } );
  183. } );
  184. describe( 'static list with large set of results', () => {
  185. const bigList = {
  186. marker: '@',
  187. feed: [
  188. 'a01', 'a02', 'a03', 'a04', 'a05', 'a06', 'a07', 'a08', 'a09', 'a10', 'a11', 'a12'
  189. ]
  190. };
  191. beforeEach( () => {
  192. return createClassicTestEditor( { feeds: [ bigList ] } );
  193. } );
  194. it( 'should show panel with no more then 10 items for default static feed', () => {
  195. setData( model, '<paragraph>foo []</paragraph>' );
  196. model.change( writer => {
  197. writer.insertText( '@', doc.selection.getFirstPosition() );
  198. } );
  199. return waitForDebounce()
  200. .then( () => {
  201. expect( panelView.isVisible ).to.be.true;
  202. expect( listView.items ).to.have.length( 10 );
  203. } );
  204. } );
  205. it( 'should scroll mention panel to the selected item', () => {
  206. setData( model, '<paragraph>foo []</paragraph>' );
  207. model.change( writer => {
  208. writer.insertText( '@', doc.selection.getFirstPosition() );
  209. } );
  210. return waitForDebounce()
  211. .then( () => {
  212. expect( panelView.isVisible ).to.be.true;
  213. expectChildViewsIsOnState( [ true, false, false, false, false, false, false, false, false, false ] );
  214. const arrowDownEvtData = {
  215. keyCode: keyCodes.arrowdown,
  216. preventDefault: sinon.spy(),
  217. stopPropagation: sinon.spy()
  218. };
  219. const arrowUpEvtData = {
  220. keyCode: keyCodes.arrowup,
  221. preventDefault: sinon.spy(),
  222. stopPropagation: sinon.spy()
  223. };
  224. fireKeyDownEvent( arrowDownEvtData );
  225. expect( mentionsView.element.scrollTop ).to.equal( 0 );
  226. expectChildViewsIsOnState( [ false, true, false, false, false, false, false, false, false, false ] );
  227. fireKeyDownEvent( arrowUpEvtData );
  228. fireKeyDownEvent( arrowUpEvtData );
  229. expectChildViewsIsOnState( [ false, false, false, false, false, false, false, false, false, true ] );
  230. expect( mentionsView.element.scrollTop ).to.be.not.equal( 0 );
  231. fireKeyDownEvent( arrowDownEvtData );
  232. expectChildViewsIsOnState( [ true, false, false, false, false, false, false, false, false, false ] );
  233. expect( mentionsView.element.scrollTop ).to.equal( 0 );
  234. } );
  235. } );
  236. } );
  237. describe( 'static list with default trigger', () => {
  238. beforeEach( () => {
  239. return createClassicTestEditor( staticConfig );
  240. } );
  241. it( 'should show panel for matched marker', () => {
  242. setData( model, '<paragraph>foo []</paragraph>' );
  243. model.change( writer => {
  244. writer.insertText( '@', doc.selection.getFirstPosition() );
  245. } );
  246. return waitForDebounce()
  247. .then( () => {
  248. expect( panelView.isVisible ).to.be.true;
  249. expect( listView.items ).to.have.length( 5 );
  250. } );
  251. } );
  252. it( 'should show panel for matched marker at the beginning of paragraph', () => {
  253. setData( model, '<paragraph>[] foo</paragraph>' );
  254. model.change( writer => {
  255. writer.insertText( '@', doc.selection.getFirstPosition() );
  256. } );
  257. return waitForDebounce()
  258. .then( () => {
  259. expect( panelView.isVisible ).to.be.true;
  260. expect( listView.items ).to.have.length( 5 );
  261. } );
  262. } );
  263. it( 'should not show panel for marker in the middle of other word', () => {
  264. setData( model, '<paragraph>foo[]</paragraph>' );
  265. model.change( writer => {
  266. writer.insertText( '@', doc.selection.getFirstPosition() );
  267. } );
  268. return waitForDebounce()
  269. .then( () => {
  270. expect( panelView.isVisible ).to.be.false;
  271. } );
  272. } );
  273. it( 'should not show panel when selection is inside a mention', () => {
  274. setData( model, '<paragraph>foo <$text mention="{\'name\':\'John\'}">@John</$text> bar</paragraph>' );
  275. model.change( writer => {
  276. writer.setSelection( doc.getRoot().getChild( 0 ), 7 );
  277. } );
  278. return waitForDebounce()
  279. .then( () => {
  280. expect( panelView.isVisible ).to.be.false;
  281. } );
  282. } );
  283. it( 'should not show panel when selection is at the end of a mention', () => {
  284. setData( model, '<paragraph>foo <$text mention="{\'name\':\'John\'}">@John</$text> bar</paragraph>' );
  285. model.change( writer => {
  286. writer.setSelection( doc.getRoot().getChild( 0 ), 9 );
  287. } );
  288. return waitForDebounce()
  289. .then( () => {
  290. expect( panelView.isVisible ).to.be.false;
  291. } );
  292. } );
  293. it( 'should not show panel when selection is not collapsed', () => {
  294. setData( model, '<paragraph>foo []</paragraph>' );
  295. model.change( writer => {
  296. writer.insertText( '@', doc.selection.getFirstPosition() );
  297. } );
  298. return waitForDebounce()
  299. .then( () => {
  300. expect( panelView.isVisible ).to.be.true;
  301. model.change( () => {
  302. model.modifySelection( doc.selection, { direction: 'backward', unit: 'character' } );
  303. } );
  304. } )
  305. .then( waitForDebounce )
  306. .then( () => {
  307. expect( panelView.isVisible ).to.be.false;
  308. } );
  309. } );
  310. it( 'should show filtered results for matched text', () => {
  311. setData( model, '<paragraph>foo []</paragraph>' );
  312. model.change( writer => {
  313. writer.insertText( '@', doc.selection.getFirstPosition() );
  314. } );
  315. model.change( writer => {
  316. writer.insertText( 'T', doc.selection.getFirstPosition() );
  317. } );
  318. return waitForDebounce()
  319. .then( () => {
  320. expect( panelView.isVisible ).to.be.true;
  321. expect( listView.items ).to.have.length( 1 );
  322. } );
  323. } );
  324. it( 'should focus the first item in panel', () => {
  325. setData( model, '<paragraph>foo []</paragraph>' );
  326. model.change( writer => {
  327. writer.insertText( '@', doc.selection.getFirstPosition() );
  328. } );
  329. return waitForDebounce()
  330. .then( () => {
  331. const button = listView.items.get( 0 ).children.get( 0 );
  332. expect( button.isOn ).to.be.true;
  333. } );
  334. } );
  335. it( 'should hide panel if no matched items', () => {
  336. setData( model, '<paragraph>foo []</paragraph>' );
  337. model.change( writer => {
  338. writer.insertText( '@', doc.selection.getFirstPosition() );
  339. } );
  340. return waitForDebounce()
  341. .then( () => expect( panelView.isVisible ).to.be.true )
  342. .then( () => {
  343. model.change( writer => {
  344. writer.insertText( 'x', doc.selection.getFirstPosition() );
  345. } );
  346. } )
  347. .then( waitForDebounce )
  348. .then( () => {
  349. expect( panelView.isVisible ).to.be.false;
  350. expect( listView.items ).to.have.length( 0 );
  351. } );
  352. } );
  353. it( 'should hide panel when text was unmatched', () => {
  354. setData( model, '<paragraph>foo []</paragraph>' );
  355. model.change( writer => {
  356. writer.insertText( '@', doc.selection.getFirstPosition() );
  357. } );
  358. return waitForDebounce()
  359. .then( () => expect( panelView.isVisible ).to.be.true )
  360. .then( () => {
  361. model.change( writer => {
  362. const end = doc.selection.getFirstPosition();
  363. const start = end.getShiftedBy( -1 );
  364. writer.remove( writer.createRange( start, end ) );
  365. } );
  366. } )
  367. .then( waitForDebounce )
  368. .then( () => expect( panelView.isVisible ).to.be.false );
  369. } );
  370. } );
  371. describe( 'asynchronous list with custom trigger', () => {
  372. beforeEach( () => {
  373. const issuesNumbers = [ '100', '101', '102', '103' ];
  374. return createClassicTestEditor( {
  375. feeds: [
  376. {
  377. marker: '#',
  378. feed: feedText => {
  379. return new Promise( resolve => {
  380. setTimeout( () => {
  381. resolve( issuesNumbers.filter( number => number.includes( feedText ) ) );
  382. }, 20 );
  383. } );
  384. }
  385. }
  386. ]
  387. } );
  388. } );
  389. it( 'should show panel for matched marker', () => {
  390. setData( model, '<paragraph>foo []</paragraph>' );
  391. model.change( writer => {
  392. writer.insertText( '#', doc.selection.getFirstPosition() );
  393. } );
  394. return waitForDebounce()
  395. .then( () => {
  396. expect( panelView.isVisible ).to.be.true;
  397. expect( listView.items ).to.have.length( 4 );
  398. } );
  399. } );
  400. it( 'should show filtered results for matched text', () => {
  401. setData( model, '<paragraph>foo []</paragraph>' );
  402. model.change( writer => {
  403. writer.insertText( '#', doc.selection.getFirstPosition() );
  404. } );
  405. model.change( writer => {
  406. writer.insertText( '2', doc.selection.getFirstPosition() );
  407. } );
  408. return waitForDebounce()
  409. .then( () => {
  410. expect( panelView.isVisible ).to.be.true;
  411. expect( listView.items ).to.have.length( 1 );
  412. } );
  413. } );
  414. it( 'should hide panel if no matched items', () => {
  415. setData( model, '<paragraph>foo []</paragraph>' );
  416. model.change( writer => {
  417. writer.insertText( '#', doc.selection.getFirstPosition() );
  418. } );
  419. return waitForDebounce()
  420. .then( () => expect( panelView.isVisible ).to.be.true )
  421. .then( () => {
  422. model.change( writer => {
  423. writer.insertText( 'x', doc.selection.getFirstPosition() );
  424. } );
  425. } )
  426. .then( waitForDebounce )
  427. .then( () => {
  428. expect( panelView.isVisible ).to.be.false;
  429. expect( listView.items ).to.have.length( 0 );
  430. } );
  431. } );
  432. it( 'should hide panel when text was unmatched', () => {
  433. setData( model, '<paragraph>foo []</paragraph>' );
  434. model.change( writer => {
  435. writer.insertText( '#', doc.selection.getFirstPosition() );
  436. } );
  437. return waitForDebounce()
  438. .then( () => expect( panelView.isVisible ).to.be.true )
  439. .then( () => {
  440. model.change( writer => {
  441. const end = doc.selection.getFirstPosition();
  442. const start = end.getShiftedBy( -1 );
  443. writer.remove( writer.createRange( start, end ) );
  444. } );
  445. } )
  446. .then( waitForDebounce )
  447. .then( () => expect( panelView.isVisible ).to.be.false );
  448. } );
  449. } );
  450. } );
  451. describe( 'panel behavior', () => {
  452. it( 'should close the opened panel on esc', () => {
  453. return createClassicTestEditor( staticConfig )
  454. .then( () => {
  455. setData( model, '<paragraph>foo []</paragraph>' );
  456. model.change( writer => {
  457. writer.insertText( '@', doc.selection.getFirstPosition() );
  458. } );
  459. } )
  460. .then( waitForDebounce )
  461. .then( () => {
  462. expect( panelView.isVisible ).to.be.true;
  463. fireKeyDownEvent( {
  464. keyCode: keyCodes.esc,
  465. preventDefault: sinon.spy(),
  466. stopPropagation: sinon.spy()
  467. } );
  468. expect( panelView.isVisible ).to.be.false;
  469. } );
  470. } );
  471. it( 'should close the opened panel when click outside the panel', () => {
  472. return createClassicTestEditor( staticConfig )
  473. .then( () => {
  474. setData( model, '<paragraph>foo []</paragraph>' );
  475. model.change( writer => {
  476. writer.insertText( '@', doc.selection.getFirstPosition() );
  477. } );
  478. } )
  479. .then( waitForDebounce )
  480. .then( () => {
  481. expect( panelView.isVisible ).to.be.true;
  482. document.body.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) );
  483. expect( panelView.isVisible ).to.be.false;
  484. } );
  485. } );
  486. it( 'should hide the panel when click outside', () => {
  487. return createClassicTestEditor( staticConfig )
  488. .then( () => {
  489. setData( model, '<paragraph>foo []</paragraph>' );
  490. model.change( writer => {
  491. writer.insertText( '@', doc.selection.getFirstPosition() );
  492. } );
  493. } )
  494. .then( waitForDebounce )
  495. .then( () => {
  496. expect( panelView.isVisible ).to.be.true;
  497. model.change( writer => {
  498. // Place position at the begging of a paragraph.
  499. writer.setSelection( doc.getRoot().getChild( 0 ), 0 );
  500. } );
  501. expect( panelView.isVisible ).to.be.false;
  502. } );
  503. } );
  504. describe( 'default list item', () => {
  505. const feedItems = staticConfig.feeds[ 0 ].feed.map( name => ( { name } ) );
  506. beforeEach( () => {
  507. return createClassicTestEditor( staticConfig );
  508. } );
  509. describe( 'on arrows', () => {
  510. it( 'should cycle down on arrow down', () => {
  511. setData( model, '<paragraph>foo []</paragraph>' );
  512. model.change( writer => {
  513. writer.insertText( '@', doc.selection.getFirstPosition() );
  514. } );
  515. return waitForDebounce()
  516. .then( () => {
  517. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  518. const keyEvtData = {
  519. keyCode: keyCodes.arrowdown,
  520. preventDefault: sinon.spy(),
  521. stopPropagation: sinon.spy()
  522. };
  523. fireKeyDownEvent( keyEvtData );
  524. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  525. fireKeyDownEvent( keyEvtData );
  526. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  527. fireKeyDownEvent( keyEvtData );
  528. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  529. fireKeyDownEvent( keyEvtData );
  530. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  531. fireKeyDownEvent( keyEvtData );
  532. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  533. } );
  534. } );
  535. it( 'should cycle up on arrow up', () => {
  536. setData( model, '<paragraph>foo []</paragraph>' );
  537. model.change( writer => {
  538. writer.insertText( '@', doc.selection.getFirstPosition() );
  539. } );
  540. return waitForDebounce()
  541. .then( () => {
  542. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  543. const keyEvtData = {
  544. keyCode: keyCodes.arrowup,
  545. preventDefault: sinon.spy(),
  546. stopPropagation: sinon.spy()
  547. };
  548. fireKeyDownEvent( keyEvtData );
  549. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  550. fireKeyDownEvent( keyEvtData );
  551. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  552. fireKeyDownEvent( keyEvtData );
  553. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  554. fireKeyDownEvent( keyEvtData );
  555. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  556. fireKeyDownEvent( keyEvtData );
  557. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  558. } );
  559. } );
  560. } );
  561. describe( 'on "execute" keys', () => {
  562. testExecuteKey( 'enter', keyCodes.enter, feedItems );
  563. testExecuteKey( 'tab', keyCodes.tab, feedItems );
  564. testExecuteKey( 'space', keyCodes.space, feedItems );
  565. } );
  566. } );
  567. describe( 'custom list item', () => {
  568. const issues = [
  569. { id: '1002', title: 'Some bug in editor.' },
  570. { id: '1003', title: 'Introduce this feature.' },
  571. { id: '1004', title: 'Missing docs.' },
  572. { id: '1005', title: 'Another bug.' },
  573. { id: '1006', title: 'More bugs' }
  574. ];
  575. beforeEach( () => {
  576. return createClassicTestEditor( {
  577. feeds: [
  578. {
  579. marker: '@',
  580. feed: feedText => {
  581. return Promise.resolve( issues.filter( issue => issue.id.includes( feedText ) ) );
  582. },
  583. itemRenderer: item => {
  584. const span = global.document.createElementNS( 'http://www.w3.org/1999/xhtml', 'span' );
  585. span.innerHTML = `<span id="issue-${ item.id }">@${ item.title }</span>`;
  586. return span;
  587. }
  588. }
  589. ]
  590. } );
  591. } );
  592. it( 'should show panel for matched marker', () => {
  593. setData( model, '<paragraph>foo []</paragraph>' );
  594. model.change( writer => {
  595. writer.insertText( '@', doc.selection.getFirstPosition() );
  596. } );
  597. return waitForDebounce()
  598. .then( () => {
  599. expect( panelView.isVisible ).to.be.true;
  600. expect( listView.items ).to.have.length( 5 );
  601. } );
  602. } );
  603. describe( 'keys', () => {
  604. describe( 'on arrows', () => {
  605. it( 'should cycle down on arrow down', () => {
  606. setData( model, '<paragraph>foo []</paragraph>' );
  607. model.change( writer => {
  608. writer.insertText( '@', doc.selection.getFirstPosition() );
  609. } );
  610. return waitForDebounce()
  611. .then( () => {
  612. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  613. const keyEvtData = {
  614. keyCode: keyCodes.arrowdown,
  615. preventDefault: sinon.spy(),
  616. stopPropagation: sinon.spy()
  617. };
  618. fireKeyDownEvent( keyEvtData );
  619. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  620. fireKeyDownEvent( keyEvtData );
  621. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  622. fireKeyDownEvent( keyEvtData );
  623. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  624. fireKeyDownEvent( keyEvtData );
  625. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  626. fireKeyDownEvent( keyEvtData );
  627. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  628. } );
  629. } );
  630. it( 'should cycle up on arrow up', () => {
  631. setData( model, '<paragraph>foo []</paragraph>' );
  632. model.change( writer => {
  633. writer.insertText( '@', doc.selection.getFirstPosition() );
  634. } );
  635. return waitForDebounce()
  636. .then( () => {
  637. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  638. const keyEvtData = {
  639. keyCode: keyCodes.arrowup,
  640. preventDefault: sinon.spy(),
  641. stopPropagation: sinon.spy()
  642. };
  643. fireKeyDownEvent( keyEvtData );
  644. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  645. fireKeyDownEvent( keyEvtData );
  646. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  647. fireKeyDownEvent( keyEvtData );
  648. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  649. fireKeyDownEvent( keyEvtData );
  650. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  651. fireKeyDownEvent( keyEvtData );
  652. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  653. } );
  654. } );
  655. } );
  656. describe( 'on "execute" keys', () => {
  657. testExecuteKey( 'enter', keyCodes.enter, issues );
  658. testExecuteKey( 'tab', keyCodes.tab, issues );
  659. testExecuteKey( 'space', keyCodes.space, issues );
  660. } );
  661. describe( 'mouse', () => {
  662. it( 'should execute selected button on mouse click', () => {
  663. setData( model, '<paragraph>foo []</paragraph>' );
  664. model.change( writer => {
  665. writer.insertText( '@', doc.selection.getFirstPosition() );
  666. } );
  667. const command = editor.commands.get( 'mention' );
  668. const spy = testUtils.sinon.spy( command, 'execute' );
  669. return waitForDebounce()
  670. .then( () => {
  671. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  672. const element = panelView.element.querySelector( '#issue-1004' );
  673. element.dispatchEvent( new Event( 'click', { bubbles: true } ) );
  674. sinon.assert.calledOnce( spy );
  675. const commandOptions = spy.getCall( 0 ).args[ 0 ];
  676. const item = issues[ 2 ];
  677. expect( commandOptions ).to.have.property( 'mention' ).that.deep.equal( item );
  678. expect( commandOptions ).to.have.property( 'marker', '@' );
  679. expect( commandOptions ).to.have.property( 'range' );
  680. const start = model.createPositionAt( doc.getRoot().getChild( 0 ), 4 );
  681. const expectedRange = model.createRange( start, start.getShiftedBy( 1 ) );
  682. expect( commandOptions.range.isEqual( expectedRange ) ).to.be.true;
  683. } );
  684. } );
  685. } );
  686. } );
  687. } );
  688. function testExecuteKey( name, keyCode, feedItems ) {
  689. it( 'should execute selected button on ' + name, () => {
  690. setData( model, '<paragraph>foo []</paragraph>' );
  691. model.change( writer => {
  692. writer.insertText( '@', doc.selection.getFirstPosition() );
  693. } );
  694. const command = editor.commands.get( 'mention' );
  695. const spy = testUtils.sinon.spy( command, 'execute' );
  696. return waitForDebounce()
  697. .then( () => {
  698. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  699. fireKeyDownEvent( {
  700. keyCode: keyCodes.arrowup,
  701. preventDefault: sinon.spy(),
  702. stopPropagation: sinon.spy()
  703. } );
  704. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  705. fireKeyDownEvent( {
  706. keyCode,
  707. preventDefault: sinon.spy(),
  708. stopPropagation: sinon.spy()
  709. } );
  710. sinon.assert.calledOnce( spy );
  711. assertCommandOptions( spy.getCall( 0 ).args[ 0 ], '@', feedItems[ 4 ] );
  712. const start = model.createPositionAt( doc.getRoot().getChild( 0 ), 4 );
  713. const expectedRange = model.createRange( start, start.getShiftedBy( 1 ) );
  714. expect( spy.getCall( 0 ).args[ 0 ].range.isEqual( expectedRange ) ).to.be.true;
  715. } );
  716. } );
  717. it( 'should do nothing if panel is not visible on ' + name, () => {
  718. setData( model, '<paragraph>foo []</paragraph>' );
  719. model.change( writer => {
  720. writer.insertText( '@', doc.selection.getFirstPosition() );
  721. } );
  722. const command = editor.commands.get( 'mention' );
  723. const spy = testUtils.sinon.spy( command, 'execute' );
  724. return waitForDebounce()
  725. .then( () => {
  726. expect( panelView.isVisible ).to.be.true;
  727. fireKeyDownEvent( {
  728. keyCode: keyCodes.esc,
  729. preventDefault: sinon.spy(),
  730. stopPropagation: sinon.spy()
  731. } );
  732. expect( panelView.isVisible ).to.be.false;
  733. fireKeyDownEvent( {
  734. keyCode,
  735. preventDefault: sinon.spy(),
  736. stopPropagation: sinon.spy()
  737. } );
  738. sinon.assert.notCalled( spy );
  739. expect( panelView.isVisible ).to.be.false;
  740. } );
  741. } );
  742. }
  743. } );
  744. describe( 'execute', () => {
  745. beforeEach( () => createClassicTestEditor( staticConfig ) );
  746. it( 'should call the mention command with proper options', () => {
  747. setData( model, '<paragraph>foo []</paragraph>' );
  748. model.change( writer => {
  749. writer.insertText( '@', doc.selection.getFirstPosition() );
  750. } );
  751. const command = editor.commands.get( 'mention' );
  752. const spy = testUtils.sinon.spy( command, 'execute' );
  753. return waitForDebounce()
  754. .then( () => {
  755. listView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
  756. sinon.assert.calledOnce( spy );
  757. const commandOptions = spy.getCall( 0 ).args[ 0 ];
  758. assertCommandOptions( commandOptions, '@', { name: 'Barney' } );
  759. const start = model.createPositionAt( doc.getRoot().getChild( 0 ), 4 );
  760. const expectedRange = model.createRange( start, start.getShiftedBy( 1 ) );
  761. expect( commandOptions.range.isEqual( expectedRange ) ).to.be.true;
  762. } );
  763. } );
  764. it( 'should hide panel on execute', () => {
  765. setData( model, '<paragraph>foo []</paragraph>' );
  766. model.change( writer => {
  767. writer.insertText( '@', doc.selection.getFirstPosition() );
  768. } );
  769. return waitForDebounce()
  770. .then( () => {
  771. listView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
  772. expect( panelView.isVisible ).to.be.false;
  773. } );
  774. } );
  775. it( 'should focus view after command execution', () => {
  776. const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
  777. setData( model, '<paragraph>foo []</paragraph>' );
  778. model.change( writer => {
  779. writer.insertText( '@', doc.selection.getFirstPosition() );
  780. } );
  781. return waitForDebounce()
  782. .then( () => {
  783. listView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
  784. sinon.assert.calledOnce( focusSpy );
  785. } );
  786. } );
  787. } );
  788. function createClassicTestEditor( mentionConfig ) {
  789. return ClassicTestEditor
  790. .create( editorElement, {
  791. plugins: [ Paragraph, MentionEditing, MentionUI ],
  792. mention: mentionConfig
  793. } )
  794. .then( newEditor => {
  795. editor = newEditor;
  796. model = editor.model;
  797. doc = model.document;
  798. editingView = editor.editing.view;
  799. mentionUI = editor.plugins.get( MentionUI );
  800. panelView = mentionUI.panelView;
  801. mentionsView = mentionUI._mentionsView;
  802. listView = mentionsView.listView;
  803. editingView.attachDomRoot( editorElement );
  804. // Focus the engine.
  805. editingView.document.isFocused = true;
  806. editingView.getDomRoot().focus();
  807. // Remove all selection ranges from DOM before testing.
  808. window.getSelection().removeAllRanges();
  809. } );
  810. }
  811. function waitForDebounce() {
  812. return new Promise( resolve => {
  813. setTimeout( () => {
  814. resolve();
  815. }, 50 );
  816. } );
  817. }
  818. function fireKeyDownEvent( options ) {
  819. const eventInfo = new EventInfo( editingView.document, 'keydown' );
  820. const eventData = new DomEventData( editingView.document, {
  821. target: document.body
  822. }, options );
  823. editingView.document.fire( eventInfo, eventData );
  824. }
  825. function stubSelectionRects( rects ) {
  826. const originalViewRangeToDom = editingView.domConverter.viewRangeToDom;
  827. // Mock selection rect.
  828. sinon.stub( editingView.domConverter, 'viewRangeToDom' ).callsFake( ( ...args ) => {
  829. const domRange = originalViewRangeToDom.apply( editingView.domConverter, args );
  830. sinon.stub( domRange, 'getClientRects' )
  831. .returns( rects );
  832. return domRange;
  833. } );
  834. }
  835. function expectChildViewsIsOnState( expectedState ) {
  836. const childViews = [ ...listView.items ].map( listView => listView.children.get( 0 ) );
  837. expect( childViews.map( child => child.isOn ) ).to.deep.equal( expectedState );
  838. }
  839. function assertCommandOptions( commandOptions, marker, item ) {
  840. expect( commandOptions ).to.have.property( 'marker', marker );
  841. expect( commandOptions ).to.have.property( 'range' );
  842. expect( commandOptions ).to.have.property( 'mention' );
  843. const mentionForCommand = commandOptions.mention;
  844. for ( const key of Object.keys( item ) ) {
  845. expect( mentionForCommand[ key ] ).to.equal( item[ key ] );
  846. }
  847. }
  848. } );