TINY-11907: add support for 'disabled' property

Author: michalnieruchalski-tiugo

package.json

@@ -67,6 +67,8 @@
     "tinymce-5": "npm:tinymce@^5",
     "tinymce-6": "npm:tinymce@^6",
     "tinymce-7": "npm:tinymce@^7",
+    "tinymce-7.5.0": "npm:[email protected]",
+    "tinymce-7.6.0": "npm:[email protected]",
     "to-string-loader": "^1.1.5",
     "tslib": "^2.6.2",
     "typescript": "~5.5.4",

tinymce-angular-component/src/main/ts/editor/editor.component.ts

@@ -18,7 +18,8 @@ import {
 import { FormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject, takeUntil } from 'rxjs';
 import { getTinymce } from '../TinyMCE';
-import { listenTinyMCEEvent, bindHandlers, isTextarea, mergePlugins, uuid, noop, isNullOrUndefined } from '../utils/Utils';
+import { listenTinyMCEEvent, bindHandlers, isTextarea, mergePlugins, uuid, noop, isNullOrUndefined, setMode } from '../utils/Utils';
+import * as DisabledUtils from '../utils/DisabledUtils';
 import { EventObj, Events } from './Events';
 import { ScriptLoader } from '../utils/ScriptLoader';
 import type { Editor as TinyMCEEditor, TinyMCE } from 'tinymce';
@@ -68,11 +69,11 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal
   public set disabled(val) {
     this._disabled = val;
     if (this._editor && this._editor.initialized) {
-      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') {
-        this._editor.setMode(val ? 'readonly' : 'design');
+      if (DisabledUtils.isDisabledOptionSupported()) {
+        this._editor.options.set('disabled', val ?? false);
+        return;
       }
+      setMode(this._editor, val ? 'readonly' : 'design');
     }
   }
 
@@ -176,7 +177,7 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal
       selector: undefined,
       target: this._element,
       inline: this.inline,
-      readonly: this.disabled,
+      ...( DisabledUtils.isDisabledOptionSupported() ? { disabled: this.disabled } : { readonly: this.disabled } ),
       license_key: this.licenseKey,
       plugins: mergePlugins((this.init && this.init.plugins) as string, this.plugins),
       toolbar: this.toolbar || (this.init && this.init.toolbar),

tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts

@@ -0,0 +1,12 @@
+import { TinyVer } from '@tinymce/miniature';
+import { getTinymce } from '../TinyMCE';
+import { TinyMCE } from 'tinymce';
+
+const isDisabledOptionSupported = () => {
+  const tiny: TinyMCE = getTinymce();
+  return !TinyVer.isLessThan(tiny, '7.6.0');
+};
+
+export {
+  isDisabledOptionSupported
+};

tinymce-angular-component/src/main/ts/utils/Utils.ts

@@ -12,6 +12,7 @@ import { HasEventTargetAddRemove } from 'rxjs/internal/observable/fromEvent';
 
 import { EditorComponent } from '../editor/editor.component';
 import { validEvents, Events } from '../editor/Events';
+import { Editor } from 'tinymce';
 
 // Caretaker note: `fromEvent` supports passing JQuery-style event targets, the editor has `on` and `off` methods which
 // will be invoked upon subscription and teardown.
@@ -47,10 +48,10 @@ const getValidEvents = (ctx: EditorComponent): (keyof Events)[] => {
 };
 
 const parseStringProperty = (property: string | string[] | undefined, defaultValue: (keyof Events)[]): string[] => {
-  if ( typeof property === 'string') {
+  if (typeof property === 'string') {
     return property.split(',').map((value) => value.trim());
   }
-  if ( Array.isArray(property)) {
+  if (Array.isArray(property)) {
     return property;
   }
   return defaultValue;
@@ -91,6 +92,14 @@ const isObserved = (o: Subject<unknown>): boolean =>
   // checking if a subject has observers.
   o.observed || o.observers?.length > 0;
 
+const setMode = (editor: Editor, mode: 'readonly' | 'design') => {
+  if (typeof editor.mode?.set === 'function') {
+    editor.mode.set(mode);
+  } else if ('setMode' in editor && typeof editor.setMode === 'function') {
+    editor.setMode(mode);
+  }
+};
+
 export {
   listenTinyMCEEvent,
   bindHandlers,
@@ -99,5 +108,6 @@ export {
   normalizePluginArray,
   mergePlugins,
   noop,
-  isNullOrUndefined
+  isNullOrUndefined,
+  setMode
 };

tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts

@@ -0,0 +1,67 @@
+import { Assertions } from '@ephox/agar';
+import '../alien/InitTestEnvironment';
+
+import { EditorComponent } from '../../../main/ts/public_api';
+import { describe, it } from '@ephox/bedrock-client';
+import { eachVersionContext, editorHook } from '../alien/TestHooks';
+import { Editor } from 'tinymce';
+
+describe('DisabledPropertyTest', () => {
+  const assertDesignMode = (editor: Editor) => Assertions.assertEq('TinyMCE should be in design mode', 'design', editor.mode.get());
+  const assertReadonlyMode = (editor: Editor) => Assertions.assertEq('TinyMCE should be in readonly mode', 'readonly', editor.mode.get());
+  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' ], () => {
+    const createFixture = editorHook(EditorComponent);
+
+    it(`Component 'disabled' property is mapped to editor 'readonly' property`, async () => {
+      const { editor } = await createFixture({ disabled: true });
+      assertReadonlyMode(editor);
+    });
+
+    it(`Toggling component's 'disabled' property is mapped to editor 'readonly' property`, async () => {
+      const fixture = await createFixture();
+      const { editor } = fixture;
+
+      assertDesignMode(editor);
+
+      fixture.componentRef.setInput('disabled', true);
+      fixture.detectChanges();
+      assertReadonlyMode(editor);
+
+      fixture.componentRef.setInput('disabled', false);
+      fixture.detectChanges();
+      assertDesignMode(editor);
+    });
+  });
+
+  eachVersionContext([ '7.6.0' ], () => {
+    const createFixture = editorHook(EditorComponent);
+
+    it(`Component 'disabled' property is mapped to editor 'disabled' property`, async () => {
+      const { editor } = await createFixture({ cloudChannel: '7.6.0', disabled: true });
+
+      Assertions.assertEq('TinyMCE should have disabled option set to true', true, editor.options.get('disabled'));
+      assertDesignMode(editor);
+    });
+
+    it(`Toggling component's 'disabled' property is mapped to editor 'disabled' property`, async () => {
+      const fixture = await createFixture();
+      const { editor } = fixture;
+
+      assertDesignMode(editor);
+      assertDisabledOption(editor, false);
+
+      fixture.componentRef.setInput('disabled', true);
+      fixture.detectChanges();
+      assertDesignMode(editor);
+      assertDisabledOption(editor, true);
+
+      fixture.componentRef.setInput('disabled', false);
+      fixture.detectChanges();
+      assertDesignMode(editor);
+      assertDisabledOption(editor, false);
+    });
+  });
+});

yarn.lock

@@ -13082,6 +13082,16 @@ tiny-invariant@^1.3.1, tiny-invariant@^1.3.3:
   resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.8.3.tgz#0025a4aaa4c24dc2a3e32e83dfda705d196fd802"
   integrity sha512-3fCHKAeqT+xNwBVESf6iDbDV0VNwZNmfrkx9c/6Gz5iB8piMfaO6s7FvoiTrj1hf1gVbfyLTnz1DooI6DhgINQ==
 
+"tinymce-7.5.0@npm:[email protected]":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.5.0.tgz#56388d314399c288a100df4aaf468153f29477f1"
+  integrity sha512-A7iuQPIfeze5rO6bvnnPwP7TiWnPA9AGr8U/9ssLwrEG+FMYPzvLPt3RT8ktVn/wPSJkVBBSLCAZX2dAHb8YEA==
+
+"tinymce-7.6.0@npm:[email protected]":
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.6.0.tgz#476069a3e98f46f3f6e7875ca878313d6b3345b9"
+  integrity sha512-kUrklnD7H8JbpSDEGRh51GKK6Mrf+pR9neSDzUHvXKV+2oRtMB7sqfAtEOnM0/WKdstwaX0qoNCZNo2H1Y0EFA==
+
 "tinymce-7@npm:tinymce@^7":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.1.2.tgz#cb40e527dc03d6a0547a23c91231a946e50dae03"