From 8a7e6db69baa848676b84969e129c4b35fe3ec63 Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Tue, 20 May 2025 11:24:07 +0200 Subject: [PATCH 1/3] INT-3328: fix disabled property with ngmodel --- .../src/main/ts/editor/editor.component.ts | 4 +-- .../test/ts/browser/DisabledPropertyTest.ts | 36 ++++++++++++++++++- 2 files changed, 37 insertions(+), 3 deletions(-) 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..244f6554 100644 --- a/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts +++ b/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts @@ -2,9 +2,12 @@ import { Assertions } from '@ephox/agar'; import '../alien/InitTestEnvironment'; import { EditorComponent } from '../../../main/ts/public_api'; -import { describe, it } from '@ephox/bedrock-client'; +import { beforeEach, describe, it } from '@ephox/bedrock-client'; import { eachVersionContext, editorHook } from '../alien/TestHooks'; import { Editor } from 'tinymce'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { FormsModule } from '@angular/forms'; +import { Component, ViewChild } from '@angular/core'; describe('DisabledPropertyTest', () => { const getMode = (editor: Editor) => { @@ -104,4 +107,35 @@ describe('DisabledPropertyTest', () => { assertDesignMode(editor); }); }); + + eachVersionContext([ '7' ], () => { + @Component({ + imports: [ FormsModule, EditorComponent ], + template: ``, + standalone: true, + selector: 'test-host-component' + }) + class TestHostComponent { + public text = '

Hello World

'; + @ViewChild(EditorComponent) public editorRef!: EditorComponent; + } + + let fixture: ComponentFixture; + let testHost: TestHostComponent; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ TestHostComponent ] + }).compileComponents(); + + fixture = TestBed.createComponent(TestHostComponent); + testHost = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('INT-3328: disabled property should work with [ngModel] when TinyMCE has been loaded before editor component has been created', () => { + const tinyEditor = testHost.editorRef.editor; + assertDisabledOption(tinyEditor!, true); + }); + }); }); From 2336d8762ab6f0fbe71c92c158d3f31138ffd542 Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Wed, 21 May 2025 12:19:05 +0200 Subject: [PATCH 2/3] INT-3328: fix tests --- .../test/ts/browser/DisabledPropertyTest.ts | 34 +++++++++++++++---- 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts b/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts index 244f6554..3aa23791 100644 --- a/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts +++ b/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts @@ -2,12 +2,14 @@ import { Assertions } from '@ephox/agar'; import '../alien/InitTestEnvironment'; import { EditorComponent } from '../../../main/ts/public_api'; -import { beforeEach, 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 { FormsModule } from '@angular/forms'; 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) => { @@ -108,7 +110,7 @@ describe('DisabledPropertyTest', () => { }); }); - eachVersionContext([ '7' ], () => { + context('With version 7', () => { @Component({ imports: [ FormsModule, EditorComponent ], template: ``, @@ -120,10 +122,20 @@ describe('DisabledPropertyTest', () => { @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'); - beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ TestHostComponent ] }).compileComponents(); @@ -131,11 +143,21 @@ describe('DisabledPropertyTest', () => { 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', () => { - const tinyEditor = testHost.editorRef.editor; + 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!); }); }); }); From a2e16df0dd3af60d235dafda4ff4ba06a23426f3 Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Wed, 28 May 2025 12:25:44 +0200 Subject: [PATCH 3/3] INT-3328: add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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