Extensibility
Plugin System
Author modules, register formats and serializers, and extend Lextrix without forking core.
Lextrix extensions are modules loaded by the active theme and managed by PluginHost. Register formats, modules, serializers, and themes without modifying editor internals.
Minimal module
import Module from 'lextrix-core/core/module.js';
import { lxrPath } from 'lextrix-core/registry-paths.js';
import Lextrix from 'lextrix';
class WordCountModule extends Module {
constructor(lextrix, options) {
super(lextrix, options);
lextrix.on('text-change', () => this.update());
}
update() {
console.log('Length:', this.lextrix.getLength());
}
}
Lextrix.register({ [lxrPath.module('wordCount')]: WordCountModule });Enable in config:
new Lextrix('#editor', {
theme: 'snow',
modules: { wordCount: true },
});Built-in modules
The full bundle ships with clipboard, keyboard, history, toolbar, table, syntax, and image resize modules:
modules: {
toolbar: [['bold', 'italic'], ['link']],
imageResize: true,
syntax: true,
}Custom formats
Use defineInlineTagFormat or defineBlockFormat from lextrix-formats:
import { defineInlineTagFormat } from 'lextrix-formats/inline-format.js';
import { lxrPath } from 'lextrix-core/registry-paths.js';
const Highlight = defineInlineTagFormat({ blotName: 'highlight', tagName: 'MARK' });
Lextrix.register({ [lxrPath.format('highlight')]: Highlight });Bare paths like formats/bold throw — use lxr/* paths only.
Custom serializers
Register before creating editors (see Serialization):
import { registerSerializer } from 'lextrix';
registerSerializer({
format: 'plain',
import: (text) => /* ChangeSet */,
export: (delta) => /* string */,
});Lifecycle
Lextrix constructor
→ PluginHost created
→ Theme loads modules from options
→ Theme.addModule() → pluginHost.register()
→ pluginHost.bindAll(editor)Access running modules:
editor.getModule('toolbar');
editor.getModule('clipboard');Next steps
- Getting Started — install and first editor
- Formats guide on GitHub
- Modules guide on GitHub