TINY-11911: Handle updates of the disabled attribute

tiny-ben-tran · tiny-ben-tran · commit 01ef6010436a · 2025-05-05T15:43:06.000+09:30
diff --git a/src/demo/html/disabled.html b/src/demo/html/disabled.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>TinyMCE WebComponent Demo: Disabled and Readonly </title>
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+  </head>
+
+  <body>
+    <script>
+      function toggleDisabled() {
+        var editor = document.getElementById('mody');
+
+        if (!editor.hasAttribute('disabled')) {
+          editor.setAttribute('disabled', '');
+        } else {
+          editor.removeAttribute('disabled');
+        }
+      }
+
+      function toggleReadonly() {
+        var editor = document.getElementById('mody');
+
+        editor.removeAttribute('disabled');
+        if (!editor.hasAttribute('readonly')) {
+          editor.setAttribute('readonly', '');
+        } else {
+          editor.removeAttribute('readonly');
+        }
+      }
+    </script>
+	  <h2>TinyMCE WebComponent Demo: Disabled and Readonly</h2>
+    <div id="ephox-ui">
+      <button onclick="toggleDisabled()">Toggle disabled</button>
+      <button onclick="toggleReadonly()">Toggle readonly</button>
+      <tinymce-editor id="mody"></tinymce-editor>
+    </div>
+  <script src="../../../node_modules/tinymce/tinymce.js"></script>
+  <script src="../../../dist/tinymce-webcomponent.js"></script>
+  </body>
+</html>
diff --git a/src/main/ts/component/Editor.ts b/src/main/ts/component/Editor.ts
@@ -74,7 +74,6 @@ const configAttributes: Record<string, (v: string) => unknown> = {
   icons: parseString, // name of icon pack eg. 'material'
   icons_url: parseString, // url to icon pack js
   promotion: parseBooleanOrString, // boolean
-  disabled: parseBooleanOrString, // boolean
 };
 
 const configRenames: Record<string, string> = {
@@ -202,6 +201,9 @@ class TinyMceEditor extends HTMLElement {
     if (this.readonly) {
       config.readonly = true;
     }
+    if (this.disabled) {
+      config.disabled = true;
+    }
     if (this.autofocus) {
       config.auto_focus = true;
     }
@@ -294,6 +296,8 @@ class TinyMceEditor extends HTMLElement {
     if (oldValue !== newValue) {
       if (attribute === 'form') {
         this._updateForm();
+      } else if (attribute === 'disabled') {
+        this.disabled = newValue !== null;
       } else if (attribute === 'readonly') {
         this.readonly = newValue !== null;
       } else if (attribute === 'autofocus') {
@@ -357,25 +361,23 @@ class TinyMceEditor extends HTMLElement {
   }
 
   get disabled(): boolean {
-    if (this._editor) {
-      return this._editor.mode.get() === 'disabled';
-    } else {
-      return this.hasAttribute('disabled');
-    }
+    return this._editor ? this._editor.options.get('disabled') : this.hasAttribute('disabled');
   }
 
   set disabled(value: boolean) {
     if (value) {
-      if (this._editor && this._editor.mode.get() !== 'disabled') {
-        this._editor.mode.set('disabled');
+      if (this._editor && this._editor.options.get('disabled') === false) {
+        this._editor.options.set('disabled', value);
       }
+
       if (!this.hasAttribute('disabled')) {
         this.setAttribute('disabled', '');
       }
     } else {
-      if (this._editor && this._editor.mode.get() === 'disabled') {
-        this._editor.mode.set('design');
+      if (this._editor && this._editor.options.get('disabled') === true) {
+        this._editor.options.set('disabled', false);
       }
+
       if (this.hasAttribute('disabled')) {
         this.removeAttribute('disabled');
       }
