TINY-11906: Change to support previous versions of TinyMCE

Author: tiny-ben-tran

CHANGELOG.md

@@ -7,10 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## Unreleased
 
 ### Changed
-- `disabled` property is now mapped to the TinyMCE `disabled` option.
+- The `disabled` property now toggles the `disabled` option. #TINY-11906
 
 ### Added
-- Added `readonly` property that maps to the TinyMCE `readonly` option.
+- Added `readonly` property that can be used to toggle the `readonly` mode. #TINY-11906
 
 ## 6.1.0 - 2025-03-31
 

README.md

@@ -10,10 +10,6 @@ This package is a thin wrapper around [TinyMCE](https://github.com/tinymce/tinym
 * For our quick demos, check out the TinyMCE React [Storybook](https://tinymce.github.io/tinymce-react/).
 
 
-### Support
-
-Version 7.0 is intended to support TinyMCE version 7.6 and above.
-
 ### Issues
 
 Have you found an issue with tinymce-react or do you have a feature request? Open up an [issue](https://github.com/tinymce/tinymce-react/issues) and let us know or submit a [pull request](https://github.com/tinymce/tinymce-react/pulls). *Note: For issues concerning TinyMCE please visit the [TinyMCE repository](https://github.com/tinymce/tinymce).*

package.json

@@ -68,14 +68,15 @@
     "react-dom": "^19.0.0",
     "rimraf": "^6.0.1",
     "storybook": "^8.6.4",
-    "tinymce": "^7.2.1",
+    "tinymce": "^7",
     "tinymce-4": "npm:tinymce@^4",
     "tinymce-5": "npm:tinymce@^5",
     "tinymce-6": "npm:tinymce@^6",
     "tinymce-7": "npm:tinymce@^7",
+    "tinymce-7.5": "npm:tinymce@7.5",
     "typescript": "~5.8.2",
     "vite": "^6.2.1"
   },
-  "version": "7.0.0-rc",
+  "version": "6.2.0-rc",
   "name": "@tinymce/tinymce-react"
 }

src/main/ts/Utils.ts

@@ -1,6 +1,8 @@
 import { eventPropTypes, IEventPropTypes } from './components/EditorPropTypes';
 import { IAllProps } from './components/Editor';
 import type { Editor as TinyMCEEditor, EditorEvent } from 'tinymce';
+import { getTinymce } from './TinyMCE';
+import { TinyVer } from '@tinymce/miniature';
 
 export const isFunction = (x: unknown): x is Function => typeof x === 'function';
 
@@ -109,4 +111,19 @@ export const setMode = (editor: TinyMCEEditor | undefined, mode: 'readonly' | 'd
       (editor as any).setMode(mode);
     }
   }
+};
+
+export const getTinymceOrError = (view: Window) => {
+  const tinymce = getTinymce(view);
+  if (!tinymce) {
+    throw new Error('tinymce should have been loaded into global scope');
+  }
+
+  return tinymce;
+};
+
+export const isDisabledOptionSupported = (view: Window) => {
+  const tinymce = getTinymceOrError(view);
+
+  return !TinyVer.isLessThan(tinymce, '7.6.0');
 };

src/main/ts/components/Editor.tsx

@@ -2,9 +2,12 @@ import * as React from 'react';
 import type { Bookmark, EditorEvent, TinyMCE, Editor as TinyMCEEditor } from 'tinymce';
 import { IEvents } from '../Events';
 import { ScriptItem, ScriptLoader } from '../ScriptLoader2';
-import { getTinymce } from '../TinyMCE';
-import { configHandlers, isBeforeInputEventAvailable, isFunction, isInDoc, isTextareaOrInput, mergePlugins, setMode, uuid } from '../Utils';
+import { configHandlers, isBeforeInputEventAvailable,
+  isFunction, isInDoc, isTextareaOrInput, mergePlugins,
+  setMode, uuid, isDisabledOptionSupported,
+  getTinymceOrError } from '../Utils';
 import { EditorPropTypes, IEditorPropTypes } from './EditorPropTypes';
+import { getTinymce } from '../TinyMCE';
 
 const changeEvents = 'change keyup compositionend setcontent CommentChange';
 
@@ -14,7 +17,7 @@ interface DoNotUse<T extends string> {
   __brand: T;
 }
 
