diff --git a/CHANGELOG.md b/CHANGELOG.md index c5ba703c..3749e843 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Updated dependencies. #INT-3324 +- Fixed a bug where `[disabled]` property was ignored while using `[ngModel]`. #INT-3328 ### Changed - Moved tinymce dependency to be a optional peer dependency. #INT-3324 diff --git a/tinymce-angular-component/src/main/ts/editor/editor.component.ts b/tinymce-angular-component/src/main/ts/editor/editor.component.ts index 538e05da..e42729c3 100644 --- a/tinymce-angular-component/src/main/ts/editor/editor.component.ts +++ b/tinymce-angular-component/src/main/ts/editor/editor.component.ts @@ -68,7 +68,7 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal @Input() public set readonly(val) { this._readonly = val; - if (this._editor && this._editor.initialized) { + if (this._editor) { setMode(this._editor, val ? 'readonly' : 'design'); } } @@ -80,7 +80,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 (DisabledUtils.isDisabledOptionSupported()) { this._editor.options.set('disabled', val ?? false); } else { diff --git a/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts b/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts index bf5f6e76..3aa23791 100644 --- a/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts +++ b/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts @@ -2,9 +2,14 @@ import { Assertions } from '@ephox/agar'; import '../alien/InitTestEnvironment'; import { EditorComponent } from '../../../main/ts/public_api'; -import { describe, it } from '@ephox/bedrock-client'; +import { after, before, context, describe, it } from '@ephox/bedrock-client'; import { eachVersionContext, editorHook } from '../alien/TestHooks'; import { Editor } from 'tinymce'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { Component, ViewChild } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { VersionLoader } from '@tinymce/miniature'; +import { deleteTinymce } from '../alien/TestHelpers'; describe('DisabledPropertyTest', () => { const getMode = (editor: Editor) => { @@ -104,4 +109,55 @@ describe('DisabledPropertyTest', () => { assertDesignMode(editor); }); }); + + context('With version 7', () => { + @Component({ + imports: [ FormsModule, EditorComponent ], + template: ``, + standalone: true, + selector: 'test-host-component' + }) + class TestHostComponent { + public text = '

Hello World

'; + @ViewChild(EditorComponent) public editorRef!: EditorComponent; + } + + const waitForEditorInitialized = (editor: Editor) => new Promise((resolve) => { + if (editor.initialized) { + resolve(); + } + editor.once('init', () => resolve()); + }); + + let fixture: ComponentFixture; + let testHost: TestHostComponent; + let tinyEditor: Editor; + + before(async () => { + await VersionLoader.pLoadVersion('7'); + + await TestBed.configureTestingModule({ + imports: [ TestHostComponent ] + }).compileComponents(); + + fixture = TestBed.createComponent(TestHostComponent); + testHost = fixture.componentInstance; + fixture.detectChanges(); + tinyEditor = testHost.editorRef.editor!; + }); + + after(() => { + deleteTinymce(); + }); + + it('INT-3328: disabled property should work with [ngModel] when TinyMCE has been loaded before editor component has been created', async () => { + assertDisabledOption(tinyEditor!, true); + /* + I have to wait until the editor is fully initialized before using deleteTinymce() in after block. + There's for example theme.js script that starts to load after editor instance has been created. + If I remove tinymce from window too soon the theme.js will fail alongside with this test case. + */ + await waitForEditorInitialized(tinyEditor!); + }); + }); });