@stackch/angular-richtext-editor/README.md

Lightweight Angular rich text editor (standalone) with a reusable toolbar: fonts, sizes, colors, lists, alignment, links.

<div align="right">

Localized docs: see repository root — English, Deutsch, Français, Italiano.

</div>

# @stackch/angular-richtext-editor

Lightweight Angular 20 standalone rich text editor with a reusable toolbar and built‑in i18n.

- Range/Selection API for bold/italic/underline (minimal execCommand fallback)
- Undo/Redo with HTML snapshots and selection restore
- Clean HTML (removes empty spans/styles)
- Toolbar component exported for reuse
- i18n with English defaults and predefined DE/FR/IT bundles

## Changelog (English)

- 1.0.3 (2025-10-11)
   - Docs: Add inline changelog in README (npm page), remove link to private GitHub
- 1.0.2 (2025-10-11)
   - Docs: Add Yarn installation examples in README (npm page)
- 1.0.1 (2025-10-11)
   - Package metadata: English description (no code changes)
- 1.0.0 (2025-10-11)
   - Initial public release

## Installation

```bash
# npm
npm install @stackch/angular-richtext-editor

# Yarn (Berry/Classic)
yarn add @stackch/angular-richtext-editor

# Optional: pin to a specific version
npm install @stackch/angular-richtext-editor@1.1.0
yarn add @stackch/angular-richtext-editor@1.1.0
```

## Usage

Import the standalone component and bind to a FormControl:

```ts
import { Component } from '@angular/core';
import { ReactiveFormsModule, FormControl } from '@angular/forms';
import { StackchRichtextEditor } from '@stackch/angular-richtext-editor';

@Component({
   standalone: true,
   imports: [ReactiveFormsModule, StackchRichtextEditor],
   template: `
      <stackch-richtext-editor
         [showToolbar]="true"
         [fonts]="['Arial, sans-serif', 'Georgia, serif']"
         [fontSizes]="[12, 14, 16, 20, 24]"
         [minHeight]="180"
         [maxHeight]="400"
         [formControl]="content">
      </stackch-richtext-editor>

      <pre>{{ content.value }}</pre>
   `
})
export class DemoComponent {
   content = new FormControl<string | null>('');
}
```

Inputs:
- `placeholder: string` – placeholder text
- `showToolbar: boolean` – show toolbar (default: true)
- `fonts: string[]` – font family list
- `fontSizes: number[]` – font sizes (px)
- `height?: number` – fixed height
- `minHeight: number` – min height (px)
- `maxHeight?: number` – max height (px)
- `disabled: boolean` – disabled state

Outputs:
- `valueChange: string` – emitted HTML on changes

Note: The component implements `ControlValueAccessor` and works with `formControl`/`ngModel`.

## i18n

English is the default. Use `config.i18n` for partial overrides or import predefined bundles.

```ts
import { STACKCH_RTE_I18N_DE, STACKCH_RTE_I18N_FR, STACKCH_RTE_I18N_IT } from '@stackch/angular-richtext-editor';

cfg = {
   // i18n: undefined, // English defaults
   // i18n: STACKCH_RTE_I18N_DE,
   // i18n: STACKCH_RTE_I18N_FR,
   // i18n: STACKCH_RTE_I18N_IT,
};
```

Customize a few strings:

```ts
cfg = { i18n: { boldTitle: 'Strong', colorsTitle: 'Palette' } };
```

For localized documentation (DE/FR/IT), see the repository README files.