8
0

mentionui.js 61 KB

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