Editor

Turn into menu

The “Turn into” list: convert a block to another type. The current type is checked. Used as a submenu of the block menu and of the text toolbar.

Usage

Use the Turn into menu to change a block’s type while keeping its text.
It opens from the block menu and the text toolbar; render it yourself only in a custom editor.
Don’t use it to insert new blocks; that is the slash menu’s job.

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/TurnintomenuExample.tsx

import { TurnIntoMenu } from '@krackedui/motion';

export function TurnIntoMenuExample() {
  return (
    <TurnIntoMenu block={{ type: 'text' }} highlightedId="text" />
  );
}

Examples

Toggle heading checked

Headings compare toggleable too, so a toggle heading checks “Toggle heading N”.

Bare

bare drops the floating surface, for embedding in another menu.

API Reference

TurnIntoMenu

Based on <div> and supports its props (except onSelect). Adds:

Prop	Type	Default
block	`Pick<Block, "type" \| "props">`
onSelect	`(item: TurnIntoItem) => void`
highlightedId	`string`
bare	`boolean`	`false`
autoFocus	`boolean`	`false`

TurnIntoItem

Entries of turnIntoItems; isKind(block, kind) decides the checkmark.

Prop	Type	Default
id	`string`
label	`string`
icon	`IconName`
kind	`BlockKind \| null`
submenu	`boolean`

Accessibility

The list is a labelled listbox and a single tab stop: ↑/↓/Home/End move the highlight (aria-activedescendant), Enter/Space pick it. Inside BlockActionMenu the same entries are a Radix submenu.
In the text toolbar the list opens from “Normal Text ▸” (aria-expanded); opened from the keyboard it takes focus, and Escape closes it and returns focus to the trigger.

ON THIS PAGE

Turn into menu

Install the package (React 19):

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

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

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