|
|
@@ -6,11 +6,11 @@ category: features
|
|
|
|
|
|
# Mention
|
|
|
|
|
|
-The {@link module:mention/mention~Mention} feature brings support for smart autocompletion based on user input. When user types a pre-configured marker, such as `@` or `#`, they get an autocomplete suggestions in a panel displayed next to the caret. The selected suggestion is then inserted into the content.
|
|
|
+The {@link module:mention/mention~Mention} feature brings support for smart autocompletion based on user input. When a user types a pre-configured marker, such as `@` or `#`, they get autocomplete suggestions in a panel displayed next to the caret. The selected suggestion is then inserted into the content.
|
|
|
|
|
|
## Demo
|
|
|
|
|
|
-You can type `'@'` character to invoke mention autocomplete UI. The below demo is configured as static list of names.
|
|
|
+You can type `'@'` character to invoke mention autocomplete UI. The below demo is configured as a static list of names.
|
|
|
|
|
|
{@snippet features/mention}
|
|
|
|
|
|
@@ -51,15 +51,15 @@ Additionally, you can configure:
|
|
|
|
|
|
The {@link module:mention/mention~MentionFeed `feed`} can be provided as:
|
|
|
|
|
|
-* a static array — good for scenarios with relatively small set of autocomplete items.
|
|
|
+* a static array — good for scenarios with a relatively small set of autocomplete items.
|
|
|
* a callback — which provides more control over the returned list of items.
|
|
|
|
|
|
-When using a callback you can return a `Promise` that resolves with the list of {@link module:mention/mention~MentionFeedItem matching feed items}. Those can be simple stringsor plain objects with at least the `name` property. The other properties of this object can later be used e.g. when [customizing the autocomplete list](#customizing-the-autocomplete-list) or [customizing the output](#customizing-the-output).
|
|
|
+When using a callback you can return a `Promise` that resolves with the list of {@link module:mention/mention~MentionFeedItem matching feed items}. Those can be simple strings or plain objects with at least the `name` property. The other properties of this object can later be used e.g. when [customizing the autocomplete list](#customizing-the-autocomplete-list) or [customizing the output](#customizing-the-output).
|
|
|
|
|
|
<info-box>
|
|
|
When using external resources to obtain the feed it is recommended to add some caching mechanism so subsequent calls for the same suggestion would load faster.
|
|
|
|
|
|
- You can also consider adding the `minimumCharacters` option to the feed config so the editor will call the feed callback after a minimum characters typed instead of action on marker alone.
|
|
|
+ You can also consider adding the `minimumCharacters` option to the feed config so the editor will call the feed callback after minimum characters typed instead of action on marker alone.
|
|
|
</info-box>
|
|
|
|
|
|
The callback receives the query text which should be used to filter item suggestions. It should return a `Promise` and resolve it with an array of items that match to the feed text.
|
|
|
@@ -76,7 +76,7 @@ const items = [
|
|
|
function getFeedItems( queryText ) {
|
|
|
// As an example of an asynchronous action, let's return a promise
|
|
|
// that resolves after a 100ms timeout.
|
|
|
- // This can be a server request, or any sort of delayed action.
|
|
|
+ // This can be a server request or any sort of delayed action.
|
|
|
return new Promise( resolve => {
|
|
|
setTimeout( () => {
|
|
|
const itemsToDisplay = items
|
|
|
@@ -150,7 +150,7 @@ A full, working demo with all possible customizations and its source code is ava
|
|
|
|
|
|
### Customizing the output
|
|
|
|
|
|
-In order to change the markup generated by the editor for mentions you can overwrite the default converter of the mention feature. To do that, you must specify both {@link module:engine/conversion/upcastdispatcher~UpcastDispatcher upcast} and {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher downcast} converters.
|
|
|
+In order to change the markup generated by the editor for mentions, you can overwrite the default converter of the mention feature. To do that, you must specify both {@link module:engine/conversion/upcastdispatcher~UpcastDispatcher upcast} and {@link module:engine/conversion/downcastdispatcher~DowncastDispatcher downcast} converters.
|
|
|
|
|
|
The example below defined a plugin which overrides the default output:
|
|
|
|
|
|
@@ -331,7 +331,7 @@ const items = [
|
|
|
function getFeedItems( queryText ) {
|
|
|
// As an example of an asynchronous action, let's return a promise
|
|
|
// that resolves after a 100ms timeout.
|
|
|
- // This can be a server request, or any sort of delayed action.
|
|
|
+ // This can be a server request or any sort of delayed action.
|
|
|
return new Promise( resolve => {
|
|
|
setTimeout( () => {
|
|
|
resolve( items.filter( isItemMatching ) );
|