HTML Code View Toggle Breaking When Text Box Is Updated While Code View Active

[anthonygrado]

Issue: When loading a page the editor UI works as expected, but any action that alters the contents of the text box while the HTML Code View is active breaks the menu buttons for the editor. The only way reset the functionality is to reload the page.

Working Example: https://angular-editor-wysiwyg-wv3jnm.stackblitz.io

[bhattjeet]

Facing same issue.. Is there any way to reset/reload editor configuration?

Analysis:

contenteditable attributes value remains false when user re-edit the content.

Adding snaps for more info.

This error occurred when try to entered any text. I am conditionally doing editor to read-only/edit mode.

.

[Elvynia]

If it can help, I use this lines inside my angular component to reset the html mode manually when needed :

@ViewChild(AngularEditorComponent) editor: AngularEditorComponent;

updateEditorContent() {
  if (!this.editor.modeVisual) {
    this.editor.toggleEditorMode(false);
    this.editor.editorToolbar.setEditorMode(false);
  }
  // Update content here
}

[kolkov]

Thank you for reporting this issue with a working example!

Problem: HTML Code View Toggle Breaks Editor

When content changes while in HTML code view mode, the editor buttons become non-functional.

Root Cause

The contenteditable attribute remains false when switching back to visual mode after external content updates.

Solution (from comments)

Workaround:

import { ViewChild } from '@angular/core';
import { AngularEditorComponent } from '@kolkov/angular-editor';

@Component({...})
export class MyComponent {
  @ViewChild(AngularEditorComponent) editor: AngularEditorComponent;

  updateEditorContent(newContent: string) {
    // If in HTML mode, switch back to visual mode first
    if (!this.editor.modeVisual) {
      this.editor.toggleEditorMode(false);
      this.editor.editorToolbar.setEditorMode(false);
    }
    
    // Now update content
    this.content = newContent;
  }
}

Proper Fix

The issue is that when content changes externally while in HTML mode, the editor doesn't properly sync state.

Files to modify:

• angular-editor.component.ts - Ensure contenteditable is properly set on mode toggle
• ae-toolbar.component.ts - Sync editor mode state

Fix approach:

// In angular-editor.component.ts
ngOnChanges(changes: SimpleChanges) {
  if (changes['content']) {
    // If in HTML mode, refresh the view
    if (!this.modeVisual) {
      // Update source text
      this.updateSourceText();
    }
  }
}

// Ensure contenteditable is set correctly
setEditableState() {
  if (this.modeVisual && this.config.editable) {
    this.r.setAttribute(this.textArea.nativeElement, 'contenteditable', 'true');
  } else {
    this.r.setAttribute(this.textArea.nativeElement, 'contenteditable', 'false');
  }
}

Recommendation

Short-term: Use the workaround above

Long-term: This needs to be fixed in the library. The editor should:

1. Detect external content changes
2. Properly sync mode state
3. Update contenteditable attribute correctly

Related Issues

This is related to:

• #335 - Re-rendering HTML
• #313 - Change detection with manual HTML updates

Keeping OPEN as this is a confirmed bug that needs fixing in the library.