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

advanced-controls.mddocs/

Advanced Controls

Advanced formatting options including code blocks, color controls, links, special text features, and utility controls for enhanced text editing capabilities.

Capabilities

Code Controls

Controls for inline code and code block formatting.

/**
 * Inline code control - formats selected text as inline code
 * Keyboard shortcut: Ctrl/Cmd + E
 */
RichTextEditor.Code: React.ComponentType;

/**
 * Code block control - creates formatted code blocks
 * Keyboard shortcut: Ctrl/Cmd + Alt + C
 */
RichTextEditor.CodeBlock: React.ComponentType;

Usage Example:

<RichTextEditor.ControlsGroup>
  <RichTextEditor.Code />
  <RichTextEditor.CodeBlock />
</RichTextEditor.ControlsGroup>

Color Controls

Controls for applying and managing text colors.

/**
 * Color control - applies specific color to selected text
 * @param props - Color control configuration
 */
RichTextEditor.Color: React.ComponentType<RichTextEditorColorControlProps>;

interface RichTextEditorColorControlProps extends BoxProps, ElementProps<'button'> {
  /** Color that will be set as text color, for example #ef457e */
  color: string;
}

/**
 * Color picker control - provides color palette and custom color selection
 * @param props - Color picker configuration
 */
RichTextEditor.ColorPicker: React.ComponentType<RichTextEditorColorPickerControlProps>;

interface RichTextEditorColorPickerControlProps extends BoxProps, ElementProps<'button'> {
  /** Props added to Popover component */
  popoverProps?: Partial<PopoverProps>;
  /** Props added to ColorPicker component */
  colorPickerProps?: Partial<ColorPickerProps>;
  /** List of colors that the user can choose from */
  colors: string[];
}

/**
 * Highlight control - applies background highlight to selected text
 */
RichTextEditor.Highlight: React.ComponentType;

/**
 * Unset color control - removes text color formatting
 */
RichTextEditor.UnsetColor: React.ComponentType;

Usage Example:

<RichTextEditor.ControlsGroup>
  <RichTextEditor.ColorPicker colors={['#ff0000', '#00ff00', '#0000ff']} />
  <RichTextEditor.Color color="#ff6b6b" />
  <RichTextEditor.Color color="#51cf66" />
  <RichTextEditor.Color color="#339af0" />
  <RichTextEditor.Highlight />
  <RichTextEditor.UnsetColor />
</RichTextEditor.ControlsGroup>

Link Controls

Controls for creating and managing hyperlinks.

/**
 * Link control - creates and edits hyperlinks with popover interface
 * Keyboard shortcut: Ctrl/Cmd + K
 * @param props - Link control configuration
 */
RichTextEditor.Link: React.ComponentType<RichTextEditorLinkControlProps>;

interface RichTextEditorLinkControlProps extends BoxProps, Omit<RichTextEditorControlBaseProps, 'classNames' | 'styles' | 'vars'>, CompoundStylesApiProps<RichTextEditorLinkControlFactory> {
  /** Props passed down to Popover component */
  popoverProps?: Partial<PopoverProps>;
  /** Determines whether external link control tooltip should be disabled @default false */
  disableTooltips?: boolean;
  /** Initial state for determining whether the link should be an external @default false */
  initialExternal?: boolean;
}

/**
 * Unlink control - removes hyperlink from selected text
 */
RichTextEditor.Unlink: React.ComponentType;

Usage Example:

<RichTextEditor.ControlsGroup>
  <RichTextEditor.Link />
  <RichTextEditor.Unlink />
</RichTextEditor.ControlsGroup>

Special Text Controls

Controls for superscript, subscript, and other special text formatting.

/**
 * Superscript control - formats text as superscript
 * Keyboard shortcut: Ctrl/Cmd + .
 */
RichTextEditor.Superscript: React.ComponentType;

/**
 * Subscript control - formats text as subscript  
 * Keyboard shortcut: Ctrl/Cmd + ,
 */
RichTextEditor.Subscript: React.ComponentType;

Usage Example:

<RichTextEditor.ControlsGroup>
  <RichTextEditor.Superscript />
  <RichTextEditor.Subscript />
</RichTextEditor.ControlsGroup>

Utility Controls

Controls for document utilities and special content insertion.

/**
 * Horizontal rule control - inserts horizontal divider line
 */
RichTextEditor.Hr: React.ComponentType;

/**
 * Undo control - undoes the last editor action
 * Keyboard shortcut: Ctrl/Cmd + Z
 */
RichTextEditor.Undo: React.ComponentType;

/**
 * Redo control - redoes the last undone action
 * Keyboard shortcut: Ctrl/Cmd + Y or Ctrl/Cmd + Shift + Z
 */
RichTextEditor.Redo: React.ComponentType;

/**
 * Source code control - toggles between WYSIWYG and HTML source view
 */
RichTextEditor.SourceCode: React.ComponentType;

Usage Example:

<RichTextEditor.ControlsGroup>
  <RichTextEditor.Undo />
  <RichTextEditor.Redo />
  <RichTextEditor.Hr />
  <RichTextEditor.SourceCode />
</RichTextEditor.ControlsGroup>

Complete Advanced Editor Example

