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); + } + }); + }); + }); +});