Highlight

The Highlight extension allows you to highlight text in your editor with support for multiple colors, keyboard shortcuts, and synchronized color selection across toolbar and bubble menu.

• Based on TipTap's highlight extension. @tiptap/extension-highlight

Usage

import { RichTextProvider } from 'reactjs-tiptap-editor'

// Base Kit
import { Document } from '@tiptap/extension-document'
import { Text } from '@tiptap/extension-text'
import { Paragraph } from '@tiptap/extension-paragraph'
import { Dropcursor, Gapcursor, Placeholder, TrailingNode } from '@tiptap/extensions'
import { HardBreak } from '@tiptap/extension-hard-break'
import { TextStyle } from '@tiptap/extension-text-style';
import { ListItem } from '@tiptap/extension-list';

// Extension
import { Highlight, RichTextHighlight } from 'reactjs-tiptap-editor/highlight'; 
// ... other extensions


// Import CSS
import 'reactjs-tiptap-editor/style.css';

const extensions = [
  // Base Extensions
  Document,
  Text,
  Dropcursor,
  Gapcursor,
  HardBreak,
  Paragraph,
  TrailingNode,
  ListItem,
  TextStyle,
  Placeholder.configure({
    placeholder: 'Press \'/\' for commands',
  })

  ...
  // Import Extensions Here
  Highlight
];

const RichTextToolbar = () => {
  return (
    <div className="flex items-center gap-2 flex-wrap border-b border-solid">
      <RichTextHighlight /> {}
    </div>
  )
}

const App = () => {
   const editor = useEditor({
    textDirection: 'auto', // global text direction
    extensions,
  });

  return (
    <RichTextProvider
      editor={editor}
    >
      <RichTextToolbar />

      <EditorContent
        editor={editor}
      />
    </RichTextProvider>
  );
};

Features

• 🎨 Multiple Colors: Support for multiple highlight colors
• ⌨️ Keyboard Shortcuts: Quick highlighting with Mod-Shift-H
• 🔄 Smart Toggle: Intelligent highlight toggling and replacement
• 🎯 Synchronized Selection: Color picker syncs between toolbar and bubble menu
• 🎨 Custom Colors: Add custom highlight colors via color picker
• 💾 Recent Colors: Automatically tracks recently used colors
• ❌ No Fill Option: Option to remove highlight

Options

defaultColor

Type: string
Default: undefined

The default highlight color to use when the extension is initialized. This color will be used when applying highlight via keyboard shortcut for the first time.

Highlight.configure({
  defaultColor: '#ffff00', // Yellow
  // or
  defaultColor: '#ffc078', // Orange
})

shortcutKeys

Type: string[]
Default: ['⇧', 'mod', 'H']

Keyboard shortcuts for applying the highlight. Default is Mod-Shift-H (Ctrl-Shift-H on Windows/Linux, Cmd-Shift-H on Mac).

Highlight.configure({
  shortcutKeys: ['⇧', 'mod', 'H'],
})

Keyboard Shortcut Behavior

The Mod-Shift-H keyboard shortcut has intelligent toggle behavior:

1. No highlight applied: Applies the currently selected highlight color
2. Same color already applied: Removes the highlight (toggle off)
3. Different color applied: Replaces with the currently selected highlight color
4. "No Fill" selected: Does nothing (prevents applying undefined highlight)

Color Selection Synchronization

The extension maintains a shared highlight color state across all instances:

• Selecting a color in the toolbar updates the bubble menu
• Selecting a color in the bubble menu updates the toolbar
• Keyboard shortcut uses the last selected color
• All color pickers show the same selected color
• Selecting "No Fill" clears the stored color

Examples

Basic Usage

import { Highlight } from 'reactjs-tiptap-editor/highlight';

const extensions = [
  Highlight,
];

With Default Color

import { Highlight } from 'reactjs-tiptap-editor/highlight';

const extensions = [
  Highlight.configure({
    defaultColor: '#ffc078', // Orange highlight
  }),
];

Programmatic Usage

// Apply highlight with color
editor.chain().focus().setHighlight({ color: '#ffff00' }).run();

// Remove highlight
editor.chain().focus().unsetHighlight().run();

// Toggle highlight (removes if same color, applies if different or none)
editor.chain().focus().toggleHighlight({ color: '#ffff00' }).run();

// Check if highlight is active
const isHighlightActive = editor.isActive('highlight');

// Check if specific color is active
const isYellowActive = editor.isActive('highlight', { color: '#ffff00' });

// Get current highlight color
const { color } = editor.getAttributes('highlight');

Color Picker

The highlight color picker includes:

• No Fill: Remove highlight from text
• Color Palette: Predefined colors for quick selection
• Recent Colors: Last 10 used colors
• Custom Color: Pick any color using the color picker

Differences from Color Extension

Feature	Highlight	Color
Purpose	Background highlighting	Text color
Default Shortcut	Mod-Shift-H	Mod-Shift-C
No Fill Behavior	Removes highlight	Removes text color
Visual Style	Background color	Foreground color

Source

Source • Docs

Contributors

Hung Hoang

Found-L

markok

Condor Hero

Changelog

v1.0.0 on 12/7/2025

51948 - feat: refactor code, dynamic bubble, toolbar, fix error

9abcb - fix: Resolve parameter errors and change loss caused by code conflicts after upgrading Tiptap version

v0.4.2 on 12/4/2025

419a0 - fix: Sync issues for Color/Highlight

v0.4.0 on 12/4/2025

6a3a7 - feat: migrate tiptap v2 to v3

v0.3.28 on 10/13/2025

20125 - feat: add shortcutKeys override(s) to extensions

48e49 - feat(highlight): impl .defaultColor and render 'no fill' as none instead of yellow