CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

text-formatting.mddocs/

Text Formatting Controls

Pre-built controls for basic text styling including bold, italic, underline, strikethrough, and formatting removal. These controls provide immediate visual feedback and keyboard shortcut support.

Capabilities

Bold Control

Toggles bold formatting for selected text or at cursor position.

/**
 * Bold text formatting control
 * Keyboard shortcut: Ctrl/Cmd + B
 */
RichTextEditor.Bold: React.ComponentType;

Usage Example:

<RichTextEditor.ControlsGroup>
  <RichTextEditor.Bold />
</RichTextEditor.ControlsGroup>

Italic Control

Toggles italic formatting for selected text or at cursor position.

/**
 * Italic text formatting control
 * Keyboard shortcut: Ctrl/Cmd + I
 */
RichTextEditor.Italic: React.ComponentType;

Usage Example:

<RichTextEditor.ControlsGroup>
  <RichTextEditor.Italic />
</RichTextEditor.ControlsGroup>

Underline Control

Toggles underline formatting for selected text or at cursor position.

/**
 * Underline text formatting control
 * Keyboard shortcut: Ctrl/Cmd + U
 */
RichTextEditor.Underline: React.ComponentType;

Usage Example:

<RichTextEditor.ControlsGroup>
  <RichTextEditor.Underline />
</RichTextEditor.ControlsGroup>

Strikethrough Control

Toggles strikethrough formatting for selected text or at cursor position.

/**
 * Strikethrough text formatting control
 * Keyboard shortcut: Ctrl/Cmd + Shift + S
 */
RichTextEditor.Strikethrough: React.ComponentType;

Usage Example:

<RichTextEditor.ControlsGroup>
  <RichTextEditor.Strikethrough />
</RichTextEditor.ControlsGroup>

Clear Formatting Control

Removes all text formatting from selected text, reverting to plain text.

/**
 * Clear all text formatting control
 * Removes bold, italic, underline, strikethrough, colors, and other formatting
 */
RichTextEditor.ClearFormatting: React.ComponentType;

Usage Example:

<RichTextEditor.ControlsGroup>
  <RichTextEditor.Bold />
  <RichTextEditor.Italic />
  <RichTextEditor.Underline />
  <RichTextEditor.Strikethrough />
  <RichTextEditor.ClearFormatting />
</RichTextEditor.ControlsGroup>

Complete Text Formatting Example

import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Underline from "@tiptap/extension-underline";
import { RichTextEditor } from "@mantine/tiptap";

function TextFormattingEditor() {
  const editor = useEditor({
    extensions: [
      StarterKit,
      Underline, // Required for underline functionality
    ],
    content: "<p>Select this text and use formatting controls!</p>",
  });

  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky stickyOffset={60}>
        {/* Text formatting controls group */}
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Bold />
          <RichTextEditor.Italic />
          <RichTextEditor.Underline />
          <RichTextEditor.Strikethrough />
          <RichTextEditor.ClearFormatting />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>

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

Control Behavior

Active States

All text formatting controls automatically show their active state:

  • Bold: Active when cursor is in bold text or bold text is selected
  • Italic: Active when cursor is in italic text or italic text is selected
  • Underline: Active when cursor is in underlined text or underlined text is selected
  • Strikethrough: Active when cursor is in strikethrough text or strikethrough text is selected

Keyboard Shortcuts

Text formatting controls support standard keyboard shortcuts:

  • Bold: Ctrl/Cmd + B
  • Italic: Ctrl/Cmd + I
  • Underline: Ctrl/Cmd + U
  • Strikethrough: Ctrl/Cmd + Shift + S

Accessibility

All controls include proper accessibility features:

  • ARIA Labels: Each control has descriptive aria-label attributes
  • Keyboard Navigation: Controls are focusable and operable via keyboard
  • Screen Reader Support: Active states are announced to screen readers
  • High Contrast: Controls maintain visibility in high contrast modes

Required Extensions

Some formatting options require specific Tiptap extensions:

  • Bold, Italic, Strikethrough: Included in @tiptap/starter-kit
  • Underline: Requires @tiptap/extension-underline
  • Clear Formatting: Works with any installed text formatting extensions

Customization

Custom Labels

Override default accessibility labels for internationalization:

<RichTextEditor 
  editor={editor}
  labels={{
    boldControlLabel: "Bold (Ctrl+B)",
    italicControlLabel: "Italic (Ctrl+I)", 
    underlineControlLabel: "Underline (Ctrl+U)",
    strikeControlLabel: "Strikethrough (Ctrl+Shift+S)",
    clearFormattingControlLabel: "Remove formatting",
  }}
>
  {/* controls */}
</RichTextEditor>

Custom Styling

Apply custom styles to formatting controls:

<RichTextEditor.Bold 
  styles={{
    control: { 
      backgroundColor: 'var(--mantine-color-blue-filled)',
      color: 'white' 
    }
  }}
/>

docs

advanced-controls.md

context-hooks.md

core-components.md

extensions.md

index.md

labels-i18n.md

structure-controls.md

text-formatting.md

tile.json