Skip to content

Commit 0fe72cd

Browse files
abhinavgandhamabhinavgandham
committed
TINY-11911: Implemented the version check functionality in Editor.ts for disabled mode.
1 parent 63a3f12 commit 0fe72cd

File tree

2 files changed

+57
-47
lines changed

2 files changed

+57
-47
lines changed

‎src/demo/html/disabled.html‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,28 +9,15 @@
99

1010
<body>
1111
<script>
12-
13-
1412
function toggleDisabled() {
1513
var editor = document.getElementById('mody');
16-
const editorInstance = editor.get
17-
var version = tinymce.majorVersion + '.' + tinymce.minorVersion
18-
var isoldVersion = parseFloat(version) < 7.6
19-
if (isoldVersion) {
20-
if (!editor.hasAttribute('readonly')) {
21-
editor.setAttribute('readonly', '');
22-
} else {
23-
editor.removeAttribute('readonly');
24-
}
25-
} else {
26-
if (!editor.hasAttribute('disabled')) {
27-
editor.setAttribute('disabled', '')
28-
}
29-
else {
30-
editor.removeAttribute('disabled');
31-
}
32-
}
14+
15+
if (!editor.hasAttribute('disabled')) {
16+
editor.setAttribute('disabled', '');
17+
} else {
18+
editor.removeAttribute('disabled');
3319
}
20+
}
3421

3522
function toggleReadonly() {
3623
var editor = document.getElementById('mody');

‎src/main/ts/component/Editor.ts‎

Lines changed: 51 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,14 @@ const configAttributes: Record<string, (v: string) => unknown> = {
7676
promotion: parseBooleanOrString, // boolean
7777
};
7878

79-
const configRenames: Record<string, string> = {
79+
const configRenames: Record<string, string> = {};
80+
81+
// Function that checks if the disabled option is supported with the version used
82+
const isDisabledOptionSupported = (tinymce: TinyMCE): boolean => {
83+
const major = parseFloat(tinymce.majorVersion);
84+
const minor = parseFloat(tinymce.minorVersion);
85+
const version = major + minor / 10;
86+
return version >= 7.6;
8087
};
8188

8289
class TinyMceEditor extends HTMLElement {
@@ -248,7 +255,22 @@ class TinyMceEditor extends HTMLElement {
248255
target,
249256
setup: (editor: Editor) => {
250257
this._editor = editor;
251-
editor.on('init', (_e: unknown) => {
258+
editor.on("init", (_e: unknown) => {
259+
const tinymce = this._getTinymce();
260+
const isDisableSupported = isDisabledOptionSupported(tinymce);
261+
if (isDisableSupported) {
262+
if (this.hasAttribute('readonly')) {
263+
this.setAttribute('readonly', '');
264+
} else {
265+
this.removeAttribute('readonly');
266+
}
267+
} else {
268+
if (!this.hasAttribute('disabled')) {
269+
this.setAttribute('disabled', '');
270+
} else {
271+
this.removeAttribute('disabled');
272+
}
273+
}
252274
this._status = Status.Ready;
253275
});
254276
editor.on('SwitchMode', (_e: unknown) => {
@@ -336,52 +358,53 @@ class TinyMceEditor extends HTMLElement {
336358

337359
get readonly(): boolean {
338360
if (this._editor) {
339-
return this._editor.mode.get() === 'readonly';
361+
return this._editor.mode.get() === "readonly";
340362
} else {
341-
return this.hasAttribute('readonly');
363+
return this.hasAttribute("readonly");
342364
}
343365
}
344366

345367
set readonly(value: boolean) {
346368
if (value) {
347-
if (this._editor && this._editor.mode.get() !== 'readonly') {
348-
this._editor.mode.set('readonly');
369+
if (this._editor && this._editor.mode.get() !== "readonly") {
370+
this._editor.mode.set("readonly");
349371
}
350-
if (!this.hasAttribute('readonly')) {
351-
this.setAttribute('readonly', '');
372+
if (!this.hasAttribute("readonly")) {
373+
this.setAttribute("readonly", "");
352374
}
353375
} else {
354-
if (this._editor && this._editor.mode.get() === 'readonly') {
355-
this._editor.mode.set('design');
376+
if (this._editor && this._editor.mode.get() === "readonly") {
377+
this._editor.mode.set("design");
356378
}
357-
if (this.hasAttribute('readonly')) {
358-
this.removeAttribute('readonly');
379+
if (this.hasAttribute("readonly")) {
380+
this.removeAttribute("readonly");
359381
}
360382
}
361383
}
362384

363385
get disabled(): boolean {
364-
return this._editor ? this._editor.options.get('disabled') : this.hasAttribute('disabled');
386+
return this._editor
387+
? this._editor.options.get("disabled")
388+
: this.hasAttribute("disabled");
365389
}
366390

367391
set disabled(value: boolean) {
368-
if (value) {
369-
if (this._editor && this._editor.options.get('disabled') === false) {
370-
this._editor.options.set('disabled', value);
371-
}
372-
373-
if (!this.hasAttribute('disabled')) {
374-
this.setAttribute('disabled', '');
375-
}
376-
} else {
377-
if (this._editor && this._editor.options.get('disabled') === true) {
378-
this._editor.options.set('disabled', false);
379-
}
380-
381-
if (this.hasAttribute('disabled')) {
382-
this.removeAttribute('disabled');
392+
const tinymce = this._getTinymce?.();
393+
const isNew = tinymce ? isDisabledOptionSupported(tinymce) : true;
394+
395+
if (this._editor && this._status === Status.Ready) {
396+
if (isNew) {
397+
this._editor.options.set('disabled', value);
398+
} else {
399+
this._editor.mode.set(value ? 'readonly' : 'design');
383400
}
384401
}
402+
403+
if (value && !this.hasAttribute('disabled')) {
404+
this.setAttribute('disabled', '');
405+
} else if (!value && this.hasAttribute('disabled')) {
406+
this.removeAttribute('disabled');
407+
}
385408
}
386409

387410
get placeholder(): string | null {

0 commit comments

Comments
 (0)