alert() blocks interaction with the TinyMCE editor in Publii
When an alert window created with, for example, is triggered prompt("Please select text to format");, the TinyMCE editor in Publii may become completely unmanageable, and as a result, it will be impossible to edit the text. This is because alert()it blocks further actions in the browser, including Publii's interaction with the editor. It is better to avoid using it alert()in such cases, as it stops the JavaScript execution thread, which affects the editor's operation.
To fix this, you can replace it alert() with a milder message in the editor itself that does not block interaction with it.
// First Button
editor.ui.registry.addButton('first_button', {
text: 'First Button',
icon: 'edit',
tooltip: 'Apply first formatting',
onAction: function () {
let selectedText = editor.selection.getContent();
if (selectedText) {
editor.insertContent(`<span class="first-format">${selectedText}</span>`);
} else {
editor.notificationManager.open({
text: "Please select text to format.",
type: 'warning',
timeout: 3000
});
}
}
});
You will see the following message:

Or even more interesting:
// First Button
editor.ui.registry.addButton('first_button', {
text: 'First Button',
icon: 'edit',
tooltip: 'Apply first formatting',
onAction: function () {
let selectedText = editor.selection.getContent();
if (selectedText) {
editor.insertContent(`<span class="first-format">${selectedText}</span>`);
} else {
editor.windowManager.alert("Please select text to format.");
}
}
});
You will see the following message:

Now, if text is not selected, the user will see a message in the editor (not in the alert window), allowing them to continue working with the editor.
Comments:
Loading comments…