TINY-11907: Simplify disabled option check and update tests (#419)

Author: tiny-ben-tran

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

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

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 ],