Rich Text Editor

NOTE: All editors have a default max-width of "md". Use our Max Width global prop to override this default, as necessary.

Default


Advanced Default


The advanced variant leverages Tiptap to unlock additional UI options (e.g., consolidated nav toolbar, styling, etc.) as well as several extensions (see Tiptap docs for more). To leverage this variant, Tiptap must be installed in your project. Complete docs for using the library can be found here. To get started with this variant, see the Code Example below for required imports as well as the basic setup.

NOTE: Once the Tiptap editor is initialized as shown below, you must pass that instance to the kit via the advancedEditor prop.

Advanced (Extra Extensions)


This variant allows you to optionally include any of Tiptap’s 53 extensions within any advanced editor by using the extensions prop.

NOTE: In order to leverage this prop, you must install the extension you need in your project, import it and pass it to the extensions array as shown in this example with the HorizontalRule and the Highlight extensions.

In order to add the extension to the editor toolbar, create an array of objects (as shown in the ExtensionsList array in the example below). Each object in this array should include:

icon: the icon to display within the toolbar dropdown (any Fontawesome icons can be used)
isActive: sets the extension to active within the dropdown, when applicable
text: the label within the toolbar dropdown
onclick: initializes the extension when it’s clicked within the dropdown (snytax varies with extension, see Tiptap's docs for more information)

This array can then be passed to the extensions prop and all extensions in the array will be rendered in the ellipsis dropdown.

Advanced (Toolbar disabled)


Because our default variant's toolbar requires Tiptap's StarterKit which may include features that are not relevant to your project or even block some custom extensions, optionally setting advancedEditorToolbar to false creates an editor without a toolbar, using only the minimum requirements.

NOTE: Omitting the Starter Kit requires that the editor’s default extensions (document, paragraph, and text) must be imported directly from Tiptap or as a custom extensions.

Simple


Attributes


Focus


Sticky


Templates


Toolbar Bottom


Inline


Preview



Available Props