Integrating ProseMirror Mentions Plugin in Editor
Environment
| Product | Progress® Kendo UI® for Angular Editor |
Description
How can I use @mentions and #hashtags inside Kendo UI for Editor component?
This Knowledge Base article also answers the following questions:
- How to implement a custom plugin that allows mentions and hashtags in the Kendo UI for Angular Editor?
- How to customize the appearance of the mentions dropdown list?
- How to handle mentions and hashtags in the Editor content?
Solution
You can use the proseMirror-mentions plugin to provide a @mentions and #hashtags functionality for the Kendo UI for Angular Editor component. To implement the feature, you need to customize and integrate the built-in ProseMirror Schema and ProseMirror Plugins.
When you integrate the solution in your project, you would need to create a file named prosemirror-mentions.d.ts in the src folder of your project. The file should contain the following code:
declare module 'prosemirror-mentions';This file is required to avoid TypeScript errors when you import the prosemirror-mentions plugin in your project.
Additionally, for proper dynamic positioning of the mentions list, you need to set the iframe property of the Editor to false. This ensures that the mentions dropdown can be positioned correctly relative to the editor content.
<kendo-editor [iframe]="false">
</kendo-editor>The following example demonstrates how to integrate the proseMirror-mention plugin in Editor.