diff --git a/hugerte-angular-component/src/main/ts/editor/editor.component.ts b/hugerte-angular-component/src/main/ts/editor/editor.component.ts
index 83c165f..e370169 100644
--- a/hugerte-angular-component/src/main/ts/editor/editor.component.ts
+++ b/hugerte-angular-component/src/main/ts/editor/editor.component.ts
@@ -74,7 +74,7 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal
@Input()
public set disabled(val) {
this._disabled = val;
- if (this._editor && this._editor.initialized) {
+ if (this._editor) {
if (typeof this._editor.mode?.set === 'function') {
this._editor.mode.set(val ? 'readonly' : 'design');
} else if ('setMode' in this._editor && typeof this._editor.setMode === 'function') {
diff --git a/hugerte-angular-component/src/test/ts/browser/DisabledPropertyTest.ts b/hugerte-angular-component/src/test/ts/browser/DisabledPropertyTest.ts
new file mode 100644
index 0000000..c574915
--- /dev/null
+++ b/hugerte-angular-component/src/test/ts/browser/DisabledPropertyTest.ts
@@ -0,0 +1,133 @@
+import '../alien/InitTestEnvironment';
+
+import { Component, ViewChild } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Assertions, Waiter } from '@ephox/agar';
+import { describe, it } from '@ephox/bedrock-client';
+
+import { EditorComponent } from '../../../main/ts/editor/editor.component';
+import { eachVersionContext, editorHook } from '../alien/TestHooks';
+import { TestBed } from '@angular/core/testing';
+
+describe('DisabledPropertyTest', () => {
+ const getMode = (editor: any) => {
+ return editor.mode?.get ? editor.mode.get() : 'design';
+ };
+
+ const assertDisabled = (editor: any, disabled: boolean) => {
+ const mode = getMode(editor);
+ const isDisabled = mode === 'readonly';
+ Assertions.assertEq('Editor should be disabled', disabled, isDisabled);
+ };
+
+ const assertDesignMode = (editor: any) => {
+ Assertions.assertEq('Editor should be in design mode', 'design', getMode(editor));
+ };
+
+ eachVersionContext([ '1' ], () => {
+ @Component({
+ standalone: true,
+ imports: [ EditorComponent ],
+ template: ``,
+ })
+ class EditorWithDisabledInput {
+ public disabled = true;
+ }
+ const createFixture = editorHook(EditorWithDisabledInput);
+
+ it('should initialize in disabled state', async () => {
+ const fixture = await createFixture();
+ assertDisabled(fixture.editor, true);
+ });
+
+ it('should toggle disabled state', async () => {
+ const fixture = await createFixture();
+ assertDisabled(fixture.editor, true);
+
+ fixture.componentInstance.disabled = false;
+ fixture.detectChanges();
+ await Waiter.pTryUntil('Waited too long for mode change', () => {
+ assertDesignMode(fixture.editor);
+ });
+
+ fixture.componentInstance.disabled = true;
+ fixture.detectChanges();
+ await Waiter.pTryUntil('Waited too long for mode change', () => {
+ assertDisabled(fixture.editor, true);
+ });
+ });
+
+ @Component({
+ standalone: true,
+ imports: [ EditorComponent, FormsModule ],
+ template: ``,
+ })
+ class EditorWithNgModelDisabled {
+ public content = '
Hello World
';
+ @ViewChild(EditorComponent) public editorRef!: EditorComponent;
+ }
+
+ it('disabled property should work with [ngModel] when HugeRTE has been loaded before editor component has been created', async () => {
+ await TestBed.configureTestingModule({
+ imports: [ EditorWithNgModelDisabled ]
+ }).compileComponents();
+
+ const fixture = TestBed.createComponent(EditorWithNgModelDisabled);
+ fixture.detectChanges();
+
+ const tinyEditor = fixture.componentInstance.editorRef.editor;
+ await Waiter.pTryUntil('Waited too long for editor to initialize', () => {
+ Assertions.assertEq('Editor should exist', true, tinyEditor !== undefined);
+ if (tinyEditor) {
+ assertDisabled(tinyEditor, true);
+ }
+ });
+ });
+
+ @Component({
+ standalone: true,
+ imports: [ EditorComponent, FormsModule ],
+ template: ``,
+ })
+ class EditorWithNgModelDynamicDisabled {
+ public content = 'Hello World
';
+ public disabled = true;
+ @ViewChild(EditorComponent) public editorRef!: EditorComponent;
+ }
+
+ it('disabled property should toggle correctly with [ngModel]', async () => {
+ await TestBed.configureTestingModule({
+ imports: [ EditorWithNgModelDynamicDisabled ]
+ }).compileComponents();
+
+ const fixture = TestBed.createComponent(EditorWithNgModelDynamicDisabled);
+ fixture.detectChanges();
+
+ let tinyEditor = fixture.componentInstance.editorRef.editor;
+ await Waiter.pTryUntil('Waited too long for editor to initialize', () => {
+ Assertions.assertEq('Editor should exist', true, tinyEditor !== undefined);
+ if (tinyEditor) {
+ assertDisabled(tinyEditor, true);
+ }
+ });
+
+ fixture.componentInstance.disabled = false;
+ fixture.detectChanges();
+ await Waiter.pTryUntil('Waited too long for mode change', () => {
+ tinyEditor = fixture.componentInstance.editorRef.editor;
+ if (tinyEditor) {
+ assertDesignMode(tinyEditor);
+ }
+ });
+
+ fixture.componentInstance.disabled = true;
+ fixture.detectChanges();
+ await Waiter.pTryUntil('Waited too long for mode change', () => {
+ tinyEditor = fixture.componentInstance.editorRef.editor;
+ if (tinyEditor) {
+ assertDisabled(tinyEditor, true);
+ }
+ });
+ });
+ });
+});