ContextQMD
Back to Mantine

Tiptap

apps/mantine.dev/src/pages/x/tiptap.mdx

9.6.020.0 KB
Original Source

import { TipTapDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.TipTap);

Installation

Install with yarn:

<InstallScript packages="@mantine/tiptap @mantine/core @mantine/hooks @tiptap/react @tiptap/pm @tiptap/extension-link @tiptap/starter-kit" />

After installation import package styles at the root of your application:

tsx
import '@mantine/core/styles.css';
// ‼️ import tiptap styles after core package styles
import '@mantine/tiptap/styles.css';

TipTap editor

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.

Usage

<Demo data={TipTapDemos.usage} />

Subtle variant

variant="subtle" removes borders from the control groups, makes controls larger, and reduces spacing of the toolbar:

<Demo data={TipTapDemos.subtleVariant} />

Controlled

To control the editor state, create a wrapper component and pass the onChange handler to the useEditor hook:

tsx
import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { RichTextEditor as MantineRichTextEditor } from '@mantine/tiptap';

interface RichTextEditorProps {
  value: string;
  onChange: (value: string) => void;
}

export function RichTextEditor({
  value,
  onChange,
}: RichTextEditorProps) {
  const editor = useEditor({
    extensions: [StarterKit],
    content: value,
    onUpdate: ({ editor }) => {
      onChange(editor.getHTML());
    },
  });

  return (
    <MantineRichTextEditor editor={editor}>
      <MantineRichTextEditor.Toolbar>
        <MantineRichTextEditor.ControlsGroup>
          <MantineRichTextEditor.Bold />
          <MantineRichTextEditor.Italic />
        </MantineRichTextEditor.ControlsGroup>
      </MantineRichTextEditor.Toolbar>

      <MantineRichTextEditor.Content />
    </MantineRichTextEditor>
  );
}

Controls and extensions

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:

<InstallScript packages="@tiptap/extension-superscript" />

Included with @tiptap/starter-kit (should be installed by default):

  • RichTextEditor.H1
  • RichTextEditor.H2
  • RichTextEditor.H3
  • RichTextEditor.H4
  • RichTextEditor.H5
  • RichTextEditor.H6
  • RichTextEditor.BulletList
  • RichTextEditor.OrderedList
  • RichTextEditor.Bold
  • RichTextEditor.Italic
  • RichTextEditor.Strikethrough
  • RichTextEditor.ClearFormatting
  • RichTextEditor.Blockquote
  • RichTextEditor.Code
  • RichTextEditor.CodeBlock
  • RichTextEditor.Hr
  • RichTextEditor.Undo
  • RichTextEditor.Redo
  • RichTextEditor.Underline
  • RichTextEditor.Unlink

Controls that require @tiptap/extension-text-align extension:

  • RichTextEditor.AlignLeft
  • RichTextEditor.AlignRight
  • RichTextEditor.AlignCenter
  • RichTextEditor.AlignJustify

Controls that require @tiptap/extension-color and @tiptap/extension-text-style extensions:

  • RichTextEditor.ColorPicker
  • RichTextEditor.Color
  • RichTextEditor.UnsetColor

Other controls with required extensions:

Placeholder

To use a placeholder, you will need to install the @tiptap/extension-placeholder package:

<InstallScript packages="@tiptap/extension-placeholder" /> <Demo data={TipTapDemos.placeholder} />

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:

tsx
// Use Link extension exported from the @mantine/tiptap package
import { useEditor } from '@tiptap/react';
import { Link, RichTextEditor } from '@mantine/tiptap';

