Merge pull request #64 from tinymce/feature/TINY-11911

tiny-ben-tran · web-flow · commit 78e2b8081dae · 2025-05-28T14:12:12.000+09:30
TINY-11911: Added new `disabled` option and increased minor version.
diff --git a/package.json b/package.json
@@ -48,7 +48,9 @@
     "typescript": "~5.6.3",
     "webpack": "^5.75.0"
   },
-  "dependencies": {},
-  "version": "2.1.1-rc",
+  "dependencies": {
+    "@tinymce/miniature": "^6.0.0"
+  },
+  "version": "2.2.1-rc",
   "name": "@tinymce/tinymce-webcomponent"
 }
diff --git a/src/demo/html/disabled.html b/src/demo/html/disabled.html
@@ -0,0 +1,43 @@
+<!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('disabled_state');
+      if (!editor.hasAttribute('disabled')) {
+        editor.setAttribute('disabled', '');
+      } else {
+        editor.removeAttribute('disabled');
+      }
+    }
+
+    function toggleReadonly() {
+      var editor = document.getElementById('readonly_mode');
+      if (!editor.hasAttribute('readonly')) {
+        editor.setAttribute('readonly', '');
+      } else {
+        editor.removeAttribute('readonly');
+      }
+    }
+  </script>
+  <h2>TinyMCE WebComponent Demo: Disabled and Readonly</h2>
+  <div id="ephox-ui">
+    <h2>Readonly mode</h2>
+    <button onclick="toggleReadonly()">Toggle readonly</button>
+    <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>
+</body>
+
+</html>
diff --git a/src/main/ts/component/Editor.ts b/src/main/ts/component/Editor.ts
@@ -1,6 +1,7 @@
 import { Resolve, Obj, Fun, Global } from '@ephox/katamari';
 import { TinyMCE, Editor } from 'tinymce';
 import { ScriptLoader } from '../utils/ScriptLoader';
+import { TinyVer } from '@tinymce/miniature';
 type EditorOptions = Parameters<TinyMCE['init']>[0];
 type EventHandler = Parameters<Editor['on']>[1];
 
@@ -76,8 +77,10 @@ const configAttributes: Record<string, (v: string) => unknown> = {
   promotion: parseBooleanOrString, // boolean
 };
 
-const configRenames: Record<string, string> = {
-};
+const configRenames: Record<string, string> = {};
+
+// Function that checks if the disabled option is supported with the version used
+const isDisabledOptionSupported = (tinymce: TinyMCE): boolean => !TinyVer.isLessThan(tinymce, '7.6.0');
 
 class TinyMceEditor extends HTMLElement {
   private _status: Status;
@@ -108,7 +111,7 @@ class TinyMceEditor extends HTMLElement {
       'on-ObjectSelected', 'on-SetContent', 'on-Show', 'on-Submit', 'on-Undo',
       'on-VisualAid' ];
 
-    return [ 'form', 'readonly', 'autofocus', 'placeholder' ].concat(nativeEvents).concat(tinyEvents);
+    return [ 'form', 'readonly', 'autofocus', 'placeholder', 'disabled' ].concat(nativeEvents).concat(tinyEvents);
   }
 
   constructor() {
@@ -201,6 +204,9 @@ class TinyMceEditor extends HTMLElement {
     if (this.readonly) {
       config.readonly = true;
     }
+    if (this.disabled) {
+      config.disabled = true;
+    }
     if (this.autofocus) {
       config.auto_focus = true;
     }
@@ -242,6 +248,10 @@ 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;
@@ -252,6 +262,12 @@ class TinyMceEditor extends HTMLElement {
           // 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);
@@ -293,6 +309,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') {
@@ -355,6 +373,27 @@ class TinyMceEditor extends HTMLElement {
     }
   }
 
+  get disabled(): boolean {
+    return this._editor
+      ? this._editor.options.get('disabled')
+      : this.hasAttribute('disabled');
+  }
+
+  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);
+    }
+
+    if (value && !this.hasAttribute('disabled')) {
+      this.setAttribute('disabled', '');
+    } else if (!value && this.hasAttribute('disabled')) {
+      this.removeAttribute('disabled');
+    }
+  }
+
   get placeholder(): string | null {
     return this.getAttribute('placeholder');
   }
