Extensions
textDirection
Text direction as an attribute on existing blocks, detected when unset.
A `dir` attribute on every type named, like `textAlign`: a paragraph that knows nothing about direction still keeps, renders and parses it, and a document with a Hebrew heading round-trips through HTML with `dir="rtl"` on the heading. Set it with the commands when the reader knows better than the text.
Left unset, the block's own text decides. Each block whose first strong character is right-to-left is drawn with `dir="rtl"` as a node decoration, so an Arabic paragraph typed into an English document reads the right way round without anybody choosing — and the JSON says nothing about it. The answer is remembered per top-level block on the block node, and the whole set is memoised on the document, so a caret move costs nothing.
editor.commands.setTextDirection('rtl')
editor.commands.unsetTextDirection()1 · Install
One package for every extension · there is no @matrajs/textDirection to install.
npm i @matrajs/core2 · 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, textDirection } from '@matrajs/core'
const editor = createEditor({
extensions: [document, paragraph, text, textDirection({ … })],
element: document.querySelector('#editor'),
})3 · Use it
Run a command, and give focus back · a click on a button takes it away.
editor.commands.setTextDirection('rtl')
editor.focus()Wired to a button:
const button = document.querySelector('#setTextDirection')
button.addEventListener('click', () => {
editor.commands.setTextDirection('rtl')
editor.focus()
})Options
textDirection is a function · call it with an options object.
| Option | Type | What it does |
|---|---|---|
types | readonly string[] | Which blocks carry a direction. Default paragraph and heading. |
auto | boolean | Render a block whose text reads right to left that way, with nothing stored. Default true. |
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 |
|---|---|
setTextDirection |
editor.commands.setTextDirection(value: TextDirection)
|
unsetTextDirection |
editor.commands.unsetTextDirection()
|