Browse Source

Merge pull request #88 from ckeditor/t/ckeditor5/2042

Docs: Added missing imports to the chat with mentions guide
Kacper Tomporowski 6 years ago
parent
commit
3a3d7801d4

+ 0 - 1
packages/ckeditor5-mention/README.md

@@ -1,7 +1,6 @@
 CKEditor 5 mention feature
 ===========================
 
-[![Join the chat at https://gitter.im/ckeditor/ckeditor5](https://badges.gitter.im/ckeditor/ckeditor5.svg)](https://gitter.im/ckeditor/ckeditor5?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-mention.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-mention)
 [![Build Status](https://travis-ci.org/ckeditor/ckeditor5-mention.svg?branch=master)](https://travis-ci.org/ckeditor/ckeditor5-mention)
 [![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5-mention/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5-mention?branch=master)

+ 1 - 1
packages/ckeditor5-mention/docs/api/mention.md

@@ -30,5 +30,5 @@ The source code of this package is available on GitHub in https://github.com/cke
 
 * [`@ckeditor/ckeditor5-mention` on npm](https://www.npmjs.com/package/@ckeditor/ckeditor5-mention)
 * [`ckeditor/ckeditor5-mention` on GitHub](https://github.com/ckeditor/ckeditor5-mention)
-* [Issue tracker](https://github.com/ckeditor/ckeditor5-mention/issues)
+* [Issue tracker](https://github.com/ckeditor/ckeditor5/issues)
 * [Changelog](https://github.com/ckeditor/ckeditor5-mention/blob/master/CHANGELOG.md)

+ 7 - 2
packages/ckeditor5-mention/docs/examples/chat-with-mentions.md

@@ -184,14 +184,19 @@ The HTML code of the application is listed below:
 JavaScript code required to run the editor:
 
 ```js
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/ckeditor';
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
+import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
 import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
 import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
 import Mention from '@ckeditor/ckeditor5-mention/src/mention';
+import Link from '@ckeditor/ckeditor5-link/src/link';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 
 ClassicEditor
 	.create( document.querySelector( '.chat__editor' ), {
-		extraPlugins: [ Mention, MentionLinks, Underline, Strikethrough ],
+		extraPlugins: [ Essentials, Paragraph, Mention, MentionLinks, Bold, Italic, Underline, Strikethrough, Link ],
 		toolbar: {
 			items: [
 				'bold', 'italic', 'underline', 'strikethrough', '|', 'link', '|', 'undo', 'redo'

+ 1 - 1
packages/ckeditor5-mention/src/mention.js

@@ -156,7 +156,7 @@ export default class Mention extends Plugin {
  * @property {String} [marker] The character which triggers autocompletion for mention. It must be a single character.
  * @property {Array.<module:mention/mention~MentionFeedItem>|Function} feed Autocomplete items. Provide an array for
  * a static configuration (the mention feature will show matching items automatically) or a function which returns an array of
- * matching items (directly, or via a promise).
+ * matching items (directly, or via a promise). If a function is passed, it is executed in the context of the editor instance.
  * @property {Number} [minimumCharacters=0] Specifies after how many characters the autocomplete panel should be shown.
  * @property {Function} [itemRenderer] A function that renders a {@link module:mention/mention~MentionFeedItem}
  * to the autocomplete panel.

+ 1 - 1
packages/ckeditor5-mention/src/mentionui.js

@@ -135,7 +135,7 @@ export default class MentionUI extends Plugin {
 			}
 
 			const minimumCharacters = mentionDescription.minimumCharacters || 0;
-			const feedCallback = typeof feed == 'function' ? feed : createFeedCallback( feed );
+			const feedCallback = typeof feed == 'function' ? feed.bind( this.editor ) : createFeedCallback( feed );
 			const watcher = this._setupTextWatcherForFeed( marker, minimumCharacters );
 			const itemRenderer = mentionDescription.itemRenderer;
 

+ 31 - 0
packages/ckeditor5-mention/tests/mentionui.js

@@ -852,6 +852,37 @@ describe( 'MentionUI', () => {
 			} );
 		} );
 
+		describe( 'callback function using data from editor', () => {
+			beforeEach( () => {
+				return createClassicTestEditor( {
+					feeds: [
+						{
+							marker: '#',
+							feed() {
+								expect( this ).to.equal( editor );
+								return Promise.resolve( [ 'foo', 'bar' ] );
+							}
+						}
+					]
+				} );
+			} );
+
+			it( 'should bind the instance panel for matched marker', () => {
+				setData( model, '<paragraph>foo []</paragraph>' );
+
+				model.change( writer => {
+					writer.insertText( '#', doc.selection.getFirstPosition() );
+				} );
+
+				return waitForDebounce()
+					.then( () => {
+						expect( panelView.isVisible ).to.be.true;
+						expect( editor.model.markers.has( 'mention' ) ).to.be.true;
+						expect( mentionsView.items ).to.have.length( 2 );
+					} );
+			} );
+		} );
+
 		describe( 'asynchronous list with custom trigger', () => {
 			beforeEach( () => {
 				const issuesNumbers = [ '#100', '#101', '#102', '#103' ];