import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Underline from "@tiptap/extension-underline";
import Superscript from "@tiptap/extension-superscript";
import Subscript from "@tiptap/extension-subscript";
import Highlight from "@tiptap/extension-highlight";
import TextStyle from "@tiptap/extension-text-style";
import Color from "@tiptap/extension-color";
import { RichTextEditor, Link } from "@mantine/tiptap";

function AdvancedEditor() {
  const editor = useEditor({
    extensions: [
      StarterKit,
      Underline,
      Link,
      Superscript,
      Subscript,
      Highlight,
      TextStyle,
      Color,
    ],
    content: `
      <p>This editor supports <strong>advanced formatting</strong> including:</p>
      <ul>
        <li><code>Inline code</code> and code blocks</li>
        <li><span style="color: #ff6b6b">Colored text</span> and <mark>highlighting</mark></li>
        <li><a href="https://example.com">Links</a> with full editing</li>
        <li>Mathematical expressions: E=mc<sup>2</sup>, H<sub>2</sub>O</li>
      </ul>
      <hr>
      <blockquote>Advanced controls provide professional editing capabilities</blockquote>
    `,
  });

  const colorPickerColors = [
    '#25262b', '#868e96', '#fa5252', '#e64980', '#be4bdb', '#7950f2',
    '#4c6ef5', '#228be6', '#15aabf', '#12b886', '#40c057', '#82c91e',
    '#fab005', '#fd7e14', '#ff6b6b', '#51cf66', '#339af0', '#845ef7',
  ];

  return (
    <RichTextEditor 
      editor={editor}
      onSourceCodeTextSwitch={(isActive) => console.log('Source mode:', isActive)}
    >
      <RichTextEditor.Toolbar sticky stickyOffset={60}>
        {/* History controls */}
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Undo />
          <RichTextEditor.Redo />
        </RichTextEditor.ControlsGroup>

        {/* Code controls */}
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Code />
          <RichTextEditor.CodeBlock />
        </RichTextEditor.ControlsGroup>

        {/* Color controls */}
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.ColorPicker colors={colorPickerColors} />
          <RichTextEditor.Color color="#ff6b6b" />
          <RichTextEditor.Color color="#51cf66" />
          <RichTextEditor.Color color="#339af0" />
          <RichTextEditor.UnsetColor />
          <RichTextEditor.Highlight />
        </RichTextEditor.ControlsGroup>

        {/* Link controls */}
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Link />
          <RichTextEditor.Unlink />
        </RichTextEditor.ControlsGroup>

        {/* Special text */}
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Superscript />
          <RichTextEditor.Subscript />
        </RichTextEditor.ControlsGroup>

        {/* Utilities */}
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Hr />
          <RichTextEditor.SourceCode />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>

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

Control Behavior

Color Controls

  • Color Control: Applies specific color to selected text or at cursor position
  • Color Picker: Opens popover with color palette and custom color picker
  • Highlight: Applies background highlight color (typically yellow)
  • Unset Color: Removes text color, reverting to theme default

Link Controls

  • Link Control: Opens popover for URL input with external/internal toggle
  • Link Editing: Click existing links to edit URL and external settings
  • Keyboard Shortcut: Cmd/Ctrl+K opens link editor
  • Unlink: Removes hyperlink while preserving text content

History Controls

  • Undo/Redo: Controls are automatically disabled when no actions available
  • State Tracking: Visual feedback shows when controls are disabled
  • Keyboard Shortcuts: Standard Cmd/Ctrl+Z (undo) and Cmd/Ctrl+Y (redo)

Source Code Toggle

  • View Switching: Toggles between WYSIWYG and HTML source code view
  • Callback Support: onSourceCodeTextSwitch prop receives boolean state
  • Content Preservation: Content is maintained when switching between views

Required Extensions

Advanced controls require specific Tiptap extensions:

  • Code/CodeBlock: Included in @tiptap/starter-kit
  • Colors: Requires @tiptap/extension-text-style and @tiptap/extension-color
  • Highlight: Requires @tiptap/extension-highlight
  • Links: Use Link extension from @mantine/tiptap (enhanced version)
  • Superscript/Subscript: Requires @tiptap/extension-superscript and @tiptap/extension-subscript
  • History: Included in @tiptap/starter-kit

Customization

Color Picker Configuration

<RichTextEditor.ColorPicker
  colors={['#ff0000', '#00ff00', '#0000ff']}
  popoverProps={{ position: 'bottom' }}
  colorPickerProps={{ format: 'hex' }}
/>

Link Control Configuration

<RichTextEditor.Link
  initialExternal={false}
  disableTooltips={false}
  popoverProps={{ 
    position: 'bottom',
    withinPortal: true 
  }}
/>

Custom Labels

<RichTextEditor
  editor={editor}
  labels={{
    codeControlLabel: "Inline Code",
    codeBlockControlLabel: "Code Block",
    colorPickerControlLabel: "Text Color",
    highlightControlLabel: "Highlight Text",
    linkControlLabel: "Add Link",
    unlinkControlLabel: "Remove Link",
    superscriptControlLabel: "Superscript",
    subscriptControlLabel: "Subscript",
    undoControlLabel: "Undo",
    redoControlLabel: "Redo",
    hrControlLabel: "Horizontal Line",
    sourceCodeControlLabel: "Source Code",
  }}
>
  {/* advanced controls */}
</RichTextEditor>

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