Extensions

core

Behaviour

The primitives every editor needs, exposed as commands.

Always loaded by createEditor — an editor that cannot move its own selection is not useful, and making callers remember to add it would be a papercut.

1 · Install

One package for every extension · there is no @matrajs/core to install.

npm i @matrajs/core

2 · Add it to the editor

Import it and put it in the extensions array. That array is the whole feature list: what is not in it is not in your bundle and not in the document's schema.

import { createEditor, document, paragraph, text, core } from '@matrajs/core'

const editor = createEditor({
  extensions: [document, paragraph, text, core],
  element: document.querySelector('#editor'),
})

3 · Use it

Run a command, and give focus back · a click on a button takes it away.

editor.commands.insert(…)
editor.focus()

Wired to a button:

const button = document.querySelector('#insert')

button.addEventListener('click', () => {
  editor.commands.insert(…)
  editor.focus()
})

Commands

Every one returns true if it changed the document and false if it could not · a command that does not apply where the caret is says so rather than throwing.

Command Call
select editor.commands.select(value: Range | Pos)
insert editor.commands.insert(value: DocNode | DocNode[] | string, second: Pos?)
replace editor.commands.replace(value: Range, second: DocNode | DocNode[] | string)
remove editor.commands.remove(value: Range?)
moveBlock editor.commands.moveBlock(value: Pos, second: Pos)
focus editor.commands.focus()

← All 83 extensions

Edit this page on GitHub