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
- Yarn
#
UsageThe 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> ); };