Plate

Cursor Overlay

udecode

Installation

No MCP yet? Connect your agent.

Features

  • Maintains selection highlight when another element is focused.
  • Dynamic selection display (e.g., during AI streaming).
  • Shows cursor position during drag operations.
  • Customizable styling for cursors and selections.
  • Essential for external UI interactions (e.g., link toolbar, AI combobox).

Usage

Installation

The fastest way to add cursor overlay functionality is with the CursorOverlayKit, which includes the pre-configured CursorOverlayPlugin and the CursorOverlay UI component.

  • CursorOverlay: Renders cursor and selection overlays.

Add Kit

import { createPlateEditor } from "platejs/react";
import { CursorOverlayKit } from "@/components/editor/plugins/cursor-overlay-kit";

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...CursorOverlayKit,
  ],
});