RemoteCursorOverlay.tsx

const RemoteSelection = ({ data, selectionRects, caretPosition }: CursorOverlayData<CursorData>) => {
  if (!data) {
    return null
  }

  return (
    <>
      {selectionRects.map((position, i) => (
        <div
          key={i}
          style={{ backgroundColor: data.color, position: 'absolute', pointerEvents: 'none', zIndex: '1', ...position }}
        />
      ))}
      {caretPosition && <Caret caretPosition={caretPosition} data={data} />}
    </>
  )
}

const RemoteCursorOverlayContent = ({ containerRef }: { containerRef?: RefObject<HTMLDivElement> }) => {
  const [cursors] = useRemoteCursorOverlayPositions<CursorData>({ containerRef })

  useEffect(() => {
    const activeUsers: ActiveUser[] = []

    cursors.forEach(cursor => {
      if (cursor.data) {
        activeUsers.push({ id: cursor.data.userId, color: cursor.data.color })
      }
    })

    yjsActions.activeUsers(activeUsers)
  }, [cursors])

  return (
    <>
      {cursors.map(cursor => (
        <RemoteSelection key={cursor.clientId} {...cursor} />
      ))}
    </>
  )
}

export const RemoteCursorOverlay = (props: { containerRef?: RefObject<HTMLDivElement> }) => {
  const editor = usePlateEditorState()
  const isRendered = usePlateSelectors().isRendered()
  const isSynced = useYjsSelectors.isSynced()
  const { disableCursors } = getPluginOptions<YjsPlugin>(editor, KEY_YJS)

  const hidden = disableCursors || !editor.children.length || !isSynced || !isRendered

  // existing issue with @slate-yjs/react https://github.com/BitPhinix/slate-yjs/issues/372
  const { onChange } = editor
  editor.onChange = () => {
    flushSync(() => {
      onChange()
    })
  }

  if (hidden) return null

  return <RemoteCursorOverlayContent {...props} />
}