Document Editors

# Brok UI: DOCX Editor (`docx-editor`)

An experimental token-styled .docx editor that converts Word documents with mammoth.js, sanitizes the resulting HTML, and provides an editable surface with formatting and loading/error states.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add pro/docx-editor --accept-unstable
```

## Usage

```blade
<div class="mx-auto h-[36rem] w-full max-w-3xl">
    <x-ui.experimental.docx-editor src="/samples/sample.docx" />
</div>
```

## Use when

- Use when users need to upload, inspect, edit, annotate, or sign real documents as part of the workflow.
- Applying lightweight browser-side edits to the HTML rendered from a .docx file.

## Avoid when

- Do not use a heavy document interface when the same task can be completed more simply in structured product UI.
- Edits must be written back to a .docx file or preserve Word layout exactly. Use docx-viewer for read-only rendering, or a server-side Word conversion pipeline, instead.

## Anti-patterns

- Heavy document UI when structured fields are simpler

## Rules

- Use the `<brok:docx-editor>` tag (or `<x-ui.docx-editor>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/docx-editor