Add a popover to your highlights

A popover for selecting text highlight colors.

Install

You can add the component via Tiptap CLI (for Vite or Next.js)

npx @tiptap/cli add highlight-popover

Manual Integration

For frameworks other than Vite or Next.js, add the component manually from the open-source repository.

Import styles

This component requires you to import our styles which were added to styles/keyframe-animation.scss and styles/_variables.scss.

Usage

import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { Highlight } from '@tiptap/extension-highlight'
import { HighlightPopover } from '@/components/tiptap-ui/highlight-popover'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit, Highlight.configure({ multicolor: true })],
    content: `
        <p style="text-align: left">
            <mark data-color="var(--tt-highlight-purple)" style="background-color: var(--tt-highlight-purple); color: inherit">
                <span class="selection">Highlight text</span>
            </mark>
            <span class="selection"> </span>
            <mark data-color="var(--tt-highlight-red)" style="background-color: var(--tt-highlight-red); color: inherit">
                <span class="selection">in</span>
            </mark>
            <span class="selection"> </span>
            <mark data-color="var(--tt-highlight-green)" style="background-color: var(--tt-highlight-green); color: inherit">
                <span class="selection">different</span>
            </mark>
            <span class="selection"> </span>
            <mark data-color="var(--tt-highlight-blue)" style="background-color: var(--tt-highlight-blue); color: inherit">
                <span class="selection">colors</span>
            </mark>
            <span class="selection"> to draw attention to key points.</span>
        </p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <HighlightPopover />
      </div>

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}

Props

Name	Type	Default	Description
editor	Editor \| null	null	The Tiptap editor instance
colors	HighlightColor[]	DEFAULT_HIGHLIGHT_COLORS	Array of highlight color options
hideWhenUnavailable	boolean	false	Whether the popover is in a floating context

Requirements

Used reference components

use-menu-navigation (hook)
use-tiptap-editor (hook)
button (primitive)
popover (primitive)
separator (primitive)
tiptap-utils (lib)
highlighter-icon (icon)
ban-icon (icon)

Open source feature(s)

@tiptap/extension-highlight