TINY-11911: Add logic to sync with the disabled option

tiny-ben-tran · tiny-ben-tran · commit 9e5be9b0c8b2 · 2025-05-22T15:28:20.000+09:30
diff --git a/src/demo/html/disabled.html b/src/demo/html/disabled.html
@@ -10,8 +10,7 @@
 <body>
   <script>
     function toggleDisabled() {
-      var editor = document.getElementById('mody');
-
+      var editor = document.getElementById('disabled_state');
       if (!editor.hasAttribute('disabled')) {
         editor.setAttribute('disabled', '');
       } else {
@@ -20,9 +19,7 @@
     }
 
     function toggleReadonly() {
-      var editor = document.getElementById('mody');
-
-      editor.removeAttribute('disabled');
+      var editor = document.getElementById('readonly_mode');
       if (!editor.hasAttribute('readonly')) {
         editor.setAttribute('readonly', '');
       } else {
@@ -32,9 +29,12 @@
   </script>
   <h2>TinyMCE WebComponent Demo: Disabled and Readonly</h2>
   <div id="ephox-ui">
-    <button onclick="toggleDisabled()">Toggle disabled</button>
+    <h2>Readonly mode</h2>
     <button onclick="toggleReadonly()">Toggle readonly</button>
-    <tinymce-editor id="mody"></tinymce-editor>
+    <tinymce-editor id="readonly_mode" readonly></tinymce-editor>
+    <h2>Disabled state</h2>
+    <button onclick="toggleDisabled()" plugins="help">Toggle disabled</button>
+    <tinymce-editor id="disabled_state" disabled></tinymce-editor>
   </div>
   <script src="../../../node_modules/tinymce/tinymce.js"></script>
   <script src="../../../dist/tinymce-webcomponent.js"></script>
diff --git a/src/main/ts/component/Editor.ts b/src/main/ts/component/Editor.ts
@@ -80,9 +80,7 @@ const configAttributes: Record<string, (v: string) => unknown> = {
 const configRenames: Record<string, string> = {};
 
 // Function that checks if the disabled option is supported with the version used
-const isDisabledOptionSupported = (tinymce: TinyMCE): boolean => {
-  return (!TinyVer.isLessThan(tinymce, '7.6.0'))
-};
+const isDisabledOptionSupported = (tinymce: TinyMCE): boolean => !TinyVer.isLessThan(tinymce, '7.6.0');
 
 class TinyMceEditor extends HTMLElement {
   private _status: Status;
@@ -250,24 +248,26 @@ class TinyMceEditor extends HTMLElement {
     const baseConfig = this._getConfig();
     const conf: EditorOptions = {
       ...baseConfig,
+      ...{
+        disabled: this.hasAttribute('disabled'),
+        readonly: this.hasAttribute('readonly')
+      },
       target,
       setup: (editor: Editor) => {
         this._editor = editor;
-        editor.on("init", (_e: unknown) => {
-          const tinymce = this._getTinymce();
-          const isDisableSupported = isDisabledOptionSupported(tinymce);
-          if (isDisableSupported && this.hasAttribute('disabled')) {
-            editor.options.set('disabled', true);
-          }
-          if (this.hasAttribute('readonly')) {
-            editor.options.set('readonly', true);
-          }
+        editor.on('init', (_e: unknown) => {
           this._status = Status.Ready;
         });
         editor.on('SwitchMode', (_e: unknown) => {
           // this assignment ensures the attribute is in sync with the editor
           this.readonly = this.readonly;
         });
+
+        editor.on('DisabledStateChange', (_e: unknown) => {
+          // this assignment ensures the attribute is in sync with the editor
+          this.disabled = this.disabled;
+        });
+
         Obj.each(this._eventHandlers, (handler, event) => {
           if (handler !== undefined) {
             editor.on(event, handler);
@@ -382,11 +382,11 @@ class TinyMceEditor extends HTMLElement {
   set disabled(value: boolean) {
     const tinymce = this._getTinymce?.();
     const isVersionNewer = tinymce ? isDisabledOptionSupported(tinymce) : true;
-  
+
     if (this._editor && this._status === Status.Ready && isVersionNewer) {
-     this._editor.options.set('disabled', value);
+      this._editor.options.set('disabled', value);
     }
-  
+
     if (value && !this.hasAttribute('disabled')) {
       this.setAttribute('disabled', '');
     } else if (!value && this.hasAttribute('disabled')) {
diff --git a/yarn.lock b/yarn.lock
@@ -7055,10 +7055,10 @@ thunky@^1.0.2:
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
-tinymce@^7.4.1:
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.4.1.tgz#cae3160a7d5850e3069d6d79625b1c74918f8af9"
-  integrity sha512-g1Ieaio5YU+jLEQZkQyxTT8EY/im+TC/CFBPlqDBCNdsF8YQOeLMot+K6vmFOAXhNc85KhP1rC9Dn2X+iBFDGg==
+tinymce@7.6:
+  version "7.6.1"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.6.1.tgz#f35990f6e9c2f90220939f545ac032e3d9301b05"
+  integrity sha512-5cHhaAoyyTHfAVTInNfoSp0KkUHmeVUbGSu37QKQbOFIPqxYPhqBiaLm1WVLgoNBYOHRProVc3xzxnNTeWHyoQ==
 
 tinyrainbow@^1.2.0:
   version "1.2.0"
