🔩 Custom Block Node And HTML Node

The editor provides the option that can be customized when converting Markdown Abstract Syntax Tree(AST) to HTML text. Using customHTMLRenderer option, rendering results of nodes supported by CommonMark or GFM can be customized like table and heading. Custom block nodes can also be defined using this customHTMLRenderer option.

The following code defines a custom block node that renders math typesetting using KaTeX, a library that supports LaTex syntax.

The latex function property was written in the customHTMLRenderer option, which returns HTML to be rendered in token format. It is easy to use because it configures options in almost the same form as when customizing a markdown node. The code above is rendered in the Markdown Editor as follows.

As you can see in the image above, in order to use a custom block node in a markdown editor, text must be entered within a block enclosed by the symbol. Blocks wrapped with symbols are parsed from editor to custom block nodes. In addition, to indicate which custom block node it is, the node name defined by the customHTMLRenderer option must be written next to the $$ symbol.

In WYSIWYG Editor, the custom block node is rendered in the same result as a markdown preview, and can be changed by clicking on the node and using the edit button that appears when selected. Because the custom block node are eventually parsed based on specific text, editing in the WYSIWYG Editor is also based on text. This operation is different from general WYSIWYG editors, but it is more ideal because the TOAST UI Editor supports WYSIWYG editors based on markdown.

HTML Node

CommonMark uses < and > characters to write nodes that are not supported by default in HTML text. ()

Because Markdown Editor also follows these specifications, HTML text are rendered correctly in the Markdown preview.

WYSIWYG

The iframe node in the example image above is not a node supported by WYSIWYG Editor. Therefore, if you want to use iframe node in WYSIWYG Editor, you need to set it up using customHTMLRenderer option.

HTML nodes are defined in the customHTMLRenderer.htmlBlock property. To distinguish it from the custom block nodes described above, it should be configured within the htmlBlock property. If you run the example code, node will be rendered correctly in WYSIWYG as shown in the image below.

If you want to use an inline HTML node, it should be configured in the customHTMLRenderer.htmlInline property.