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

Structure Controls

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

Controls for document structure including headings, lists, blockquotes, alignment options, and task management. These controls help organize content hierarchy and layout.

Capabilities

Heading Controls

Six heading levels for creating document hierarchy and structure.

/**
 * Heading level 1 control - largest heading
 * Keyboard shortcut: Ctrl/Cmd + Alt + 1
 */
RichTextEditor.H1: React.ComponentType;

/**
 * Heading level 2 control 
 * Keyboard shortcut: Ctrl/Cmd + Alt + 2
 */
RichTextEditor.H2: React.ComponentType;

/**
 * Heading level 3 control
 * Keyboard shortcut: Ctrl/Cmd + Alt + 3  
 */
RichTextEditor.H3: React.ComponentType;

/**
 * Heading level 4 control
 * Keyboard shortcut: Ctrl/Cmd + Alt + 4
 */
RichTextEditor.H4: React.ComponentType;

/**
 * Heading level 5 control
 * Keyboard shortcut: Ctrl/Cmd + Alt + 5
 */
RichTextEditor.H5: React.ComponentType;

/**
 * Heading level 6 control - smallest heading
 * Keyboard shortcut: Ctrl/Cmd + Alt + 6
 */
RichTextEditor.H6: React.ComponentType;

Usage Example:

<RichTextEditor.ControlsGroup>
  <RichTextEditor.H1 />
  <RichTextEditor.H2 />
  <RichTextEditor.H3 />
  <RichTextEditor.H4 />
  <RichTextEditor.H5 />
  <RichTextEditor.H6 />
</RichTextEditor.ControlsGroup>

List Controls

Controls for creating and managing different types of lists.

/**
 * Bullet list control - creates unordered lists
 * Keyboard shortcut: Ctrl/Cmd + Shift + 8
 */
RichTextEditor.BulletList: React.ComponentType;

/**
 * Ordered list control - creates numbered lists  
 * Keyboard shortcut: Ctrl/Cmd + Shift + 7
 */
RichTextEditor.OrderedList: React.ComponentType;

/**
 * Task list control - creates interactive checkboxes
 * Keyboard shortcut: Ctrl/Cmd + Shift + 9
 */
RichTextEditor.TaskList: React.ComponentType;

Usage Example:

<RichTextEditor.ControlsGroup>
  <RichTextEditor.BulletList />
  <RichTextEditor.OrderedList />
  <RichTextEditor.TaskList />
</RichTextEditor.ControlsGroup>

Task List Management Controls

Controls for managing task list hierarchy and indentation.

/**
 * Task list sink control - increases task indentation level
 * Keyboard shortcut: Ctrl/Cmd + ]
 */
RichTextEditor.TaskListSink: React.ComponentType;

/**
 * Task list lift control - decreases task indentation level  
 * Keyboard shortcut: Ctrl/Cmd + [
 */
RichTextEditor.TaskListLift: React.ComponentType;

Usage Example:

<RichTextEditor.ControlsGroup>
  <RichTextEditor.TaskList />
  <RichTextEditor.TaskListSink />
  <RichTextEditor.TaskListLift />
</RichTextEditor.ControlsGroup>

Alignment Controls

Controls for text alignment and justification.

/**
 * Left align control - aligns text to the left
 */
RichTextEditor.AlignLeft: React.ComponentType;

/**
 * Center align control - centers text horizontally
 */
RichTextEditor.AlignCenter: React.ComponentType;

/**
 * Right align control - aligns text to the right
 */
RichTextEditor.AlignRight: React.ComponentType;

/**
 * Justify align control - justifies text to fill line width
 */
RichTextEditor.AlignJustify: React.ComponentType;

Usage Example:

<RichTextEditor.ControlsGroup>
  <RichTextEditor.AlignLeft />
  <RichTextEditor.AlignCenter />
  <RichTextEditor.AlignRight />
  <RichTextEditor.AlignJustify />
</RichTextEditor.ControlsGroup>

Blockquote Control

Control for creating quoted text blocks.

/**
 * Blockquote control - creates indented quote blocks
 * Keyboard shortcut: Ctrl/Cmd + Shift + B
 */
