Skip to main content

Cursor Overlay

The cursor overlay is a component that can be used to display controlled cursors or selections over the editor.

It's the strategy used by slate-yjs to display the remote cursors.

Installation#

npm install @udecode/plate
# or
npm install @udecode/plate-ui-cursor

Usage#

The following example shows a cursor when dragging over the editor.

import React, { CSSProperties, useRef } from 'react';
import { Plate } from '@udecode/plate';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { editableProps } from './common/editableProps';
import { CursorOverlayContainer } from './cursor-overlay/CursorOverlayContainer';
import { cursorOverlayValue } from './cursor-overlay/cursorOverlayValue';
import { dragOverCursorPlugin } from './cursor-overlay/dragOverCursorPlugin';
import { staticCursors } from './cursor-overlay/staticCursors';

const styles: Record<string, CSSProperties> = {
  wrapper: { position: 'relative' },
};

export default () => {
  const ref = useRef(null);

  return (
    <div ref={ref} style={styles.wrapper}>
      <Plate
        editableProps={editableProps}
        plugins={[...basicNodesPlugins, dragOverCursorPlugin]}
        initialValue={cursorOverlayValue}
      >
        <CursorOverlayContainer containerRef={ref} cursors={staticCursors} />
      </Plate>
    </div>
  );
};

Source Code#

Edit this page