Heading
A section heading, levels 1 through 3. A leaf block — its contentIds are its own text runs.
JSON shape
json
{ "id": "h1", "type": "heading", "parentId": "root", "contentIds": ["r1"], "props": { "level": 1 } }| Prop | Type | Default | Notes |
|---|---|---|---|
level | 1 | 2 | 3 | 3 | Rendered as h1/h2/h3. |
Slash commands
- Heading 1 — keywords: heading, h1, title
- Heading 2 — keywords: heading, h2, subtitle
- Heading 3 — keywords: heading, h3, title
Usage
Typing "# ", "## ", or "### " at the start of a paragraph also converts it, matching Markdown convention.
Looking for a heading that can hide its own content? See Toggle heading — same levels, but collapsible with nested blocks.
Styling
Rendered as an actual <h1>/<h2>/<h3> tag with class .be-heading, plus a per-level .be-heading-1/.be-heading-2/.be-heading-3 class so you can style each level independently instead of relying on tag-selector specificity tricks like h1.be-heading.
Using it in your editor
useEditor() registers every built-in block by default, heading included. To register only the blocks you use instead:
jsx
import { useEditor, NoteloomEditor, registerBlocks, paragraphBlockType, headingBlockType } from 'noteloom';
function Editor() {
const editor = useEditor({
registerBlocks: (registry) => registerBlocks(registry, { paragraph: paragraphBlockType, heading: headingBlockType }),
});
return <NoteloomEditor editor={editor} />;
}See Picking only the blocks you want for combining this with other types.