Cursor Overlay

A visual overlay for cursors and selections.

Cursor Overlay
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

光标覆盖功能为选择和光标位置提供视觉反馈,在编辑器失去焦点或拖动操作期间保持上下文时特别有用。

功能

  • 当其他元素获得焦点时保持选择高亮
  • 动态选择（例如在 AI 流式传输期间）
  • 在拖动操作期间显示光标位置
  • 可自定义光标和选择的样式
  • 对外部 UI 交互必不可少（例如链接工具栏、AI 组合框）

Installation

npm install @udecode/plate-selection

Usage

import { CursorOverlayPlugin } from '@udecode/plate-selection/react';
import { CursorOverlay } from '@/components/plate-ui/cursor-overlay';
const plugins = [
  // ...otherPlugins,
  CursorOverlayPlugin.configure({
    render: { afterEditable: () => <CursorOverlay /> },
  }),
];

Editor Container

编辑器需要一个容器组件，以确保光标覆盖的正确位置：

export const EditorContainer = (props: React.HTMLAttributes<HTMLDivElement>) => {
  const editor = useEditorRef();
  const containerRef = useEditorContainerRef();
 
  return <div id={editor.uid} ref={containerRef} {...props} />;
};

This component is available in Editor.

保持选择焦点

为了在聚焦 UI 元素时保持编辑器的选择状态，请为这些元素添加 data-plate-focus="true" 属性：

<ToolbarButton data-plate-focus="true">
  {/* toolbar content */}
</ToolbarButton>

插件

CursorOverlayPlugin

管理光标和选择覆盖的插件。

Options

Collapse all

    包含光标状态的对象。默认：{}

API

editor.api.cursorOverlay.addCursor

添加一个带有指定键和状态的光标覆盖。

Parameters

Collapse all

    光标的唯一标识符（例如，'blur', 'drag', 'custom'）。

    包含选择和可选样式的光标状态。

editor.api.cursorOverlay.removeCursor

通过其键移除光标覆盖。

Parameters

Collapse all

    要移除的光标的键。

Hooks

useCursorOverlay

一个管理光标和选择覆盖状态的钩子，提供实时光标位置和选择矩形。

Parameters

Collapse all

Returns

Collapse all

    包含光标状态的数组，每个光标状态都包含其对应的选择矩形和样式数据。

    手动触发光标位置重新计算的函数。

CommentsDate