Lumen Editor Built-in Toolbar Modules: Full Reference

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.

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:

new Editor('#editor', {
  modules: [...Object.values(modules), customModule]
});

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.

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

inline

Formatting applied to a text selection without changing the block structure: bold, italic, underline, strikethrough.

block

Commands that change the type of the current block element: h1, h2, h3, paragraph, ul, ol, blockquote, code.

history

Undo/redo operations that traverse the editor’s change history: undo, redo.

insert

Commands that insert new content or elements at the cursor: link, image.

view

Commands that switch the editor’s display mode: html (toggle raw HTML source view).

Module interface

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

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.

name: 'highlight'

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.

group: 'inline'

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.

icon: '<svg viewBox="0 0 24 24" width="16" height="16">...</svg>'
// or simply:
icon: 'H'

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.

label: 'Highlight text'

(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.

exec: (editor) => {
  document.execCommand('backColor', false, 'yellow');
}

Complete custom module example

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]
});

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.

Get Started

Core Concepts

Guides

Configuration

Help

Lumen Editor Built-in Toolbar Modules: Full Reference

The `modules` export

Built-in modules

Groups at a glance

inline

block

history

insert

view

Module interface

Complete custom module example

​The modules export

​Built-in modules

​Groups at a glance

inline

block

history

insert

view

​Module interface

​Complete custom module example

The `modules` export

Built-in modules

Groups at a glance

Module interface

Complete custom module example