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 e42729c3..c9de1b03 100644 --- a/tinymce-angular-component/src/main/ts/editor/editor.component.ts +++ b/tinymce-angular-component/src/main/ts/editor/editor.component.ts @@ -81,7 +81,7 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal public set disabled(val) { this._disabled = val; if (this._editor) { - if (DisabledUtils.isDisabledOptionSupported()) { + if (DisabledUtils.isDisabledOptionSupported(this._editor)) { this._editor.options.set('disabled', val ?? false); } else { setMode(this._editor, val ? 'readonly' : 'design'); @@ -190,10 +190,8 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal selector: undefined, target: this._element, inline: this.inline, - ...( DisabledUtils.isDisabledOptionSupported() - ? { disabled: this.disabled, readonly: this.readonly } - : { readonly: this.disabled || this.readonly } - ), + disabled: this.disabled, + readonly: this.readonly, license_key: this.licenseKey, plugins: mergePlugins((this.init && this.init.plugins) as string, this.plugins), toolbar: this.toolbar || (this.init && this.init.toolbar), @@ -209,6 +207,14 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal if (this.init && typeof this.init.setup === 'function') { this.init.setup(editor); } + + if (this.disabled === true) { + if (DisabledUtils.isDisabledOptionSupported(editor)) { + this._editor.options.set('disabled', this.disabled); + } else { + this._editor.mode.set('readonly'); + } + } } }; diff --git a/tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts b/tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts index 43173f64..cf633a21 100644 --- a/tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts +++ b/tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts @@ -1,11 +1,6 @@ -import { getTinymce } from '../TinyMCE'; -import { TinyMCE } from 'tinymce'; +import { Editor } from 'tinymce'; -const isDisabledOptionSupported = () => { - const tiny: TinyMCE = getTinymce(); - // Disabled option is supported since Tiny 7.6.0 - return Number(tiny.majorVersion) > 7 || (Number(tiny.majorVersion) === 7 && Number(tiny.minorVersion) >= 6); -}; +const isDisabledOptionSupported = (editor: Editor) => editor.options && editor.options.isRegistered('disabled'); export { isDisabledOptionSupported diff --git a/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts b/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts index 3aa23791..837b28fe 100644 --- a/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts +++ b/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts @@ -23,15 +23,15 @@ describe('DisabledPropertyTest', () => { const assertDisabledOption = (editor: Editor, expected: boolean) => Assertions.assertEq(`TinyMCE should have disabled option set to ${expected}`, expected, editor.options.get('disabled')); - eachVersionContext([ '7.5.0' ], () => { + eachVersionContext([ '5', '6', '7.5.0', ], () => { const createFixture = editorHook(EditorComponent); - it(`Component 'disabled' property is mapped to editor 'readonly' property`, async () => { + it(`Component 'disabled' property is mapped to editor 'readonly' mode`, async () => { const { editor } = await createFixture({ disabled: true }); assertReadonlyMode(editor); }); - it(`Toggling component's 'disabled' property is mapped to editor 'readonly' property`, async () => { + it(`Toggling component's 'disabled' property is mapped to editor 'readonly' mode`, async () => { const fixture = await createFixture(); const { editor } = fixture; @@ -46,6 +46,26 @@ describe('DisabledPropertyTest', () => { assertDesignMode(editor); }); + it(`Setting the 'readonly' property causing readonly mode`, async () => { + const { editor } = await createFixture({ readonly: true }); + assertReadonlyMode(editor); + }); + + it(`Toggling component's 'readonly' property is mapped to editor 'readonly' mode`, async () => { + const fixture = await createFixture(); + const { editor } = fixture; + + assertDesignMode(editor); + + fixture.componentRef.setInput('readonly', true); + fixture.detectChanges(); + assertReadonlyMode(editor); + + fixture.componentRef.setInput('readonly', false); + fixture.detectChanges(); + assertDesignMode(editor); + }); + it(`[disabled]=true [readonly]=false triggers readonly mode`, async () => { const { editor } = await createFixture({ disabled: true, readonly: false }); assertReadonlyMode(editor); @@ -67,7 +87,7 @@ describe('DisabledPropertyTest', () => { assertDesignMode(editor); }); - it(`Toggling component's 'disabled' property is mapped to editor 'disabled' property`, async () => { + it(`Toggling component's 'disabled' property is mapped to editor 'disabled' option`, async () => { const fixture = await createFixture(); const { editor } = fixture; @@ -86,30 +106,6 @@ describe('DisabledPropertyTest', () => { }); }); - eachVersionContext([ '4', '5', '6', '7' ], () => { - const createFixture = editorHook(EditorComponent); - - it(`Setting the 'readonly' property causing readonly mode`, async () => { - const { editor } = await createFixture({ readonly: true }); - assertReadonlyMode(editor); - }); - - it(`Toggling component's 'readonly' property is mapped to editor 'readonly' mode`, async () => { - const fixture = await createFixture(); - const { editor } = fixture; - - assertDesignMode(editor); - - fixture.componentRef.setInput('readonly', true); - fixture.detectChanges(); - assertReadonlyMode(editor); - - fixture.componentRef.setInput('readonly', false); - fixture.detectChanges(); - assertDesignMode(editor); - }); - }); - context('With version 7', () => { @Component({ imports: [ FormsModule, EditorComponent ],