mentionui.js 52 KB

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