mentionui.js 67 KB

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