Extensions

lineHeight

Behaviour takes options 0.36 kB gzipped

Line height as an attribute on existing blocks.

Built the way alignment is: the attribute is declared here and lands on every type named, so a paragraph that knows nothing about line height still keeps, renders and parses it. The document stores the value it was given (`1.5`, `24px`) and the element gets `style="line-height: …"` — after the value has been checked, on the way in and on the way out alike.

editor.commands.setLineHeight(1.5)
editor.commands.setLineHeight('28px')
editor.commands.unsetLineHeight()

1 · Install

One package for every extension · there is no @matrajs/lineHeight 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, lineHeight } from '@matrajs/core'

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

3 · Use it

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

editor.commands.setLineHeight('…')
editor.focus()

Wired to a button:

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

button.addEventListener('click', () => {
  editor.commands.setLineHeight('…')
  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.

← All 83 extensions

Edit this page on GitHub