Block Selection

Text 1

About

A visual overlay that highlights selected blocks in a Plate rich-text editor.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Block Selection to your project and fits it to your theme.

Code

How Block Selection is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";

import { BlockSelection } from "@/components/ui/block-selection";
import { BlockSelectionPlugin } from "@platejs/selection/react";
import { Plate, PlateContent, usePlateEditor } from "platejs/react";

export default function BlockSelectionDemo() {
  const editor = usePlateEditor({
    plugins: [
      BlockSelectionPlugin.configure({
        options: { enableContextMenu: true },
        render: {
          belowRootNodes: (props) => <BlockSelection {...(props as any)} />,
        },
      }),
    ],
    value: [
      {
        id: "1",
        type: "p",
        children: [{ text: "This block is selected — note the blue overlay." }],
      },
      {
        id: "2",
        type: "p",
        children: [
          { text: "Drag from the editor padding to select multiple blocks." },
        ],
      },
    ],
  });

  React.useEffect(() => {
    editor.api.blockSelection?.set?.(["1"]);
  }, [editor]);

  return (
    <div className="w-full max-w-xl p-6">
      <Plate editor={editor}>
        <PlateContent className="relative rounded-md border p-4 leading-7 outline-none [&_[data-slate-node=element]]:relative [&_[data-slate-node=element]]:py-1" />
      </Plate>
    </div>
  );
}