function Demo() {
  const editor = useEditor({
    extensions: [
      Link,
      // ... other extensions
    ],
  });

  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

Text color

To use text color, you will need to install additional packages:

<InstallScript packages="@tiptap/extension-color @tiptap/extension-text-style" />

You can use the following controls to change text color:

  • RichTextEditor.ColorPicker – allows you to pick colors from given predefined color swatches and with the ColorPicker component
  • RichTextEditor.Color – allows you to apply a given color with one click
  • RichTextEditor.UnsetColor – clears color styles
<Demo data={TipTapDemos.colors} />

Code highlight

To use code highlighting, you will need to install additional packages:

<InstallScript packages="lowlight @tiptap/extension-code-block-lowlight" /> <Demo data={TipTapDemos.codeHighlight} />

Source code mode

You can use the following control to see and edit the source code of editor content:

  • RichTextEditor.SourceCode – allows switching on/off source code mode
<Demo data={TipTapDemos.sourceCodeSwitcher} />

Tasks

To use tasks, you will need to install additional packages:

<InstallScript packages="@tiptap/extension-task-item @tiptap/extension-task-list" /> <Demo data={TipTapDemos.tasks} />

Table

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:

<InstallScript packages="@tiptap/extension-table" /> <Demo data={TipTapDemos.table} />

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:

  • RichTextEditor.TableInsert – inserts a table, opens a grid to pick its size. Enabled outside of a table, since that is where a new table is inserted. Supports maxColumns, maxRows, withHeaderRow and popoverProps props.
  • RichTextEditor.TableDelete – deletes the entire table
  • RichTextEditor.TableColumnBefore / RichTextEditor.TableColumnAfter – add a column before/after
  • RichTextEditor.TableColumnDelete – deletes the current column
  • RichTextEditor.TableRowBefore / RichTextEditor.TableRowAfter – add a row before/after
  • RichTextEditor.TableRowDelete – deletes the current row
  • RichTextEditor.TableToggleHeaderRow / RichTextEditor.TableToggleHeaderColumn – toggle header row/column
  • RichTextEditor.TableMergeCells / RichTextEditor.TableSplitCell – merge selected cells / split a merged cell

Details

To add collapsible sections (<details>/<summary>), install the Tiptap details extension and register all three nodes it provides – Details, DetailsSummary and DetailsContent:

<InstallScript packages="@tiptap/extension-details" /> <Demo data={TipTapDemos.details} />

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.

Invisible characters

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:

<InstallScript packages="@tiptap/extension-invisible-characters" /> <Demo data={TipTapDemos.invisibleCharacters} />

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.

Removing the paragraph wrapper

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:

tsx
import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { TableKit, TableCell, TableHeader } from '@tiptap/extension-table';

const editor = useEditor({
  extensions: [
    StarterKit,
    TableKit.configure({ tableCell: false, tableHeader: false }),
    TableCell.extend({ content: 'inline*' }),
    TableHeader.extend({ content: 'inline*' }),
  ],
});
// → <td>Text</td> instead of <td><p>Text</p></td>

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 <kbd>Tab</kbd> 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).

Typography styles

By default, RichTextEditor renders content with Typography and some additional styles. You can disable these styles by setting withTypographyStyles={false}:

tsx
import { useEditor } from '@tiptap/react';
import { RichTextEditor } from '@mantine/tiptap';

