tessl/npm-mantine--tiptap

Rich text editor React component library based on Tiptap with extensive formatting controls and Mantine integration

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@mantine/tiptap

Name: tessl/npm-mantine--tiptap
Author: tessl

@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 RichTextEditor component 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;
}

Core Components

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;

Text Formatting Controls

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;

Structure Controls

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;

Advanced Controls

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;
}

Context and Hooks

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;

Extensions

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;
}

Labels and Internationalization