Extensions

columnList

Node in columnsKit 0.66 kB gzipped

Side-by-side columns.

Two nodes, deliberately plain: a list holds columns and a column holds blocks, which is the whole of the structure. The layout is a CSS grid on the list, so the document says how many columns there are and the page decides how wide each one is.

Wrapping a block into columns keeps that block as the first column and makes the rest empty, and taking the columns away lays every column's blocks out in order — so a document that was put into columns and taken out again reads as it did.

editor.commands.setColumns(3)
editor.commands.addColumn()
editor.commands.removeColumn()
editor.commands.unsetColumns()

1 · Install

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

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

Already in columnsKit · if you spread that kit you have this extension and adding it again is a duplicate the schema will reject.

3 · Use it

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

editor.commands.setColumns()
editor.focus()

Wired to a button, with the pressed state kept in step:

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

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

const read = () => button.setAttribute('aria-pressed', String(editor.isActive('columnList')))
editor.on('selectionChange', read)
editor.on('change', read)
read()

Both events, not one. selectionChange covers the caret moving into it; change covers the command that changed it without moving anything. A toolbar wired to only the first goes stale the moment someone uses the keyboard.

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.

Command	Call
`setColumns`	`editor.commands.setColumns(count?: number)`
`unsetColumns`	`editor.commands.unsetColumns()`
`addColumn`	`editor.commands.addColumn()`
`removeColumn`	`editor.commands.removeColumn()`

In the document

Reads div[data-columns] when HTML is pasted or loaded.
Writes div in getHTML() and renderToHTML().