Tool

MMO.editor · 1 symbol · generated 30 Sep 2026

class

Tool

A button of the <mmo-editor> toolbar, and what it does.

class MMO.editor.Tool

Namespace: MMO.editor
See: MMO.editor.PopoverTool for a tool that opens a panel), implement apply(), then register it. The editor records an undo step around apply(), keeps the selection where it was, and calls update() whenever the selection moves.

A tool is registered once, by name, and shared by every editor of the page: the editor is always passed to it, and what a tool renders belongs to the editor that asked for it. To write one: extend this class (or `MMO.editor.CommandTool` for a native editing command, or

MMO.editor.tools.Shout = class extends MMO.editor.Tool { apply(editor) {editor.insertHTML('<b>!</b>');} }; MMO.editor.tools.Shout.Register('shout', {label: '!', title: 'Shout', shortcut: 'Mod+Shift+1', inline: true}); //<mmo-editor tools="bold,shout">

Index

	hint readonly accessor
	constructor(name, options)
	Register(name, args) static	Create the tool and make it available to every editor under `name`.
	Unregister(name) static
	Exists(name) static
	Shared(name) static
	render(editor)	Called by the editor to build what the toolbar shows for this tool.
	createButton(editor, onclick, icon, label, title)	A toolbar button that does not take the focus: the selection stays in the text while it is clicked.
	onClick(editor, button)	What a click on the button does: apply the tool.
	canApply(editor, event)
	isEnabled(editor)
	isActive(editor)
	apply(editor, args)	Do what the tool does, on the editor's current selection.
	update(editor, node)	Called by the editor whenever the selection moves, to show the button's state.

Properties1

hint

readonlyaccessorTool.js:88

get hint()

Type: string

Methods13

constructor(name, options)

Tool.js:35

constructor(name, options = {})

name	`string`	the name it is registered with
options = {}	`Object`	- label {string} the text of the button, when it has no icon - icon {string} a `<mmo-icon>` name - title {string} the hint of the button - shortcut {string} `MMO.editor.matchShortcut` - inline {boolean} true when it only formats text, and can be used in an `[mmo-editor="inline"]` region - record {boolean} false when applying it must not be an undo step (undo itself, the source view)

Register(name, args)

staticTool.js:52

Create the tool and make it available to every editor under name.

static Register(name, ...args)

name	`string`	what the `tools` attribute calls it
...args	`...*`	the constructor's options
returns	MMO.editor.Tool
throws	`MMO.Error`	when the name is taken: `MMO.editor.Tool.Unregister` it first to replace a tool

Unregister(name)

staticTool.js:61

static Unregister(name)

name	`string`
returns	?MMO.editor.Tool	the tool that was removed

Exists(name)

staticTool.js:71

static Exists(name)

name	`string`
returns	`boolean`

Shared(name)

staticTool.js:80

static Shared(name)

name	`string`
returns	MMO.editor.Tool
throws	`MMO.Error`	when no tool has this name

render(editor)

Tool.js:97

Called by the editor to build what the toolbar shows for this tool.

render(editor)

editor	`HTMLElement`	the `<mmo-editor>`
returns	`HTMLElement`

createButton(editor, onclick, icon, label, title)

Tool.js:110

A toolbar button that does not take the focus: the selection stays in the text while it is clicked.

createButton(editor, onclick, icon = null, label = null, title = null)

editor	`HTMLElement`
onclick	`Function`
icon = null	`?string`	defaults to the tool's
label = null	`?string`	defaults to the tool's
title = null	`?string`	defaults to the tool's hint
returns	`HTMLButtonElement`

onClick(editor, button)

Tool.js:128

What a click on the button does: apply the tool.

onClick(editor, button)

editor	`HTMLElement`
button	`HTMLElement`

canApply(editor, event)

Tool.js:137

canApply(editor, event)

editor	`HTMLElement`
event	`KeyboardEvent`
returns	`boolean`	true when the event is this tool's shortcut

isEnabled(editor)

Tool.js:145

isEnabled(editor)

editor	`HTMLElement`
returns	`boolean`	false greys the button out

isActive(editor)

Tool.js:153

isActive(editor)

editor	`HTMLElement`
returns	`boolean`	true shows the button pressed: the selection already has what the tool applies

apply(editor, args)

Tool.js:163

Do what the tool does, on the editor's current selection. Called through editor.exec(), which has already put the selection back in the text.

apply(editor, ...args)

editor	`HTMLElement`
...args	`...*`	what `editor.exec()` was given after the tool

update(editor, node)

Tool.js:172

Called by the editor whenever the selection moves, to show the button's state.

update(editor, node)

editor	`HTMLElement`
node	`HTMLElement`	what `render()` returned