Extensions

textDirection

Behaviour takes options 0.68 kB gzipped

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/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, 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()

← All 83 extensions

Edit this page on GitHub