Cursor Overlay

1'use client';
2 
3import * as React from 'react';
4 
5import { AIChatPlugin } from '@platejs/ai/react';
6import {
7  type CursorData,
8  type CursorOverlayState,
9  useCursorOverlay,
10} from '@platejs/selection/react';
11import { getTableGridAbove } from '@platejs/table';
12import { RangeApi } from 'platejs';
13import { useEditorRef, usePluginOption } from 'platejs/react';
14 
15import { cn } from '@/lib/utils';
16 
17export function CursorOverlay() {
18  const { cursors } = useCursorOverlay();
19 
20  return (
21    <>
22      {cursors.map((cursor) => (
23        <Cursor key={cursor.id} {...cursor} />
24      ))}
25    </>
26  );
27}
28 
29function Cursor({
30  id,
31  caretPosition,
32  data,
33  selection,
34  selectionRects,
35}: CursorOverlayState<CursorData>) {
36  const editor = useEditorRef();
37  const streaming = usePluginOption(AIChatPlugin, 'streaming');
38  const { style, selectionStyle = style } = data ?? ({} as CursorData);
39  const isCursor = RangeApi.isCollapsed(selection);
40 
41  if (streaming) return null;
42 
43  // Skip overlay for multi-cell table selection (table has its own selection UI)
44  if (id === 'selection' && selection) {
45    const cellEntries = getTableGridAbove(editor, {
46      at: selection,
47      format: 'cell',
48    });
49 
50    if (cellEntries.length > 1) {
51      return null;
52    }
53  }
54 
55  return (
56    <>
57      {selectionRects.map((position, i) => (
58        <div
59          key={i}
60          className={cn(
61            'pointer-events-none absolute z-10',
62            id === 'selection' && 'bg-brand/25',
63            id === 'selection' && isCursor && 'bg-primary'
64          )}
65          style={{
66            ...selectionStyle,
67            ...position,
68          }}
69        />
70      ))}
71      {caretPosition && (
72        <div
73          className={cn(
74            'pointer-events-none absolute z-10 w-0.5',
75            id === 'drag' && 'w-px bg-brand'
76          )}
77          style={{ ...caretPosition, ...style }}
78        />
79      )}
80    </>
81  );
82}