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
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 3 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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,6 @@
"webpack": "^5.75.0"
},
"dependencies": {},
"version": "2.1.1-rc",
"version": "2.2.1-rc",
"name": "@tinymce/tinymce-webcomponent"
}
56 changes: 56 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,56 @@
<!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('mody');
const editorInstance = editor.get
var version = tinymce.majorVersion + '.' + tinymce.minorVersion
var isoldVersion = parseFloat(version) < 7.6
if (isoldVersion) {
if (!editor.hasAttribute('readonly')) {
editor.setAttribute('readonly', '');
} else {
editor.removeAttribute('readonly');
}
} else {
if (!editor.hasAttribute('disabled')) {
editor.setAttribute('disabled', '')
}
else {
editor.removeAttribute('disabled');
}
}
}

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

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

</html>
31 changes: 30 additions & 1 deletion src/main/ts/component/Editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,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 +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;
}
Expand Down Expand Up @@ -293,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') {
Expand Down Expand Up @@ -355,6 +360,30 @@ class TinyMceEditor extends HTMLElement {
}
}

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

set disabled(value: boolean) {
if (value) {
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.options.get('disabled') === true) {
this._editor.options.set('disabled', false);
}

if (this.hasAttribute('disabled')) {
this.removeAttribute('disabled');
}
}
}

get placeholder(): string | null {
return this.getAttribute('placeholder');
}
Expand Down