Text inserting backward as I type

[abdellahrk]

When I am typing, texts is being inserted backward. If I type hello, I get olleh. It's a new installation on Angular 21.
This also moves the cursor to the start meaning the delete key does not reach any text.

[kolkov]

Hi @abdellahrk,

Thanks for reporting this! This is a strange behavior. To help debug, could you provide:

1. Browser & version (Chrome, Firefox, Safari, etc.)
2. OS (Windows, macOS, Linux)
3. Your editor configuration - are you using any custom config options?
4. Does it happen in all browsers?

Also, could you try:

1. Testing with [config]="{ sanitize: false }" to see if sanitization is causing it
2. Creating a minimal reproduction on StackBlitz: https://stackblitz.com/edit/angular-editor-wysiwyg

This would help narrow down whether it's a cursor positioning issue, sanitization issue, or something specific to Angular 21.

Note: v3.0.4 was just released with security fixes. Make sure you're on the latest version:

npm install @kolkov/angular-editor@3.0.4

Thanks!

[maartenl]

Yes, I have the exact same problem. Angular 21, latest editor (3.0.5), Firefox 150.0.1, Fedora Linux.

sanitize: false does nothing.

I am using the new Signals and Standalone components (no NgModule).

I have a StackBlitz available at url https://stackblitz.com/edit/stackblitz-starters-lbn3rnu7

Let me know if you can access it?

[qqaimh]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。

[Frankitch]

I am facing the same issue, it seems related to signal forms, if I disconnect the editor from [formField], it works as expected.

[Frankitch]

For those who want to use it with signal forms, you can wrap angular-editor like this :

import {Component, effect, input, model, signal} from '@angular/core'
import {FormsModule} from '@angular/forms'
import {FormValueControl} from '@angular/forms/signals'
import {AngularEditorConfig, AngularEditorModule} from '@kolkov/angular-editor'

const DEFAULT_CONFIG: AngularEditorConfig = {...}

@Component({
  selector: 'app-rich-text-editor',
  imports: [AngularEditorModule, FormsModule],
  template: `
    <angular-editor
      class="overflow-hidden"
      [ngModel]="value()"
      (ngModelChange)="value.set($event)"
      [config]="mergedConfig()"
      (blur)="onBlur()"
    />
  `,
  styles: `
    :host {
      display: block;
    }
  `,
})
export class RichTextEditorComponent implements FormValueControl<string> {
  // --- FormValueControl required property ---
  readonly value = model<string>('')

  // --- FormValueControl optional state properties ---
  readonly disabled = input<boolean>(false)
  readonly touched = model<boolean>(false)

  // --- Component-specific inputs ---
  /** Partial AngularEditorConfig merged on top of defaults. */
  readonly config = input<Partial<AngularEditorConfig>>({})

  protected readonly mergedConfig = signal<AngularEditorConfig>(DEFAULT_CONFIG)

  constructor() {
    // Reflect disabled state into editor config
    effect(() => {
      const isDisabled = this.disabled()
      const userConfig = this.config()

      this.mergedConfig.set({
        ...DEFAULT_CONFIG,
        ...userConfig,
        editable: !isDisabled,
      })
    })
  }

  protected onBlur(): void {
    this.touched.set(true)
  }
}