Skip to content

TINY-11911: Added new disabled option and increased minor version. #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tiny-ben-tran merged 10 commits into from
May 28, 2025
Merged

TINY-11911: Added new disabled option and increased minor version. #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2f23731
TINY-11911: Added new option and increased minor version.
abhinavgandham May 2, 2025
01ef601
TINY-11911: Handle updates of the disabled attribute
tiny-ben-tran May 5, 2025
63a3f12
TINY-11911: Added version checking for disabled option in the disable…
abhinavgandham May 13, 2025
0fe72cd
TINY-11911: Implemented the version check functionality in Editor.ts …
abhinavgandham May 14, 2025
9f16c7c
TINY-11911: Modified the behavior so that the 'disabled' option does …
abhinavgandham May 21, 2025
d2ed417
TINY-11911: Add tinymce/miniature as dependency
tiny-ben-tran May 22, 2025
9e5be9b
TINY-11911: Add logic to sync with the disabled option
tiny-ben-tran May 22, 2025
7964d5b
TINY-11911: Update yarn lock file
tiny-ben-tran May 27, 2025
e4062a4
INT-3346: Update CI config
tiny-ben-tran May 28, 2025
0450bff
Merge branch 'main' into feature/TINY-11911
tiny-ben-tran May 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,9 @@
"typescript": "~5.6.3",
"webpack": "^5.75.0"
},
"dependencies": {},
"version": "2.1.1-rc",
"dependencies": {
"@tinymce/miniature": "^6.0.0"
},
"version": "2.2.1-rc",
"name": "@tinymce/tinymce-webcomponent"
}
43 changes: 43 additions & 0 deletions src/demo/html/disabled.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>TinyMCE WebComponent Demo: Disabled and Readonly </title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>

<body>
<script>
function toggleDisabled() {
var editor = document.getElementById('disabled_state');
if (!editor.hasAttribute('disabled')) {
editor.setAttribute('disabled', '');
} else {
editor.removeAttribute('disabled');
}
}

function toggleReadonly() {
var editor = document.getElementById('readonly_mode');
if (!editor.hasAttribute('readonly')) {
editor.setAttribute('readonly', '');
} else {
editor.removeAttribute('readonly');
}
}
</script>
<h2>TinyMCE WebComponent Demo: Disabled and Readonly</h2>
<div id="ephox-ui">
<h2>Readonly mode</h2>
<button onclick="toggleReadonly()">Toggle readonly</button>
<tinymce-editor id="readonly_mode" readonly></tinymce-editor>
<h2>Disabled state</h2>
<button onclick="toggleDisabled()" plugins="help">Toggle disabled</button>
<tinymce-editor id="disabled_state" disabled></tinymce-editor>
</div>
<script src="../../../node_modules/tinymce/tinymce.js"></script>
<script src="../../../dist/tinymce-webcomponent.js"></script>
</body>

</html>
45 changes: 42 additions & 3 deletions src/main/ts/component/Editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Resolve, Obj, Fun, Global } from '@ephox/katamari';
import { TinyMCE, Editor } from 'tinymce';
import { ScriptLoader } from '../utils/ScriptLoader';
import { TinyVer } from '@tinymce/miniature';
type EditorOptions = Parameters<TinyMCE['init']>[0];
type EventHandler = Parameters<Editor['on']>[1];

Expand Down Expand Up @@ -76,8 +77,10 @@ const configAttributes: Record<string, (v: string) => unknown> = {
promotion: parseBooleanOrString, // boolean
};

const configRenames: Record<string, string> = {
};
const configRenames: Record<string, string> = {};

// Function that checks if the disabled option is supported with the version used
const isDisabledOptionSupported = (tinymce: TinyMCE): boolean => !TinyVer.isLessThan(tinymce, '7.6.0');

class TinyMceEditor extends HTMLElement {
private _status: Status;
Expand Down Expand Up @@ -108,7 +111,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() {
Expand Down Expand Up @@ -201,6 +204,9 @@ class TinyMceEditor extends HTMLElement {
if (this.readonly) {
config.readonly = true;
}
if (this.disabled) {
config.disabled = true;
}
if (this.autofocus) {
config.auto_focus = true;
}
Expand Down Expand Up @@ -242,6 +248,10 @@ 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;
Expand All @@ -252,6 +262,12 @@ class TinyMceEditor extends HTMLElement {
// 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);
Expand Down Expand Up @@ -293,6 +309,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') {
Expand Down Expand Up @@ -355,6 +373,27 @@ class TinyMceEditor extends HTMLElement {
}
}

get disabled(): boolean {
return this._editor
? this._editor.options.get('disabled')
: this.hasAttribute('disabled');
}

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);
}

if (value && !this.hasAttribute('disabled')) {
this.setAttribute('disabled', '');
} else if (!value && this.hasAttribute('disabled')) {
this.removeAttribute('disabled');
}
}

