INT-3347: Fix build failure due to @tinymce/miniature was missing in dependency (#592)

* INT-3347: Fix @tinymce/miniature as dev dependency breaking builds

* INT-3347: Remove @tinymce/miniature from the prod code

* INT-3347: Change changelog

Author: tiny-ben-tran

CHANGELOG.md

@@ -6,6 +6,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Fixed
+- Project build failure caused by a missing `@tinymce/miniature` dependency. #INT-3347
+
 ## 6.2.0 - 2025-05-29
 
 ### Changed

src/main/ts/Utils.ts

@@ -2,7 +2,6 @@ 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';
 
@@ -122,8 +121,4 @@ export const getTinymceOrError = (view: Window) => {
   return tinymce;
 };
 
-export const isDisabledOptionSupported = (view: Window) => {
-  const tinymce = getTinymceOrError(view);
-
-  return !TinyVer.isLessThan(tinymce, '7.6.0');
-};
+export const isDisabledOptionSupported = (editor: TinyMCEEditor) => editor.options && editor.options.isRegistered('disabled');

src/main/ts/components/Editor.tsx

@@ -225,7 +225,7 @@ export class Editor extends React.Component<IAllProps> {
         }
 
         if (this.props.disabled !== prevProps.disabled) {
-          if (isDisabledOptionSupported(this.view)) {
+          if (isDisabledOptionSupported(this.editor)) {
             this.editor.options.set('disabled', this.props.disabled);
           } else {
             setMode(this.editor, this.props.disabled ? 'readonly' : 'design');
@@ -455,10 +455,8 @@ export class Editor extends React.Component<IAllProps> {
       ...this.props.init as Omit<InitOptions, OmittedInitProps>,
       selector: undefined,
       target,
-      ...isDisabledOptionSupported(this.view)
-        ? { disabled: this.props.disabled, readonly: this.props.readonly }
-        : { readonly: this.props.disabled || this.props.readonly }
-      ,
+      disabled: this.props.disabled,
+      readonly: this.props.readonly,
       inline: this.inline,
       plugins: mergePlugins(this.props.init?.plugins, this.props.plugins),
       toolbar: this.props.toolbar ?? this.props.init?.toolbar,
@@ -482,6 +480,14 @@ export class Editor extends React.Component<IAllProps> {
         if (this.props.init && isFunction(this.props.init.setup)) {
           this.props.init.setup(editor);
         }
+
+        if (this.props.disabled) {
+          if (isDisabledOptionSupported(this.editor)) {
+            this.editor.options.set('disabled', this.props.disabled);
+          } else {
+            this.editor.mode.set('readonly');
+          }
+        }
       },
       init_instance_callback: (editor) => {
         // check for changes that happened since tinymce.init() was called

src/test/ts/browser/EditorDisabledTest.ts

@@ -74,4 +74,37 @@ describe('EditorDisabledTest', () => {
       });
     });
   });
+
+  context('with TinyMCE 5', () => {
+    Loader.withVersion('5', (render) => {
+      it('toggling disabled prop should update the editor\'s mode', async () => {
+        using ctx = await render({
+          disabled: true
+        });
+
+        Assertions.assertEq('mode is design', 'readonly', ctx.editor.mode.get());
+        await ctx.reRender({
+          disabled: false
+        });
+
+        await Waiter.pTryUntil('editor\'s state should be updated', () => {
+          Assertions.assertEq('mode is design', 'design', ctx.editor.mode.get());
+        });
+      });
+
+      it('toggling readonly prop should change 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('editor\'s mode should be updated', () => {
+          Assertions.assertEq('mode is design', 'design', ctx.editor.mode.get());
+        });
+      });
+    });
+  });
 });