diff --git a/CHANGELOG.md b/CHANGELOG.md index 72cc9539..f67b545b 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/main/ts/Utils.ts b/src/main/ts/Utils.ts index 651ed288..dbba0d22 100644 --- a/src/main/ts/Utils.ts +++ b/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'); -}; \ No newline at end of file +export const isDisabledOptionSupported = (editor: TinyMCEEditor) => editor.options && editor.options.isRegistered('disabled'); \ No newline at end of file diff --git a/src/main/ts/components/Editor.tsx b/src/main/ts/components/Editor.tsx index 8c763b78..a31a2b60 100644 --- a/src/main/ts/components/Editor.tsx +++ b/src/main/ts/components/Editor.tsx @@ -225,7 +225,7 @@ export class Editor extends React.Component { } 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 { ...this.props.init as Omit, 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 { 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 diff --git a/src/test/ts/browser/EditorDisabledTest.ts b/src/test/ts/browser/EditorDisabledTest.ts index ecc9d284..fe88ef05 100644 --- a/src/test/ts/browser/EditorDisabledTest.ts +++ b/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()); + }); + }); + }); + }); }); \ No newline at end of file