@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

npm install @stackch/angular-material-richtext-editor @angular/material @angular/cdk

Optional alternatives:

# 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)

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:

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:

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:

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