block-selection-kit

1'use client';
2 
3import { AIChatPlugin } from '@platejs/ai/react';
4import { BlockSelectionPlugin } from '@platejs/selection/react';
5import { getPluginTypes, isHotkey, KEYS } from 'platejs';
6 
7import { BlockSelection } from '@/registry/ui/block-selection';
8 
9export const hasSelectableClass = ({
10  attributes,
11  className,
12}: {
13  attributes: { className?: string };
14  className?: string;
15}) =>
16  [className, attributes.className]
17    .filter(Boolean)
18    .join(' ')
19    .includes('slate-selectable');
20 
21export const BlockSelectionKit = [
22  BlockSelectionPlugin.configure(({ editor }) => ({
23    options: {
24      enableContextMenu: true,
25      isSelectable: (element) =>
26        !getPluginTypes(editor, [KEYS.column, KEYS.codeLine, KEYS.td]).includes(
27          element.type
28        ),
29      onKeyDownSelecting: (editor, e) => {
30        if (isHotkey('mod+j')(e)) {
31          editor.getApi(AIChatPlugin).aiChat.show();
32        }
33      },
34    },
35    render: {
36      belowRootNodes: (props) => {
37        if (!hasSelectableClass(props)) return null;
38 
39        return <BlockSelection {...(props as any)} />;
40      },
41    },
42  })),
43];