ProseMirror Plugins
The Kendo UI for Angular Editor component is based on the ProseMirror library. ProseMirror provides a set of tools and concepts for building rich text editors, using user interface inspired by what-you-see-is-what-you-get.
Concepts
The ProseMirror plugin system enables developers to create custom tools and functionality. One of the main building blocks of each editor is its EditorState object. The state is created through a static create method which takes a configuration object, containing the starting document node, the schema, and a collection of plugins which will be active in this state.
Plugins are instances of the Plugin class and can model a wide variety of features. The basic ones only add some properties to the editor view to respond to certain events, for example. More complicated features may add a new state to the editor and update it based on transactions.
For further details about the ProseMirror plugins, refer to the this ProseMirror guide.
Custom Plugins
Following the ProseMirror concepts, the Kendo UI for Angular Editor provides a set of built-in plugins, enabling various functionalities, such as history, key bindings, a placeholder, and also allows you to extend and customize its functionality and features by using custom plugins.
To provide custom plugins, bind the Editor plugins option to a callback which exposes the default set of plugins, and returns a new Plugin array.
@Component({
selector: 'my-app',
template: `
<kendo-editor [plugins]="myPlugins"></kendo-editor>
`
export class AppComponent {
public myPlugins = (args: Plugin[]) => [...args, this.myPlugin];
private myPlugin = new Plugin({
// The plugin configuration object.
});
}You can set custom plugins only once—upon the initialization of the Editor component. Further changes will not be reflected and the Editor will continue to use the initially provided plugins.
Paragraph Marker Tool
To create a custom tool that toggles paragraph markers in the Editor, use:
- The Decoration plugin of the ProseMirror.
- Custom CSS styles for the marker.
The following example demonstrates how to display a paragraph marker by utilizing the Decoration plugin.
Popup Tools
You can implement a plugin that shows a popup which contains additional tools or supplementary information based on the user selection.
The following example demonstrates how to show a search icon above the Editor selection and perform a Google search with the selected text when clicking the icon.
Input Rules
Input rules provide an option for modifying the input of the user on the fly and represent pairs of matches and corresponding actions. When the user input matches an input rule, the typed text is transformed based on the action of that rule.
For more details about the ProseMirror InputRule class and its properties and utility functions, refer to the official ProseMirror documentation.
The following example demonstrates how to implement input rules which transform markdown statements, followed by space ("␣"), into their respective HTML alternatives. For example, typing '##' and pressing space will yield an <h2> tag in the Editor value.
The example uses the following input rules:
- Converts "- " or "+ " to a bullet list.
- Converts "1. " or another number to an ordered list.
- Converts "# ", "## ", "### ", "#### ", "##### ", "###### " into heading 1, 2, 3, 4, 5, and 6, according to the "#" characters count.
- Converts three backticks ("```") to a code block.
- Converts double dashes to an emdash ("—").
- Converts three dots to an ellipsis ("...")character.