tessl/npm-mantine--tiptap
Rich text editor React component library based on Tiptap with extensive formatting controls and Mantine integration
- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
To install, run
npx @tessl/cli install tessl/npm-mantine--tiptap@8.2.0index.mddocs/
@mantine/tiptap
@mantine/tiptap is a comprehensive React rich text editor component library built on top of the Tiptap framework. It provides a familiar editing experience with extensive formatting options, accessibility-focused design, and seamless integration with the Mantine UI library ecosystem.
Package Information
- Package Name: @mantine/tiptap
- Package Type: npm
- Language: TypeScript
- Installation:
npm install @mantine/tiptap @mantine/core @mantine/hooks @tiptap/react @tiptap/extension-link
Core Imports
import { RichTextEditor, useRichTextEditorContext } from "@mantine/tiptap";
import type { RichTextEditorProps } from "@mantine/tiptap";For CSS styles:
import "@mantine/tiptap/styles.css";
// or for CSS layers support:
import "@mantine/tiptap/styles.layer.css";Basic Usage
import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import { RichTextEditor, Link } from "@mantine/tiptap";
function App() {
const editor = useEditor({
extensions: [StarterKit, Link],
content: "<p>Hello world!</p>",
});
return (
<RichTextEditor editor={editor}>
<RichTextEditor.Toolbar sticky stickyOffset={60}>
<RichTextEditor.ControlsGroup>
<RichTextEditor.Bold />
<RichTextEditor.Italic />
<RichTextEditor.Underline />
<RichTextEditor.Strikethrough />
<RichTextEditor.ClearFormatting />
</RichTextEditor.ControlsGroup>
<RichTextEditor.ControlsGroup>
<RichTextEditor.H1 />
<RichTextEditor.H2 />
<RichTextEditor.H3 />
<RichTextEditor.H4 />
</RichTextEditor.ControlsGroup>
<RichTextEditor.ControlsGroup>
<RichTextEditor.BulletList />
<RichTextEditor.OrderedList />
</RichTextEditor.ControlsGroup>
<RichTextEditor.ControlsGroup>
<RichTextEditor.Link />
<RichTextEditor.Unlink />
</RichTextEditor.ControlsGroup>
</RichTextEditor.Toolbar>
<RichTextEditor.Content />
</RichTextEditor>
);
}Architecture
@mantine/tiptap is designed around several key architectural patterns:
- Compound Component Pattern: The main
RichTextEditorcomponent provides 30+ static sub-components for building custom toolbars - Context-based State Management: Editor state and configuration is shared through React Context
- Tiptap Integration: Built on top of Tiptap's extensible editor framework with custom extensions
- Mantine Ecosystem Integration: Full integration with Mantine's styling system, theming, and component patterns
- Accessibility First: Built-in ARIA labels, keyboard navigation, and screen reader support
- Compound Styling API: Leverages Mantine's styling system for consistent theming and customization
Capabilities
Core Components
Essential components for building rich text editors with layout, content rendering, and basic controls.
function RichTextEditor(props: RichTextEditorProps): JSX.Element;
interface RichTextEditorProps extends BoxProps, StylesApiProps<RichTextEditorFactory>, ElementProps<'div'> {
/** Tiptap editor instance */
editor: Editor | null;
/** Determines whether code highlight styles should be added @default true */
withCodeHighlightStyles?: boolean;
/** Determines whether typography styles should be added @default true */
withTypographyStyles?: boolean;
/** Called if RichTextEditor.SourceCode clicked */
onSourceCodeTextSwitch?: (isSourceCodeModeActive: boolean) => void;
/** Labels that are used in controls */
labels?: Partial<RichTextEditorLabels>;
/** Child editor components */
children: React.ReactNode;
}Text Formatting Controls
Pre-built controls for text styling including bold, italic, underline, strikethrough, and formatting removal.
// Text formatting controls
RichTextEditor.Bold: React.ComponentType;
RichTextEditor.Italic: React.ComponentType;
RichTextEditor.Underline: React.ComponentType;
RichTextEditor.Strikethrough: React.ComponentType;
RichTextEditor.ClearFormatting: React.ComponentType;Structure Controls
Controls for document structure including headings, lists, blockquotes, and alignment options.
// Heading controls
RichTextEditor.H1: React.ComponentType;
RichTextEditor.H2: React.ComponentType;
RichTextEditor.H3: React.ComponentType;
RichTextEditor.H4: React.ComponentType;
RichTextEditor.H5: React.ComponentType;
RichTextEditor.H6: React.ComponentType;
// List controls
RichTextEditor.BulletList: React.ComponentType;
RichTextEditor.OrderedList: React.ComponentType;
RichTextEditor.TaskList: React.ComponentType;
// Alignment controls
RichTextEditor.AlignLeft: React.ComponentType;
RichTextEditor.AlignCenter: React.ComponentType;
RichTextEditor.AlignRight: React.ComponentType;
RichTextEditor.AlignJustify: React.ComponentType;Advanced Controls
Advanced formatting options including code blocks, color controls, links, and specialized text features.
// Code controls
RichTextEditor.Code: React.ComponentType;
RichTextEditor.CodeBlock: React.ComponentType;
// Color controls
RichTextEditor.Color: React.ComponentType<RichTextEditorColorControlProps>;
RichTextEditor.ColorPicker: React.ComponentType<RichTextEditorColorPickerControlProps>;
RichTextEditor.Highlight: React.ComponentType;
RichTextEditor.UnsetColor: React.ComponentType;
// Link controls
RichTextEditor.Link: React.ComponentType<RichTextEditorLinkControlProps>;
RichTextEditor.Unlink: React.ComponentType;
// Special formatting
RichTextEditor.Superscript: React.ComponentType;
RichTextEditor.Subscript: React.ComponentType;
RichTextEditor.Blockquote: React.ComponentType;
RichTextEditor.Hr: React.ComponentType;Context and Hooks
React Context and hooks for accessing editor state, configuration, and building custom controls.
function useRichTextEditorContext(): RichTextEditorContext;
interface RichTextEditorContext {
editor: Editor | null;
getStyles: GetStylesApi<RichTextEditorFactory>;
labels: RichTextEditorLabels;
withCodeHighlightStyles: boolean | undefined;
withTypographyStyles: boolean | undefined;
variant: string | undefined;
unstyled: boolean | undefined;
onSourceCodeTextSwitch?: (isSourceCodeModeActive: boolean) => void;
}Extensions
Tiptap extensions with enhanced functionality for links and task lists, including keyboard shortcuts and custom styling.
const Link: Extension;
function getTaskListExtension<T>(TipTapTaskList: T): T;Labels and Internationalization
Comprehensive labeling system for accessibility and internationalization support with 40+ customizable labels.
const DEFAULT_LABELS: RichTextEditorLabels;
interface RichTextEditorLabels {
boldControlLabel: string;
italicControlLabel: string;
underlineControlLabel: string;
strikeControlLabel: string;
clearFormattingControlLabel: string;
linkControlLabel: string;
unlinkControlLabel: string;
bulletListControlLabel: string;
orderedListControlLabel: string;
h1ControlLabel: string;
h2ControlLabel: string;
h3ControlLabel: string;
h4ControlLabel: string;
h5ControlLabel: string;
h6ControlLabel: string;
blockquoteControlLabel: string;
alignLeftControlLabel: string;
alignCenterControlLabel: string;
alignRightControlLabel: string;
alignJustifyControlLabel: string;
codeControlLabel: string;
codeBlockControlLabel: string;
subscriptControlLabel: string;
superscriptControlLabel: string;
colorPickerControlLabel: string;
unsetColorControlLabel: string;
highlightControlLabel: string;
undoControlLabel: string;
redoControlLabel: string;
hrControlLabel: string;
sourceCodeControlLabel: string;
tasksControlLabel: string;
tasksSinkLabel: string;
tasksLiftLabel: string;
colorControlLabel: (color: string) => string;
colorPickerColorLabel: (color: string) => string;
linkEditorInputLabel: string;
linkEditorInputPlaceholder: string;
linkEditorExternalLink: string;
linkEditorInternalLink: string;
linkEditorSave: string;
colorPickerCancel: string;
colorPickerClear: string;
colorPickerColorPicker: string;
colorPickerPalette: string;
colorPickerSave: string;
}