8
0

mentionui.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module mention/mentionui
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import mix from '@ckeditor/ckeditor5-utils/src/mix';
  10. import EmitterMixin from '@ckeditor/ckeditor5-utils/src/emittermixin';
  11. import View from '@ckeditor/ckeditor5-ui/src/view';
  12. import ListView from '@ckeditor/ckeditor5-ui/src/list/listview';
  13. import ListItemView from '@ckeditor/ckeditor5-ui/src/list/listitemview';
  14. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  15. import Collection from '@ckeditor/ckeditor5-utils/src/collection';
  16. import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
  17. import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
  18. /**
  19. * The mention ui feature.
  20. *
  21. * @extends module:core/plugin~Plugin
  22. */
  23. export default class MentionUI extends Plugin {
  24. /**
  25. * @inheritDoc
  26. */
  27. static get pluginName() {
  28. return 'MentionUI';
  29. }
  30. /**
  31. * @inheritDoc
  32. */
  33. init() {
  34. const editor = this.editor;
  35. this.panelView = new BalloonPanelView( editor.locale );
  36. this.panelView.withArrow = false;
  37. this.panelView.render();
  38. this.editor.ui.view.body.add( this.panelView );
  39. const mentionView = new MentionsView( editor.locale );
  40. const items = new Collection();
  41. this.panelView.content.add( mentionView );
  42. mentionView.listView.items.bindTo( items ).using( item => {
  43. const { label } = item;
  44. const listItemView = new ListItemView( editor.locale );
  45. const buttonView = new ButtonView( editor.locale );
  46. buttonView.label = label;
  47. buttonView.withText = true;
  48. buttonView.item = item;
  49. listItemView.children.add( buttonView );
  50. buttonView.delegate( 'execute' ).to( mentionView );
  51. return listItemView;
  52. } );
  53. const regExp = / (@)([\w]*?)$/;
  54. const watcher = new TextWatcher( editor, testCallback );
  55. mentionView.on( 'execute', evt => {
  56. const label = evt.source.label;
  57. const text = watcher.last;
  58. if ( !text ) {
  59. return;
  60. }
  61. const matched = getMatchedText( text );
  62. const end = editor.model.createPositionAt( editor.model.document.selection.focus );
  63. const start = end.getShiftedBy( -( 1 + matched.feedText.length ) );
  64. const range = editor.model.createRange( start, end );
  65. editor.execute( 'mention', {
  66. mention: label,
  67. marker: '@',
  68. range
  69. } );
  70. this._hideForm();
  71. } );
  72. function testCallback( text ) {
  73. return regExp.test( text );
  74. }
  75. function getMatchedText( text ) {
  76. const match = text.match( regExp );
  77. const marker = match[ 1 ];
  78. const feedText = match[ 2 ];
  79. return { marker, feedText };
  80. }
  81. watcher.on( 'matched', ( evt, data ) => {
  82. const text = data.text;
  83. const matched = getMatchedText( text );
  84. items.clear();
  85. const feed = [ 'Jodator', 'Foo', 'Bar' ];
  86. const strings = feed.filter( item => {
  87. return item.toLowerCase().startsWith( matched.feedText.toLowerCase() );
  88. } );
  89. for ( const item of strings ) {
  90. items.add( { label: item } );
  91. }
  92. if ( items.length ) {
  93. this._showForm();
  94. } else {
  95. this._hideForm();
  96. }
  97. } );
  98. watcher.on( 'unmatched', () => {
  99. this._hideForm();
  100. } );
  101. }
  102. _showForm() {
  103. if ( this._isVisible ) {
  104. // return;
  105. }
  106. // Pin the panel to an element with the "target" id DOM.
  107. this.panelView.pin( this._getBalloonPositionData() );
  108. this.panelView.show();
  109. }
  110. // TODO copied from balloontoolbar
  111. _getBalloonPositionData() {
  112. const editor = this.editor;
  113. const view = editor.editing.view;
  114. const viewDocument = view.document;
  115. const viewSelection = viewDocument.selection;
  116. return {
  117. // Because the target for BalloonPanelView is a Rect (not DOMRange), it's geometry will stay fixed
  118. // as the window scrolls. To let the BalloonPanelView follow such Rect, is must be continuously
  119. // computed and hence, the target is defined as a function instead of a static value.
  120. // https://github.com/ckeditor/ckeditor5-ui/issues/195
  121. target: () => {
  122. const range = viewSelection.getLastRange();
  123. const rangeRects = Rect.getDomRangeRects( view.domConverter.viewRangeToDom( range ) );
  124. // Select the proper range rect depending on the direction of the selection.
  125. if ( rangeRects.length > 1 && rangeRects[ rangeRects.length - 1 ].width === 0 ) {
  126. rangeRects.pop();
  127. }
  128. return rangeRects[ rangeRects.length - 1 ];
  129. },
  130. positions: getBalloonPositions()
  131. };
  132. }
  133. _hideForm() {
  134. this.panelView.hide();
  135. }
  136. }
  137. // Returns whole text from parent element by adding all data from text nodes together.
  138. //
  139. // @private
  140. // @param {module:engine/model/element~Element} element
  141. // @returns {String}
  142. function getText( element ) {
  143. return Array.from( element.getChildren() ).reduce( ( a, b ) => a + b.data, '' );
  144. }
  145. class TextWatcher {
  146. constructor( editor, callbackOrRegex ) {
  147. this.editor = editor;
  148. this.testCallback = callbackOrRegex;
  149. this.hasMatch = false;
  150. this._startListening();
  151. }
  152. get last() {
  153. return this._getText();
  154. }
  155. _startListening() {
  156. const editor = this.editor;
  157. editor.model.document.on( 'change', ( evt, batch ) => {
  158. if ( batch.type == 'transparent' ) {
  159. return;
  160. }
  161. const changes = Array.from( editor.model.document.differ.getChanges() );
  162. const entry = changes[ 0 ];
  163. // Typing is represented by only a single change.
  164. if ( changes.length != 1 || entry.name != '$text' || entry.length != 1 ) {
  165. return undefined;
  166. }
  167. const text = this._getText();
  168. const textHasMatch = this.testCallback( text );
  169. if ( !textHasMatch && this.hasMatch ) {
  170. this.fire( 'unmatched' );
  171. }
  172. this.hasMatch = textHasMatch;
  173. if ( textHasMatch ) {
  174. this.fire( 'matched', { text } );
  175. }
  176. } );
  177. }
  178. _getText() {
  179. const editor = this.editor;
  180. const selection = editor.model.document.selection;
  181. // Do nothing if selection is not collapsed.
  182. if ( !selection.isCollapsed ) {
  183. return undefined;
  184. }
  185. const block = selection.focus.parent;
  186. return getText( block ).slice( 0, selection.focus.offset );
  187. }
  188. }
  189. mix( TextWatcher, EmitterMixin );
  190. class MentionsView extends View {
  191. constructor( locale ) {
  192. super( locale );
  193. this.listView = new ListView( locale );
  194. this.setTemplate( {
  195. tag: 'div',
  196. attributes: {
  197. class: [
  198. 'ck',
  199. 'ck-mention'
  200. ],
  201. tabindex: '-1'
  202. },
  203. children: [
  204. this.listView
  205. ]
  206. } );
  207. }
  208. }
  209. function getBalloonPositions() {
  210. const defaultPositions = BalloonPanelView.defaultPositions;
  211. return [
  212. defaultPositions.northArrowSouthWest,
  213. defaultPositions.southArrowNorthWest
  214. ];
  215. }