📱 Widget Node

    When editing content in the editor, you may want to show the suggestion popup at the current cursor position. At this time, the addWidget API can be used to float the DOM node that is desired on the editor. This node does not affect other contents being edited, and is temporarily added. In other words, if you enter text or change focus, it disappears. The API signature is as follows.

    When the above code is executed, a popup node is added as shown below.

    We looked at how to temporarily add popup widget node depending on specific case. Then what can you do if you want to add a mention node by clicking on a specific item in the popup widget? Because Markdown Editor is a text-based editor, such mention node cannot be added. In addition, WYSIWYG editor does not support the mention node internally as well, so it cannot be added. The editor provides a option for users who want to add inline widget node such as mention node. If the text conforms to the rules set for the widgetRules option, the node is rendered as an inline widget node in the editor. Inline widget node is inserted into the editor as content unlike popup widget, affecting the position of other nodes.

    As shown in the example code, widgetRules has each rule in an array format, and each rule consists of rule and toDOM properties.

    • toDOM: Defines the DOM node of the widget node to be rendered.

    When text matches to the rules of widgetRules is entered, it is replaced by an inline widget node as shown in the image below.

    , replaceSelection() API

    You can replace it with an inline widget node by typing text that matches the widget rules directly, but most of the time you want to insert an inline widget node, such as a mention node, by clicking on a specific item in a popup widget.

    In such cases, inserText() and replaceSelection() APIs can be used to insert an inline widget node when an item in a popup widget is clicked.

    In the example code, the position calculated based on the current cursor position through getSelection() API was passed to replaceSelection() API because @ character should be replaced with widget node. As a result, you can see the @ character replaced by an inline widget node when you click an item in the popup widget as shown in the image below.