Cursor Overlay

"use client";

import * as React from "react";

import { CursorOverlay } from "@/components/ui/cursor-overlay";

import * as SelectionPlugins from "@platejs/selection/react";
import {
  Plate,
  PlateContainer,
  PlateContent,
  usePlateEditor,
} from "platejs/react";

const initialValue = [
  {
    type: "p",
    children: [
      {
        text: "Select this text, then click away from the editor — the highlight stays visible thanks to the cursor overlay.",
      },
    ],
  },
  {
    type: "p",
    children: [
      {
        text: "Try dragging a word to a new spot: a colored caret follows the drop target. The overlay renders selection rectangles and cursor positions on top of the content, powering drag & drop and external UI like AI or link toolbars.",
      },
    ],
  },
];

export default function CursorOverlayDemo() {
  const editor = usePlateEditor({
    plugins: [
      SelectionPlugins.CursorOverlayPlugin.configure({
        render: { afterEditable: () => <CursorOverlay /> },
      }),
    ],
    value: initialValue,
  });

  return (
    <div className="w-full bg-background p-6">
      <div className="mx-auto w-full max-w-2xl">
        <p className="mb-3 text-sm font-medium text-muted-foreground">
          Select text and click away, or drag a word, to see the cursor overlay.
        </p>
        <Plate editor={editor}>
          <PlateContainer className="relative w-full cursor-text overflow-y-auto rounded-lg border bg-card shadow-sm">
            <PlateContent
              className="min-h-[220px] px-6 py-5 text-base leading-7 text-foreground caret-primary selection:bg-brand/25 focus:outline-none [&>div]:mb-3"
              placeholder="Type something…"
            />
          </PlateContainer>
        </Plate>
      </div>
    </div>
  );
}