Extensions

textTransform

Behaviour 0.96 kB gzipped

Change the case of the selection, or of the word under the caret.

Five commands: `uppercase`, `lowercase`, `capitalize` (the first letter of every word, the rest untouched), `sentenceCase` (the first letter of the selection and of every sentence after a full stop, everything else down) and `toggleCase` (all capitals go down, anything else goes up). With nothing selected each works on the word the caret is in.

The text is rewritten one text node at a time, so a bold word stays bold and a link stays a link. Locale-aware casing is used, which is why `ß` becomes `SS` and the selection is mapped afterwards rather than assumed to be the same width. A command that would change nothing returns false.

1 · Install

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

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

3 · Use it

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

editor.commands.toggleCase()
editor.focus()

Wired to a button:

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

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