Tiptap based rich text editor
After installation import package styles at the root of your application:
The @mantine/tiptap package provides a UI for Tiptap . The RichTextEditor component works with the Editor instance of tiptap. This means that you have full control over the editor state and configuration with the useEditor hook .
In other words, the RichTextEditor component does not manage state for you; controls just execute operations on the Editor instance. If you want to implement something that is related to state or component value (for example, controlled mode, value transforms to HTML/Markdown), you should look for documentation on the tiptap.dev website.
variant="subtle" removes borders from the control groups, makes controls larger, and reduces spacing of the toolbar:
To control the editor state, create a wrapper component and pass the onChange handler to the useEditor hook:
Some controls require installation of additional Tiptap extensions . For example, if you want to use RichTextEditor.Superscript control, you will need to install @tiptap/extension-superscript package:
Included with @tiptap/starter-kit (should be installed by default):
Controls that require @tiptap/extension-text-align extension:
Controls that require @tiptap/extension-color and @tiptap/extension-text-style extensions:
Other controls with required extensions:
To use a placeholder, you will need to install the @tiptap/extension-placeholder package:
The @mantine/tiptap package provides a custom Link extension that is required to be used instead of @tiptap/extension-link in order for the Ctrl + K keyboard shortcut to work:
To use text color, you will need to install additional packages:
You can use the following controls to change text color:
To use code highlighting, you will need to install additional packages:
You can use the following control to see and edit the source code of editor content:
To use tasks, you will need to install additional packages:
To add tables support, install the Tiptap table extension and register it with the editor. TableKit bundles all required node extensions ( Table , TableRow , TableHeader and TableCell ) in one package:
RichTextEditor provides the following table controls. All of them are disabled when the table extension is not installed, and every control except RichTextEditor.TableInsert is additionally disabled while the cursor is not inside a table:
To add collapsible sections ( <details> / <summary> ), install the Tiptap details extension and register all three nodes it provides – Details , DetailsSummary and DetailsContent :
RichTextEditor.Details toggles a collapsible section: it wraps the current block in a details node, or removes the details node when the cursor is already inside one. The control is automatically disabled when the details extension is not installed.
To display formatting marks – spaces, paragraph breaks and hard breaks – install the Tiptap invisible characters extension and register it. Set visible: false to hide the marks until the control is toggled:
RichTextEditor.InvisibleCharacters toggles the visibility of formatting marks. The control reflects the current visibility as its active state and is automatically disabled when the extension is not installed.
Tiptap wraps the content of some nodes in a <p> element by default, producing markup like <td><p>Text</p></td> for table cells or <li><p>Text</p></li> for list items. This is defined by the node schema ( content: 'block+' for table cells, content: 'paragraph block*' for list items), not by @mantine/tiptap – the editor only renders the markup that the schema produces.
If you prefer the text to be placed directly in the node, override its content to inline* by extending the corresponding extension. For table cells:
inline* content restricts these nodes to inline content only: they can no longer contain multiple paragraphs, blockquotes or other block nodes. Keep the default block content unless you specifically need single-line inline nodes.
The same technique applies to list items ( ListItem.extend({ content: 'inline*' }) ), but be careful: inline* list items cannot hold a nested list, so list nesting breaks – the Tab shortcut and indent controls (like RichTextEditor.TaskListSink ) will throw a TransformError . Only remove the wrapper from lists when you also disable nesting (for example, remove the list keyboard shortcuts and do not render indent controls).
By default, RichTextEditor renders content with Typography and some additional styles. You can disable these styles by setting withTypographyStyles={false} :
Then you will be able to add your own styles either with global styles or with Styles API :
You can use the BubbleMenu component with any RichTextEditor controls. The bubble menu will appear near a selection of text:
You can use the FloatingMenu component with any RichTextEditor controls. The floating menu will appear in an empty line:
Set the sticky prop on the RichTextEditor.Toolbar component to make the toolbar sticky; control the top property with stickyOffset . For example, on the mantine.dev documentation website there is a header with var(--docs-header-height) height. In this case, we will need to set stickyOffset="var(--docs-header-height)" to make the sticky position work correctly with the fixed positioned element.
Use the useRichTextEditorContext hook to get the Editor from the context. This hook can be used to create a custom control or run any operations supported by the Tiptap editor API .
Use the RichTextEditor.Control component to create custom controls. It supports all props supported by the button element and has an active prop to indicate active state. Note that you will need to set the aria-label attribute to make the control visible for screen readers.
You can change the icon of a control by setting the icon prop. It accepts a component that must handle the size prop:
RichTextEditor supports changing labels for all controls with the labels prop:
Most labels are used to add aria-label and title attributes to controls; some of the labels can be a function that returns a string. If you do not provide all labels, they will be merged with the default labels.
All available labels:
Default labels (can be imported from @mantine/tiptap package):