npm package: @stackch/angular-material-richtext-editor
Description: Angular Material variant of the Stackch rich text editor (standalone component).
Author: stackch
Latest version: 1.2.2

# @stackch/angular-material-richtext-editor

Angular Material variant of the Stackch Rich Text Editor.

- Angular 20, standalone component
- Range-based formatting (bold, italic, underline, headings, lists, alignment)
- Font and size menus, spacing (margin/padding), colors (text + highlight)
- Undo/redo with selection restore
- i18n bundles (EN default; DE/FR/IT included)
- Compact Material toolbar with icons/menus

## Install

```bash
npm install @stackch/angular-material-richtext-editor @angular/material @angular/cdk
```

Optional alternatives:

```bash
# Yarn
yarn add @stackch/angular-material-richtext-editor @angular/material @angular/cdk

# pnpm
pnpm add @stackch/angular-material-richtext-editor @angular/material @angular/cdk
```

Make sure your app enables animations and includes a Material theme and icons:

- Provide animations in your app config (or use NoopAnimations if preferred).
- Add a prebuilt Material theme or your custom theme to global styles.
- Include Google Material Icons in `index.html`.

## Quick start (standalone)

```ts
import { bootstrapApplication, provideAnimations } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { FormsModule, ReactiveFormsModule, FormControl } from '@angular/forms';
import { StackchRichtextEditorMaterial } from '@stackch/angular-material-richtext-editor';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, ReactiveFormsModule, StackchRichtextEditorMaterial],
  template: `
    <stackch-richtext-editor-material
      [config]="{ showUndoRedo: true, showFontPanel: true, showHeading: true, showSpacing: true, showColor: true, showBold: true, showItalic: true, showUnderline: true, showLists: true, showAlign: true, showLink: true, showRemoveFormat: true }"
      [fonts]="['Arial, Helvetica, sans-serif','Georgia, serif','Courier New, monospace']"
      [fontSizes]="[12,14,16,18,20,24,28]"
      [minHeight]="200"
      [formControl]="content">
    </stackch-richtext-editor-material>
  `
})
export class App {
  content = new FormControl<string>('');
}

bootstrapApplication(App, {
  providers: [provideAnimations()],
});
```

Global setup additions:

- index.html: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
- styles.css: `@import '@angular/material/prebuilt-themes/indigo-pink.css';`

## Changelog (English)

- 1.2.0 (2025-10-12)
  - Feature: new structured output event `metricsChange` emitting `{ htmlLength, textLength }`.
  - Breaking: removed legacy `htmlLengthChange` and `textLengthChange` events.
  - Fix: normalize color/highlight spans to avoid duplicate wrappers; remove descendant styles, merge with parent/siblings, and collapse single-child parent into the child span when possible.
- 1.0.0 (2025-10-11)
  - Initial public release of the Angular Material variant

For a detailed history, see `RELEASE_NOTES.md` in the repository.

## CI install (YAML examples)

Install dependencies in CI. Prefer listing packages in your `package.json` so a simple `npm ci` is enough. The explicit install step below can be removed once dependencies are committed.

GitHub Actions:

```yaml
name: CI
on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      # Optional if not in package.json yet
      - name: Add rich text editor (one-off)
        run: npm install @stackch/angular-material-richtext-editor @angular/material @angular/cdk --save
      - name: Build
        run: npm run build
```

Azure Pipelines:

```yaml
trigger:
  - main

pool:
  vmImage: 'ubuntu-latest'

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: '20.x'
    displayName: 'Use Node.js 20'

  - script: npm ci
    displayName: 'Install dependencies'

  # Optional if not in package.json yet
  - script: npm install @stackch/angular-material-richtext-editor @angular/material @angular/cdk --save
    displayName: 'Add rich text editor (one-off)'

  - script: npm run build
    displayName: 'Build'
```

## Inputs

- `config: Partial<StackchRichtextEditorConfig>` – toggle toolbar sections and pass i18n overrides
- `showToolbar: boolean` – show/hide toolbar (default true)
- `fonts: string[]` – font families
- `fontSizes: number[]` – font sizes in px
- `minHeight: number` – editor min height (px)
- `maxHeight?: number` – editor max height (px)
- `height?: number` – fixed height (px)
- `placeholder?: string` – placeholder text

## Outputs

- `valueChange: EventEmitter<string>` – emits current HTML on changes (also supports FormControl via ControlValueAccessor)

## i18n

The editor ships with language bundles. Import from the package and pass via `config.i18n`:

```ts
import { STACKCH_RTE_I18N_DE, STACKCH_RTE_I18N_FR, STACKCH_RTE_I18N_IT } from '@stackch/angular-material-richtext-editor';

const config = { i18n: STACKCH_RTE_I18N_DE };
```

## Notes

- Uses DOM Range/Selection and executes formatting via native browser commands and node wrapping.
- Undo/Redo is implemented via snapshots with selection serialization.
- Menus use Angular Material; ensure animations are enabled for proper menu behavior.

## License

MIT