Block Selection

1'use client';
2 
3import * as React from 'react';
4 
5import { DndPlugin } from '@platejs/dnd';
6import { useBlockSelected } from '@platejs/selection/react';
7import { cva } from 'class-variance-authority';
8import { type PlateElementProps, usePluginOption } from 'platejs/react';
9 
10export const blockSelectionVariants = cva(
11  'pointer-events-none absolute inset-0 z-1 bg-brand/[.13] transition-opacity',
12  {
13    defaultVariants: {
14      active: true,
15    },
16    variants: {
17      active: {
18        false: 'opacity-0',
19        true: 'opacity-100',
20      },
21    },
22  }
23);
24 
25export function BlockSelection(props: PlateElementProps) {
26  const isBlockSelected = useBlockSelected();
27  const isDragging = usePluginOption(DndPlugin, 'isDragging');
28 
29  if (
30    !isBlockSelected ||
31    props.plugin.key === 'tr' ||
32    props.plugin.key === 'table'
33  )
34    return null;
35 
36  return (
37    <div
38      className={blockSelectionVariants({
39        active: isBlockSelected && !isDragging,
40      })}
41      data-slot="block-selection"
42    />
43  );
44}