> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lumen.bjanczak.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Lumen Editor Built-in Toolbar Modules: Full Reference

> Reference for all 17 built-in Lumen Editor toolbar modules, including their groups and the full module object interface for creating custom modules.

Toolbar modules are the unit of extensibility in Lumen Editor. Each module describes a single toolbar button — its name, visual icon, tooltip label, and the action it performs on the editor when clicked. Lumen Editor ships with 17 built-in modules covering all standard rich-text operations, and you can add your own alongside them.

## The `modules` export

Import the `modules` named export to access the built-in module definitions as a plain object keyed by module name.

```js theme={null}
import { Editor, modules } from 'lumen-editor';

// modules is an object: { bold: {...}, italic: {...}, undo: {...}, ... }
console.log(modules.bold);
// { name: 'bold', group: 'inline', icon: '...', label: 'Bold', exec: [Function] }
```

You can spread `modules` into an array to pass all built-in modules to the editor, then append your own custom definitions:

```js theme={null}
new Editor('#editor', {
  modules: [...Object.values(modules), customModule]
});
```

<Note>
  The `modules` option defines which module objects are *available* to the editor. The `toolbar` option separately controls which of those module names actually appear as buttons, and in what order and grouping. A module must be registered in `modules` before you can reference its name in `toolbar`.
</Note>

## Built-in modules

The table below lists all 17 built-in modules, their group classification, and a short description of what each one does.

| Name            | Group     | Description                                                                              |
| --------------- | --------- | ---------------------------------------------------------------------------------------- |
| `undo`          | `history` | Reverts the most recent change in the editor's undo stack.                               |
| `redo`          | `history` | Re-applies the most recently undone change.                                              |
| `bold`          | `inline`  | Toggles bold (`<strong>`) formatting on the selected text.                               |
| `italic`        | `inline`  | Toggles italic (`<em>`) formatting on the selected text.                                 |
| `underline`     | `inline`  | Toggles underline (`<u>`) formatting on the selected text.                               |
| `strikethrough` | `inline`  | Toggles strikethrough (`<s>`) formatting on the selected text.                           |
| `h1`            | `block`   | Converts the current block to a level-1 heading (`<h1>`).                                |
| `h2`            | `block`   | Converts the current block to a level-2 heading (`<h2>`).                                |
| `h3`            | `block`   | Converts the current block to a level-3 heading (`<h3>`).                                |
| `paragraph`     | `block`   | Converts the current block back to a standard paragraph (`<p>`).                         |
| `ul`            | `block`   | Wraps selected content in an unordered list (`<ul>`).                                    |
| `ol`            | `block`   | Wraps selected content in an ordered list (`<ol>`).                                      |
| `blockquote`    | `block`   | Wraps the current block in a `<blockquote>`.                                             |
| `code`          | `block`   | Wraps the current block in a `<pre><code>` code block.                                   |
| `link`          | `insert`  | Opens a prompt to insert or edit a hyperlink (`<a>`).                                    |
| `image`         | `insert`  | Opens the image picker; calls `uploadImage` if configured, otherwise inserts a data URI. |
| `html`          | `view`    | Toggles between the WYSIWYG view and a raw HTML source view.                             |

### Groups at a glance

<CardGroup cols={2}>
  <Card title="inline" icon="text-size">
    Formatting applied to a text selection without changing the block structure: **bold**, **italic**, **underline**, **strikethrough**.
  </Card>

  <Card title="block" icon="square">
    Commands that change the type of the current block element: **h1**, **h2**, **h3**, **paragraph**, **ul**, **ol**, **blockquote**, **code**.
  </Card>

  <Card title="history" icon="clock-rotate-left">
    Undo/redo operations that traverse the editor's change history: **undo**, **redo**.
  </Card>

  <Card title="insert" icon="plus">
    Commands that insert new content or elements at the cursor: **link**, **image**.
  </Card>

  <Card title="view" icon="code">
    Commands that switch the editor's display mode: **html** (toggle raw HTML source view).
  </Card>
</CardGroup>

## Module interface

Every module — built-in or custom — must conform to the following object shape.

<ParamField body="name" type="string" required>
  A unique string identifier for the module. This is the value you reference in the `toolbar` option to place the button. Must not collide with any existing built-in module name unless you intend to replace it.

  ```js theme={null}
  name: 'highlight'
  ```
</ParamField>

<ParamField body="group" type="string" required>
  A logical grouping label used for documentation and potential style targeting. Built-in values are `'inline'`, `'block'`, `'history'`, and `'insert'`, but custom modules may use any string.

  ```js theme={null}
  group: 'inline'
  ```
</ParamField>

<ParamField body="icon" type="string" required>
  An HTML string rendered as the button's visual content. You can use a Unicode character, an emoji, an inline SVG, or an icon ligature string. The string is set as `innerHTML`, so SVG markup is fully supported.

  ```js theme={null}
  icon: '<svg viewBox="0 0 24 24" width="16" height="16">...</svg>'
  // or simply:
  icon: 'H'
  ```
</ParamField>

<ParamField body="label" type="string" required>
  A plain-text string used as the button's tooltip and `aria-label`. Keep it short and descriptive — this is the primary accessibility affordance for keyboard and screen-reader users.

  ```js theme={null}
  label: 'Highlight text'
  ```
</ParamField>

<ParamField body="exec" type="(editor: Editor) => void" required>
  The function called when the user clicks the toolbar button. Receives the live `Editor` instance, giving you access to the full editor API to read selection state, manipulate content, or trigger other commands.

  ```js theme={null}
  exec: (editor) => {
    document.execCommand('backColor', false, 'yellow');
  }
  ```
</ParamField>

### Complete custom module example

```js theme={null}
import { Editor, modules } from 'lumen-editor';

const highlightModule = {
  name: 'highlight',
  group: 'inline',
  icon: '🖊',
  label: 'Highlight text',
  exec: (editor) => {
    document.execCommand('backColor', false, 'yellow');
  }
};

new Editor('#editor', {
  toolbar: [
    ['bold', 'italic', 'underline', 'highlight']
  ],
  modules: [...Object.values(modules), highlightModule]
});
```

<Tip>
  For a full walkthrough of building and styling a custom module — including how to add toggle state, keyboard shortcuts, and dropdowns — see the [Custom Toolbar guide](../guides/custom-toolbar).
</Tip>