Every extension

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()

Adding it

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

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

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

HTML

← All 81 extensions

Edit this page on GitHub