function Demo() {
  const editor = useEditor({
    extensions: [
      // ... your extensions
    ],
  });

  return (
    <RichTextEditor editor={editor} withTypographyStyles={false}>
      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

Then you will be able to add your own styles either with global styles or with Styles API:

<Demo data={TipTapDemos.typographyStyles} />

Bubble menu

You can use the BubbleMenu component with any RichTextEditor controls. The bubble menu will appear near a selection of text:

<Demo data={TipTapDemos.bubbleMenu} />

Floating menu

You can use the FloatingMenu component with any RichTextEditor controls. The floating menu will appear in an empty line:

<Demo data={TipTapDemos.floatingMenu} />

Sticky toolbar

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.

<Demo data={TipTapDemos.usage} demoProps={{ toggle: true }} />

Editor context

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.

tsx
import { Button } from '@mantine/core';
import { useRichTextEditorContext } from '@mantine/tiptap';

function Demo() {
  const { editor } = useRichTextEditorContext();
  return (
    <Button
      onClick={() => editor?.chain().focus().toggleBold().run()}
    >
      Make bold
    </Button>
  );
}

Custom controls

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.

<Demo data={TipTapDemos.customControl} />

Change icons

You can change the icon of a control by setting the icon prop. It accepts a component that must handle the size prop:

<Demo data={TipTapDemos.icons} />

Labels and localization

RichTextEditor supports changing labels for all controls with the labels prop:

tsx
import { useEditor } from '@tiptap/react';
import { RichTextEditor } from '@mantine/tiptap';

function Demo() {
  const editor = useEditor({
    extensions: [
      // ... your extensions
    ],
  });

  return (
    <RichTextEditor
      editor={editor}
      labels={{
        boldControlLabel: 'Make text bold',
        italicControlLabel: 'Make text bold',
        // ...other labels
      }}
    >
      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

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:

tsx
// RichTextEditorLabels type can be imported from @mantine/tiptap package
export interface RichTextEditorLabels {
  /** RichTextEditor.Bold control aria-label */
  boldControlLabel: string;

  /** RichTextEditor.Hr control aria-label */
  hrControlLabel: string;

  /** RichTextEditor.Italic control aria-label */
  italicControlLabel: string;

  /** RichTextEditor.Underline control aria-label */
  underlineControlLabel: string;

  /** RichTextEditor.Strike control aria-label */
  strikeControlLabel: string;

  /** RichTextEditor.ClearFormatting control aria-label */
  clearFormattingControlLabel: string;

  /** RichTextEditor.Link control aria-label */
  linkControlLabel: string;

  /** RichTextEditor.Unlink control aria-label */
  unlinkControlLabel: string;

  /** RichTextEditor.BulletList control aria-label */
  bulletListControlLabel: string;

  /** RichTextEditor.OrderedList control aria-label */
  orderedListControlLabel: string;

  /** RichTextEditor.H1 control aria-label */
  h1ControlLabel: string;

  /** RichTextEditor.H2 control aria-label */
  h2ControlLabel: string;

  /** RichTextEditor.H3 control aria-label */
  h3ControlLabel: string;

  /** RichTextEditor.H4 control aria-label */
  h4ControlLabel: string;

  /** RichTextEditor.H5 control aria-label */
  h5ControlLabel: string;

  /** RichTextEditor.H6 control aria-label */
  h6ControlLabel: string;

  /** RichTextEditor.Blockquote control aria-label */
  blockquoteControlLabel: string;

  /** RichTextEditor.AlignLeft control aria-label */
  alignLeftControlLabel: string;

  /** RichTextEditor.AlignCenter control aria-label */
  alignCenterControlLabel: string;

  /** RichTextEditor.AlignRight control aria-label */
  alignRightControlLabel: string;

  /** RichTextEditor.AlignJustify control aria-label */
  alignJustifyControlLabel: string;

  /** RichTextEditor.Code control aria-label */
  codeControlLabel: string;

  /** RichTextEditor.CodeBlock control aria-label */
  codeBlockControlLabel: string;

  /** RichTextEditor.Subscript control aria-label */
  subscriptControlLabel: string;

  /** RichTextEditor.Superscript control aria-label */
  superscriptControlLabel: string;

  /** RichTextEditor.ColorPicker control aria-label */
  colorPickerControlLabel: string;

  /** RichTextEditor.UnsetColor control aria-label */
  unsetColorControlLabel: string;

  /** RichTextEditor.Highlight control aria-label */
  highlightControlLabel: string;

  /** RichTextEditor.Undo control aria-label */
  undoControlLabel: string;

  /** RichTextEditor.Redo control aria-label */
  redoControlLabel: string;

  /** A function go get RichTextEditor.Color control aria-label based on color that control applies */
  colorControlLabel: (color: string) => string;

  /** aria-label for link editor url input */
  linkEditorInputLabel: string;

  /** placeholder for link editor url input */
  linkEditorInputPlaceholder: string;

  /** Content of external button tooltip in link editor when the link was chosen to open in a new tab */
  linkEditorExternalLink: string;

  /** Content of external button tooltip in link editor when the link was chosen to open in the same tab */
  linkEditorInternalLink: string;

  /** Save button content in link editor */
  linkEditorSave: string;

  /** Cancel button title text in color picker control */
  colorPickerCancel: string;

  /** Clear button title text in color picker control */
  colorPickerClear: string;

  /** Color picker button title text in color picker control */
  colorPickerColorPicker: string;

  /** Palette button title text in color picker control */
  colorPickerPalette: string;

  /** Save button title text in color picker control */
  colorPickerSave: string;

  /** aria-label for color palette colors */
  colorPickerColorLabel: (color: string) => string;
}

Default labels (can be imported from @mantine/tiptap package):

tsx
import { RichTextEditorLabels } from '@mantine/tiptap';

export const DEFAULT_LABELS: RichTextEditorLabels = {
  // Controls labels
  linkControlLabel: 'Link',
  colorPickerControlLabel: 'Text color',
  highlightControlLabel: 'Highlight text',
  colorControlLabel: (color) => `Set text color ${color}`,
  boldControlLabel: 'Bold',
  italicControlLabel: 'Italic',
  underlineControlLabel: 'Underline',
  strikeControlLabel: 'Strikethrough',
  clearFormattingControlLabel: 'Clear formatting',
  unlinkControlLabel: 'Remove link',
  bulletListControlLabel: 'Bullet list',
  orderedListControlLabel: 'Ordered list',
  h1ControlLabel: 'Heading 1',
  h2ControlLabel: 'Heading 2',
  h3ControlLabel: 'Heading 3',
  h4ControlLabel: 'Heading 4',
  h5ControlLabel: 'Heading 5',
  h6ControlLabel: 'Heading 6',
  blockquoteControlLabel: 'Blockquote',
  alignLeftControlLabel: 'Align text: left',
  alignCenterControlLabel: 'Align text: center',
  alignRightControlLabel: 'Align text: right',
  alignJustifyControlLabel: 'Align text: justify',
  codeControlLabel: 'Code',
  codeBlockControlLabel: 'Code block',
  subscriptControlLabel: 'Subscript',
  superscriptControlLabel: 'Superscript',
  unsetColorControlLabel: 'Unset color',
  hrControlLabel: 'Horizontal line',
  undoControlLabel: 'Undo',
  redoControlLabel: 'Redo',

  // Task list
  tasksControlLabel: 'Task list',
  tasksSinkLabel: 'Decrease task level',
  tasksLiftLabel: 'Increase task level',

  // Link editor
  linkEditorInputLabel: 'Enter URL',
  linkEditorInputPlaceholder: 'https://example.com/',
  linkEditorExternalLink: 'Open link in a new tab',
  linkEditorInternalLink: 'Open link in the same tab',
  linkEditorSave: 'Save',

  // Color picker control
  colorPickerCancel: 'Cancel',
  colorPickerClear: 'Clear color',
  colorPickerColorPicker: 'Color picker',
  colorPickerPalette: 'Color palette',
  colorPickerSave: 'Save',
  colorPickerColorLabel: (color) => `Set text color ${color}`,
};