CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tiptap--extension-highlight

Highlight extension for Tiptap rich text editor that enables text highlighting with customizable colors and markdown-style input rules.

—

Pending
Overview
Eval results
Files

Tiptap Highlight Extension

The Tiptap Highlight Extension enables text highlighting functionality in Tiptap rich text editors. It allows users to highlight text selections with customizable background colors, supports both single-color and multi-color highlighting modes, and includes markdown-style input rules for ==text== syntax.

Package Information

  • Package Name: @tiptap/extension-highlight
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tiptap/extension-highlight

Core Imports

import { Highlight, inputRegex, pasteRegex } from "@tiptap/extension-highlight";

Default import:

import Highlight from "@tiptap/extension-highlight";

For CommonJS:

const { Highlight, inputRegex, pasteRegex } = require("@tiptap/extension-highlight");

Basic Usage

import { Editor } from "@tiptap/core";
import { Highlight } from "@tiptap/extension-highlight";

// Basic single-color highlighting
const editor = new Editor({
  extensions: [
    Highlight,
  ],
});

// Multi-color highlighting with custom HTML attributes
const editor = new Editor({
  extensions: [
    Highlight.configure({
      multicolor: true,
      HTMLAttributes: {
        class: 'my-highlight',
      },
    }),
  ],
});

// Using highlight commands
editor.commands.setHighlight({ color: '#ffc078' });
editor.commands.toggleHighlight({ color: '#8ce99a' });
editor.commands.unsetHighlight();

Capabilities

Extension Configuration

Configure the Highlight extension with options for multicolor support and HTML attributes.

interface HighlightOptions {
  /**
   * Allow multiple highlight colors
   * @default false
   */
  multicolor: boolean;
  
  /**
   * HTML attributes to add to the highlight element
   * @default {}
   */
  HTMLAttributes: Record<string, any>;
}

// Highlight is a Mark extension created via Mark.create<HighlightOptions>()
// Mark is imported from '@tiptap/core'
const Highlight: HighlightExtension;

Highlight Commands

Programmatic commands for manipulating text highlights, accessible via the editor's command interface.

interface Commands {
  highlight: {
    /**
     * Set a highlight mark on selected text
     * @param attributes - Optional highlight attributes
     */
    setHighlight: (attributes?: { color: string }) => boolean;
    
    /**
     * Toggle a highlight mark on selected text
     * @param attributes - Optional highlight attributes
     */
    toggleHighlight: (attributes?: { color: string }) => boolean;
    
    /**
     * Remove highlight mark from selected text
     */
    unsetHighlight: () => boolean;
  };
}

Usage Examples:

// Set highlight with specific color (multicolor mode required)
editor.commands.setHighlight({ color: '#ffc078' });

// Toggle highlight without color (single-color mode)
editor.commands.toggleHighlight();

// Toggle highlight with color (multicolor mode)
editor.commands.toggleHighlight({ color: '#8ce99a' });

// Remove any highlight from selection
editor.commands.unsetHighlight();

Input Rules

Automatic detection and conversion of markdown-style highlight syntax.

/**
 * Regex pattern for matching highlight syntax on input
 * Matches: ==text== (double equals around text)
 */
const inputRegex: RegExp; // /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))$/

/**
 * Regex pattern for matching highlight syntax on paste
 * Matches: ==text== (double equals around text, global)
 */
const pasteRegex: RegExp; // /(?:^|\s)(==(?!\s+==)((?:[^=]+))==(?!\s+==))/g

Usage Examples:

// These patterns are automatically applied when the extension is installed:

// Typing "==hello world==" will automatically convert to highlighted text
// Pasting text with "==highlighted==" syntax will render as highlights

Keyboard Shortcuts

Built-in keyboard shortcuts for quick highlight operations.

  • Mod-Shift-h: Toggle highlight on selected text (uses default color in single-color mode)

Types

interface HighlightOptions {
  multicolor: boolean;
  HTMLAttributes: Record<string, any>;
}

interface HighlightAttributes {
  color?: string;
}

// Extension type (created via Mark.create<HighlightOptions>())
type HighlightExtension = {
  name: 'highlight';
  configure: (options?: Partial<HighlightOptions>) => HighlightExtension;
};

// Regex constants
const inputRegex: RegExp;
const pasteRegex: RegExp;

Architecture

The Tiptap Highlight Extension follows the standard Tiptap extension pattern:

  • Mark Extension: Extends Tiptap's Mark.create() to define inline formatting
  • HTML Rendering: Renders as <mark> elements with optional color styling
  • Command Integration: Integrates with Tiptap's command system for programmatic control
  • Input/Paste Rules: Automatic markdown-style syntax conversion
  • Keyboard Shortcuts: Built-in shortcuts for common operations
  • Multicolor Support: Optional support for multiple highlight colors with data attributes

Error Handling

The extension follows Tiptap's standard error handling patterns. Commands return boolean values indicating success/failure, and malformed configurations are handled gracefully with fallback to defaults.

Install with Tessl CLI

npx tessl i tessl/npm-tiptap--extension-highlight
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tiptap/extension-highlight@3.4.x
Badge
tessl/npm-tiptap--extension-highlight badge