Every extension

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.

Adding it

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

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

There is no separate package · blockColor 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.

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

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

← All 81 extensions

Edit this page on GitHub