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

index.mddocs/

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.

docs

index.md

tile.json