MDL-81530 editor_tiny: Better browsers compatibility

The TinyMCE.remove() function is killing other events on Firefox
We need to modify the setupForElementId() to make TinyMCE to
remove itself outside of the event loop
This commit is contained in:
Huong Nguyen 2024-05-06 13:53:53 +07:00
parent f88dbfcafc
commit 7ac2d7f598
No known key found for this signature in database
GPG Key ID: 40D88AB693A3E72A
4 changed files with 30 additions and 5 deletions

View File

@ -149,6 +149,25 @@ Feature: Perform basic calendar functionality
Then I should see "Mediocre event"
And ".location-content" "css_element" should not exist
@javascript @editor_tiny
Scenario: Edit a newly created event using TinyMCE editor
Given I log in as "teacher1"
And I follow "Dashboard"
And I click on "New event" "button"
And I set the field "Event title" to "Newly created event"
When I press "Save"
Then I should see "Newly created event"
And I click on "Newly created event" "link"
And I click on "Edit" "button" in the "Newly created event" "dialogue"
And I click on "Show more..." "link"
And I click on the "Link" button for the "Description" TinyMCE editor
And I set the field "Text to display" to "Read more..."
And I set the field "Enter a URL" to "https://moodle.org/"
And I click on "Create link" "button" in the "Create link" "dialogue"
And I press "Save"
And I click on "Newly created event" "link"
And I should see "Read more..."
@javascript
Scenario: Module events editing
Given I log in as "teacher1"

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -121,7 +121,7 @@ export const getInstanceForElementId = elementId => getInstanceForElement(docume
export const getInstanceForElement = element => {
const instance = instanceMap.get(element);
if (instance && instance.removed) {
instanceMap.remove(element);
instanceMap.delete(element);
return undefined;
}
return instance;
@ -133,11 +133,17 @@ export const getInstanceForElement = element => {
* @param {object} config The configuration required to setup the editor
* @param {string} config.elementId The HTML Node ID
* @param {Object} config.options The editor plugin configuration
* @return {Promise<TinyMCE>} The TinyMCE instance
*/
export const setupForElementId = ({elementId, options}) => {
const target = document.getElementById(elementId);
return setupForTarget(target, options);
// We will need to wrap the setupForTarget and editor.remove() calls in a setTimeout.
// Because other events callbacks will still try to run on the removed instance.
// This will cause an error on Firefox.
// We need to make TinyMCE to remove itself outside the event loop.
// @see https://github.com/tinymce/tinymce/issues/3129 for more details.
setTimeout(() => {
return setupForTarget(target, options);
}, 1);
};
/**