BlockOptions

Overview

BlockOptions is compound component for block context menus. It supports controlled/uncontrolled modes, Floating UI positioning, and integrates seamlessly with other UI components.

Features

API — controlled/uncontrolled with open/onOpenChange
Compound components — Root, Content, Trigger, Item, Group, Separator
Floating positioning — automatic positioning via Floating UI
Helper hook — useBlockActions for common operations

Installation

npm install @yoopta/ui
# or
yarn add @yoopta/ui

Basic Usage

import { BlockOptions, useBlockActions } from '@yoopta/ui/block-options';

function MyBlockOptions({ open, onOpenChange, blockId, anchor }) {
  const { duplicateBlock, copyBlockLink, deleteBlock } = useBlockActions();

  return (
    <BlockOptions open={open} onOpenChange={onOpenChange} anchor={anchor}>
      <BlockOptions.Content side="right" align="start">
        <BlockOptions.Group>
          <BlockOptions.Item onSelect={() => duplicateBlock(blockId)}>Duplicate</BlockOptions.Item>
          <BlockOptions.Item onSelect={() => copyBlockLink(blockId)}>Copy link</BlockOptions.Item>
        </BlockOptions.Group>
        <BlockOptions.Separator />
        <BlockOptions.Group>
          <BlockOptions.Item variant="destructive" onSelect={() => deleteBlock(blockId)}>
            Delete
          </BlockOptions.Item>
        </BlockOptions.Group>
      </BlockOptions.Content>
    </BlockOptions>
  );
}

API Reference

`BlockOptions` (Root)

Root component that manages open state and context.

<BlockOptions open={isOpen} onOpenChange={setIsOpen} anchor={anchorElement} defaultOpen={false}>
  {children}
</BlockOptions>

Props:

Prop	Type	Description
`open`	`boolean`	Controlled open state
`onOpenChange`	`(open: boolean) => void`	Called when open state changes
`defaultOpen`	`boolean`	Default open state (uncontrolled)
`anchor`	`HTMLElement \| null`	Anchor element for positioning
`children`	`ReactNode`	Content and trigger components

`BlockOptions.Trigger`

Optional trigger button (for uncontrolled usage).

<BlockOptions>
  <BlockOptions.Trigger asChild>
    <button>Open Menu</button>
  </BlockOptions.Trigger>
  <BlockOptions.Content>...</BlockOptions.Content>
</BlockOptions>

Props:

Prop	Type	Description
`asChild`	`boolean`	Merge props onto child element
`className`	`string`	Custom CSS classes

`BlockOptions.Content`

Floating content panel.

<BlockOptions.Content side="right" align="start" sideOffset={5}>
  {/* Items here */}
</BlockOptions.Content>

Props:

Prop	Type	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	Placement side
`align`	`'start' \| 'center' \| 'end'`	Alignment
`sideOffset`	`number`	Offset from anchor (default: 5)
`className`	`string`	Custom CSS classes

`BlockOptions.Item`

Menu item button.

<BlockOptions.Item onSelect={handleAction} variant="default" icon={<CopyIcon />} keepOpen={false}>
  Duplicate
</BlockOptions.Item>

Props:

Prop	Type	Description
`onSelect`	`(event) => void`	Called when item is selected
`variant`	`'default' \| 'destructive'`	Visual variant
`icon`	`ReactNode`	Icon to display
`keepOpen`	`boolean`	Keep menu open after selection
`disabled`	`boolean`	Disable the item

`BlockOptions.Group`

Groups items together.

<BlockOptions.Group>
  <BlockOptions.Item>Item 1</BlockOptions.Item>
  <BlockOptions.Item>Item 2</BlockOptions.Item>
</BlockOptions.Group>

`BlockOptions.Separator`

Visual separator between groups.

<BlockOptions.Separator />

`useBlockActions()`

Helper hook with common block operations.

const { duplicateBlock, copyBlockLink, deleteBlock } = useBlockActions();

// Usage
duplicateBlock(blockId);
copyBlockLink(blockId);
deleteBlock(blockId);

Examples

With ActionMenuList (Turn Into)

