From 2f237314166d35975dc2813008d75e092d7ccb8f Mon Sep 17 00:00:00 2001 From: abhinavgandham Date: Fri, 2 May 2025 15:23:48 +1000 Subject: [PATCH 1/9] TINY-11911: Added new option and increased minor version. --- package.json | 2 +- src/main/ts/component/Editor.ts | 29 ++++++++++++++++++++++++++++- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 49cc400..d06e5cc 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,6 @@ "webpack": "^5.75.0" }, "dependencies": {}, - "version": "2.1.1-rc", + "version": "2.2.1-rc", "name": "@tinymce/tinymce-webcomponent" } diff --git a/src/main/ts/component/Editor.ts b/src/main/ts/component/Editor.ts index 66dfeac..f7fd104 100644 --- a/src/main/ts/component/Editor.ts +++ b/src/main/ts/component/Editor.ts @@ -74,6 +74,7 @@ const configAttributes: Record unknown> = { icons: parseString, // name of icon pack eg. 'material' icons_url: parseString, // url to icon pack js promotion: parseBooleanOrString, // boolean + disabled: parseBooleanOrString, // boolean }; const configRenames: Record = { @@ -108,7 +109,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() { @@ -355,6 +356,32 @@ class TinyMceEditor extends HTMLElement { } } + get disabled(): boolean { + if (this._editor) { + return this._editor.mode.get() === 'disabled'; + } else { + return this.hasAttribute('disabled'); + } + } + + set disabled(value: boolean) { + if (value) { + if (this._editor && this._editor.mode.get() !== 'disabled') { + this._editor.mode.set('disabled'); + } + if (!this.hasAttribute('disabled')) { + this.setAttribute('disabled', ''); + } + } else { + if (this._editor && this._editor.mode.get() === 'disabled') { + this._editor.mode.set('design'); + } + if (this.hasAttribute('disabled')) { + this.removeAttribute('disabled'); + } + } + } + get placeholder(): string | null { return this.getAttribute('placeholder'); } From 01ef6010436adbb56210150ba94a8b5ca477d9f9 Mon Sep 17 00:00:00 2001 From: Ben Tran Date: Mon, 5 May 2025 15:43:06 +0930 Subject: [PATCH 2/9] TINY-11911: Handle updates of the disabled attribute --- src/demo/html/disabled.html | 41 +++++++++++++++++++++++++++++++++ src/main/ts/component/Editor.ts | 22 ++++++++++-------- 2 files changed, 53 insertions(+), 10 deletions(-) create mode 100644 src/demo/html/disabled.html diff --git a/src/demo/html/disabled.html b/src/demo/html/disabled.html new file mode 100644 index 0000000..99ca128 --- /dev/null +++ b/src/demo/html/disabled.html @@ -0,0 +1,41 @@ + + + + + TinyMCE WebComponent Demo: Disabled and Readonly + + + + + +

TinyMCE WebComponent Demo: Disabled and Readonly

+
+ + + +
+ + + + diff --git a/src/main/ts/component/Editor.ts b/src/main/ts/component/Editor.ts index f7fd104..c7b93c4 100644 --- a/src/main/ts/component/Editor.ts +++ b/src/main/ts/component/Editor.ts @@ -74,7 +74,6 @@ const configAttributes: Record unknown> = { icons: parseString, // name of icon pack eg. 'material' icons_url: parseString, // url to icon pack js promotion: parseBooleanOrString, // boolean - disabled: parseBooleanOrString, // boolean }; const configRenames: Record = { @@ -202,6 +201,9 @@ class TinyMceEditor extends HTMLElement { if (this.readonly) { config.readonly = true; } + if (this.disabled) { + config.disabled = true; + } if (this.autofocus) { config.auto_focus = true; } @@ -294,6 +296,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') { @@ -357,25 +361,23 @@ class TinyMceEditor extends HTMLElement { } get disabled(): boolean { - if (this._editor) { - return this._editor.mode.get() === 'disabled'; - } else { - return this.hasAttribute('disabled'); - } + return this._editor ? this._editor.options.get('disabled') : this.hasAttribute('disabled'); } set disabled(value: boolean) { if (value) { - if (this._editor && this._editor.mode.get() !== 'disabled') { - this._editor.mode.set('disabled'); + if (this._editor && this._editor.options.get('disabled') === false) { + this._editor.options.set('disabled', value); } + if (!this.hasAttribute('disabled')) { this.setAttribute('disabled', ''); } } else { - if (this._editor && this._editor.mode.get() === 'disabled') { - this._editor.mode.set('design'); + if (this._editor && this._editor.options.get('disabled') === true) { + this._editor.options.set('disabled', false); } + if (this.hasAttribute('disabled')) { this.removeAttribute('disabled'); } From 63a3f1267aacdbe1af59923ec2ce21def628951d Mon Sep 17 00:00:00 2001 From: abhinavgandham Date: Tue, 13 May 2025 17:51:00 +1000 Subject: [PATCH 3/9] TINY-11911: Added version checking for disabled option in the disabled demo. --- src/demo/html/disabled.html | 73 ++++++++++++++++++++++--------------- 1 file changed, 44 insertions(+), 29 deletions(-) diff --git a/src/demo/html/disabled.html b/src/demo/html/disabled.html index 99ca128..d55409f 100644 --- a/src/demo/html/disabled.html +++ b/src/demo/html/disabled.html @@ -1,41 +1,56 @@ - - - TinyMCE WebComponent Demo: Disabled and Readonly - - - - -

TinyMCE WebComponent Demo: Disabled and Readonly

-
- - - -
+ } + +

TinyMCE WebComponent Demo: Disabled and Readonly

+
+ + + +
- - + + + \ No newline at end of file From 0fe72cd2ce765d81e8dfea32e8fe2c1a9390e3de Mon Sep 17 00:00:00 2001 From: abhinavgandham Date: Wed, 14 May 2025 12:01:05 +1000 Subject: [PATCH 4/9] TINY-11911: Implemented the version check functionality in Editor.ts for disabled mode. --- src/demo/html/disabled.html | 25 +++-------- src/main/ts/component/Editor.ts | 79 +++++++++++++++++++++------------ 2 files changed, 57 insertions(+), 47 deletions(-) diff --git a/src/demo/html/disabled.html b/src/demo/html/disabled.html index d55409f..d6d3f3a 100644 --- a/src/demo/html/disabled.html +++ b/src/demo/html/disabled.html @@ -9,28 +9,15 @@

TinyMCE WebComponent Demo: Disabled and Readonly

- +

Readonly mode

- + +

Disabled state

+ +
diff --git a/src/main/ts/component/Editor.ts b/src/main/ts/component/Editor.ts index 52014f4..5ae2980 100644 --- a/src/main/ts/component/Editor.ts +++ b/src/main/ts/component/Editor.ts @@ -80,9 +80,7 @@ const configAttributes: Record unknown> = { const configRenames: Record = {}; // Function that checks if the disabled option is supported with the version used -const isDisabledOptionSupported = (tinymce: TinyMCE): boolean => { - return (!TinyVer.isLessThan(tinymce, '7.6.0')) -}; +const isDisabledOptionSupported = (tinymce: TinyMCE): boolean => !TinyVer.isLessThan(tinymce, '7.6.0'); class TinyMceEditor extends HTMLElement { private _status: Status; @@ -250,24 +248,26 @@ 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; - editor.on("init", (_e: unknown) => { - const tinymce = this._getTinymce(); - const isDisableSupported = isDisabledOptionSupported(tinymce); - if (isDisableSupported && this.hasAttribute('disabled')) { - editor.options.set('disabled', true); - } - if (this.hasAttribute('readonly')) { - editor.options.set('readonly', true); - } + editor.on('init', (_e: unknown) => { this._status = Status.Ready; }); editor.on('SwitchMode', (_e: unknown) => { // 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); @@ -382,11 +382,11 @@ class TinyMceEditor extends HTMLElement { 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); + this._editor.options.set('disabled', value); } - + if (value && !this.hasAttribute('disabled')) { this.setAttribute('disabled', ''); } else if (!value && this.hasAttribute('disabled')) { diff --git a/yarn.lock b/yarn.lock index b6ec8d7..24a3cd6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7055,10 +7055,10 @@ thunky@^1.0.2: resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d" 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== +tinymce@7.6: + version "7.6.1" + resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.6.1.tgz#f35990f6e9c2f90220939f545ac032e3d9301b05" + integrity sha512-5cHhaAoyyTHfAVTInNfoSp0KkUHmeVUbGSu37QKQbOFIPqxYPhqBiaLm1WVLgoNBYOHRProVc3xzxnNTeWHyoQ== tinyrainbow@^1.2.0: version "1.2.0" From 7964d5b1861ffe36c97330ea285e25e1fc464eab Mon Sep 17 00:00:00 2001 From: Ben Tran Date: Tue, 27 May 2025 11:08:30 +0930 Subject: [PATCH 8/9] TINY-11911: Update yarn lock file --- yarn.lock | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/yarn.lock b/yarn.lock index 24a3cd6..fbe584e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7055,10 +7055,10 @@ thunky@^1.0.2: resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d" integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA== -tinymce@7.6: - version "7.6.1" - resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.6.1.tgz#f35990f6e9c2f90220939f545ac032e3d9301b05" - integrity sha512-5cHhaAoyyTHfAVTInNfoSp0KkUHmeVUbGSu37QKQbOFIPqxYPhqBiaLm1WVLgoNBYOHRProVc3xzxnNTeWHyoQ== +tinymce@^7.4.1: + 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" From e4062a4ef6d221ed1eb3b23d7d90ef537b3ed408 Mon Sep 17 00:00:00 2001 From: Ben Tran Date: Wed, 28 May 2025 12:05:33 +0930 Subject: [PATCH 9/9] INT-3346: Update CI config --- Jenkinsfile | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/Jenkinsfile b/Jenkinsfile index 8ae2a13..df9e28c 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -1,12 +1,12 @@ #!groovy @Library('waluigi@release/7') _ -beehiveFlowBuild( - test: { - def platforms = [ - [ os: "windows", browser: "chrome" ], - [ os: "windows", browser: "firefox" ] - ] - bedrockBrowsers(platforms: platforms, testDirs: ["src/test/ts/browser"]) - } +mixedBeehiveFlow( + container: [ resourceRequestMemory: '3Gi', resourceLimitMemory: '3Gi' ], + testPrefix: 'Tiny-WebComponent', + platforms: [ + [ browser: 'chrome', headless: true ], + [ browser: 'firefox', provider: 'aws', buckets: 1 ], + [ browser: 'safari', provider: 'lambdatest', buckets: 1 ] + ], )