Every extension

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

Adding it

import { createEditor, document, paragraph, text, invisibleCharacters } from '@matrajs/core'

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

There is no separate package · invisibleCharacters is already in @matrajs/core, and an extension you do not import is not in your bundle. document, paragraph and text are the floor every document needs.

Options

Field Type
visible boolean Start with the markers showing. Default false.

Commands

Styles

This one needs a stylesheet to look right, and ships the minimum as a string rather than a file · nothing is loaded unless you load it. 


          import { invisibleCharactersCSS } from '@matrajs/core'

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

← All 81 extensions

Edit this page on GitHub