Extensions

blockColor

Behaviour takes options 0.37 kB gzipped

Colour on the block itself, the way Notion means it.

`textStyle` already colours *text*: a mark on a run of characters, which is the right model for colouring three words in a sentence. It is the wrong model for colouring a paragraph — mark every character and the background still stops at the last one, so what you get is a band around the words rather than a band across the block, and it breaks apart the moment someone types at the end.

This is an attribute on the block instead. It survives being dragged somewhere else, it covers the full measure, and an empty paragraph can hold a colour and still show it — none of which a mark can do.

Built the way alignment and line height are, so a paragraph that knows nothing about colour still keeps, renders and parses it:

editor.commands.setBlockBackground('#fdecc8')
editor.commands.setBlockColor('rgb(212, 76, 71)')
editor.commands.unsetBlockColors()

The palette is deliberately not here. Notion ships ten named colours and stores the name, which is how a document follows a theme; this stores the value it was given and leaves naming to the application, because a headless editor that decides your ten colours has decided your design.

1 · Install

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

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

3 · Use it

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

editor.commands.setBlockColor('…')
editor.focus()

Wired to a button:

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

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

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 { blockColorCSS } from '@matrajs/core'

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

← All 83 extensions

Edit this page on GitHub