-type OmittedInitProps = 'selector' | 'target' | 'readonly' | 'license_key';
+type OmittedInitProps = 'selector' | 'target' | 'readonly' | 'disabled' | 'license_key';
 
 type EditorOptions = Parameters<TinyMCE['init']>[0];
 
@@ -222,7 +225,11 @@ export class Editor extends React.Component<IAllProps> {
         }
 
         if (this.props.disabled !== prevProps.disabled) {
-          this.editor.options.set('disabled', this.props.disabled);
+          if (isDisabledOptionSupported(this.view)) {
+            this.editor.options.set('disabled', this.props.disabled);
+          } else {
+            setMode(this.editor, this.props.disabled ? 'readonly' : 'design');
+          }
         }
       }
     }
@@ -442,16 +449,16 @@ export class Editor extends React.Component<IAllProps> {
       return;
     }
 
-    const tinymce = getTinymce(this.view);
-    if (!tinymce) {
-      throw new Error('tinymce should have been loaded into global scope');
-    }
+    const tinymce = getTinymceOrError(this.view);
 
     const finalInit: EditorOptions = {
       ...this.props.init as Omit<InitOptions, OmittedInitProps>,
       selector: undefined,
       target,
-      disabled: this.props.disabled,
+      ...isDisabledOptionSupported(this.view)
+        ? { disabled: this.props.disabled, readonly: this.props.readonly }
+        : { readonly: this.props.disabled || this.props.readonly }
+      ,
       inline: this.inline,
       plugins: mergePlugins(this.props.init?.plugins, this.props.plugins),
       toolbar: this.props.toolbar ?? this.props.init?.toolbar,
@@ -488,8 +495,7 @@ export class Editor extends React.Component<IAllProps> {
           editor.undoManager.add();
           editor.setDirty(false);
         }
-        const readonly = this.props.readonly ?? false;
-        setMode(this.editor, readonly ? 'readonly' : 'design');
+
         // ensure existing init_instance_callback is called
         if (this.props.init && isFunction(this.props.init.init_instance_callback)) {
           this.props.init.init_instance_callback(editor);

src/test/ts/browser/EditorDisabledTest.ts

@@ -0,0 +1,81 @@
+import { context, describe, it } from '@ephox/bedrock-client';
+import * as Loader from '../alien/Loader';
+import { Assertions, Waiter } from '@ephox/agar';
+
+describe('EditorDisabledTest', () => {
+
+  context('with TinyMCE before 7.6', () => {
+    ([ '7.5' ] as Array<any>).forEach((version) =>
+      Loader.withVersion(version, (render) => {
+        it('updating disabled prop should toggle the editor\'s mode', async () => {
+          using ctx = await render({
+            disabled: true
+          });
+
+          Assertions.assertEq('mode is readonly', 'readonly', ctx.editor.mode.get());
+
+          await ctx.reRender({
+            disabled: false
+          });
+          await Waiter.pTryUntil('mode is changed to design', () => {
+            Assertions.assertEq('mode is design', 'design', ctx.editor.mode.get());
+          });
+        });
+
+        it('updating readonly prop should toggle the editor\'s mode', async () => {
+          using ctx = await render({
+            readonly: true
+          });
+          Assertions.assertEq('mode is readonly', 'readonly', ctx.editor.mode.get());
+
+          await ctx.reRender({
+            readonly: false
+          });
+          await Waiter.pTryUntil('mode is changed to design', () => {
+            Assertions.assertEq('mode is design', 'design', ctx.editor.mode.get());
+          });
+        });
+      })
+    );
+  });
+
+  context('with TinyMCE 7.6 and above', () => {
+    ([ '7' ] as Array<any>).forEach((version) =>
+      Loader.withVersion(version, (render) => {
+        it('updating disabled prop should only change the editor\'s state', async () => {
+          using ctx = await render({
+            disabled: true
+          });
+
+          Assertions.assertEq('mode is design', 'design', ctx.editor.mode.get());
+          Assertions.assertEq('editor is disabled', true, ctx.editor.options.get('disabled'));
+
+          await ctx.reRender({
+            disabled: false
+          });
+
+          await Waiter.pTryUntil('editor\'s state should be updated', () => {
+            Assertions.assertEq('mode is design', 'design', ctx.editor.mode.get());
+            Assertions.assertEq('editor is not disabled', false, ctx.editor.options.get('disabled'));
+          });
+        });
+
+        it('updating readonly prop should only change the editor\'s mode', async () => {
+          using ctx = await render({
+            readonly: true
+          });
+          Assertions.assertEq('mode is readonly', 'readonly', ctx.editor.mode.get());
+          Assertions.assertEq('editor is not disabled', false, ctx.editor.options.get('disabled'));
+
+          await ctx.reRender({
+            readonly: false
+          });
+          await Waiter.pTryUntil('editor\'s mode should be updated', () => {
+            Assertions.assertEq('mode is design', 'design', ctx.editor.mode.get());
+            Assertions.assertEq('editor is not disabled', false, ctx.editor.options.get('disabled'));
+          });
+        });
+      })
+    );
+  });
+});

src/test/ts/browser/EditorInitTest.ts

@@ -69,29 +69,6 @@ describe('EditorInitTest', () => {
         TinyAssertions.assertContent(ctx.editor, '<p>New Value</p>');
       });
 
-      it('Disabled prop should disable editor', async function () {
-        using ctx = await render();
-        const editor = ctx.editor;
-        const minorVersion = parseInt(editor.editorManager.minorVersion, 10);
-        // disabled option was re-introduced in tinymce 7.6
-        if (version !== '7' || minorVersion < 6) {
-          this.skip();
-        }
-
-        Assertions.assertEq('Should be enabled', false, editor.options.get('disabled'));
-        await ctx.reRender({ ...defaultProps, disabled: true });
-        Assertions.assertEq('Should be disabled', true,
-          editor.options.get('disabled'));
-      });
-
-      it('Readonly prop should set editor to readonly mode', async () => {
-        using ctx = await render();
-        Assertions.assertEq('Should be design mode', true, '4' === version ? !ctx.editor.readonly : ctx.editor.mode.get() === 'design');
-        await ctx.reRender({ ...defaultProps, disabled: true });
-        Assertions.assertEq('Should be readonly mode', true, '4' === version ? ctx.editor.readonly : ctx.editor.mode.get() === 'readonly');
-
-      });
-
       it('Using an overriden props will cause a TS error', async () => {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         using _ = await render({

yarn.lock

@@ -8705,12 +8705,17 @@ tiny-invariant@^1.3.1, tiny-invariant@^1.3.3:
   resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.8.4.tgz#53e1313ebfe5524b24c0fa45937d51fda058632d"
   integrity sha512-okoJyxuPv1gzASxQDNgQbnUXOdAIyoOSXcXcZZu7tiW0PSKEdf3SdASxPBupRj+64/E3elHwVRnzSdo82Emqbg==
 
+"tinymce-7.5@npm:tinymce@7.5":
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.5.1.tgz#4c207ab930d3a073bf851ddd3a8aa44d8d94d7bd"
+  integrity sha512-GRXJUB0BEIOUHUEC+q9IjsgWGIAQ4Tn5t5hfpB/YR7No3oPgKHG03v1d3nbov9aqdyVW7Be+UD4I3ZerQG30VQ==
+
 "tinymce-7@npm:tinymce@^7":
-  version "7.2.1"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.2.1.tgz#9b4f6b5a0fa647e2953c174ac69aa47483683332"
-  integrity sha512-ADd1cvdIuq6NWyii0ZOZRuu+9sHIdQfcRNWBcBps2K8vy7OjlRkX6iw7zz1WlL9kY4z4L1DvIP+xOrVX/46aHA==
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.8.0.tgz#d57a597aecdc2108f2dd68fe74c6099c0a0ef66f"
+  integrity sha512-MUER5MWV9mkOB4expgbWknh/C5ZJvOXQlMVSx4tJxTuYtcUCDB6bMZ34fWNOIc8LvrnXmGHGj0eGQuxjQyRgrA==
 
-tinymce@^7.2.1:
+tinymce@^7:
   version "7.8.0"
   resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.8.0.tgz#d57a597aecdc2108f2dd68fe74c6099c0a0ef66f"
   integrity sha512-MUER5MWV9mkOB4expgbWknh/C5ZJvOXQlMVSx4tJxTuYtcUCDB6bMZ34fWNOIc8LvrnXmGHGj0eGQuxjQyRgrA==