Extensions

invisibleCharacters

Behaviour takes options 0.72 kB gzipped

Spaces, paragraph ends and line breaks, made visible.

What a word processor shows under "formatting marks": a dot on every space, a pilcrow closing every block, an arrow after every hard break. Decorations rather than content, so the marks are never in the document — not in its HTML, not in its JSON, not in what a collaborator receives.

Markers are found per block and cached on the block node, the way search hits are, so keeping them on while writing costs the paragraph being written and not the document.

editor.commands.toggleInvisibleCharacters()
editor.extensionState<InvisibleCharactersState>('invisibleCharacters')?.visible

1 · Install

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

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

3 · Use it

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

editor.commands.toggleInvisibleCharacters()
editor.focus()

Wired to a button:

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

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

Options

invisibleCharacters is a function · call it with an options object.

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.

Styling

This one needs CSS to look right, and ships the minimum as a string rather than a file · nothing loads unless you load it, and you can ignore it and write your own.

import { invisibleCharactersCSS } from '@matrajs/core'

const style = document.createElement('style')
style.textContent = invisibleCharactersCSS
document.head.append(style)

← All 83 extensions

Edit this page on GitHub