RichTextEditor.Blockquote: React.ComponentType;

Usage Example:

<RichTextEditor.ControlsGroup>
  <RichTextEditor.Blockquote />
</RichTextEditor.ControlsGroup>

Complete Structure Example

import { useEditor } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import TaskList from "@tiptap/extension-task-list";
import TaskItem from "@tiptap/extension-task-item";
import TextAlign from "@tiptap/extension-text-align";
import { RichTextEditor, getTaskListExtension } from "@mantine/tiptap";

function StructuredEditor() {
  const editor = useEditor({
    extensions: [
      StarterKit,
      getTaskListExtension(TaskList),
      TaskItem.configure({
        nested: true,
      }),
      TextAlign.configure({ types: ['heading', 'paragraph'] }),
    ],
    content: `
      <h1>Document Title</h1>
      <p>This is a paragraph with some content.</p>
      <h2>Subsection</h2>
      <ul>
        <li>Bullet point 1</li>
        <li>Bullet point 2</li>
      </ul>
      <blockquote>This is a quoted section</blockquote>
    `,
  });

  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky stickyOffset={60}>
        {/* Heading controls */}
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.H1 />
          <RichTextEditor.H2 />
          <RichTextEditor.H3 />
          <RichTextEditor.H4 />
        </RichTextEditor.ControlsGroup>

        {/* List controls */}
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.BulletList />
          <RichTextEditor.OrderedList />
          <RichTextEditor.TaskList />
        </RichTextEditor.ControlsGroup>

        {/* Task management */}
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.TaskListSink />
          <RichTextEditor.TaskListLift />
        </RichTextEditor.ControlsGroup>

        {/* Alignment controls */}
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.AlignLeft />
          <RichTextEditor.AlignCenter />
          <RichTextEditor.AlignRight />
          <RichTextEditor.AlignJustify />
        </RichTextEditor.ControlsGroup>

        {/* Block formatting */}
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Blockquote />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>

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

Control Behavior

Active States

Structure controls show active states based on cursor position:

Headings: Active when cursor is within a heading of that level
Lists: Active when cursor is within that type of list
Blockquote: Active when cursor is within a blockquote
Alignment: Active based on current paragraph alignment

List Behavior

Bullet/Ordered Lists: Toggle between list and paragraph modes
Task Lists: Create interactive checkboxes that can be checked/unchecked
Nesting: Lists can be nested using Task List Sink/Lift controls

Task List Features

Task lists created with RichTextEditor.TaskList support:

Interactive Checkboxes: Click to toggle completion state
Keyboard Navigation: Tab/Shift+Tab to navigate between tasks
Nesting: Use Sink/Lift controls to create hierarchical task lists
Custom Styling: Tasks can be styled based on completion state

Required Extensions

Structure controls require specific Tiptap extensions:

Headings: Included in @tiptap/starter-kit
Lists: Included in @tiptap/starter-kit
Task Lists: Requires @tiptap/extension-task-list and @tiptap/extension-task-item
Alignment: Requires @tiptap/extension-text-align
Blockquote: Included in @tiptap/starter-kit

Customization

Custom Labels

<RichTextEditor 
  editor={editor}
  labels={{
    h1ControlLabel: "Heading 1",
    h2ControlLabel: "Heading 2", 
    bulletListControlLabel: "Bullet List",
    orderedListControlLabel: "Numbered List",
    tasksControlLabel: "Task List",
    blockquoteControlLabel: "Quote Block",
    alignLeftControlLabel: "Align Left",
    alignCenterControlLabel: "Center Text",
    alignRightControlLabel: "Align Right",
    alignJustifyControlLabel: "Justify Text",
  }}
>
  {/* structure controls */}
</RichTextEditor>

Task List Extension Configuration

import TaskList from "@tiptap/extension-task-list";
import TaskItem from "@tiptap/extension-task-item";
import { getTaskListExtension } from "@mantine/tiptap";

const editor = useEditor({
  extensions: [
    // Enhanced task list with keyboard shortcuts and styling
    getTaskListExtension(TaskList),
    TaskItem.configure({
      nested: true,
      HTMLAttributes: {
        class: 'my-task-item',
      },
    }),
  ],
});