Rich Text Editor

Nextmin React includes a powerful, block-based rich text editor built on top of Tiptap . It supports standard text formatting, slash commands, image uploads, and advanced layout options.

Enabling the Editor

To use the rich text editor for a field in your schema, simply set the rich property to true for a string type field:

json

{
  "body": {
    "type": "string",
    "rich": true,
    "title": "Content Body"
  }
}

Features

Slash Commands

Type / in an empty paragraph to open the command menu. This allows you to quickly insert:

Headings: H1, H2, H3, H4, H5, H6
Lists: Bullet and Numbered lists
Media: Images
Layouts: 2-Column and 3-Column blocks
Embeds: Embed other schema data (Tables, Lists, etc.)

Typography & Font Families

The editor toolbar includes a dedicated font family picker supporting both English and Bengali typography:

Bengali Fonts: Hind Siliguri, Kalpurush, SolaimanLipi, Noto Serif Bengali, Anek Bangla.
Standard Fonts: Inter, Roboto, Playfair Display, Space Mono, Sans-serif, Serif, Monospace.

Fine-tune text hierarchy using the font size tools:

Quick Presets: Select from standardized sizes (12px, 14px, 16px, 18px, 20px, 24px, 30px, 36px).
Custom Font Size Modal: Click “Custom…” in the font size dropdown to open an interactive sizing dialog.
- Supports units: px (6px–150px), rem (0.5rem–8rem), em, pt (5pt–115pt), and % (50%–1000%).
- Includes real-time format validation (validateAndFormatFontSize) and one-click quick unit pills.

Clean Heading Enter (`ClearMarksOnHeaderEnter`)

When typing inside any heading (H1–H6), pressing Enter at the end of the line automatically creates a clean, unstyled paragraph without carrying over bold, heading level, or styling marks into the new block.

Paste Sanitization (`transformPastedHTML`)

Content copied from Microsoft Word, Outlook, or external web pages often contains bloated XML markup, comments, and invalid tags. The editor includes automatic HTML transformation that strips:

HTML comments ()
Microsoft Office tags (<o:p> ... </o:p>)
Extraneous metadata tags (<xml>, <meta>, <link>)

Image Management

The editor supports drag-and-drop image uploads and standard file selection.

Resizing: Click and drag the handles to resize images.
Formatting: Click an image to open the floating menu. You can set the alignment and object-fit styles (Cover, Contain, Fill).

Layouts & Grids

Create complex page structures using the Layout commands.

2 Columns: Splits the content area into two equal columns.
3 Columns: Splits the content area into three equal columns.

Schema Embedding

You can embed data from other collections directly into your content. This is useful for creating dynamic pages that reference other records.