mui-tiptap

mui-tiptap components include specific utility class names that can be used for external CSS or nested styling. For example, RichTextField uses:

• MuiTiptap-RichTextField-root (root element)
• MuiTiptap-RichTextField-[variant] (e.g., MuiTiptap-RichTextField-outlined)
• MuiTiptap-RichTextField-content (inner content element)

To avoid hard-coding these strings, import the corresponding class helper object from mui-tiptap.

import { richTextFieldClasses } from "mui-tiptap";

// Use the helper to access the class name
const contentClass = richTextFieldClasses.content; // "MuiTiptap-RichTextField-content"

The RichTextEditorProvider uses React context to make the Tiptap editor instance available to all nested components. This prevents the need to manually pass the editor prop through multiple levels of your component tree. It is a required parent for most mui-tiptap components, except for the all-in-one RichTextEditor and RichTextReadOnly components.

To access the editor in your own custom components, use the useRichTextEditorContext() hook.

You can apply styles to any mui-tiptap component using the standard MUI sx prop. This is useful for quick adjustments like background colors or margins.

<RichTextEditor {...otherProps} sx={{ backgroundColor: "#222" }} />

You can override default labels for menu buttons and color pickers using the tooltipLabel and labels props.

• General Buttons: Use tooltipLabel for the hover tooltip.
• Color Pickers: Use the labels prop to override text in the color picker popper (e.g., cancelButton, saveButton, textFieldPlaceholder).

<MenuButtonBold tooltipLabel="Toggle bold" />

<MenuButtonTextColor
  tooltipLabel="Text color"
  labels={{
    cancelButton: "Cancel",
    removeColorButton: "Reset",
    removeColorButtonTooltipTitle: "Remove the color",
    saveButton: "OK",
    textFieldPlaceholder: 'Ex: "#7cb5ec"',
  }}
/>

Bubble menus like LinkBubbleMenu and TableBubbleMenu can be localized using the labels prop to override the text of their action buttons.

<LinkBubbleMenu
  labels={{
    viewLinkEditButtonLabel: "Edit link",
    viewLinkRemoveButtonLabel: "Remove link",
    editLinkAddTitle: "Add new link",
    editLinkEditTitle: "Update this link",
    editLinkCancelButtonLabel: "Cancel changes",
    editLinkTextInputLabel: "Text content",
    editLinkHrefInputLabel: "URL",
    editLinkSaveButtonLabel: "Save changes",
  }}
/>

<TableBubbleMenu
  labels={{
    insertColumnBefore: "Add a new column before this",
    insertColumnAfter: "Add a new column after this",
    deleteColumn: "Remove current column",
  }}
/>

Both LinkBubbleMenu and TableBubbleMenu are specialized bubble menus.

If using RichTextEditor: Include these components via the RichTextEditor's children render-prop.

If using custom editor setup (e.g., useEditor): Include the bubble menu as a child of the component where you call useEditor and render your RichTextField or RichTextContent. This ensures the bubble menu re-renders whenever the Tiptap editor forces an update, allowing it to position itself correctly.

Install the mui-tiptap package using npm or yarn. The package has peer dependencies on @mui/material, @mui/icons-material, and various @tiptap/ packages. If you are using npm 7+ or pnpm, these should be installed automatically. For other package managers or if they are missing, install them manually.

npm install mui-tiptap

# or

yarn add mui-tiptap

To create a structured and visually consistent toolbar for your editor, use MenuControlsContainer and MenuDivider:

• MenuControlsContainer: Wraps your control components to provide consistent spacing between them.
• MenuDivider: Renders a vertical line to separate different sections of your menu bar, helping to group related controls together.

<MenuControlsContainer>
  <MenuSelectHeading />
  <MenuDivider />
  <MenuButtonBold />
  <MenuButtonItalic />
  {/* Add more controls of your choosing here */}
</MenuControlsContainer>

To support dragging and dropping image files or pasting them into the editor, provide handleDrop and handlePaste options within the editorProps of the RichTextEditor component or useEditor hook.

For a convenient implementation, use the mui-tiptap insertImages utility to handle the file upload and insertion logic.

// Conceptual implementation using editorProps
<RichTextEditor
  editorProps={{
    handleDrop: (event, slice, emulated) => {
      // Use insertImages utility here to process files
      return true;
    },
    handlePaste: (event, slice, emulated) => {
      // Use insertImages utility here to process files
      return true;
    },
  }}
/>