# Editor block-type menu

> A menu button in the toolbar that sets paragraph, headings, lists, quote or code at the caret in one undoable step. A live Texuli example with its source.

Language: en
Canonical: https://texuli.com/examples/editor-block-menu/
Markdown: https://texuli.com/examples/editor-block-menu.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML.
Last Updated: 2026-11-13

---

[All examples](https://texuli.com/examples/)

A menu button in the toolbar that sets paragraph, headings, lists, quote or code at the caret in one undoable step.

[Editor block-type menu](https://texuli.com/examples/editor-block-menu/)

`editor-block-menu` · `editor/BlockTypeMenu`

 editor menu

 Props
- `controller`
- `disabled`
- `onCommand`
- `toolbarItem`

Live example loads in an isolated same-origin preview frame.

Source (editor/entries.ts)

```
import { defineExample } from '../registry.ts';

export const editorBasicExample = defineExample({
  id: 'editor-basic',
  title: 'Rich text editor',
  description:
    'A labelled multiline textbox over the closed editor model: headings, marks, lists, todos, quotes and code rendered as real elements, with Markdown in and out.',
  tags: ['editor', 'rich-text', 'keyboard', 'a11y'],
  component: 'editor/RichTextEditor',
  props: ['value', 'onChange', 'label', 'placeholder', 'readonly', 'toolbar'],
  load: () => import('./EditorBasicDemo.svelte'),
});

export const editorToolbarExample = defineExample({
  id: 'editor-toolbar',
  title: 'Editor with toolbar and links',
  description:
    'The roving formatting toolbar with pressed states and shortcuts, the link dialog that refuses unsafe addresses visibly, and the Markdown the document saves as.',
  tags: ['editor', 'toolbar', 'url-policy', 'keyboard'],
  component: 'editor/EditorToolbar',
  props: ['controller', 'onCommand', 'onLinkRequest', 'trust'],
  load: () => import('./EditorToolbarDemo.svelte'),
});

export const editorLongDocumentExample = defineExample({
  id: 'editor-long-document',
  title: 'Long document editing',
  description:
    'Four hundred blocks rendered in full and keyed by id, with off-screen blocks skipping layout and paint through content-visibility.',
  tags: ['editor', 'performance', 'long-document'],
  component: 'editor/RichTextEditor',
  props: ['value', 'onChange', 'label'],
  load: () => import('./EditorLongDocumentDemo.svelte'),
});

export const editorBlockMenuExample = defineExample({
  id: 'editor-block-menu',
  title: 'Editor block-type menu',
  description:
    'A menu button in the toolbar that sets paragraph, headings, lists, quote or code at the caret in one undoable step.',
  tags: ['editor', 'menu', 'keyboard', 'a11y'],
  component: 'editor/BlockTypeMenu',
  props: ['controller', 'onCommand', 'disabled', 'toolbarItem'],
  load: () => import('./EditorBlockMenuDemo.svelte'),
});

export const editorDialectExportExample = defineExample({
  id: 'editor-dialect-export',
  title: 'Export for chat',
  description:
    'The document written for Slack, Discord, WhatsApp, Telegram, Teams, Google Chat, Mattermost or plain text, with what each format loses listed and broadcast mentions kept as text.',
  tags: ['editor', 'markdown', 'chat', 'export'],
  component: 'editor/DialectExport',
  props: ['controller', 'doc', 'dialect', 'dialects', 'names', 'trust', 'onCopy'],
  load: () => import('./EditorDialectExportDemo.svelte'),
});

export const editorPasteExample = defineExample({
  id: 'editor-paste',
  title: 'Markdown and HTML paste',
  description:
    'Clipboard HTML read without a DOM (scripts, handlers and unsafe links dropped) and plain text kept plain unless pasted as Markdown.',
  tags: ['editor', 'paste', 'markdown', 'url-policy'],
  component: 'editor/RichTextEditor',
  props: ['controller'],
  load: () => import('./EditorPasteDemo.svelte'),
});

export const editorEmojiExample = defineExample({
  id: 'editor-emoji',
  title: 'Editor emoji',
  description:
    'An emoji button in the editor toolbar that opens the emoji picker in a popover, and a :shortcode: input rule, each insertion one undo step.',
  tags: ['editor', 'emoji', 'keyboard', 'a11y'],
  component: 'editor/EditorEmojiButton',
  props: ['controller', 'onCommand', 'recentIds', 'onRecentIdsChange', 'messages', 'artResolver'],
  load: () => import('./EditorEmojiDemo.svelte'),
});
```

## For agents

A worked example rendered live in the browser; the isolated preview frame (`/examples/preview/<id>/`) shows the same example without the site shell, and the example page next to it carries its code. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md).

MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)):

- `example.search`: Find component examples.
- `component.get`: Read a component manifest.

Docs:

- [Component docs for agents (llms.txt)](https://texuli.com/llms/llms.txt)
- [Catalog manifest snapshot (JSON)](https://texuli.com/catalog/catalog.json)
- [@texuli/examples README](https://github.com/DailybotHQ/texuli/blob/main/packages/examples/README.md)
- [texuli README](https://github.com/DailybotHQ/texuli/blob/main/packages/texuli/README.md)