Editor Blocks

Open + Pro variants

platejs.org-inspired rich-text editors — a full document surface, a compact composer, a commented document and an AI-assisted draft.

Add to page builder

3 of 5

resources/views/blocks/editor-rich.blade.php Blade

@props([
    'heading' => 'Build your own editor',
    'eyebrow' => 'Rich editor',
])

<x-ui.section space="lg">
    <div class="mx-auto w-full max-w-3xl px-4 sm:px-6">

        {{-- Eyebrow / heading --}}
        <div class="mb-6">
            <p class="mb-2 text-xs font-medium uppercase tracking-widest text-muted-foreground">
                {{ __($eyebrow) }}
            </p>
            <h2 class="text-2xl font-semibold tracking-tight text-foreground">
                {{ __($heading) }}
            </h2>
        </div>

        {{-- Kitchen-sink editor: every editor part composed together --}}
        <x-ui.editor
            placeholder="{{ __('Start writing — type @ to mention someone…') }}"
            ariaLabel="{{ __('Rich text editor') }}"
        >
            {{-- Fixed formatting toolbar --}}
            <x-slot:toolbar>
                <x-ui.editor-toolbar />
            </x-slot:toolbar>

            {{-- Overlays live in the tools slot, beside the editable region,
                 never inside it: the floating selection toolbar, the gutter
                 block handle and the drag drop-cursor line. --}}
            <x-slot:tools>
                <x-ui.editor-toolbar variant="floating" />
                <x-ui.block-handle />
                <x-ui.drop-indicator />
            </x-slot:tools>

            {{-- Seeded document content — plain HTML; editor styles raw children --}}
            <h1>{{ __('Everything in one surface') }}</h1>

            <p>
                {{ __('A single editor with the full toolkit: ') }}
                <strong>{{ __('bold') }}</strong>{{ __(', ') }}
                <em>{{ __('italic') }}</em>{{ __(', inline ') }}
                <code>{{ __('code') }}</code>{{ __(', and ') }}
                <a href="#">{{ __('links') }}</a>{{ __('. Select any text to reveal the floating toolbar.') }}
            </p>

            <p>
                {{ __('Collaborate inline — drop a mention right into the prose, like ') }}<span class="rounded-sm bg-primary/10 px-2 font-medium text-primary" data-mention="@ada" contenteditable="false">{{ __('@Ada Lovelace') }}</span>{{ __(' — and keep writing without leaving the keyboard.') }}
            </p>

            <h2>{{ __('Tables') }}</h2>

            <p>{{ __('Hover the grid to reveal row and column handles for inserting or deleting cells:') }}</p>

            <x-ui.table-handle :rows="3" :cols="3" />

            <h2>{{ __('Media') }}</h2>

            <p>{{ __('Drag the corner handles to resize embedded media while keeping its aspect ratio:') }}</p>

            <x-ui.node-resizer aspectRatio="16/9">
                <figure class="overflow-hidden rounded-lg border border-border bg-muted">
                    <div class="flex aspect-[16/9] w-full items-center justify-center bg-muted text-muted-foreground">
                        <svg class="size-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                            <circle cx="9" cy="9" r="2"/>
                            <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
                        </svg>
                    </div>
                    <figcaption class="px-4 py-2 text-xs text-muted-foreground">
                        {{ __('Resizable media figure') }}
                    </figcaption>
                </figure>
            </x-ui.node-resizer>

            {{-- Word-count-ish status footer --}}
            <x-slot:footer>
                <span class="text-muted-foreground">
                    {{ __('Draft') }} &mdash; {{ __('Last edited just now') }}
                </span>
                <span class="ms-auto text-muted-foreground">
                    {{ __('@ mention, /slash, drag to reorder') }}
                </span>
            </x-slot:footer>
        </x-ui.editor>

        {{-- Static demo strip so the mention menu is visible in a screenshot --}}
        <div class="mt-4 rounded-lg border border-border bg-card p-6 text-card-foreground">
            <p class="mb-4 text-xs font-medium uppercase tracking-widest text-muted-foreground">
                {{ __('@ mention') }}
            </p>
            <x-ui.mention-menu
                trigger="@"
                placeholder="{{ __('Search people…') }}"
            />
        </div>

    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/editor-rich

Installs these dependencies automatically:

block-handle drop-indicator editor editor-toolbar mention-menu node-resizer section table-handle

Registry contract

Install confidence

php artisan ui:add blocks/editor-rich writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.1.3
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/editor-rich.blade.php

Registry dependencies

block-handle drop-indicator editor editor-toolbar mention-menu node-resizer section table-handle

Package dependencies

composer: jml/brok:^0.2

npm: alpinejs

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

editor-rich.md

# Brok UI block: Editor Rich (`editor-rich`)

A kitchen-sink rich text editor — formatting toolbar, floating toolbar, an inline mention, an editable table with row/column handles, a resizable media figure and a drag drop-indicator.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/editor-rich
```

## Render it

```blade
<x-blocks.editor-rich />
```

## Props

- `heading` (string, default `Build your own editor`)
- `eyebrow` (string, default `Rich editor`)

## Use when

- Demoing every editor capability at once: formatting toolbar, floating toolbar, mentions, an editable table and a resizable media figure.
- Fitting a page whose purpose is to showcase the editor primitive's full feature set.

## Avoid when

- Use editor-document for a plainer full-page document demo, or editor-minimal for a minimal comment composer.

## Rules

- Render the installed block with `<x-blocks.editor-rich />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/editor-rich
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/editor-rich.json

Ask about Editor Rich in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Demoing every editor capability at once: formatting toolbar, floating toolbar, mentions, an editable table and a resizable media figure.
Fitting a page whose purpose is to showcase the editor primitive's full feature set.

Avoid when

Use editor-document for a plainer full-page document demo, or editor-minimal for a minimal comment composer.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.editor-rich />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.