Layout

A multi-column container. layout holds layoutColumn blocks side by side, and each column is itself a normal container that can hold any other block — paragraphs, headings, even a table.

json

{
  "id": "l1",
  "type": "layout",
  "contentIds": ["col1", "col2"],
  "props": {}
}
// each column:
{ "id": "col1", "type": "layoutColumn", "parentId": "l1", "contentIds": ["p1"], "props": {} }

Using it in your editor

useEditor() registers every built-in block by default, layout included — most apps need nothing extra here. Like table, layout is a group of two block types (layout/layoutColumn) — spread LAYOUT_BLOCKS if opting in manually rather than naming layoutBlockType alone:

jsx

import { useEditor, NoteloomEditor, registerBlocks, paragraphBlockType, LAYOUT_BLOCKS } from 'noteloom';

function Editor() {
  const editor = useEditor({
    registerBlocks: (registry) => registerBlocks(registry, { paragraph: paragraphBlockType, ...LAYOUT_BLOCKS }),
  });
  return <NoteloomEditor editor={editor} />;
}

See Picking only the blocks you want for combining groups with individual types.

Usage

A fresh layout is seeded with one empty paragraph per column, so there's somewhere to type in each column right away. Column count is fixed at creation time (2, by default from the slash command) — moving content in and out of columns happens the same way as anywhere else (drag, cut/paste, block actions).

Slash command

Layout — keywords: layout, columns, side by side.

Styling

.be-layout is a grid container — set grid-template-columns to divide the space evenly (or however you like). Each column renders .be-layout-column.