function MyBlockOptions({ open, onOpenChange, blockId, anchor }) {
  const { duplicateBlock, deleteBlock } = useBlockActions();
  const turnIntoRef = useRef<HTMLButtonElement>(null);
  const [actionMenuOpen, setActionMenuOpen] = useState(false);

  const onActionMenuClose = (menuOpen: boolean) => {
    setActionMenuOpen(menuOpen);
    if (!menuOpen) onOpenChange?.(false); // Close both
  };

  return (
    <>
      <BlockOptions open={open} onOpenChange={onOpenChange} anchor={anchor}>
        <BlockOptions.Content side="right">
          <BlockOptions.Group>
            <BlockOptions.Item ref={turnIntoRef} onSelect={() => setActionMenuOpen(true)} keepOpen>
              Turn into
            </BlockOptions.Item>
          </BlockOptions.Group>
          <BlockOptions.Separator />
          <BlockOptions.Group>
            <BlockOptions.Item onSelect={() => duplicateBlock(blockId)}>
              Duplicate
            </BlockOptions.Item>
            <BlockOptions.Item variant="destructive" onSelect={() => deleteBlock(blockId)}>
              Delete
            </BlockOptions.Item>
          </BlockOptions.Group>
        </BlockOptions.Content>
      </BlockOptions>

      <ActionMenuList
        open={actionMenuOpen}
        onOpenChange={onActionMenuClose}
        anchor={turnIntoRef.current}
        blockId={blockId}
        view="small"
        placement="right-start">
        <ActionMenuList.Content />
      </ActionMenuList>
    </>
  );
}

Uncontrolled with Trigger

<BlockOptions>
  <BlockOptions.Trigger>
    <button>Open Options</button>
  </BlockOptions.Trigger>
  <BlockOptions.Content>
    <BlockOptions.Group>
      <BlockOptions.Item onSelect={handleDuplicate}>Duplicate</BlockOptions.Item>
      <BlockOptions.Item variant="destructive" onSelect={handleDelete}>
        Delete
      </BlockOptions.Item>
    </BlockOptions.Group>
  </BlockOptions.Content>
</BlockOptions>

Styling

CSS Variables

:root {
  --yoopta-ui-block-options-bg: var(--yoopta-ui-background);
  --yoopta-ui-block-options-border: var(--yoopta-ui-border);
  --yoopta-ui-block-options-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --yoopta-ui-block-options-radius: 0.5rem;
  --yoopta-ui-block-options-button-hover: var(--yoopta-ui-accent);
  --yoopta-ui-block-options-button-destructive-color: hsl(var(--yoopta-ui-destructive));
}

Best Practices

Use keepOpen for submenu triggers

<BlockOptions.Item
  onSelect={() => setActionMenuOpen(true)}
  keepOpen // Prevents BlockOptions from closing
>
  Turn into
</BlockOptions.Item>

Close both menus after action

const onActionMenuClose = (menuOpen: boolean) => {
  setActionMenuOpen(menuOpen);
  if (!menuOpen) {
    onOpenChange?.(false); // Also close BlockOptions
  }
};

FloatingBlockActions

Trigger BlockOptions from drag handle

ActionMenuList

Open from BlockOptions for “Turn into”

Getting Started

Core Concepts

Available Plugins

Marks

UI Components

API Reference

Overview

Features

Installation

Basic Usage

API Reference

`BlockOptions` (Root)

`BlockOptions.Trigger`

`BlockOptions.Content`

`BlockOptions.Item`

`BlockOptions.Group`

`BlockOptions.Separator`

`useBlockActions()`

Examples

With ActionMenuList (Turn Into)

Uncontrolled with Trigger

Styling

CSS Variables

Best Practices

FloatingBlockActions

ActionMenuList

​Overview

​Features

​Installation

​Basic Usage

​API Reference

​BlockOptions (Root)

​BlockOptions.Trigger

​BlockOptions.Content

​BlockOptions.Item

​BlockOptions.Group

​BlockOptions.Separator

​useBlockActions()

​Examples

​With ActionMenuList (Turn Into)

​Uncontrolled with Trigger

​Styling

​CSS Variables

​Best Practices

​Related Components

FloatingBlockActions

ActionMenuList

Overview

Features

Installation

Basic Usage

API Reference

`BlockOptions` (Root)

`BlockOptions.Trigger`

`BlockOptions.Content`

`BlockOptions.Item`

`BlockOptions.Group`

`BlockOptions.Separator`

`useBlockActions()`

Examples

With ActionMenuList (Turn Into)

Uncontrolled with Trigger

Styling

CSS Variables

Best Practices

Related Components