Editor

Block action menu

The menu that opens from a block’s ⋮⋮ handle: search, Turn into and Color submenus, Copy link, Duplicate, Move to, Delete, Comment, Ask AI, and a “Last edited” footer.

Usage

Editor opens BlockActionMenu from the ⋮⋮ handle; render it yourself only in a custom editor.
Use it for actions on one block (turn into, color, duplicate, delete).
Don’t use it for page-level actions; use Menu for the page’s own menu.

Installation

Install the package (React 19):

terminal

npm install @krackedui/motion

terminal

pnpm add @krackedui/motion

terminal

yarn add @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx

import '@krackedui/motion/styles.css';

Use it anywhere inside your app's `<Theme>` (see Installation):

/src/BlockactionmenuExample.tsx

import { MenuFooter, MenuLabel, MenuList, MenuRow, MenuSearch, MenuSurface } from '@krackedui/motion';

export function BlockActionMenuExample() {
  // Static rendering of the open menu (for docs and previews).

  return (
    <MenuSurface width={265} className="flex flex-col">
      <MenuSearch noIcon wrapperClassName="px-3 pb-1 pt-2" placeholder="Search actions…" readOnly />
      <MenuLabel id="block-menu-label" className="mx-1 mt-1">Text</MenuLabel>
      <MenuList aria-labelledby="block-menu-label" className="pt-0">
        <MenuRow icon="arrowSquarePathUpDown" submenu>Turn into</MenuRow>
        <MenuRow icon="blockColor" submenu>Color</MenuRow>
      </MenuList>
      <MenuList aria-label="Block actions" separator>
        <MenuRow icon="link" shortcut="⌘^L">Copy link to block</MenuRow>
        <MenuRow icon="duplicate" shortcut="⌘D">Duplicate</MenuRow>
        <MenuRow icon="arrowTurnUpRight" shortcut="⌘⇧P">Move to</MenuRow>
        <MenuRow icon="trash" shortcut="Del">Delete</MenuRow>
      </MenuList>
      <MenuList aria-label="Review" separator>
        <MenuRow icon="commentPencil" shortcut="⌘⇧M">Comment</MenuRow>
        <MenuRow icon="commentPencil" shortcut="⌘⇧⌥X">Suggest edits</MenuRow>
      </MenuList>
      <MenuList aria-label="AI" separator>
        <MenuRow icon="aiFace" shortcut="⌘J">Ask AI</MenuRow>
      </MenuList>
      <MenuFooter lines={['Last edited by You', 'Today at 9:00 AM', '6 words, 31 characters']} />
    </MenuSurface>
  );
}

Examples

Interactive

Click the ⋮⋮ handle. Turn into and Color change the block; typing in the search box filters actions and turn-into targets.

A paragraph with six words here

Click the handle

Color submenu (static)

ColorMenuList is the Color submenu: “Last used”, then text colors, then background colors.

API Reference