get placeholder(): string | null {
return this.getAttribute('placeholder');
}
Expand Down
31 changes: 26 additions & 5 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -638,7 +638,7 @@
"@deno/shim-deno-test" "^0.4.0"
which "^2.0.2"

"@ephox/agar@^8.0.1":
"@ephox/agar@^8.0.0", "@ephox/agar@^8.0.1":
version "8.0.1"
resolved "https://registry.yarnpkg.com/@ephox/agar/-/agar-8.0.1.tgz#6772ed7abd90adee5b08bc6f8baf0cb4f22b8d1c"
integrity sha512-2LR/u0oos9GadRoLFDVE6NRDV8Tl9+DYQyouVYn0+7afAYdouyw+nXaoTVG5nnvMG+ofsmldKOC82nJWu0a4kQ==
Expand Down Expand Up @@ -758,14 +758,25 @@
dependencies:
"@ephox/dispute" "^1.0.3"

"@ephox/mcagar@^9.0.0":
version "9.0.1"
resolved "https://registry.yarnpkg.com/@ephox/mcagar/-/mcagar-9.0.1.tgz#d740d02628063e8df86ca8cdd8aa307654b1c69b"
integrity sha512-iNMP8mkz8AtgiRceU4TAnstQje3RG8yxM/QoWKkriCeh6n5fe1sSfexFRVW3fwZ0bUrjTlyawSqoH0yhESqJjQ==
dependencies:
"@ephox/agar" "^8.0.1"
"@ephox/katamari" "^9.1.6"
"@ephox/sand" "^6.0.10"
"@ephox/sugar" "^9.3.1"
fast-check "^2.0.0"

"@ephox/sand@^6.0.10":
version "6.0.10"
resolved "https://registry.yarnpkg.com/@ephox/sand/-/sand-6.0.10.tgz#1bd3e03ce339ab282fa3ac03591badc13f7d69b1"
integrity sha512-q/2Xcjl1O5c9/HHxQiEKGZkGsC68WUjVP5ciDNKqrZd1s1BhA3VWbaubQxxBRt3SwKyBCukfS5gL53qkqTfbkg==
dependencies:
"@ephox/katamari" "^9.1.6"

"@ephox/sugar@^9.2.1", "@ephox/sugar@^9.3.1":
"@ephox/sugar@^9.2.1", "@ephox/sugar@^9.3.0", "@ephox/sugar@^9.3.1":
version "9.3.1"
resolved "https://registry.yarnpkg.com/@ephox/sugar/-/sugar-9.3.1.tgz#082dbe885d41e657eff7ef6275d648f3dff88334"
integrity sha512-NQMqDN0zC+IZGuhBuz/7RxncfJsmTBhCHgaqkHOJ5d1E0CIL9afIizBYQ0JSHS3osAb9woGGtwPobjCx3/Srpw==
Expand Down Expand Up @@ -1544,6 +1555,16 @@
resolve "^1.17.0"
typescript "^4.9.5"

"@tinymce/miniature@^6.0.0":
version "6.0.0"
resolved "https://registry.yarnpkg.com/@tinymce/miniature/-/miniature-6.0.0.tgz#d11ca91292fa614926faf399166898874baedd92"
integrity sha512-bLpaTTgbyMHP3V8bucSxvCTVTUjRRk05zDgnlD5Hj2eo6hEyHT1FCqpuhdVLHx9mbCydrlAIhhsY8Ex6Hp8Qqg==
dependencies:
"@ephox/agar" "^8.0.0"
"@ephox/katamari" "^9.1.5"
"@ephox/mcagar" "^9.0.0"
"@ephox/sugar" "^9.3.0"

"@tootallnate/quickjs-emscripten@^0.23.0":
version "0.23.0"
resolved "https://registry.yarnpkg.com/@tootallnate/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz#db4ecfd499a9765ab24002c3b696d02e6d32a12c"
Expand Down Expand Up @@ -7035,9 +7056,9 @@ thunky@^1.0.2:
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==
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"
Expand Down