# @richhtmleditor/angular

Angular standalone component for Rich HTML Editor, built on [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core). WYSIWYG authoring with toolbar presets, `ControlValueAccessor` for reactive forms, and plugin support for enterprise AI, comments, and workflows.

**Current release: 1.2.9** — Depends on `@richhtmleditor/core` **^1.2.9**.

**Repository:** [github.com/rajkishorsahu89/richhtmleditor](https://github.com/rajkishorsahu89/richhtmleditor)

**Demo:** [richhtmleditor.stackkitlabs.com](https://richhtmleditor.stackkitlabs.com/) — [demo](https://richhtmleditor.stackkitlabs.com/demo) · [guide](https://richhtmleditor.stackkitlabs.com/guide) · [API](https://richhtmleditor.stackkitlabs.com/api). Doc Preview joint demo: [doc-preview-app.vercel.app/demo/enterprise](https://doc-preview-app.vercel.app/demo/enterprise)

### What's in 1.2.9

- **`RichHtmlEditorComponent`** — selector `richhtmleditor`; mounts `createEditor` on init
- **`ControlValueAccessor`** — bind with `[(ngModel)]` or `formControlName` (HTML string value)
- **Toolbar & features** — `[toolbar]`, `[features]`, `[plugins]` mirror core `CreateEditorOptions`
- **Events** — `(contentChange)` and `(save)` emit `EditorContent` (`html` + `json`)
- **[menubar]** — pass a MenuDef[] array to mount a traditional File / Edit / Insert menu bar
- Re-exports all public symbols from `@richhtmleditor/core`

### New in 1.2.9

| Feature | Angular usage |
| --- | --- |
| **Callout blocks** — info / warning / success / error styled blocks | `editor.commands.insertCallout("info")` or toolbar **Callout** dropdown |
| **Embed blocks** — YouTube, Loom, Figma auto-embed | Paste URL to auto-embed; or `editor.commands.insertEmbed(url)` |
| **Word goal + progress bar** | `editor.commands.setWordGoal(500)` — progress bar appears in status bar |
| **Reading time** | Displayed automatically: status bar shows `~N min read` |
| **Dark mode toggle** | `[dark]="true"` input **or** toolbar `toggleDarkMode` button |
| **Markdown shortcuts** | Always on — `## ` → H2, `**bold**`, `_italic_`, `` ` ``code`` ` `` |
| **Markdown import** | `editor.commands.importMarkdown()` — opens `.md` file picker |
| **Case change** | `editor.commands.caseChange("upper" \| "lower" \| "title" \| "sentence")` |
| **Smart typography** | Auto-converts straight quotes, `--` → em dash, `...` → ellipsis |
| **Autolink** | URLs auto-link on paste and after typing a space |
| **Task lists** | `[features]="{ taskList: true }"` — checkbox bullet lists |
| **XLSX / CSV paste** | Paste from Excel or Google Sheets → inserts a table |
| **Menu bar** | `[menubar]="menuDefs"` — traditional File / Edit / Insert / Format menu bar |
| **Table sort** | Click any `<th>` to sort column; click again to reverse |
| **Undo history panel** | `editor.commands.undoHistoryPanel()` — sidebar with full undo stack |
| **TOC navigation** | Click a TOC entry in the outline panel → scrolls to that heading |
| **Preview modal** | `editor.commands.previewModal()` — read-only rendered preview overlay |
| **Autoresize** | `[features]="{ autoresize: true }"` — editor grows with content |
| **Mobile touch** | Touch-optimised toolbar; 40 px tap targets on `pointer: coarse` devices |

> Ships as ESM with TypeScript declarations. Works with **Angular 19+**, **20**, and **21** (`@angular/core` ^19 \|\| ^20 \|\| ^21). Import [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) CSS in `angular.json` or global styles.

**Keywords:** `richhtmleditor` `angular` `standalone` `wysiwyg` `rich-text-editor` `forms`

## Install

```bash
npm install @richhtmleditor/angular @richhtmleditor/themes
# Adds @richhtmleditor/core automatically.
# Peer deps: @angular/core ^19 || ^20 || ^21.
# Optional enterprise plugins:
npm install @richhtmleditor/enterprise @richhtmleditor/ai @richhtmleditor/comments @richhtmleditor/workflows
```

## Usage — component

```ts
// app.component.ts
import { Component } from "@angular/core";
import { RichHtmlEditorComponent } from "@richhtmleditor/angular";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [RichHtmlEditorComponent],
  template: `
    <richhtmleditor
      [toolbar]="{ preset: 'standard' }"
      [content]="html"
      (contentChange)="html = $event.html"
    />
  `
})
export class AppComponent {
  html = "<p>Hello <strong>world</strong></p>";
}
```

Add styles once in `angular.json`:

```json
"styles": ["node_modules/@richhtmleditor/themes/richhtmleditor.css"]
```

## Usage — reactive forms

```html
<richhtmleditor
  formControlName="body"
  [toolbar]="'standard'"
  [features]="features"
/>
```

```ts
import { FormControl, ReactiveFormsModule } from "@angular/forms";
import type { EditorFeatureFlags } from "@richhtmleditor/angular";

features: EditorFeatureFlags = { tables: true, media: true };
body = new FormControl("<p>Draft content</p>");
```

## Usage — enterprise plugins

```ts
import { createAiPlugin } from "@richhtmleditor/ai";
import { createCommentsPlugin } from "@richhtmleditor/comments";
import { createWorkflowsPlugin } from "@richhtmleditor/workflows";
import { resolveEnterpriseFeatures } from "@richhtmleditor/enterprise/browser";

const gate = resolveEnterpriseFeatures({ token: "RHE-ENT-DEMO-2026-FULL" });

plugins = [
  createAiPlugin({ onGenerate: async (req) => callYourLlm(req) }),
  createCommentsPlugin({ author: "Reviewer" }),
  createWorkflowsPlugin({ actor: "Legal", role: "editor" })
];
features = gate.features;
```

```html
<richhtmleditor
  [features]="features"
  [plugins]="plugins"
  [toolbar]="{ preset: 'full' }"
/>
```

Demo key (documentation only): `RHE-ENT-DEMO-2026-FULL`

## API

### `RichHtmlEditorComponent` inputs

| Input | Type | Description |
| --- | --- | --- |
| `content` | `string` | Initial HTML (also set via `writeValue` / `ngModel`). |
| `editable` | `boolean` | Enable editing (default `true`). |
| `dark` | `boolean` | Dark theme tokens. |
| `theme` | `EditorThemeTokens` | Custom CSS variable overrides. |
| `toolbar` | `ToolbarConfig \| ToolbarPresetId` | Toolbar preset or custom layout. |
| `features` | `EditorFeatureFlags` | Feature gates (tables, AI, comments, workflows, …). |
| `plugins` | `EditorPlugin[]` | Enterprise and custom plugins. |
| `toolMounts` | `CreateEditorOptions["toolMounts"]` | Per-tool custom DOM mounts. |
| `autoSave` | `boolean \| string` | Enable localStorage auto-save with optional key. |

### `RichHtmlEditorComponent` outputs

| Output | Type | Description |
| --- | --- | --- |
| `contentChange` | `EditorContent` | Emitted on every document edit (`html` + `json`). |
| `save` | `EditorContent` | Emitted when the user triggers save. |

### Angular vs React naming

| Angular | React |
| --- | --- |
| `<richhtmleditor>` | `<RichHtmlEditor />` |
| `(contentChange)` | `onChange` |
| `(save)` | `onSave` |
| `[content]` | `content` |

## Browser support

Requires a modern browser with `contentEditable`, `Selection`, and `fetch`. Mount `<richhtmleditor>` only in the browser for SSR (e.g. `afterNextRender` or `@if (isBrowser)`).

## Related packages

- [`@richhtmleditor/core`](https://www.npmjs.com/package/@richhtmleditor/core) — framework-agnostic engine (auto-installed).
- [`@richhtmleditor/themes`](https://www.npmjs.com/package/@richhtmleditor/themes) — shared CSS.
- [`@richhtmleditor/enterprise`](https://www.npmjs.com/package/@richhtmleditor/enterprise) — licence tokens and feature flags.
- [`@richhtmleditor/ai`](https://www.npmjs.com/package/@richhtmleditor/ai) — AI authoring plugin.
- [`@richhtmleditor/comments`](https://www.npmjs.com/package/@richhtmleditor/comments) — review comments plugin.
- [`@richhtmleditor/workflows`](https://www.npmjs.com/package/@richhtmleditor/workflows) — approval workflows plugin.
- [`@richhtmleditor/react`](https://www.npmjs.com/package/@richhtmleditor/react) — React component on the same core.
- [`@richhtmleditor/vue`](https://www.npmjs.com/package/@richhtmleditor/vue) — Vue 3 component on the same core.
- [`@richhtmleditor/collab`](https://www.npmjs.com/package/@richhtmleditor/collab) — Yjs collaboration plugin.
- [`@richhtmleditor/diagrams`](https://www.npmjs.com/package/@richhtmleditor/diagrams) — Mermaid diagrams plugin.
- [`@richhtmleditor/math`](https://www.npmjs.com/package/@richhtmleditor/math) — LaTeX/MathML equation plugin.
- [`@richhtmleditor/export`](https://www.npmjs.com/package/@richhtmleditor/export) — DOCX/PDF/HTML export plugin.
- [`@richhtmleditor/spellcheck`](https://www.npmjs.com/package/@richhtmleditor/spellcheck) — real-time spell check plugin.
- [`@richhtmleditor/templates`](https://www.npmjs.com/package/@richhtmleditor/templates) — document templates plugin.
- [`@richhtmleditor/mentions`](https://www.npmjs.com/package/@richhtmleditor/mentions) — @ mentions plugin.

## License

[MIT](./LICENSE)