FrameworkJavaScript

Paragraph block: Blok's default text block

The default text block. It supports rich inline formatting: bold, italic, links and colour. Empty top-level paragraphs are left out of the saved output unless preserveBlank is enabled. Empty paragraphs nested inside another block (callout, toggle, column, …) are always kept.

Import

TypeScript

import { Paragraph } from '@bloklabs/core/tools';

Configuration

Option	Type	Default	Description
`placeholder`	`string`	`"Write something or press / to select a tool" (localised)`	Placeholder text shown when the block is empty and focused.
`preserveBlank`	`boolean`	`false`	When true, empty paragraph blocks are kept in the saved output. There is one exception. A document that holds a single empty block of the default tool always saves as `blocks: []`, whatever this option says.
`styles.size`	`string`	`undefined`	Custom CSS font-size override (e.g. "18px", "1.25rem").
`styles.lineHeight`	`string`	`undefined`	Custom CSS line-height override (e.g. "1.8", "28px").
`styles.marginTop`	`string`	`undefined`	Custom CSS margin-top override (e.g. "12px", "0.75rem").
`styles.marginBottom`	`string`	`undefined`	Custom CSS margin-bottom override.

Save Data

TypeScript

interface ParagraphData {
  text: RichText;           // Runs of text with marks:
                            // [{ "text": "Hello " }, { "text": "world", "marks": { "bold": true } }]
                            // The tool class itself reads and writes HTML (ParagraphToolData)
  textColor?: string;       // Block colour preset, present when set
  backgroundColor?: string; // Block background colour preset, present when set
}

JSON

{
  "id": "abc123",
  "type": "paragraph",
  "data": {
    "text": [{ "text": "Hello " }, { "text": "world", "marks": { "bold": true } }]
  }
}

Usage Example

TypeScript

import { Blok } from '@bloklabs/core';
import { Paragraph } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    paragraph: {
      class: Paragraph,
      placeholder: 'Start writing…',
      preserveBlank: false,
    },
  },
});