npm package: @stackch/richtext-editor
Description: Lightweight Angular rich text editor (standalone) with a reusable toolbar: fonts, sizes, colors, lists, alignment, links.
Author: stackch
Latest version: 1.0.3
Deprecated: Renamed: use @stackch/angular-richtext-editor >= 1.1.0

<div align="right">

Localized docs: see repository root — English, Deutsch, Français, Italiano.

</div>

# @stackch/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/richtext-editor

# Yarn (Berry/Classic)
yarn add @stackch/richtext-editor

# Optional: pin to a specific version
npm install @stackch/richtext-editor@1.0.1
yarn add @stackch/richtext-editor@1.0.1
```

## 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/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/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' } };
```

## Development

Build the library:

```bash
ng build stackch-richtext-editor
```

Run tests:

```bash
ng test stackch-richtext-editor
```

## Publish to npm

1) Bump version in `projects/stackch-richtext-editor/package.json`

2) Build the library:

```bash
ng build stackch-richtext-editor
```

3) Publish from the dist folder:

```bash
cd dist/stackch-richtext-editor
npm publish --access public
```

For localized documentation (DE/FR/IT), see the repository README files.