8
0

mentionui.js 60 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  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 { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
  10. import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
  11. import global from '@ckeditor/ckeditor5-utils/src/dom/global';
  12. import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  13. import DomEventData from '@ckeditor/ckeditor5-engine/src/view/observer/domeventdata';
  14. import EventInfo from '@ckeditor/ckeditor5-utils/src/eventinfo';
  15. import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
  16. import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
  17. import log from '@ckeditor/ckeditor5-utils/src/log';
  18. import env from '@ckeditor/ckeditor5-utils/src/env';
  19. import MentionUI, { createRegExp } from '../src/mentionui';
  20. import featureDetection from '../src/featuredetection';
  21. import MentionEditing from '../src/mentionediting';
  22. import MentionsView from '../src/ui/mentionsview';
  23. describe( 'MentionUI', () => {
  24. let editor, model, doc, editingView, mentionUI, editorElement, mentionsView, panelView;
  25. const staticConfig = {
  26. feeds: [
  27. {
  28. feed: [ '@Barney', '@Lily', '@Marshall', '@Robin', '@Ted' ],
  29. marker: '@'
  30. }
  31. ]
  32. };
  33. testUtils.createSinonSandbox();
  34. beforeEach( () => {
  35. editorElement = document.createElement( 'div' );
  36. document.body.appendChild( editorElement );
  37. } );
  38. afterEach( () => {
  39. sinon.restore();
  40. editorElement.remove();
  41. if ( editor ) {
  42. return editor.destroy();
  43. }
  44. } );
  45. it( 'should create a plugin instance', () => {
  46. return createClassicTestEditor().then( () => {
  47. expect( mentionUI ).to.instanceOf( Plugin );
  48. expect( mentionUI ).to.instanceOf( MentionUI );
  49. } );
  50. } );
  51. it( 'should load ContextualBalloon plugin', () => {
  52. return createClassicTestEditor().then( () => {
  53. expect( editor.plugins.get( ContextualBalloon ) ).to.be.instanceOf( ContextualBalloon );
  54. } );
  55. } );
  56. describe( 'init()', () => {
  57. it( 'should throw if marker was not provided for feed', () => {
  58. return createClassicTestEditor( { feeds: [ { feed: [ 'a' ] } ] } ).catch( error => {
  59. expect( error ).to.be.instanceOf( CKEditorError );
  60. expect( error.message ).to.match( /mentionconfig-incorrect-marker/ );
  61. } );
  62. } );
  63. it( 'should throw if marker is empty string', () => {
  64. return createClassicTestEditor( { feeds: [ { marker: '', feed: [ 'a' ] } ] } ).catch( error => {
  65. expect( error ).to.be.instanceOf( CKEditorError );
  66. expect( error.message ).to.match( /mentionconfig-incorrect-marker/ );
  67. } );
  68. } );
  69. it( 'should throw if marker is longer then 1 character', () => {
  70. return createClassicTestEditor( { feeds: [ { marker: '$$', feed: [ 'a' ] } ] } ).catch( error => {
  71. expect( error ).to.be.instanceOf( CKEditorError );
  72. expect( error.message ).to.match( /mentionconfig-incorrect-marker/ );
  73. } );
  74. } );
  75. } );
  76. describe( 'pluginName', () => {
  77. it( 'should return plugin by its name', () => {
  78. return createClassicTestEditor().then( () => {
  79. expect( editor.plugins.get( 'MentionUI' ) ).to.equal( mentionUI );
  80. } );
  81. } );
  82. } );
  83. describe( 'contextual balloon', () => {
  84. let balloonAddSpy;
  85. beforeEach( () => {
  86. return createClassicTestEditor( staticConfig )
  87. .then( () => {
  88. setData( model, '<paragraph>foo []</paragraph>' );
  89. const contextualBalloon = editor.plugins.get( ContextualBalloon );
  90. balloonAddSpy = sinon.spy( contextualBalloon, 'add' );
  91. model.change( writer => {
  92. writer.insertText( '@', doc.selection.getFirstPosition() );
  93. } );
  94. } )
  95. .then( waitForDebounce );
  96. } );
  97. it( 'should disable arrow', () => {
  98. sinon.assert.calledOnce( balloonAddSpy );
  99. sinon.assert.calledWithExactly( balloonAddSpy, sinon.match( data => data.singleViewMode ) );
  100. expect( panelView.isVisible ).to.be.true;
  101. expect( panelView.withArrow ).to.be.false;
  102. } );
  103. it( 'should add MentionView to a panel', () => {
  104. expect( editor.plugins.get( ContextualBalloon ).visibleView ).to.be.instanceof( MentionsView );
  105. } );
  106. } );
  107. describe( 'position', () => {
  108. let pinSpy;
  109. const caretRect = {
  110. bottom: 118,
  111. height: 18,
  112. left: 500,
  113. right: 501,
  114. top: 100,
  115. width: 1
  116. };
  117. const balloonRect = {
  118. bottom: 150,
  119. height: 150,
  120. left: 0,
  121. right: 200,
  122. top: 0,
  123. width: 200
  124. };
  125. beforeEach( () => {
  126. return createClassicTestEditor( staticConfig ).then( () => {
  127. pinSpy = sinon.spy( panelView, 'pin' );
  128. } );
  129. } );
  130. it( 'should properly calculate position data', () => {
  131. const editableElement = editingView.document.selection.editableElement;
  132. setData( model, '<paragraph>foo []</paragraph>' );
  133. stubSelectionRects( [ caretRect ] );
  134. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  135. model.change( writer => {
  136. writer.insertText( '@', doc.selection.getFirstPosition() );
  137. } );
  138. return waitForDebounce()
  139. .then( () => {
  140. const pinArgument = pinSpy.firstCall.args[ 0 ];
  141. const { target, positions, limiter, fitInViewport } = pinArgument;
  142. expect( positions ).to.have.length( 4 );
  143. // Mention UI should set limiter to the editable area.
  144. expect( limiter() ).to.equal( editingView.domConverter.mapViewToDom( editableElement ) );
  145. expect( fitInViewport ).to.be.undefined;
  146. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  147. const mentionMarker = editor.model.markers.get( 'mention' );
  148. const focus = doc.selection.focus;
  149. const expectedRange = editor.model.createRange( focus.getShiftedBy( -1 ), focus );
  150. // It should create a model marker for matcher marker character ('@').
  151. expect( expectedRange.isEqual( mentionMarker.getRange() ) ).to.be.true;
  152. const toViewRangeSpy = sinon.spy( editor.editing.mapper, 'toViewRange' );
  153. expect( target() ).to.deep.equal( caretRect );
  154. sinon.assert.calledOnce( toViewRangeSpy );
  155. const range = toViewRangeSpy.firstCall.args[ 0 ];
  156. expect( mentionMarker.getRange().isEqual( range ), 'Should position to mention marker.' );
  157. const caretSouthEast = positions[ 0 ];
  158. const caretSouthWest = positions[ 1 ];
  159. const caretNorthEast = positions[ 2 ];
  160. const caretNorthWest = positions[ 3 ];
  161. expect( caretSouthEast( caretRect, balloonRect ) ).to.deep.equal( {
  162. left: 501,
  163. name: 'caret_se',
  164. top: 121
  165. } );
  166. expect( caretSouthWest( caretRect, balloonRect ) ).to.deep.equal( {
  167. left: 301,
  168. name: 'caret_sw',
  169. top: 121
  170. } );
  171. expect( caretNorthEast( caretRect, balloonRect ) ).to.deep.equal( {
  172. left: 501,
  173. name: 'caret_ne',
  174. top: -53
  175. } );
  176. expect( caretNorthWest( caretRect, balloonRect ) ).to.deep.equal( {
  177. left: 301,
  178. name: 'caret_nw',
  179. top: -53
  180. } );
  181. } );
  182. } );
  183. it( 'should re-calculate position on typing and stay on selected position', () => {
  184. setData( model, '<paragraph>foo []</paragraph>' );
  185. stubSelectionRects( [ caretRect ] );
  186. model.change( writer => {
  187. writer.insertText( '@', doc.selection.getFirstPosition() );
  188. } );
  189. let positionAfterFirstShow;
  190. return waitForDebounce()
  191. .then( () => {
  192. sinon.assert.calledOnce( pinSpy );
  193. const pinArgument = pinSpy.firstCall.args[ 0 ];
  194. const { positions } = pinArgument;
  195. expect( positions ).to.have.length( 4 );
  196. positionAfterFirstShow = mentionsView.position;
  197. model.change( writer => {
  198. writer.insertText( 't', doc.selection.getFirstPosition() );
  199. } );
  200. } )
  201. .then( waitForDebounce )
  202. .then( () => {
  203. sinon.assert.calledTwice( pinSpy );
  204. const pinArgument = pinSpy.secondCall.args[ 0 ];
  205. const { positions } = pinArgument;
  206. expect( positions, 'should reuse first matched position' ).to.have.length( 1 );
  207. expect( positions[ 0 ].name ).to.equal( positionAfterFirstShow );
  208. } );
  209. } );
  210. it( 'does not fail if selection has no #editableElement', () => {
  211. setData( model, '<paragraph>foo []</paragraph>' );
  212. stubSelectionRects( [ caretRect ] );
  213. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  214. model.change( writer => {
  215. writer.insertText( '@', doc.selection.getFirstPosition() );
  216. } );
  217. return waitForDebounce()
  218. .then( () => {
  219. const pinArgument = pinSpy.firstCall.args[ 0 ];
  220. const { limiter } = pinArgument;
  221. sinon.stub( editingView.document.selection, 'editableElement' ).value( null );
  222. // Should not break;
  223. expect( limiter() ).to.be.null;
  224. } );
  225. } );
  226. } );
  227. describe( 'typing integration', () => {
  228. it( 'should show panel for matched marker after typing minimum characters', () => {
  229. return createClassicTestEditor( { feeds: [ Object.assign( { minimumCharacters: 2 }, staticConfig.feeds[ 0 ] ) ] } )
  230. .then( () => {
  231. setData( model, '<paragraph>foo []</paragraph>' );
  232. model.change( writer => {
  233. writer.insertText( '@', doc.selection.getFirstPosition() );
  234. } );
  235. } )
  236. .then( () => {
  237. model.change( writer => {
  238. writer.insertText( 'B', doc.selection.getFirstPosition() );
  239. } );
  240. } )
  241. .then( waitForDebounce )
  242. .then( () => {
  243. expect( panelView.isVisible ).to.be.false;
  244. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  245. } )
  246. .then( waitForDebounce )
  247. .then( () => {
  248. model.change( writer => {
  249. writer.insertText( 'a', doc.selection.getFirstPosition() );
  250. } );
  251. } )
  252. .then( waitForDebounce )
  253. .then( () => {
  254. expect( panelView.isVisible ).to.be.true;
  255. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  256. expect( mentionsView.items ).to.have.length( 1 );
  257. model.change( writer => {
  258. writer.insertText( 'r', doc.selection.getFirstPosition() );
  259. } );
  260. } )
  261. .then( waitForDebounce )
  262. .then( () => {
  263. expect( panelView.isVisible ).to.be.true;
  264. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  265. expect( mentionsView.items ).to.have.length( 1 );
  266. } );
  267. } );
  268. describe( 'static list with large set of results', () => {
  269. const bigList = {
  270. marker: '@',
  271. feed: [
  272. '@a01', '@a02', '@a03', '@a04', '@a05', '@a06', '@a07', '@a08', '@a09', '@a10', '@a11', '@a12'
  273. ]
  274. };
  275. beforeEach( () => {
  276. return createClassicTestEditor( { feeds: [ bigList ] } );
  277. } );
  278. it( 'should show panel with no more then 10 items for default static feed', () => {
  279. setData( model, '<paragraph>foo []</paragraph>' );
  280. model.change( writer => {
  281. writer.insertText( '@', doc.selection.getFirstPosition() );
  282. } );
  283. return waitForDebounce()
  284. .then( () => {
  285. expect( panelView.isVisible ).to.be.true;
  286. expect( mentionsView.items ).to.have.length( 10 );
  287. } );
  288. } );
  289. it( 'should scroll mention panel to the selected item', () => {
  290. setData( model, '<paragraph>foo []</paragraph>' );
  291. model.change( writer => {
  292. writer.insertText( '@', doc.selection.getFirstPosition() );
  293. } );
  294. const arrowDownEvtData = {
  295. keyCode: keyCodes.arrowdown,
  296. preventDefault: sinon.spy(),
  297. stopPropagation: sinon.spy()
  298. };
  299. const arrowUpEvtData = {
  300. keyCode: keyCodes.arrowup,
  301. preventDefault: sinon.spy(),
  302. stopPropagation: sinon.spy()
  303. };
  304. return waitForDebounce()
  305. .then( () => {
  306. // The scroll test highly depends on browser styles.
  307. // Some CI test environments might not load theme which will result that tests will not render on CI as locally.
  308. // To make this test repeatable across different environments it enforces mentions view size to 100px...
  309. const reset = 'padding:0px;margin:0px;border:0 none;line-height: 1em;';
  310. const mentionElementSpy = testUtils.sinon.spy( mentionsView.element, 'scrollTop', [ 'set' ] );
  311. mentionsView.element.style = `min-height:100px;height:100px;max-height:100px;${ reset };`;
  312. // ...and each list view item size to 25px...
  313. Array.from( mentionsView.items ).forEach( item => {
  314. const listItemElement = item.children.get( 0 ).element;
  315. listItemElement.style = `min-height:unset;height:25px;max-height:25px;${ reset };min-width:12em;`;
  316. } );
  317. // ...so after those changes it is safe to assume that:
  318. // - base offset is 0
  319. // - only 4 items are visible at once
  320. // - if scrolled to the last element scrollTop will be set to 150px. The 150px is the offset of the 7th item in the
  321. // list as last four (7, 8, 9 & 10) will be visible.
  322. expect( panelView.isVisible ).to.be.true;
  323. expectChildViewsIsOnState( [ true, false, false, false, false, false, false, false, false, false ] );
  324. // Edge browser always tries to scroll in tests environment: See ckeditor5-utils#282.
  325. if ( !env.isEdge ) {
  326. sinon.assert.callCount( mentionElementSpy.set, 0 );
  327. }
  328. fireKeyDownEvent( arrowDownEvtData );
  329. expectChildViewsIsOnState( [ false, true, false, false, false, false, false, false, false, false ] );
  330. // Edge browser always tries to scroll in tests environment: See ckeditor5-utils#282.
  331. if ( !env.isEdge ) {
  332. expect( mentionsView.element.scrollTop ).to.equal( 0 );
  333. sinon.assert.callCount( mentionElementSpy.set, 0 );
  334. }
  335. fireKeyDownEvent( arrowUpEvtData );
  336. expectChildViewsIsOnState( [ true, false, false, false, false, false, false, false, false, false ] );
  337. expect( mentionsView.element.scrollTop ).to.equal( 0 );
  338. // Edge browser always tries to scroll in tests environment: See ckeditor5-utils#282.
  339. if ( !env.isEdge ) {
  340. sinon.assert.callCount( mentionElementSpy.set, 0 );
  341. }
  342. fireKeyDownEvent( arrowUpEvtData );
  343. expectChildViewsIsOnState( [ false, false, false, false, false, false, false, false, false, true ] );
  344. // We want 150, but sometimes we get e.g. 151.
  345. expect( mentionsView.element.scrollTop ).to.be.within( 140, 160, 'last item highlighted' );
  346. // Edge browser always tries to scroll in tests environment: See ckeditor5-utils#282.
  347. if ( !env.isEdge ) {
  348. sinon.assert.callCount( mentionElementSpy.set, 1 );
  349. }
  350. fireKeyDownEvent( arrowDownEvtData );
  351. expectChildViewsIsOnState( [ true, false, false, false, false, false, false, false, false, false ] );
  352. // We want 0, but sometimes we get e.g. 1. (Firefox)
  353. expect( mentionsView.element.scrollTop ).to.be.within( 0, 10 );
  354. // Edge browser always tries to scroll in tests environment: See ckeditor5-utils#282.
  355. if ( !env.isEdge ) {
  356. sinon.assert.callCount( mentionElementSpy.set, 2 );
  357. }
  358. } );
  359. } );
  360. } );
  361. describe( 'ES2018 RegExp Unicode property escapes fallback', () => {
  362. let regExpStub;
  363. // Cache the original value to restore it after the tests.
  364. const originalPunctuationSupport = featureDetection.isPunctuationGroupSupported;
  365. before( () => {
  366. featureDetection.isPunctuationGroupSupported = false;
  367. } );
  368. beforeEach( () => {
  369. return createClassicTestEditor( staticConfig )
  370. .then( editor => {
  371. regExpStub = sinon.stub( window, 'RegExp' );
  372. return editor;
  373. } );
  374. } );
  375. after( () => {
  376. featureDetection.isPunctuationGroupSupported = originalPunctuationSupport;
  377. } );
  378. it( 'returns a simplified RegExp for browsers not supporting Unicode punctuation groups', () => {
  379. featureDetection.isPunctuationGroupSupported = false;
  380. createRegExp( '@', 2 );
  381. sinon.assert.calledOnce( regExpStub );
  382. sinon.assert.calledWithExactly( regExpStub, '(^|[ \\(\\[{"\'])([@])([_a-zA-Z0-9À-ž]{2,}?)$', 'u' );
  383. } );
  384. it( 'returns a ES2018 RegExp for browsers supporting Unicode punctuation groups', () => {
  385. featureDetection.isPunctuationGroupSupported = true;
  386. createRegExp( '@', 2 );
  387. sinon.assert.calledOnce( regExpStub );
  388. sinon.assert.calledWithExactly( regExpStub, '(^|[ \\p{Ps}\\p{Pi}"\'])([@])([_a-zA-Z0-9À-ž]{2,}?)$', 'u' );
  389. } );
  390. } );
  391. describe( 'static list with default trigger', () => {
  392. beforeEach( () => {
  393. return createClassicTestEditor( staticConfig );
  394. } );
  395. it( 'should show panel for matched marker', () => {
  396. setData( model, '<paragraph>foo []</paragraph>' );
  397. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  398. model.change( writer => {
  399. writer.insertText( '@', doc.selection.getFirstPosition() );
  400. } );
  401. return waitForDebounce()
  402. .then( () => {
  403. expect( panelView.isVisible ).to.be.true;
  404. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  405. expect( mentionsView.items ).to.have.length( 5 );
  406. } );
  407. } );
  408. it( 'should show panel for matched marker at the beginning of paragraph', () => {
  409. setData( model, '<paragraph>[] foo</paragraph>' );
  410. model.change( writer => {
  411. writer.insertText( '@', doc.selection.getFirstPosition() );
  412. } );
  413. return waitForDebounce()
  414. .then( () => {
  415. expect( panelView.isVisible ).to.be.true;
  416. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  417. expect( mentionsView.items ).to.have.length( 5 );
  418. } );
  419. } );
  420. it( 'should show panel for matched marker after a <softBreak>', () => {
  421. model.schema.register( 'softBreak', {
  422. allowWhere: '$text',
  423. isInline: true
  424. } );
  425. editor.conversion.for( 'upcast' )
  426. .elementToElement( {
  427. model: 'softBreak',
  428. view: 'br'
  429. } );
  430. editor.conversion.for( 'downcast' )
  431. .elementToElement( {
  432. model: 'softBreak',
  433. view: ( modelElement, viewWriter ) => viewWriter.createEmptyElement( 'br' )
  434. } );
  435. setData( model, '<paragraph>abc<softBreak></softBreak>[] foo</paragraph>' );
  436. model.change( writer => {
  437. writer.insertText( '@', doc.selection.getFirstPosition() );
  438. } );
  439. return waitForDebounce()
  440. .then( () => {
  441. expect( panelView.isVisible ).to.be.true;
  442. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  443. expect( mentionsView.items ).to.have.length( 5 );
  444. } );
  445. } );
  446. // Opening parenthesis type characters that should be supported on all environments.
  447. for ( const character of [ '(', '\'', '"', '[', '{' ] ) {
  448. testOpeningPunctuationCharacter( character );
  449. }
  450. // Excerpt of opening parenthesis type characters that tests ES2018 Unicode property escapes on supported environment.
  451. for ( const character of [
  452. // Belongs to Ps (Punctuation, Open) group:
  453. '〈', '„', '﹛', '⦅', '{',
  454. // Belongs to Pi (Punctuation, Initial quote) group:
  455. '«', '‹', '⸌', ' ⸂', '⸠'
  456. ] ) {
  457. testOpeningPunctuationCharacter( character, !featureDetection.isPunctuationGroupSupported );
  458. }
  459. it( 'should not show panel for marker in the middle of other word', () => {
  460. setData( model, '<paragraph>foo[]</paragraph>' );
  461. model.change( writer => {
  462. writer.insertText( '@', doc.selection.getFirstPosition() );
  463. } );
  464. return waitForDebounce()
  465. .then( () => {
  466. expect( panelView.isVisible ).to.be.false;
  467. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  468. } );
  469. } );
  470. it( 'should not show panel when selection is inside a mention', () => {
  471. setData( model, '<paragraph>foo [@Lily] bar</paragraph>' );
  472. model.change( writer => {
  473. writer.setAttribute( 'mention', { id: '@Lily', _uid: 1234 }, doc.selection.getFirstRange() );
  474. } );
  475. model.change( writer => {
  476. writer.setSelection( doc.getRoot().getChild( 0 ), 7 );
  477. } );
  478. return waitForDebounce()
  479. .then( () => {
  480. expect( panelView.isVisible ).to.be.false;
  481. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  482. } );
  483. } );
  484. it( 'should not show panel when selection is at the end of a mention', () => {
  485. setData( model, '<paragraph>foo [@Lily] bar</paragraph>' );
  486. model.change( writer => {
  487. writer.setAttribute( 'mention', { id: '@Lily', _uid: 1234 }, doc.selection.getFirstRange() );
  488. } );
  489. model.change( writer => {
  490. writer.setSelection( doc.getRoot().getChild( 0 ), 9 );
  491. } );
  492. return waitForDebounce()
  493. .then( () => {
  494. expect( panelView.isVisible ).to.be.false;
  495. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  496. } );
  497. } );
  498. it( 'should not show panel when selection is not collapsed', () => {
  499. setData( model, '<paragraph>foo []</paragraph>' );
  500. model.change( writer => {
  501. writer.insertText( '@', doc.selection.getFirstPosition() );
  502. } );
  503. return waitForDebounce()
  504. .then( () => {
  505. expect( panelView.isVisible ).to.be.true;
  506. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  507. model.change( () => {
  508. model.modifySelection( doc.selection, { direction: 'backward', unit: 'character' } );
  509. } );
  510. } )
  511. .then( waitForDebounce )
  512. .then( () => {
  513. expect( panelView.isVisible ).to.be.false;
  514. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  515. } );
  516. } );
  517. it( 'should not show panel when selection is changing (non-collapsed)', () => {
  518. setData( model, '<paragraph>foo []</paragraph>' );
  519. model.change( writer => {
  520. writer.insertText( '@', doc.selection.getFirstPosition() );
  521. } );
  522. return waitForDebounce()
  523. .then( () => {
  524. expect( panelView.isVisible ).to.be.true;
  525. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  526. model.change( () => {
  527. model.modifySelection( doc.selection, { direction: 'backward', unit: 'character' } );
  528. } );
  529. } )
  530. .then( waitForDebounce )
  531. .then( () => {
  532. expect( panelView.isVisible ).to.be.false;
  533. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  534. } )
  535. .then( () => {
  536. model.change( () => {
  537. model.modifySelection( doc.selection, { direction: 'backward', unit: 'character' } );
  538. } );
  539. } )
  540. .then( waitForDebounce )
  541. .then( () => {
  542. expect( panelView.isVisible ).to.be.false;
  543. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  544. } );
  545. } );
  546. it( 'should not show panel when selection is after existing mention', () => {
  547. setData( model, '<paragraph>foo [@Lily] bar[]</paragraph>' );
  548. model.change( writer => {
  549. writer.setAttribute( 'mention', { id: '@Lily', _uid: 1234 }, doc.selection.getFirstRange() );
  550. } );
  551. return waitForDebounce()
  552. .then( () => {
  553. expect( panelView.isVisible ).to.be.false;
  554. model.change( writer => {
  555. writer.setSelection( doc.getRoot().getChild( 0 ), 8 );
  556. } );
  557. } )
  558. .then( waitForDebounce )
  559. .then( () => {
  560. expect( panelView.isVisible ).to.be.false;
  561. } );
  562. } );
  563. it( 'should not show panel when selection moves inside existing mention', () => {
  564. setData( model, '<paragraph>foo [@Lily] bar</paragraph>' );
  565. model.change( writer => {
  566. writer.setAttribute( 'mention', { id: '@Lily', _uid: 1234 }, doc.selection.getFirstRange() );
  567. } );
  568. return waitForDebounce()
  569. .then( () => {
  570. model.change( writer => {
  571. writer.setSelection( doc.getRoot().getChild( 0 ), 9 );
  572. } );
  573. } )
  574. .then( waitForDebounce )
  575. .then( () => {
  576. expect( panelView.isVisible ).to.be.false;
  577. model.change( writer => {
  578. writer.setSelection( doc.getRoot().getChild( 0 ), 8 );
  579. } );
  580. } )
  581. .then( waitForDebounce )
  582. .then( () => {
  583. expect( panelView.isVisible ).to.be.false;
  584. } );
  585. } );
  586. it( 'should show filtered results for matched text', () => {
  587. setData( model, '<paragraph>foo []</paragraph>' );
  588. model.change( writer => {
  589. writer.insertText( '@', doc.selection.getFirstPosition() );
  590. } );
  591. model.change( writer => {
  592. writer.insertText( 'T', doc.selection.getFirstPosition() );
  593. } );
  594. return waitForDebounce()
  595. .then( () => {
  596. expect( panelView.isVisible ).to.be.true;
  597. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  598. expect( mentionsView.items ).to.have.length( 1 );
  599. } );
  600. } );
  601. it( 'should focus the first item in panel', () => {
  602. setData( model, '<paragraph>foo []</paragraph>' );
  603. model.change( writer => {
  604. writer.insertText( '@', doc.selection.getFirstPosition() );
  605. } );
  606. return waitForDebounce()
  607. .then( () => {
  608. const button = mentionsView.items.get( 0 ).children.get( 0 );
  609. expect( button.isOn ).to.be.true;
  610. } );
  611. } );
  612. it( 'should hide panel if no matched items', () => {
  613. setData( model, '<paragraph>foo []</paragraph>' );
  614. model.change( writer => {
  615. writer.insertText( '@', doc.selection.getFirstPosition() );
  616. } );
  617. return waitForDebounce()
  618. .then( () => expect( panelView.isVisible ).to.be.true )
  619. .then( () => {
  620. model.change( writer => {
  621. writer.insertText( 'x', doc.selection.getFirstPosition() );
  622. } );
  623. } )
  624. .then( waitForDebounce )
  625. .then( () => {
  626. expect( panelView.isVisible ).to.be.false;
  627. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  628. expect( mentionsView.items ).to.have.length( 0 );
  629. } );
  630. } );
  631. it( 'should hide panel when text was unmatched', () => {
  632. setData( model, '<paragraph>foo []</paragraph>' );
  633. model.change( writer => {
  634. writer.insertText( '@', doc.selection.getFirstPosition() );
  635. } );
  636. return waitForDebounce()
  637. .then( () => expect( panelView.isVisible ).to.be.true )
  638. .then( () => {
  639. model.change( writer => {
  640. const end = doc.selection.getFirstPosition();
  641. const start = end.getShiftedBy( -1 );
  642. writer.remove( writer.createRange( start, end ) );
  643. } );
  644. } )
  645. .then( waitForDebounce )
  646. .then( () => expect( panelView.isVisible ).to.be.false );
  647. } );
  648. } );
  649. describe( 'asynchronous list with custom trigger', () => {
  650. let feedCallbackStub, feedCallbackTimeout, feedCallbackCallTimes;
  651. beforeEach( () => {
  652. const issuesNumbers = [ '#100', '#101', '#102', '#103' ];
  653. feedCallbackTimeout = 20;
  654. feedCallbackCallTimes = 0;
  655. function feedCallback( feedText ) {
  656. return new Promise( resolve => {
  657. setTimeout( () => {
  658. feedCallbackCallTimes++;
  659. resolve( issuesNumbers.filter( number => number.includes( feedText ) ) );
  660. }, feedCallbackTimeout );
  661. } );
  662. }
  663. feedCallbackStub = testUtils.sinon.stub().callsFake( feedCallback );
  664. return createClassicTestEditor( {
  665. feeds: [
  666. {
  667. marker: '#',
  668. feed: feedCallbackStub
  669. }
  670. ]
  671. } );
  672. } );
  673. it( 'should show panel for matched marker', () => {
  674. setData( model, '<paragraph>foo []</paragraph>' );
  675. model.change( writer => {
  676. writer.insertText( '#', doc.selection.getFirstPosition() );
  677. } );
  678. return waitForDebounce()
  679. .then( () => {
  680. expect( panelView.isVisible ).to.be.true;
  681. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  682. expect( mentionsView.items ).to.have.length( 4 );
  683. } );
  684. } );
  685. it( 'should show filtered results for matched text', () => {
  686. setData( model, '<paragraph>foo []</paragraph>' );
  687. model.change( writer => {
  688. writer.insertText( '#', doc.selection.getFirstPosition() );
  689. } );
  690. model.change( writer => {
  691. writer.insertText( '2', doc.selection.getFirstPosition() );
  692. } );
  693. return waitForDebounce()
  694. .then( () => {
  695. expect( panelView.isVisible ).to.be.true;
  696. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  697. expect( mentionsView.items ).to.have.length( 1 );
  698. } );
  699. } );
  700. it( 'should hide panel if no matched items', () => {
  701. setData( model, '<paragraph>foo []</paragraph>' );
  702. model.change( writer => {
  703. writer.insertText( '#', doc.selection.getFirstPosition() );
  704. } );
  705. return waitForDebounce()
  706. .then( () => expect( panelView.isVisible ).to.be.true )
  707. .then( () => {
  708. model.change( writer => {
  709. writer.insertText( 'x', doc.selection.getFirstPosition() );
  710. } );
  711. } )
  712. .then( waitForDebounce )
  713. .then( () => {
  714. expect( panelView.isVisible ).to.be.false;
  715. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  716. expect( mentionsView.items ).to.have.length( 0 );
  717. } );
  718. } );
  719. it( 'should hide panel when text was unmatched', () => {
  720. setData( model, '<paragraph>foo []</paragraph>' );
  721. model.change( writer => {
  722. writer.insertText( '#', doc.selection.getFirstPosition() );
  723. } );
  724. return waitForDebounce()
  725. .then( () => expect( panelView.isVisible ).to.be.true )
  726. .then( () => {
  727. model.change( writer => {
  728. const end = doc.selection.getFirstPosition();
  729. const start = end.getShiftedBy( -1 );
  730. writer.remove( writer.createRange( start, end ) );
  731. } );
  732. } )
  733. .then( waitForDebounce )
  734. .then( () => expect( panelView.isVisible ).to.be.false );
  735. } );
  736. it( 'should show panel debounced', () => {
  737. setData( model, '<paragraph>foo []</paragraph>' );
  738. model.change( writer => {
  739. writer.insertText( '#', doc.selection.getFirstPosition() );
  740. } );
  741. sinon.assert.notCalled( feedCallbackStub );
  742. return Promise.resolve()
  743. .then( wait( 20 ) )
  744. .then( () => {
  745. sinon.assert.notCalled( feedCallbackStub );
  746. model.change( writer => {
  747. writer.insertText( '1', doc.selection.getFirstPosition() );
  748. } );
  749. } )
  750. .then( wait( 20 ) )
  751. .then( () => {
  752. sinon.assert.notCalled( feedCallbackStub );
  753. model.change( writer => {
  754. writer.insertText( '0', doc.selection.getFirstPosition() );
  755. } );
  756. } )
  757. .then( waitForDebounce )
  758. .then( () => {
  759. sinon.assert.calledOnce( feedCallbackStub );
  760. // Should be called with all typed letters before debounce.
  761. sinon.assert.calledWithExactly( feedCallbackStub, '10' );
  762. expect( panelView.isVisible ).to.be.true;
  763. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  764. expect( mentionsView.items ).to.have.length( 4 );
  765. } );
  766. } );
  767. it( 'should discard requested feed if they came out of order', () => {
  768. setData( model, '<paragraph>foo []</paragraph>' );
  769. model.change( writer => {
  770. writer.insertText( '#', doc.selection.getFirstPosition() );
  771. } );
  772. sinon.assert.notCalled( feedCallbackStub );
  773. const panelShowSpy = sinon.spy( panelView, 'show' );
  774. // Increase the response time to extend the debounce time out.
  775. feedCallbackTimeout = 300;
  776. return Promise.resolve()
  777. .then( wait( 20 ) )
  778. .then( () => {
  779. sinon.assert.notCalled( feedCallbackStub );
  780. model.change( writer => {
  781. writer.insertText( '1', doc.selection.getFirstPosition() );
  782. } );
  783. } )
  784. .then( waitForDebounce )
  785. .then( () => {
  786. sinon.assert.calledOnce( feedCallbackStub );
  787. sinon.assert.calledWithExactly( feedCallbackStub, '1' );
  788. expect( panelView.isVisible, 'panel is hidden' ).to.be.false;
  789. expect( editor.model.markers.has( 'mention' ), 'marker is inserted' ).to.be.true;
  790. // Make second callback resolve before first.
  791. feedCallbackTimeout = 50;
  792. model.change( writer => {
  793. writer.insertText( '0', doc.selection.getFirstPosition() );
  794. } );
  795. } )
  796. .then( wait( 300 ) ) // Wait longer so the longer callback will be resolved.
  797. .then( () => {
  798. sinon.assert.calledTwice( feedCallbackStub );
  799. sinon.assert.calledWithExactly( feedCallbackStub.getCall( 1 ), '10' );
  800. sinon.assert.calledOnce( panelShowSpy );
  801. expect( feedCallbackCallTimes ).to.equal( 2 );
  802. expect( panelView.isVisible, 'panel is visible' ).to.be.true;
  803. expect( editor.model.markers.has( 'mention' ), 'marker is inserted' ).to.be.true;
  804. expect( mentionsView.items ).to.have.length( 4 );
  805. } );
  806. } );
  807. it( 'should discard requested feed if mention UI is hidden', () => {
  808. setData( model, '<paragraph>foo []</paragraph>' );
  809. model.change( writer => {
  810. writer.insertText( '#', doc.selection.getFirstPosition() );
  811. } );
  812. sinon.assert.notCalled( feedCallbackStub );
  813. feedCallbackTimeout = 200;
  814. return Promise.resolve()
  815. .then( waitForDebounce )
  816. .then( () => {
  817. expect( panelView.isVisible ).to.be.false; // Should be still hidden;
  818. // Should be called with empty string.
  819. sinon.assert.calledWithExactly( feedCallbackStub, '' );
  820. model.change( writer => {
  821. writer.setSelection( doc.getRoot().getChild( 0 ), 0 );
  822. } );
  823. } )
  824. .then( waitForDebounce )
  825. .then( () => {
  826. expect( panelView.isVisible ).to.be.false;
  827. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  828. } );
  829. } );
  830. it( 'should show warning if requested feed failed', () => {
  831. setData( model, '<paragraph>foo []</paragraph>' );
  832. feedCallbackStub.throws( 'Request timeout' );
  833. const spy = sinon.spy( log, 'warn' );
  834. model.change( writer => {
  835. writer.insertText( '#', doc.selection.getFirstPosition() );
  836. } );
  837. return waitForDebounce()
  838. .then( () => {
  839. expect( panelView.isVisible, 'panel is hidden' ).to.be.false;
  840. expect( editor.model.markers.has( 'mention' ), 'there is no marker' ).to.be.false;
  841. sinon.assert.calledWithExactly( spy, 'mention-feed-callback-error: Could not obtain mention autocomplete feed.' );
  842. } );
  843. } );
  844. it( 'should not fail if marker was removed', () => {
  845. setData( model, '<paragraph>foo []</paragraph>' );
  846. const selectFirstMentionSpy = sinon.spy( mentionsView, 'selectFirst' );
  847. model.change( writer => {
  848. writer.insertText( '#', doc.selection.getFirstPosition() );
  849. } );
  850. sinon.assert.notCalled( feedCallbackStub );
  851. // Increase the response time to extend the debounce time out.
  852. feedCallbackTimeout = 500;
  853. return Promise.resolve()
  854. .then( waitForDebounce )
  855. .then( wait( 20 ) )
  856. .then( () => {
  857. model.change( writer => {
  858. writer.setSelection( doc.getRoot().getChild( 0 ), 2 );
  859. } );
  860. } )
  861. .then( wait( 20 ) )
  862. .then( () => {
  863. feedCallbackTimeout = 1000;
  864. model.change( writer => {
  865. writer.setSelection( doc.getRoot().getChild( 0 ), 'end' );
  866. } );
  867. } )
  868. .then( wait( 500 ) )
  869. .then( () => {
  870. expect( panelView.isVisible, 'panel is visible' ).to.be.true;
  871. // If there were any errors this will not get called.
  872. // The errors might come from unhandled promise rejections errors.
  873. sinon.assert.calledOnce( selectFirstMentionSpy );
  874. } );
  875. } );
  876. it( 'should not show panel if selection was moved during fetching a feed', () => {
  877. setData( model, '<paragraph>foo [#101] bar</paragraph><paragraph></paragraph>' );
  878. model.change( writer => {
  879. writer.setAttribute( 'mention', { id: '#101', _uid: 1234 }, doc.selection.getFirstRange() );
  880. } );
  881. // Increase the response time to extend the debounce time out.
  882. feedCallbackTimeout = 300;
  883. model.change( writer => {
  884. writer.setSelection( doc.getRoot().getChild( 1 ), 0 );
  885. writer.insertText( '#', doc.selection.getFirstPosition() );
  886. } );
  887. sinon.assert.notCalled( feedCallbackStub );
  888. return Promise.resolve()
  889. .then( waitForDebounce )
  890. .then( () => {
  891. sinon.assert.calledOnce( feedCallbackStub );
  892. model.change( writer => {
  893. writer.setSelection( doc.getRoot().getChild( 0 ), 6 );
  894. } );
  895. expect( panelView.isVisible ).to.be.false;
  896. } )
  897. .then( waitForDebounce )
  898. .then( wait( 20 ) )
  899. .then( () => {
  900. expect( panelView.isVisible ).to.be.false;
  901. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  902. } );
  903. } );
  904. } );
  905. function testOpeningPunctuationCharacter( character, skip = false ) {
  906. it( `should show panel for matched marker after a "${ character }" character`, function() {
  907. if ( skip ) {
  908. this.skip();
  909. }
  910. setData( model, '<paragraph>[] foo</paragraph>' );
  911. model.change( writer => {
  912. writer.insertText( character, doc.selection.getFirstPosition() );
  913. } );
  914. model.change( writer => {
  915. writer.insertText( '@', doc.selection.getFirstPosition() );
  916. } );
  917. return waitForDebounce()
  918. .then( () => {
  919. expect( panelView.isVisible, 'panel is visible' ).to.be.true;
  920. expect( editor.model.markers.has( 'mention' ), 'marker is inserted' ).to.be.true;
  921. expect( mentionsView.items ).to.have.length( 5 );
  922. } );
  923. } );
  924. }
  925. } );
  926. describe( 'panel behavior', () => {
  927. it( 'should close the opened panel on esc', () => {
  928. return createClassicTestEditor( staticConfig )
  929. .then( () => {
  930. setData( model, '<paragraph>foo []</paragraph>' );
  931. model.change( writer => {
  932. writer.insertText( '@', doc.selection.getFirstPosition() );
  933. } );
  934. } )
  935. .then( waitForDebounce )
  936. .then( () => {
  937. expect( panelView.isVisible ).to.be.true;
  938. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  939. fireKeyDownEvent( {
  940. keyCode: keyCodes.esc,
  941. preventDefault: sinon.spy(),
  942. stopPropagation: sinon.spy()
  943. } );
  944. expect( panelView.isVisible ).to.be.false;
  945. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  946. } );
  947. } );
  948. it( 'should close the opened panel when click outside the panel', () => {
  949. return createClassicTestEditor( staticConfig )
  950. .then( () => {
  951. setData( model, '<paragraph>foo []</paragraph>' );
  952. model.change( writer => {
  953. writer.insertText( '@', doc.selection.getFirstPosition() );
  954. } );
  955. } )
  956. .then( waitForDebounce )
  957. .then( () => {
  958. expect( panelView.isVisible ).to.be.true;
  959. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  960. document.body.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) );
  961. expect( panelView.isVisible ).to.be.false;
  962. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  963. } );
  964. } );
  965. it( 'should hide the panel on selection change', () => {
  966. return createClassicTestEditor( staticConfig )
  967. .then( () => {
  968. setData( model, '<paragraph>foo []</paragraph>' );
  969. model.change( writer => {
  970. writer.insertText( '@', doc.selection.getFirstPosition() );
  971. } );
  972. } )
  973. .then( waitForDebounce )
  974. .then( () => {
  975. expect( panelView.isVisible ).to.be.true;
  976. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  977. model.change( writer => {
  978. // Place position at the beginning of a paragraph.
  979. writer.setSelection( doc.getRoot().getChild( 0 ), 0 );
  980. } );
  981. expect( panelView.isVisible ).to.be.false;
  982. expect( mentionsView.position ).to.be.undefined;
  983. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  984. } );
  985. } );
  986. it( 'should hide the panel on selection change triggered by mouse click', () => {
  987. return createClassicTestEditor( staticConfig )
  988. .then( () => {
  989. setData( model, '<paragraph>foo []</paragraph>' );
  990. model.change( writer => {
  991. writer.insertText( '@', doc.selection.getFirstPosition() );
  992. } );
  993. } )
  994. .then( waitForDebounce )
  995. .then( () => {
  996. expect( panelView.isVisible ).to.be.true;
  997. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  998. // This happens when user clicks outside the panel view and selection is changed.
  999. // Two panel closing mechanisms are run:
  1000. // - clickOutsideHandler
  1001. // - unmatched text in text watcher
  1002. // which may fail when trying to remove mention marker twice.
  1003. document.body.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) );
  1004. model.change( writer => {
  1005. // Place position at the beginning of a paragraph.
  1006. writer.setSelection( doc.getRoot().getChild( 0 ), 0 );
  1007. } );
  1008. expect( panelView.isVisible ).to.be.false;
  1009. expect( mentionsView.position ).to.be.undefined;
  1010. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  1011. } );
  1012. } );
  1013. describe( 'default list item', () => {
  1014. // Create map of expected feed items as objects as they will be stored internally.
  1015. const feedItems = staticConfig.feeds[ 0 ].feed.map( text => ( { text: `${ text }`, id: `${ text }` } ) );
  1016. beforeEach( () => {
  1017. return createClassicTestEditor( staticConfig );
  1018. } );
  1019. describe( 'on arrows', () => {
  1020. it( 'should cycle down on arrow down', () => {
  1021. setData( model, '<paragraph>foo []</paragraph>' );
  1022. model.change( writer => {
  1023. writer.insertText( '@', doc.selection.getFirstPosition() );
  1024. } );
  1025. return waitForDebounce()
  1026. .then( () => {
  1027. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  1028. const keyEvtData = {
  1029. keyCode: keyCodes.arrowdown,
  1030. preventDefault: sinon.spy(),
  1031. stopPropagation: sinon.spy()
  1032. };
  1033. fireKeyDownEvent( keyEvtData );
  1034. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  1035. fireKeyDownEvent( keyEvtData );
  1036. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  1037. fireKeyDownEvent( keyEvtData );
  1038. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  1039. fireKeyDownEvent( keyEvtData );
  1040. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  1041. fireKeyDownEvent( keyEvtData );
  1042. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  1043. } );
  1044. } );
  1045. it( 'should cycle up on arrow up', () => {
  1046. setData( model, '<paragraph>foo []</paragraph>' );
  1047. model.change( writer => {
  1048. writer.insertText( '@', doc.selection.getFirstPosition() );
  1049. } );
  1050. return waitForDebounce()
  1051. .then( () => {
  1052. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  1053. const keyEvtData = {
  1054. keyCode: keyCodes.arrowup,
  1055. preventDefault: sinon.spy(),
  1056. stopPropagation: sinon.spy()
  1057. };
  1058. fireKeyDownEvent( keyEvtData );
  1059. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  1060. fireKeyDownEvent( keyEvtData );
  1061. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  1062. fireKeyDownEvent( keyEvtData );
  1063. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  1064. fireKeyDownEvent( keyEvtData );
  1065. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  1066. fireKeyDownEvent( keyEvtData );
  1067. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  1068. } );
  1069. } );
  1070. it( 'should not cycle with only one item in the list', () => {
  1071. setData( model, '<paragraph>foo []</paragraph>' );
  1072. const keyDownEvtData = {
  1073. keyCode: keyCodes.arrowdown,
  1074. preventDefault: sinon.spy(),
  1075. stopPropagation: sinon.spy()
  1076. };
  1077. const keyUpEvtData = {
  1078. keyCode: keyCodes.arrowdown,
  1079. preventDefault: sinon.spy(),
  1080. stopPropagation: sinon.spy()
  1081. };
  1082. model.change( writer => {
  1083. writer.insertText( '@T', doc.selection.getFirstPosition() );
  1084. } );
  1085. return waitForDebounce()
  1086. .then( () => {
  1087. expectChildViewsIsOnState( [ true ] );
  1088. fireKeyDownEvent( keyDownEvtData );
  1089. expectChildViewsIsOnState( [ true ] );
  1090. fireKeyDownEvent( keyUpEvtData );
  1091. expectChildViewsIsOnState( [ true ] );
  1092. } );
  1093. } );
  1094. } );
  1095. describe( 'on "execute" keys', () => {
  1096. testExecuteKey( 'enter', keyCodes.enter, feedItems );
  1097. testExecuteKey( 'tab', keyCodes.tab, feedItems );
  1098. testExecuteKey( 'space', keyCodes.space, feedItems );
  1099. } );
  1100. } );
  1101. describe( 'default list item with custom feed', () => {
  1102. const issues = [
  1103. { id: '@Ted' },
  1104. { id: '@Barney' },
  1105. { id: '@Robin' },
  1106. { id: '@Lily' },
  1107. { id: '@Marshal' }
  1108. ];
  1109. beforeEach( () => {
  1110. return createClassicTestEditor( {
  1111. feeds: [
  1112. {
  1113. marker: '@',
  1114. feed: feedText => issues.filter( issue => issue.id.includes( feedText ) )
  1115. }
  1116. ]
  1117. } );
  1118. } );
  1119. it( 'should show panel for matched marker', () => {
  1120. setData( model, '<paragraph>foo []</paragraph>' );
  1121. model.change( writer => {
  1122. writer.insertText( '@', doc.selection.getFirstPosition() );
  1123. } );
  1124. return waitForDebounce()
  1125. .then( () => {
  1126. expect( panelView.isVisible ).to.be.true;
  1127. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  1128. expect( mentionsView.items ).to.have.length( 5 );
  1129. } );
  1130. } );
  1131. } );
  1132. describe( 'custom list item (string)', () => {
  1133. const issues = [
  1134. { id: '@1002', title: 'Some bug in editor.' },
  1135. { id: '@1003', title: 'Introduce this feature.' },
  1136. { id: '@1004', title: 'Missing docs.' },
  1137. { id: '@1005', title: 'Another bug.' },
  1138. { id: '@1006', title: 'More bugs' }
  1139. ];
  1140. beforeEach( () => {
  1141. return createClassicTestEditor( {
  1142. feeds: [
  1143. {
  1144. marker: '@',
  1145. feed: issues,
  1146. itemRenderer: item => item.title
  1147. }
  1148. ]
  1149. } );
  1150. } );
  1151. it( 'should show panel for matched marker', () => {
  1152. setData( model, '<paragraph>foo []</paragraph>' );
  1153. model.change( writer => {
  1154. writer.insertText( '@', doc.selection.getFirstPosition() );
  1155. } );
  1156. return waitForDebounce()
  1157. .then( () => {
  1158. expect( panelView.isVisible ).to.be.true;
  1159. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  1160. expect( mentionsView.items ).to.have.length( 5 );
  1161. } );
  1162. } );
  1163. describe( 'keys', () => {
  1164. describe( 'on arrows', () => {
  1165. it( 'should cycle down on arrow down', () => {
  1166. setData( model, '<paragraph>foo []</paragraph>' );
  1167. model.change( writer => {
  1168. writer.insertText( '@', doc.selection.getFirstPosition() );
  1169. } );
  1170. return waitForDebounce()
  1171. .then( () => {
  1172. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  1173. const keyEvtData = {
  1174. keyCode: keyCodes.arrowdown,
  1175. preventDefault: sinon.spy(),
  1176. stopPropagation: sinon.spy()
  1177. };
  1178. fireKeyDownEvent( keyEvtData );
  1179. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  1180. fireKeyDownEvent( keyEvtData );
  1181. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  1182. fireKeyDownEvent( keyEvtData );
  1183. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  1184. fireKeyDownEvent( keyEvtData );
  1185. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  1186. fireKeyDownEvent( keyEvtData );
  1187. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  1188. } );
  1189. } );
  1190. it( 'should cycle up on arrow up', () => {
  1191. setData( model, '<paragraph>foo []</paragraph>' );
  1192. model.change( writer => {
  1193. writer.insertText( '@', doc.selection.getFirstPosition() );
  1194. } );
  1195. return waitForDebounce()
  1196. .then( () => {
  1197. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  1198. const keyEvtData = {
  1199. keyCode: keyCodes.arrowup,
  1200. preventDefault: sinon.spy(),
  1201. stopPropagation: sinon.spy()
  1202. };
  1203. fireKeyDownEvent( keyEvtData );
  1204. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  1205. fireKeyDownEvent( keyEvtData );
  1206. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  1207. fireKeyDownEvent( keyEvtData );
  1208. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  1209. fireKeyDownEvent( keyEvtData );
  1210. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  1211. fireKeyDownEvent( keyEvtData );
  1212. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  1213. } );
  1214. } );
  1215. } );
  1216. describe( 'on "execute" keys', () => {
  1217. testExecuteKey( 'enter', keyCodes.enter, issues );
  1218. testExecuteKey( 'tab', keyCodes.tab, issues );
  1219. testExecuteKey( 'space', keyCodes.space, issues );
  1220. } );
  1221. } );
  1222. } );
  1223. describe( 'custom list item (DOM Element)', () => {
  1224. const issues = [
  1225. { id: '@1002', title: 'Some bug in editor.' },
  1226. { id: '@1003', title: 'Introduce this feature.' },
  1227. { id: '@1004', title: 'Missing docs.' },
  1228. { id: '@1005', title: 'Another bug.' },
  1229. { id: '@1006', title: 'More bugs' }
  1230. ];
  1231. beforeEach( () => {
  1232. return createClassicTestEditor( {
  1233. feeds: [
  1234. {
  1235. marker: '@',
  1236. feed: feedText => {
  1237. return Promise.resolve( issues.filter( issue => issue.id.includes( feedText ) ) );
  1238. },
  1239. itemRenderer: item => {
  1240. const span = global.document.createElementNS( 'http://www.w3.org/1999/xhtml', 'span' );
  1241. span.innerHTML = `<span id="issue-${ item.id.slice( 1 ) }">@${ item.title }</span>`;
  1242. return span;
  1243. }
  1244. }
  1245. ]
  1246. } );
  1247. } );
  1248. it( 'should show panel for matched marker', () => {
  1249. setData( model, '<paragraph>foo []</paragraph>' );
  1250. model.change( writer => {
  1251. writer.insertText( '@', doc.selection.getFirstPosition() );
  1252. } );
  1253. return waitForDebounce()
  1254. .then( () => {
  1255. expect( panelView.isVisible ).to.be.true;
  1256. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  1257. expect( mentionsView.items ).to.have.length( 5 );
  1258. } );
  1259. } );
  1260. describe( 'keys', () => {
  1261. describe( 'on arrows', () => {
  1262. it( 'should cycle down on arrow down', () => {
  1263. setData( model, '<paragraph>foo []</paragraph>' );
  1264. model.change( writer => {
  1265. writer.insertText( '@', doc.selection.getFirstPosition() );
  1266. } );
  1267. return waitForDebounce()
  1268. .then( () => {
  1269. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  1270. const keyEvtData = {
  1271. keyCode: keyCodes.arrowdown,
  1272. preventDefault: sinon.spy(),
  1273. stopPropagation: sinon.spy()
  1274. };
  1275. fireKeyDownEvent( keyEvtData );
  1276. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  1277. fireKeyDownEvent( keyEvtData );
  1278. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  1279. fireKeyDownEvent( keyEvtData );
  1280. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  1281. fireKeyDownEvent( keyEvtData );
  1282. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  1283. fireKeyDownEvent( keyEvtData );
  1284. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  1285. } );
  1286. } );
  1287. it( 'should cycle up on arrow up', () => {
  1288. setData( model, '<paragraph>foo []</paragraph>' );
  1289. model.change( writer => {
  1290. writer.insertText( '@', doc.selection.getFirstPosition() );
  1291. } );
  1292. return waitForDebounce()
  1293. .then( () => {
  1294. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  1295. const keyEvtData = {
  1296. keyCode: keyCodes.arrowup,
  1297. preventDefault: sinon.spy(),
  1298. stopPropagation: sinon.spy()
  1299. };
  1300. fireKeyDownEvent( keyEvtData );
  1301. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  1302. fireKeyDownEvent( keyEvtData );
  1303. expectChildViewsIsOnState( [ false, false, false, true, false ] );
  1304. fireKeyDownEvent( keyEvtData );
  1305. expectChildViewsIsOnState( [ false, false, true, false, false ] );
  1306. fireKeyDownEvent( keyEvtData );
  1307. expectChildViewsIsOnState( [ false, true, false, false, false ] );
  1308. fireKeyDownEvent( keyEvtData );
  1309. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  1310. } );
  1311. } );
  1312. } );
  1313. describe( 'on "execute" keys', () => {
  1314. testExecuteKey( 'enter', keyCodes.enter, issues );
  1315. testExecuteKey( 'tab', keyCodes.tab, issues );
  1316. testExecuteKey( 'space', keyCodes.space, issues );
  1317. } );
  1318. describe( 'mouse', () => {
  1319. it( 'should execute selected button on mouse click', () => {
  1320. setData( model, '<paragraph>foo []</paragraph>' );
  1321. model.change( writer => {
  1322. writer.insertText( '@', doc.selection.getFirstPosition() );
  1323. } );
  1324. const command = editor.commands.get( 'mention' );
  1325. const spy = testUtils.sinon.spy( command, 'execute' );
  1326. return waitForDebounce()
  1327. .then( () => {
  1328. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  1329. const element = panelView.element.querySelector( '#issue-1004' );
  1330. element.dispatchEvent( new Event( 'click', { bubbles: true } ) );
  1331. sinon.assert.calledOnce( spy );
  1332. const commandOptions = spy.getCall( 0 ).args[ 0 ];
  1333. const item = issues[ 2 ];
  1334. expect( commandOptions ).to.have.property( 'mention' ).that.deep.equal( item );
  1335. expect( commandOptions ).to.have.property( 'marker', '@' );
  1336. expect( commandOptions ).to.have.property( 'range' );
  1337. const start = model.createPositionAt( doc.getRoot().getChild( 0 ), 4 );
  1338. const expectedRange = model.createRange( start, start.getShiftedBy( 1 ) );
  1339. expect( commandOptions.range.isEqual( expectedRange ) ).to.be.true;
  1340. } );
  1341. } );
  1342. } );
  1343. } );
  1344. } );
  1345. describe( 'multiple feeds configuration', () => {
  1346. beforeEach( () => {
  1347. return createClassicTestEditor( {
  1348. feeds: [
  1349. {
  1350. marker: '@',
  1351. feed: [ '@a1', '@a2', '@a3' ]
  1352. },
  1353. {
  1354. marker: '$',
  1355. feed: [ '$a1', '$a2', '$a3', '$a4', '$a5' ]
  1356. }
  1357. ]
  1358. } );
  1359. } );
  1360. it( 'should show panel for matched marker', () => {
  1361. setData( model, '<paragraph>foo []</paragraph>' );
  1362. model.change( writer => {
  1363. writer.insertText( '@', doc.selection.getFirstPosition() );
  1364. } );
  1365. return waitForDebounce()
  1366. .then( () => {
  1367. expect( panelView.isVisible ).to.be.true;
  1368. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  1369. expect( mentionsView.items ).to.have.length( 3 );
  1370. mentionsView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
  1371. } )
  1372. .then( waitForDebounce )
  1373. .then( () => {
  1374. expect( panelView.isVisible ).to.be.false;
  1375. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  1376. model.change( writer => {
  1377. writer.insertText( '$', doc.selection.getFirstPosition() );
  1378. } );
  1379. } )
  1380. .then( waitForDebounce )
  1381. .then( () => {
  1382. expect( panelView.isVisible ).to.be.true;
  1383. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  1384. expect( mentionsView.items ).to.have.length( 5 );
  1385. mentionsView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
  1386. } )
  1387. .then( waitForDebounce )
  1388. .then( () => {
  1389. expect( panelView.isVisible ).to.be.false;
  1390. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  1391. model.change( writer => {
  1392. writer.insertText( '@', doc.selection.getFirstPosition() );
  1393. } );
  1394. } )
  1395. .then( waitForDebounce )
  1396. .then( () => {
  1397. expect( panelView.isVisible ).to.be.true;
  1398. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  1399. expect( mentionsView.items ).to.have.length( 3 );
  1400. } );
  1401. } );
  1402. } );
  1403. function testExecuteKey( name, keyCode, feedItems ) {
  1404. it( 'should execute selected button on ' + name, () => {
  1405. setData( model, '<paragraph>foo []</paragraph>' );
  1406. model.change( writer => {
  1407. writer.insertText( '@', doc.selection.getFirstPosition() );
  1408. } );
  1409. const command = editor.commands.get( 'mention' );
  1410. const spy = testUtils.sinon.spy( command, 'execute' );
  1411. return waitForDebounce()
  1412. .then( () => {
  1413. expectChildViewsIsOnState( [ true, false, false, false, false ] );
  1414. fireKeyDownEvent( {
  1415. keyCode: keyCodes.arrowup,
  1416. preventDefault: sinon.spy(),
  1417. stopPropagation: sinon.spy()
  1418. } );
  1419. expectChildViewsIsOnState( [ false, false, false, false, true ] );
  1420. fireKeyDownEvent( {
  1421. keyCode,
  1422. preventDefault: sinon.spy(),
  1423. stopPropagation: sinon.spy()
  1424. } );
  1425. sinon.assert.calledOnce( spy );
  1426. assertCommandOptions( spy.getCall( 0 ).args[ 0 ], '@', feedItems[ 4 ] );
  1427. const start = model.createPositionAt( doc.getRoot().getChild( 0 ), 4 );
  1428. const expectedRange = model.createRange( start, start.getShiftedBy( 1 ) );
  1429. expect( spy.getCall( 0 ).args[ 0 ].range.isEqual( expectedRange ) ).to.be.true;
  1430. } );
  1431. } );
  1432. it( 'should do nothing if panel is not visible on ' + name, () => {
  1433. setData( model, '<paragraph>foo []</paragraph>' );
  1434. model.change( writer => {
  1435. writer.insertText( '@', doc.selection.getFirstPosition() );
  1436. } );
  1437. const command = editor.commands.get( 'mention' );
  1438. const spy = testUtils.sinon.spy( command, 'execute' );
  1439. return waitForDebounce()
  1440. .then( () => {
  1441. expect( panelView.isVisible ).to.be.true;
  1442. expect( editor.model.markers.has( 'mention' ) ).to.be.true;
  1443. fireKeyDownEvent( {
  1444. keyCode: keyCodes.esc,
  1445. preventDefault: sinon.spy(),
  1446. stopPropagation: sinon.spy()
  1447. } );
  1448. expect( panelView.isVisible ).to.be.false;
  1449. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  1450. fireKeyDownEvent( {
  1451. keyCode,
  1452. preventDefault: sinon.spy(),
  1453. stopPropagation: sinon.spy()
  1454. } );
  1455. sinon.assert.notCalled( spy );
  1456. expect( panelView.isVisible ).to.be.false;
  1457. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  1458. } );
  1459. } );
  1460. }
  1461. } );
  1462. describe( 'execute', () => {
  1463. beforeEach( () => createClassicTestEditor( staticConfig ) );
  1464. it( 'should call the mention command with proper options', () => {
  1465. setData( model, '<paragraph>foo []</paragraph>' );
  1466. model.change( writer => {
  1467. writer.insertText( '@', doc.selection.getFirstPosition() );
  1468. } );
  1469. const command = editor.commands.get( 'mention' );
  1470. const spy = testUtils.sinon.spy( command, 'execute' );
  1471. return waitForDebounce()
  1472. .then( () => {
  1473. mentionsView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
  1474. sinon.assert.calledOnce( spy );
  1475. const commandOptions = spy.getCall( 0 ).args[ 0 ];
  1476. assertCommandOptions( commandOptions, '@', { id: '@Barney', text: '@Barney' } );
  1477. const start = model.createPositionAt( doc.getRoot().getChild( 0 ), 4 );
  1478. const expectedRange = model.createRange( start, start.getShiftedBy( 1 ) );
  1479. expect( commandOptions.range.isEqual( expectedRange ) ).to.be.true;
  1480. } );
  1481. } );
  1482. it( 'should hide panel on execute', () => {
  1483. setData( model, '<paragraph>foo []</paragraph>' );
  1484. model.change( writer => {
  1485. writer.insertText( '@', doc.selection.getFirstPosition() );
  1486. } );
  1487. return waitForDebounce()
  1488. .then( () => {
  1489. mentionsView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
  1490. expect( panelView.isVisible ).to.be.false;
  1491. expect( editor.model.markers.has( 'mention' ) ).to.be.false;
  1492. } );
  1493. } );
  1494. it( 'should focus view after command execution', () => {
  1495. const focusSpy = testUtils.sinon.spy( editor.editing.view, 'focus' );
  1496. setData( model, '<paragraph>foo []</paragraph>' );
  1497. model.change( writer => {
  1498. writer.insertText( '@', doc.selection.getFirstPosition() );
  1499. } );
  1500. return waitForDebounce()
  1501. .then( () => {
  1502. mentionsView.items.get( 0 ).children.get( 0 ).fire( 'execute' );
  1503. sinon.assert.calledOnce( focusSpy );
  1504. } );
  1505. } );
  1506. } );
  1507. function createClassicTestEditor( mentionConfig ) {
  1508. return ClassicTestEditor
  1509. .create( editorElement, {
  1510. plugins: [ Paragraph, MentionEditing, MentionUI ],
  1511. mention: mentionConfig
  1512. } )
  1513. .then( newEditor => {
  1514. editor = newEditor;
  1515. model = editor.model;
  1516. doc = model.document;
  1517. editingView = editor.editing.view;
  1518. mentionUI = editor.plugins.get( MentionUI );
  1519. panelView = editor.plugins.get( ContextualBalloon ).view;
  1520. mentionsView = mentionUI._mentionsView;
  1521. } );
  1522. }
  1523. function wait( timeout ) {
  1524. return () => new Promise( resolve => {
  1525. setTimeout( () => {
  1526. resolve();
  1527. }, timeout );
  1528. } );
  1529. }
  1530. function waitForDebounce() {
  1531. return wait( 180 )();
  1532. }
  1533. function fireKeyDownEvent( options ) {
  1534. const eventInfo = new EventInfo( editingView.document, 'keydown' );
  1535. const eventData = new DomEventData( editingView.document, {
  1536. target: document.body
  1537. }, options );
  1538. editingView.document.fire( eventInfo, eventData );
  1539. }
  1540. function stubSelectionRects( rects ) {
  1541. const originalViewRangeToDom = editingView.domConverter.viewRangeToDom;
  1542. // Mock selection rect.
  1543. sinon.stub( editingView.domConverter, 'viewRangeToDom' ).callsFake( ( ...args ) => {
  1544. const domRange = originalViewRangeToDom.apply( editingView.domConverter, args );
  1545. sinon.stub( domRange, 'getClientRects' )
  1546. .returns( rects );
  1547. return domRange;
  1548. } );
  1549. }
  1550. function expectChildViewsIsOnState( expectedState ) {
  1551. const childViews = [ ...mentionsView.items ].map( item => item.children.get( 0 ) );
  1552. expect( childViews.map( child => child.isOn ) ).to.deep.equal( expectedState );
  1553. }
  1554. function assertCommandOptions( commandOptions, marker, item ) {
  1555. expect( commandOptions ).to.have.property( 'marker', marker );
  1556. expect( commandOptions ).to.have.property( 'range' );
  1557. expect( commandOptions ).to.have.property( 'mention' );
  1558. const mentionForCommand = commandOptions.mention;
  1559. for ( const key of Object.keys( item ) ) {
  1560. expect( mentionForCommand[ key ] ).to.equal( item[ key ] );
  1561. }
  1562. }
  1563. } );