diff --git a/yarn.lock b/yarn.lock
@@ -638,7 +638,7 @@
     "@deno/shim-deno-test" "^0.4.0"
     which "^2.0.2"
 
-"@ephox/agar@^8.0.1":
+"@ephox/agar@^8.0.0", "@ephox/agar@^8.0.1":
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/@ephox/agar/-/agar-8.0.1.tgz#6772ed7abd90adee5b08bc6f8baf0cb4f22b8d1c"
   integrity sha512-2LR/u0oos9GadRoLFDVE6NRDV8Tl9+DYQyouVYn0+7afAYdouyw+nXaoTVG5nnvMG+ofsmldKOC82nJWu0a4kQ==
@@ -758,14 +758,25 @@
   dependencies:
     "@ephox/dispute" "^1.0.3"
 
+"@ephox/mcagar@^9.0.0":
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/@ephox/mcagar/-/mcagar-9.0.1.tgz#d740d02628063e8df86ca8cdd8aa307654b1c69b"
+  integrity sha512-iNMP8mkz8AtgiRceU4TAnstQje3RG8yxM/QoWKkriCeh6n5fe1sSfexFRVW3fwZ0bUrjTlyawSqoH0yhESqJjQ==
+  dependencies:
+    "@ephox/agar" "^8.0.1"
+    "@ephox/katamari" "^9.1.6"
+    "@ephox/sand" "^6.0.10"
+    "@ephox/sugar" "^9.3.1"
+    fast-check "^2.0.0"
+
 "@ephox/sand@^6.0.10":
   version "6.0.10"
   resolved "https://registry.yarnpkg.com/@ephox/sand/-/sand-6.0.10.tgz#1bd3e03ce339ab282fa3ac03591badc13f7d69b1"
   integrity sha512-q/2Xcjl1O5c9/HHxQiEKGZkGsC68WUjVP5ciDNKqrZd1s1BhA3VWbaubQxxBRt3SwKyBCukfS5gL53qkqTfbkg==
   dependencies:
     "@ephox/katamari" "^9.1.6"
 
-"@ephox/sugar@^9.2.1", "@ephox/sugar@^9.3.1":
+"@ephox/sugar@^9.2.1", "@ephox/sugar@^9.3.0", "@ephox/sugar@^9.3.1":
   version "9.3.1"
   resolved "https://registry.yarnpkg.com/@ephox/sugar/-/sugar-9.3.1.tgz#082dbe885d41e657eff7ef6275d648f3dff88334"
   integrity sha512-NQMqDN0zC+IZGuhBuz/7RxncfJsmTBhCHgaqkHOJ5d1E0CIL9afIizBYQ0JSHS3osAb9woGGtwPobjCx3/Srpw==
@@ -1544,6 +1555,16 @@
     resolve "^1.17.0"
     typescript "^4.9.5"
 
+"@tinymce/miniature@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@tinymce/miniature/-/miniature-6.0.0.tgz#d11ca91292fa614926faf399166898874baedd92"
+  integrity sha512-bLpaTTgbyMHP3V8bucSxvCTVTUjRRk05zDgnlD5Hj2eo6hEyHT1FCqpuhdVLHx9mbCydrlAIhhsY8Ex6Hp8Qqg==
+  dependencies:
+    "@ephox/agar" "^8.0.0"
+    "@ephox/katamari" "^9.1.5"
+    "@ephox/mcagar" "^9.0.0"
+    "@ephox/sugar" "^9.3.0"
+
 "@tootallnate/quickjs-emscripten@^0.23.0":
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz#db4ecfd499a9765ab24002c3b696d02e6d32a12c"
@@ -7035,9 +7056,9 @@ thunky@^1.0.2:
   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==
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.9.0.tgz#92e2260629de77e864e0a66e61c4a6193cf9cc32"
+  integrity sha512-tTrUmUGWqy1BY1WwDYh4WiuHm23LiRTcE1Xq3WLO8HKFzde/d0bTF/hXWOa97zqGh0ndJHx/nysQaNC9Gcd16g==
 
 tinyrainbow@^1.2.0:
   version "1.2.0"
