# @naatchaal/editor — AI index (llms.txt)

> First-party React / Next.js WYSIWYG rich-text editor by Naatchaal.
> Highly customizable to the deep — but simple. No TipTap, Lexical, or Quill.

Package: `@naatchaal/editor` (npm)
Playground: https://naat.tools/editor
Human docs: https://naat.tools/editor#docs
Full AI docs: https://naat.tools/editor/llms-full.txt
Agent guide: https://naat.tools/editor/AGENTS.md
MCP: `@naatchaal/editor-mcp` (`npx -y @naatchaal/editor-mcp`)

## Hard rules / myths (read first)

1. **NOT TipTap / Lexical / Quill** — do not invent those APIs or packages
2. **Styles (1.0.1+):** auto-load with `import from "@naatchaal/editor"`. `styles.css` is **optional** — never mandatory
3. Prefer **simple path:** bare `<NaatEditor />` + Client Component; `config` optional
4. Prefill/edit: remount with `key` + `initialContent` — no controlled `value`
5. Read-only: `<NaatEditorViewer />` (XSS-hardened view path); forms: `validateContent` / `error` / optional hooks
6. MCP: call `get_agent_rules`, then `generate_integration` with `style: "simple"` by default
7. Never `dangerouslySetInnerHTML` raw UGC — use `NaatEditorViewer` or `sanitizeHtmlForView`

## Mental model (two layers)

1. **Start here (≈90%)** — install, `<NaatEditor />`, `initialContent` + `key`, `onChange`, form helpers. `config` optional.
2. **Customize deeply (≈10%)** — theme tokens, toolbar display/icons/items, `renderLayout`, or Provider + Toolbar + Surface.

## Install

```bash
npm i @naatchaal/editor
```

Peers: `react`, `react-dom` (>=18).

## Start here — minimal embed (App Router)

```tsx
"use client";
import { NaatEditor } from "@naatchaal/editor";
// Styles auto-load. Optional only: import "@naatchaal/editor/styles.css"

export function MyEditor() {
  return (
    <NaatEditor
      initialContent="<p>Hello</p>"
      onChange={({ html, json }) => {
        /* persist */
      }}
    />
  );
}
```

### Prefill + forms

- Seed: `initialContent={savedHtmlOrJson}` (DocNode | JSON | HTML | plain text)
- Edit another row: `<NaatEditor key={id} initialContent={...} />`
- Persist: `onChange` → `html` / `json` / `doc` (also `markdown` / `plain`)
- Form essentials: `parseContent`, `isEmptyContent`, `getPlainText`, `getTextLength`, `validateContent`
- Validation UI: `error?: string | boolean`, optional `showError` / `renderError` / `invalidClassName`
- Optional hooks (not required): `useNaatEditorField`, `useNaatEditorValidation`
- Placeholder: `placeholder="Write something…"`
- Link hover preview: `linkPreview` (default on) / `false` / `renderLinkPreview`
- Content preview modal: toolbar `preview` (default on); omit from items to turn off; optional `previewTitle`
- View saved content: `<NaatEditorViewer content={…} />` **or** stored `html` yourself
- Input height: `config.theme.surface.minHeight` + optional `maxHeight`
- Drafts: **app-owned** — no built-in `localStorage`

**Server Components:** wrap in a Client Component (`"use client"`).

## Customize deeply (pointer)

Theme, toolbar chrome, icons, `renderLayout`, composition. See https://naat.tools/editor/llms-full.txt

## Key URLs for assistants

- Overview: https://naat.tools/editor/llms.txt
- Full API: https://naat.tools/editor/llms-full.txt
- Agent rules: https://naat.tools/editor/AGENTS.md
- npm: https://www.npmjs.com/package/@naatchaal/editor