mentionui.js 53 KB

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