From bc23fb27cbe1090ceb3b94b825b62a7b7cfae43e Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Fri, 2 May 2025 12:00:56 +0200 Subject: [PATCH 1/9] TINY-11907: add support for 'disabled' property --- package.json | 2 + .../src/main/ts/editor/editor.component.ts | 13 ++-- .../src/main/ts/utils/DisabledUtils.ts | 12 ++++ .../src/main/ts/utils/Utils.ts | 16 ++++- .../test/ts/browser/DisabledPropertyTest.ts | 67 +++++++++++++++++++ yarn.lock | 10 +++ 6 files changed, 111 insertions(+), 9 deletions(-) create mode 100644 tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts create mode 100644 tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts diff --git a/package.json b/package.json index a7070adc..82ec0b62 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,8 @@ "tinymce-5": "npm:tinymce@^5", "tinymce-6": "npm:tinymce@^6", "tinymce-7": "npm:tinymce@^7", + "tinymce-7.5.0": "npm:tinymce@7.5.0", + "tinymce-7.6.0": "npm:tinymce@7.6.0", "to-string-loader": "^1.1.5", "tslib": "^2.6.2", "typescript": "~5.5.4", diff --git a/tinymce-angular-component/src/main/ts/editor/editor.component.ts b/tinymce-angular-component/src/main/ts/editor/editor.component.ts index 4ed7572f..ac3328fb 100644 --- a/tinymce-angular-component/src/main/ts/editor/editor.component.ts +++ b/tinymce-angular-component/src/main/ts/editor/editor.component.ts @@ -18,7 +18,8 @@ import { import { FormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Subject, takeUntil } from 'rxjs'; import { getTinymce } from '../TinyMCE'; -import { listenTinyMCEEvent, bindHandlers, isTextarea, mergePlugins, uuid, noop, isNullOrUndefined } from '../utils/Utils'; +import { listenTinyMCEEvent, bindHandlers, isTextarea, mergePlugins, uuid, noop, isNullOrUndefined, setMode } from '../utils/Utils'; +import * as DisabledUtils from '../utils/DisabledUtils'; import { EventObj, Events } from './Events'; import { ScriptLoader } from '../utils/ScriptLoader'; import type { Editor as TinyMCEEditor, TinyMCE } from 'tinymce'; @@ -68,11 +69,11 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal public set disabled(val) { this._disabled = val; if (this._editor && this._editor.initialized) { - if (typeof this._editor.mode?.set === 'function') { - this._editor.mode.set(val ? 'readonly' : 'design'); - } else if ('setMode' in this._editor && typeof this._editor.setMode === 'function') { - this._editor.setMode(val ? 'readonly' : 'design'); + if (DisabledUtils.isDisabledOptionSupported()) { + this._editor.options.set('disabled', val ?? false); + return; } + setMode(this._editor, val ? 'readonly' : 'design'); } } @@ -176,7 +177,7 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal selector: undefined, target: this._element, inline: this.inline, - readonly: this.disabled, + ...( DisabledUtils.isDisabledOptionSupported() ? { disabled: this.disabled } : { readonly: this.disabled } ), license_key: this.licenseKey, plugins: mergePlugins((this.init && this.init.plugins) as string, this.plugins), toolbar: this.toolbar || (this.init && this.init.toolbar), diff --git a/tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts b/tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts new file mode 100644 index 00000000..7b5c3493 --- /dev/null +++ b/tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts @@ -0,0 +1,12 @@ +import { TinyVer } from '@tinymce/miniature'; +import { getTinymce } from '../TinyMCE'; +import { TinyMCE } from 'tinymce'; + +const isDisabledOptionSupported = () => { + const tiny: TinyMCE = getTinymce(); + return !TinyVer.isLessThan(tiny, '7.6.0'); +}; + +export { + isDisabledOptionSupported +}; diff --git a/tinymce-angular-component/src/main/ts/utils/Utils.ts b/tinymce-angular-component/src/main/ts/utils/Utils.ts index 8ee194e8..f36f299e 100644 --- a/tinymce-angular-component/src/main/ts/utils/Utils.ts +++ b/tinymce-angular-component/src/main/ts/utils/Utils.ts @@ -12,6 +12,7 @@ import { HasEventTargetAddRemove } from 'rxjs/internal/observable/fromEvent'; import { EditorComponent } from '../editor/editor.component'; import { validEvents, Events } from '../editor/Events'; +import { Editor } from 'tinymce'; // Caretaker note: `fromEvent` supports passing JQuery-style event targets, the editor has `on` and `off` methods which // will be invoked upon subscription and teardown. @@ -47,10 +48,10 @@ const getValidEvents = (ctx: EditorComponent): (keyof Events)[] => { }; const parseStringProperty = (property: string | string[] | undefined, defaultValue: (keyof Events)[]): string[] => { - if ( typeof property === 'string') { + if (typeof property === 'string') { return property.split(',').map((value) => value.trim()); } - if ( Array.isArray(property)) { + if (Array.isArray(property)) { return property; } return defaultValue; @@ -91,6 +92,14 @@ const isObserved = (o: Subject): boolean => // checking if a subject has observers. o.observed || o.observers?.length > 0; +const setMode = (editor: Editor, mode: 'readonly' | 'design') => { + if (typeof editor.mode?.set === 'function') { + editor.mode.set(mode); + } else if ('setMode' in editor && typeof editor.setMode === 'function') { + editor.setMode(mode); + } +}; + export { listenTinyMCEEvent, bindHandlers, @@ -99,5 +108,6 @@ export { normalizePluginArray, mergePlugins, noop, - isNullOrUndefined + isNullOrUndefined, + setMode }; diff --git a/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts b/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts new file mode 100644 index 00000000..c3a8be18 --- /dev/null +++ b/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts @@ -0,0 +1,67 @@ +import { Assertions } from '@ephox/agar'; +import '../alien/InitTestEnvironment'; + +import { EditorComponent } from '../../../main/ts/public_api'; +import { describe, it } from '@ephox/bedrock-client'; +import { eachVersionContext, editorHook } from '../alien/TestHooks'; +import { Editor } from 'tinymce'; + +describe('DisabledPropertyTest', () => { + const assertDesignMode = (editor: Editor) => Assertions.assertEq('TinyMCE should be in design mode', 'design', editor.mode.get()); + const assertReadonlyMode = (editor: Editor) => Assertions.assertEq('TinyMCE should be in readonly mode', 'readonly', editor.mode.get()); + const assertDisabledOption = (editor: Editor, expected: boolean) => + Assertions.assertEq(`TinyMCE should have disabled option set to ${expected}`, expected, editor.options.get('disabled')); + + eachVersionContext([ '7.5.0' ], () => { + const createFixture = editorHook(EditorComponent); + + it(`Component 'disabled' property is mapped to editor 'readonly' property`, async () => { + const { editor } = await createFixture({ disabled: true }); + assertReadonlyMode(editor); + }); + + it(`Toggling component's 'disabled' property is mapped to editor 'readonly' property`, async () => { + const fixture = await createFixture(); + const { editor } = fixture; + + assertDesignMode(editor); + + fixture.componentRef.setInput('disabled', true); + fixture.detectChanges(); + assertReadonlyMode(editor); + + fixture.componentRef.setInput('disabled', false); + fixture.detectChanges(); + assertDesignMode(editor); + }); + }); + + eachVersionContext([ '7.6.0' ], () => { + const createFixture = editorHook(EditorComponent); + + it(`Component 'disabled' property is mapped to editor 'disabled' property`, async () => { + const { editor } = await createFixture({ cloudChannel: '7.6.0', disabled: true }); + + Assertions.assertEq('TinyMCE should have disabled option set to true', true, editor.options.get('disabled')); + assertDesignMode(editor); + }); + + it(`Toggling component's 'disabled' property is mapped to editor 'disabled' property`, async () => { + const fixture = await createFixture(); + const { editor } = fixture; + + assertDesignMode(editor); + assertDisabledOption(editor, false); + + fixture.componentRef.setInput('disabled', true); + fixture.detectChanges(); + assertDesignMode(editor); + assertDisabledOption(editor, true); + + fixture.componentRef.setInput('disabled', false); + fixture.detectChanges(); + assertDesignMode(editor); + assertDisabledOption(editor, false); + }); + }); +}); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 348cecb0..a7fdb079 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13082,6 +13082,16 @@ tiny-invariant@^1.3.1, tiny-invariant@^1.3.3: resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.8.3.tgz#0025a4aaa4c24dc2a3e32e83dfda705d196fd802" integrity sha512-3fCHKAeqT+xNwBVESf6iDbDV0VNwZNmfrkx9c/6Gz5iB8piMfaO6s7FvoiTrj1hf1gVbfyLTnz1DooI6DhgINQ== +"tinymce-7.5.0@npm:tinymce@7.5.0": + version "7.5.0" + resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.5.0.tgz#56388d314399c288a100df4aaf468153f29477f1" + integrity sha512-A7iuQPIfeze5rO6bvnnPwP7TiWnPA9AGr8U/9ssLwrEG+FMYPzvLPt3RT8ktVn/wPSJkVBBSLCAZX2dAHb8YEA== + +"tinymce-7.6.0@npm:tinymce@7.6.0": + version "7.6.0" + resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.6.0.tgz#476069a3e98f46f3f6e7875ca878313d6b3345b9" + integrity sha512-kUrklnD7H8JbpSDEGRh51GKK6Mrf+pR9neSDzUHvXKV+2oRtMB7sqfAtEOnM0/WKdstwaX0qoNCZNo2H1Y0EFA== + "tinymce-7@npm:tinymce@^7": version "7.1.2" resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.1.2.tgz#cb40e527dc03d6a0547a23c91231a946e50dae03" From b563d89307f5680b04a034829d7368967f500b46 Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Fri, 2 May 2025 15:06:22 +0200 Subject: [PATCH 2/9] TINY-11907: add dependency --- tinymce-angular-component/package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/tinymce-angular-component/package.json b/tinymce-angular-component/package.json index 1f859aed..3e353448 100644 --- a/tinymce-angular-component/package.json +++ b/tinymce-angular-component/package.json @@ -6,6 +6,9 @@ "author": "Ephox Corporation DBA Tiny Technologies, Inc.", "license": "MIT", "private": false, + "dependencies": { + "@tinymce/miniature": "^6.0.0" + }, "peerDependencies": { "@angular/core": ">=16.0.0", "@angular/common": ">=16.0.0", From 9e2f049faf9a3e3b30fe397462b49e0ac105f1ef Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Mon, 5 May 2025 09:51:34 +0200 Subject: [PATCH 3/9] TINY-11907: add 'readonly' property --- stories/Editor.stories.ts | 15 ++++++ stories/readonly/Readonly.component.html | 7 +++ stories/readonly/Readonly.component.ts | 13 +++++ .../src/main/ts/editor/editor.component.ts | 18 ++++++- .../test/ts/browser/DisabledPropertyTest.ts | 48 +++++++++++++++++-- 5 files changed, 96 insertions(+), 5 deletions(-) create mode 100644 stories/readonly/Readonly.component.html create mode 100644 stories/readonly/Readonly.component.ts diff --git a/stories/Editor.stories.ts b/stories/Editor.stories.ts index 39146eb4..821d26f6 100644 --- a/stories/Editor.stories.ts +++ b/stories/Editor.stories.ts @@ -15,6 +15,7 @@ import { MatTabsModule } from '@angular/material/tabs'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { ContainerComponent, ContentProjectionComponent } from './contentprojection/ContentProjection.component'; import { BindingComponent } from './data-binding/DataBinding.component'; +import { ReadonlyComponent } from './readonly/Readonly.component'; const meta: Meta = { component: EditorComponent, @@ -137,6 +138,20 @@ export const DisablingStory: StoryObj = { } }; +export const ReadonlyStory: StoryObj = { + name: 'Readonly', + render: () => ({ + moduleMetadata: { + imports: [ ReactiveFormsModule, FormsModule ], + declarations: [ ReadonlyComponent ], + }, + template: `` + }), + parameters: { + notes: 'Example of toggling readonly state in the editor component' + } +}; + export const ViewQueryStory: StoryObj = { name: 'View Query', render: () => ({ diff --git a/stories/readonly/Readonly.component.html b/stories/readonly/Readonly.component.html new file mode 100644 index 00000000..f4aea026 --- /dev/null +++ b/stories/readonly/Readonly.component.html @@ -0,0 +1,7 @@ + + \ No newline at end of file diff --git a/stories/readonly/Readonly.component.ts b/stories/readonly/Readonly.component.ts new file mode 100644 index 00000000..a53970eb --- /dev/null +++ b/stories/readonly/Readonly.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { apiKey, sampleContent } from '../Settings'; + +@Component({ + selector: 'readonly', + templateUrl: './Readonly.component.html', +}) +export class ReadonlyComponent { + public isReadonly = false; + public apiKey = apiKey; + public initialValue = sampleContent; + public toggleReadonly = () => (this.isReadonly = !this.isReadonly); +} diff --git a/tinymce-angular-component/src/main/ts/editor/editor.component.ts b/tinymce-angular-component/src/main/ts/editor/editor.component.ts index ac3328fb..dc508e58 100644 --- a/tinymce-angular-component/src/main/ts/editor/editor.component.ts +++ b/tinymce-angular-component/src/main/ts/editor/editor.component.ts @@ -65,6 +65,18 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal @Input() public modelEvents = 'change input undo redo'; @Input() public allowedEvents?: string | string[]; @Input() public ignoreEvents?: string | string[]; + @Input() + public set readonly(val) { + this._readonly = val; + if (this._editor && this._editor.initialized) { + setMode(this._editor, val ? 'readonly' : 'design'); + } + } + + public get readonly() { + return this._readonly; + } + @Input() public set disabled(val) { this._disabled = val; @@ -90,6 +102,7 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal private _elementRef: ElementRef; private _element?: HTMLElement; private _disabled?: boolean; + private _readonly?: boolean; private _editor?: TinyMCEEditor; private onTouchedCallback = noop; @@ -177,7 +190,10 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal selector: undefined, target: this._element, inline: this.inline, - ...( DisabledUtils.isDisabledOptionSupported() ? { disabled: this.disabled } : { readonly: this.disabled } ), + ...( DisabledUtils.isDisabledOptionSupported() + ? { disabled: this.disabled, readonly: this.readonly } + : { readonly: this.disabled || this.readonly } + ), license_key: this.licenseKey, plugins: mergePlugins((this.init && this.init.plugins) as string, this.plugins), toolbar: this.toolbar || (this.init && this.init.toolbar), diff --git a/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts b/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts index c3a8be18..715c15ff 100644 --- a/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts +++ b/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts @@ -7,8 +7,14 @@ import { eachVersionContext, editorHook } from '../alien/TestHooks'; import { Editor } from 'tinymce'; describe('DisabledPropertyTest', () => { - const assertDesignMode = (editor: Editor) => Assertions.assertEq('TinyMCE should be in design mode', 'design', editor.mode.get()); - const assertReadonlyMode = (editor: Editor) => Assertions.assertEq('TinyMCE should be in readonly mode', 'readonly', editor.mode.get()); + const getMode = (editor: Editor) => { + if (typeof editor.mode?.get === 'function') { + return editor.mode.get(); + } + return editor.readonly ? 'readonly' : 'design'; + }; + const assertDesignMode = (editor: Editor) => Assertions.assertEq('TinyMCE should be in design mode', 'design', getMode(editor)); + const assertReadonlyMode = (editor: Editor) => Assertions.assertEq('TinyMCE should be in readonly mode', 'readonly', getMode(editor)); const assertDisabledOption = (editor: Editor, expected: boolean) => Assertions.assertEq(`TinyMCE should have disabled option set to ${expected}`, expected, editor.options.get('disabled')); @@ -34,13 +40,23 @@ describe('DisabledPropertyTest', () => { fixture.detectChanges(); assertDesignMode(editor); }); + + it(`[disabled]=true [readonly]=false triggers readonly mode`, async () => { + const { editor } = await createFixture({ disabled: true, readonly: false }); + assertReadonlyMode(editor); + }); + + it(`[disabled]=false [readonly]=true triggers readonly mode`, async () => { + const { editor } = await createFixture({ disabled: false, readonly: true }); + assertReadonlyMode(editor); + }); }); eachVersionContext([ '7.6.0' ], () => { const createFixture = editorHook(EditorComponent); it(`Component 'disabled' property is mapped to editor 'disabled' property`, async () => { - const { editor } = await createFixture({ cloudChannel: '7.6.0', disabled: true }); + const { editor } = await createFixture({ disabled: true }); Assertions.assertEq('TinyMCE should have disabled option set to true', true, editor.options.get('disabled')); assertDesignMode(editor); @@ -64,4 +80,28 @@ describe('DisabledPropertyTest', () => { assertDisabledOption(editor, false); }); }); -}); \ No newline at end of file + + eachVersionContext([ '4', '5', '6', '7' ], () => { + const createFixture = editorHook(EditorComponent); + + it(`Setting the 'readonly' property causing readonly mode`, async () => { + const { editor } = await createFixture({ readonly: true }); + assertReadonlyMode(editor); + }); + + it(`Toggling component's 'readonly' property is mapped to editor 'readonly' mode`, async () => { + const fixture = await createFixture(); + const { editor } = fixture; + + assertDesignMode(editor); + + fixture.componentRef.setInput('readonly', true); + fixture.detectChanges(); + assertReadonlyMode(editor); + + fixture.componentRef.setInput('readonly', false); + fixture.detectChanges(); + assertDesignMode(editor); + }); + }); +}); From d5a635779b9ddf8237277b2b184ebb92bf7aaba6 Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Mon, 5 May 2025 11:32:58 +0200 Subject: [PATCH 4/9] TINY-11907: add changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ba844720..a3318bd9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,12 +6,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## Unreleased +### Added +- Added 'readonly' property. #TINY-11907 + ### Fixed - Updated dependencies. #INT-3324 ### Changed - Moved tinymce dependency to be a optional peer dependency. #INT-3324 - Updated tinymce dev dependency to version ^7 from 5.10.7 so now all internal tinymce types point to version 7. #INT-3324 +- 'disabled' property is now mapped to editor's 'disabled' option if Tiny >= 7.6.0 is used. #TINY-11907 ## 8.0.1 - 2024-07-12 From 3a76143973ccad899edfffe70063c9d22dc91331 Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Mon, 5 May 2025 12:53:58 +0200 Subject: [PATCH 5/9] TINY-11907: cleanup tiny versions --- package.json | 1 - .../src/test/ts/browser/DisabledPropertyTest.ts | 2 +- yarn.lock | 11 +++-------- 3 files changed, 4 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 82ec0b62..92d88979 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,6 @@ "tinymce-6": "npm:tinymce@^6", "tinymce-7": "npm:tinymce@^7", "tinymce-7.5.0": "npm:tinymce@7.5.0", - "tinymce-7.6.0": "npm:tinymce@7.6.0", "to-string-loader": "^1.1.5", "tslib": "^2.6.2", "typescript": "~5.5.4", diff --git a/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts b/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts index 715c15ff..bf5f6e76 100644 --- a/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts +++ b/tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts @@ -52,7 +52,7 @@ describe('DisabledPropertyTest', () => { }); }); - eachVersionContext([ '7.6.0' ], () => { + eachVersionContext([ '7' ], () => { const createFixture = editorHook(EditorComponent); it(`Component 'disabled' property is mapped to editor 'disabled' property`, async () => { diff --git a/yarn.lock b/yarn.lock index a7fdb079..91549f65 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13087,15 +13087,10 @@ tiny-invariant@^1.3.1, tiny-invariant@^1.3.3: resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.5.0.tgz#56388d314399c288a100df4aaf468153f29477f1" integrity sha512-A7iuQPIfeze5rO6bvnnPwP7TiWnPA9AGr8U/9ssLwrEG+FMYPzvLPt3RT8ktVn/wPSJkVBBSLCAZX2dAHb8YEA== -"tinymce-7.6.0@npm:tinymce@7.6.0": - version "7.6.0" - resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.6.0.tgz#476069a3e98f46f3f6e7875ca878313d6b3345b9" - integrity sha512-kUrklnD7H8JbpSDEGRh51GKK6Mrf+pR9neSDzUHvXKV+2oRtMB7sqfAtEOnM0/WKdstwaX0qoNCZNo2H1Y0EFA== - "tinymce-7@npm:tinymce@^7": - version "7.1.2" - resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.1.2.tgz#cb40e527dc03d6a0547a23c91231a946e50dae03" - integrity sha512-I/M5WRyEJjwIhyIv6FhkvZS1mWNbb0sIEvDkP8akBnuV1X78mkNhi6Kz9FBBbHzy61U3pmXgzyCSaDZfdQbCSg== + version "7.8.0" + resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.8.0.tgz#d57a597aecdc2108f2dd68fe74c6099c0a0ef66f" + integrity sha512-MUER5MWV9mkOB4expgbWknh/C5ZJvOXQlMVSx4tJxTuYtcUCDB6bMZ34fWNOIc8LvrnXmGHGj0eGQuxjQyRgrA== tinymce@^7: version "7.2.1" From e134a6d7adb773c31ed05d17a50561f6a1d27e39 Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Fri, 9 May 2025 08:53:46 +0200 Subject: [PATCH 6/9] TINY-11907: apply codereview comment --- .../src/main/ts/editor/editor.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tinymce-angular-component/src/main/ts/editor/editor.component.ts b/tinymce-angular-component/src/main/ts/editor/editor.component.ts index dc508e58..538e05da 100644 --- a/tinymce-angular-component/src/main/ts/editor/editor.component.ts +++ b/tinymce-angular-component/src/main/ts/editor/editor.component.ts @@ -83,9 +83,9 @@ export class EditorComponent extends Events implements AfterViewInit, ControlVal if (this._editor && this._editor.initialized) { if (DisabledUtils.isDisabledOptionSupported()) { this._editor.options.set('disabled', val ?? false); - return; + } else { + setMode(this._editor, val ? 'readonly' : 'design'); } - setMode(this._editor, val ? 'readonly' : 'design'); } } From f181d5e4e09ed70d4b80916d906128f568ad324f Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Tue, 13 May 2025 15:42:54 +0200 Subject: [PATCH 7/9] TINY-11907: remove dependency --- tinymce-angular-component/package.json | 3 --- tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts | 4 ++-- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/tinymce-angular-component/package.json b/tinymce-angular-component/package.json index 3e353448..1f859aed 100644 --- a/tinymce-angular-component/package.json +++ b/tinymce-angular-component/package.json @@ -6,9 +6,6 @@ "author": "Ephox Corporation DBA Tiny Technologies, Inc.", "license": "MIT", "private": false, - "dependencies": { - "@tinymce/miniature": "^6.0.0" - }, "peerDependencies": { "@angular/core": ">=16.0.0", "@angular/common": ">=16.0.0", diff --git a/tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts b/tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts index 7b5c3493..93b6a489 100644 --- a/tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts +++ b/tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts @@ -1,10 +1,10 @@ -import { TinyVer } from '@tinymce/miniature'; import { getTinymce } from '../TinyMCE'; import { TinyMCE } from 'tinymce'; const isDisabledOptionSupported = () => { const tiny: TinyMCE = getTinymce(); - return !TinyVer.isLessThan(tiny, '7.6.0'); + // Disabled option is supported since Tiny 7.6.0 + return Number(tiny.majorVersion) >= 7 && Number(tiny.minorVersion) >= 6; }; export { From d9a0f5b173b905f76d77c552a638618807f46f97 Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Wed, 14 May 2025 09:07:02 +0200 Subject: [PATCH 8/9] TINY-11907: apply codereview comment --- CHANGELOG.md | 2 +- tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a3318bd9..c5ba703c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,7 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed - Moved tinymce dependency to be a optional peer dependency. #INT-3324 - Updated tinymce dev dependency to version ^7 from 5.10.7 so now all internal tinymce types point to version 7. #INT-3324 -- 'disabled' property is now mapped to editor's 'disabled' option if Tiny >= 7.6.0 is used. #TINY-11907 +- The 'disabled' property is now mapped to editor's 'disabled' option if Tiny >= 7.6.0 is used. #TINY-11907 ## 8.0.1 - 2024-07-12 diff --git a/tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts b/tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts index 93b6a489..43173f64 100644 --- a/tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts +++ b/tinymce-angular-component/src/main/ts/utils/DisabledUtils.ts @@ -4,7 +4,7 @@ import { TinyMCE } from 'tinymce'; const isDisabledOptionSupported = () => { const tiny: TinyMCE = getTinymce(); // Disabled option is supported since Tiny 7.6.0 - return Number(tiny.majorVersion) >= 7 && Number(tiny.minorVersion) >= 6; + return Number(tiny.majorVersion) > 7 || (Number(tiny.majorVersion) === 7 && Number(tiny.minorVersion) >= 6); }; export { From 0c7786929d1692b96767a6bab96c1f805e87180b Mon Sep 17 00:00:00 2001 From: michalnieruchalski-tiugo Date: Wed, 14 May 2025 11:46:25 +0200 Subject: [PATCH 9/9] retrigger checks