@wiris/mathtype-ckeditor5 8.9.1 → 8.9.2

package/README.md

@@ -1,68 +1,70 @@
-MathType for CKEditor 5 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/wirismath)
-===
-
-Type and handwrite mathematical notation with MathType.
-
-Easily include quality math equations in your documents and digital content.
-
-# Table of Contents
-
-- [Install instructions](#install-instructions)
-- [Services](#services)
-- [Documentation](#documentation)
-- [Displaying on Target Page](#displaying-on-target-page)
-- [Privacy policy](#privacy-policy)
-
-## Install instructions
-
-1. Install the npm module:
-
-   ```
-   npm install @wiris/mathtype-ckeditor5
-   ```
-
-2. Update the CKEditor configuration by adding the new plugin and including the MathType and ChemType buttons:
-
-   ```js
-   import MathType from '@wiris/mathtype-ckeditor5/src/plugin';
-
-   ...
-
-   ClassicEditor
-        .create( editorElement, {
-            plugins: [ ..., MathType, ... ],
-            toolbar: {
-                items: [
-                    ...
-                    'MathType',
-                    'ChemType',
-                    ...
-                ]
-            },
-   ```
-
-## Services
-
-This npm module uses remotely hosted services to render MathML data. In case of wanting to install these services on your own backend, please contact <support@wiris.com>.
-
-[comment]: <> (TODO: fill this section when the documentation is ready)
-
-## Displaying on Target Page
-
-In order to display mathematical formulas on the target page, i.e. the page where content produced by the HTML editor will be visible, the target page needs to include the [MathType script](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/mathml-mode#add_a_script_to_head). For example for the default setting this would be:
-```html
-<script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script>
-```
-
-## Documentation
-
-To find out more information about MathType, please go to the following documentation:
-
-[comment]: <> (TODO: link to install instructions)
-* [MathType documentation](https://docs.wiris.com/en/mathtype/mathtype_web/start?utm_source=npmjs&utm_medium=referral)
-* [Introductory tutorials](https://docs.wiris.com/en/mathtype/mathtype_web/intro_tutorials?utm_source=npmjs&utm_medium=referral)
-* [Service customization](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/config-table?utm_source=npmjs&utm_medium=referral)
-* [Testing](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/html/plugins-test?utm_source=npmjs&utm_medium=referral)
-## Privacy policy
-
-The [MathType Privacy Policy](https://www.wiris.com/en/mathtype-privacy-policy/?utm_source=npmjs&utm_medium=referral) covers the data processing operations for the MathType users. It is an addendum of the company’s general Privacy Policy and the [general Privacy Policy](https://www.wiris.com/en/privacy-policy?utm_source=npmjs&utm_medium=referral) still applies to MathType users.
+# MathType for CKEditor 5 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/wirismath)
+
+Type and handwrite mathematical notation with MathType.
+
+Easily include quality math equations in your documents and digital content.
+
+# Table of Contents
+
+- [Install instructions](#install-instructions)
+- [Services](#services)
+- [Documentation](#documentation)
+- [Displaying on Target Page](#displaying-on-target-page)
+- [Privacy policy](#privacy-policy)
+
+## Install instructions
+
+1. Install the npm module:
+
+   ```
+   npm install @wiris/mathtype-ckeditor5
+   ```
+
+2. Update the CKEditor configuration by adding the new plugin and including the MathType and ChemType buttons:
+
+   ```js
+   import MathType from '@wiris/mathtype-ckeditor5/src/plugin';
+
+   ...
+
+   ClassicEditor
+        .create( editorElement, {
+            plugins: [ ..., MathType, ... ],
+            toolbar: {
+                items: [
+                    ...
+                    'MathType',
+                    'ChemType',
+                    ...
+                ]
+            },
+   ```
+
+## Services
+
+This npm module uses remotely hosted services to render MathML data. In case of wanting to install these services on your own backend, please contact <support@wiris.com>.
+
+[comment]: <> (TODO: fill this section when the documentation is ready)
+
+## Displaying on Target Page
+
+In order to display mathematical formulas on the target page, i.e. the page where content produced by the HTML editor will be visible, the target page needs to include the [MathType script](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/mathml-mode#add_a_script_to_head). For example for the default setting this would be:
+
+```html
+<script src="https://www.wiris.net/demo/plugins/app/WIRISplugins.js?viewer=image"></script>
+```
+
+## Documentation
+
+To find out more information about MathType, please go to the following documentation:
+
+[comment]: <> (TODO: link to install instructions)
+
+- [MathType documentation](https://docs.wiris.com/en/mathtype/mathtype_web/start?utm_source=npmjs&utm_medium=referral)
+- [Introductory tutorials](https://docs.wiris.com/en/mathtype/mathtype_web/intro_tutorials?utm_source=npmjs&utm_medium=referral)
+- [Service customization](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/config-table?utm_source=npmjs&utm_medium=referral)
+- [Testing](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/html/plugins-test?utm_source=npmjs&utm_medium=referral)
+
+## Privacy policy
+
+The [MathType Privacy Policy](https://www.wiris.com/en/mathtype-privacy-policy/?utm_source=npmjs&utm_medium=referral) covers the data processing operations for the MathType users. It is an addendum of the company’s general Privacy Policy and the [general Privacy Policy](https://www.wiris.com/en/privacy-policy?utm_source=npmjs&utm_medium=referral) still applies to MathType users.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wiris/mathtype-ckeditor5",
-  "version": "8.9.1",
+  "version": "8.9.2",
   "description": "MathType Web for CKEditor5 editor",
   "keywords": [
     "chem",
@@ -39,6 +39,6 @@
     "@ckeditor/ckeditor5-engine": ">=27.0.0",
     "@ckeditor/ckeditor5-ui": ">=27.0.0",
     "@ckeditor/ckeditor5-widget": ">=27.0.0",
-    "@wiris/mathtype-html-integration-devkit": "1.17.1"
+    "@wiris/mathtype-html-integration-devkit": "1.17.2"
   }
 }

package/src/commands.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-classes-per-file */
-import Command from '@ckeditor/ckeditor5-core/src/command';
-import CKEditor5Integration from './integration';
+import Command from "@ckeditor/ckeditor5-core/src/command";
+import CKEditor5Integration from "./integration";
 
 /**
  * Command for opening the MathType editor
@@ -9,7 +9,7 @@ export class MathTypeCommand extends Command {
   execute(options = {}) {
     // Check we get a valid integration
     // eslint-disable-next-line no-prototype-builtins
-    if (!options.hasOwnProperty('integration') || !(options.integration instanceof CKEditor5Integration)) {
+    if (!options.hasOwnProperty("integration") || !(options.integration instanceof CKEditor5Integration)) {
       throw 'Must pass a valid CKEditor5Integration instance as attribute "integration" of options';
     }
 
@@ -24,8 +24,8 @@ export class MathTypeCommand extends Command {
   }
 
   /**
-     * Sets the appropriate custom editor, if any, or disables them.
-     */
+   * Sets the appropriate custom editor, if any, or disables them.
+   */
   setEditor() {
     // It's possible that a custom editor was last used.
     // We need to disable it to avoid wrong behaviors.
@@ -33,12 +33,16 @@ export class MathTypeCommand extends Command {
   }
 
   /**
-     * Checks whether we are editing an existing formula or a new one and opens the editor.
-     */
+   * Checks whether we are editing an existing formula or a new one and opens the editor.
+   */
   openEditor() {
     this.integration.core.editionProperties.dbclick = false;
     const image = this._getSelectedImage();
-    if (typeof image !== 'undefined' && image !== null && image.classList.contains(WirisPlugin.Configuration.get('imageClassName'))) {
+    if (
+      typeof image !== "undefined" &&
+      image !== null &&
+      image.classList.contains(WirisPlugin.Configuration.get("imageClassName"))
+    ) {
       this.integration.core.editionProperties.temporalImage = image;
       this.integration.openExistingFormulaEditor();
     } else {
@@ -47,9 +51,9 @@ export class MathTypeCommand extends Command {
   }
 
   /**
-     * Gets the currently selected formula image
-     * @returns {Element} selected image, if any, undefined otherwise
-     */
+   * Gets the currently selected formula image
+   * @returns {Element} selected image, if any, undefined otherwise
+   */
   _getSelectedImage() {
     const { selection } = this.editor.editing.view.document;
 
@@ -65,7 +69,7 @@ export class MathTypeCommand extends Command {
     let image;
 
     for (const span of range) {
-      if (span.item.name !== 'span') {
+      if (span.item.name !== "span") {
         return;
       }
       image = span.item.getChild(0);
@@ -86,6 +90,6 @@ export class MathTypeCommand extends Command {
  */
 export class ChemTypeCommand extends MathTypeCommand {
   setEditor() {
-    this.integration.core.getCustomEditors().enable('chemistry');
+    this.integration.core.getCustomEditors().enable("chemistry");
   }
 }

package/src/integration.js

@@ -1,9 +1,9 @@
-import IntegrationModel from '@wiris/mathtype-html-integration-devkit/src/integrationmodel';
-import Util from '@wiris/mathtype-html-integration-devkit/src/util';
-import Configuration from '@wiris/mathtype-html-integration-devkit/src/configuration';
-import Latex from '@wiris/mathtype-html-integration-devkit/src/latex';
-import MathML from '@wiris/mathtype-html-integration-devkit/src/mathml';
-import Telemeter from '@wiris/mathtype-html-integration-devkit/src/telemeter';
+import IntegrationModel from "@wiris/mathtype-html-integration-devkit/src/integrationmodel";
+import Util from "@wiris/mathtype-html-integration-devkit/src/util";
+import Configuration from "@wiris/mathtype-html-integration-devkit/src/configuration";
+import Latex from "@wiris/mathtype-html-integration-devkit/src/latex";
+import MathML from "@wiris/mathtype-html-integration-devkit/src/mathml";
+import Telemeter from "@wiris/mathtype-html-integration-devkit/src/telemeter";
 
 /**
  * This class represents the MathType integration for CKEditor5.
@@ -13,40 +13,41 @@ export default class CKEditor5Integration extends IntegrationModel {
   constructor(ckeditorIntegrationModelProperties) {
     const editor = ckeditorIntegrationModelProperties.editorObject;
 
-    if (typeof editor.config !== 'undefined' && typeof editor.config.get('mathTypeParameters') !== 'undefined') {
-      ckeditorIntegrationModelProperties.integrationParameters = editor.config.get('mathTypeParameters');
+    if (typeof editor.config !== "undefined" && typeof editor.config.get("mathTypeParameters") !== "undefined") {
+      ckeditorIntegrationModelProperties.integrationParameters = editor.config.get("mathTypeParameters");
     }
     /**
-         * CKEditor5 Integration.
-         *
-         * @param {integrationModelProperties} integrationModelAttributes
-         */
+     * CKEditor5 Integration.
+     *
+     * @param {integrationModelProperties} integrationModelAttributes
+     */
     super(ckeditorIntegrationModelProperties);
 
     /**
      * Folder name used for the integration inside CKEditor plugins folder.
      */
-    this.integrationFolderName = 'ckeditor_wiris';
+    this.integrationFolderName = "ckeditor_wiris";
   }
 
   /**
-     * @inheritdoc
-     * @returns {string} - The CKEditor instance language.
-     * @override
-     */
+   * @inheritdoc
+   * @returns {string} - The CKEditor instance language.
+   * @override
+   */
   getLanguage() {
     // Returns the CKEDitor instance language taking into account that the language can be an object.
     // Try to get editorParameters.language, fail silently otherwise
     try {
       return this.editorParameters.language;
     } catch (e) {}
-    const languageObject = this.editorObject.config.get('language');
+    const languageObject = this.editorObject.config.get("language");
     if (languageObject != null) {
-      if (typeof (languageObject) === 'object') {
+      if (typeof languageObject === "object") {
         // eslint-disable-next-line no-prototype-builtins
-        if (languageObject.hasOwnProperty('ui')) {
+        if (languageObject.hasOwnProperty("ui")) {
           return languageObject.ui;
-        } return languageObject;
+        }
+        return languageObject;
       }
       return languageObject;
     }
@@ -54,29 +55,28 @@ export default class CKEditor5Integration extends IntegrationModel {
   }
 
   /**
-     * Adds callbacks to the following CKEditor listeners:
-     * - 'focus' - updates the current instance.
-     * - 'contentDom' - adds 'doubleclick' callback.
-     * - 'doubleclick' - sets to null data.dialog property to avoid modifications for MathType formulas.
-     * - 'setData' - parses the data converting MathML into images.
-     * - 'afterSetData' - adds an observer to MathType formulas to avoid modifications.
-     * - 'getData' - parses the data converting images into selected save mode (MathML by default).
-     * - 'mode' - recalculates the active element.
-     */
+   * Adds callbacks to the following CKEditor listeners:
+   * - 'focus' - updates the current instance.
+   * - 'contentDom' - adds 'doubleclick' callback.
+   * - 'doubleclick' - sets to null data.dialog property to avoid modifications for MathType formulas.
+   * - 'setData' - parses the data converting MathML into images.
+   * - 'afterSetData' - adds an observer to MathType formulas to avoid modifications.
+   * - 'getData' - parses the data converting images into selected save mode (MathML by default).
+   * - 'mode' - recalculates the active element.
+   */
   addEditorListeners() {
     const editor = this.editorObject;
 
-    if (typeof editor.config.wirislistenersdisabled === 'undefined'
-      || !editor.config.wirislistenersdisabled) {
+    if (typeof editor.config.wirislistenersdisabled === "undefined" || !editor.config.wirislistenersdisabled) {
       this.checkElement();
     }
   }
 
   /**
-     * Checks the current container and assign events in case that it doesn't have them.
-     * CKEditor replaces several times the element element during its execution,
-     * so we must assign the events again to editor element.
-     */
+   * Checks the current container and assign events in case that it doesn't have them.
+   * CKEditor replaces several times the element element during its execution,
+   * so we must assign the events again to editor element.
+   */
   checkElement() {
     const editor = this.editorObject;
     const newElement = editor.sourceElement;
@@ -91,24 +91,25 @@ export default class CKEditor5Integration extends IntegrationModel {
   }
 
   /**
-     * @inheritdoc
-     * @param {HTMLElement} element - HTMLElement target.
-     * @param {MouseEvent} event - event which trigger the handler.
-     */
+   * @inheritdoc
+   * @param {HTMLElement} element - HTMLElement target.
+   * @param {MouseEvent} event - event which trigger the handler.
+   */
   doubleClickHandler(element, event) {
     this.core.editionProperties.dbclick = true;
     if (this.editorObject.isReadOnly === false) {
-      if (element.nodeName.toLowerCase() === 'img') {
-        if (Util.containsClass(element, Configuration.get('imageClassName'))) {
+      if (element.nodeName.toLowerCase() === "img") {
+        if (Util.containsClass(element, Configuration.get("imageClassName"))) {
           // Some plugins (image2, image) open a dialog on Double-click. On formulas
           // doubleclick event ends here.
-          if (typeof event.stopPropagation !== 'undefined') { // old I.E compatibility.
+          if (typeof event.stopPropagation !== "undefined") {
+            // old I.E compatibility.
             event.stopPropagation();
           } else {
             event.returnValue = false;
           }
           this.core.getCustomEditors().disable();
-          const customEditorAttr = element.getAttribute(Configuration.get('imageCustomEditorName'));
+          const customEditorAttr = element.getAttribute(Configuration.get("imageCustomEditorName"));
           if (customEditorAttr) {
             this.core.getCustomEditors().enable(customEditorAttr);
           }
@@ -138,17 +139,17 @@ export default class CKEditor5Integration extends IntegrationModel {
   }
 
   /**
-     * Replaces old formula with new MathML or inserts it in caret position if new
-     * @param {String} mathml MathML to update old one or insert
-     * @returns {module:engine/model/element~Element} The model element corresponding to the inserted image
-     */
+   * Replaces old formula with new MathML or inserts it in caret position if new
+   * @param {String} mathml MathML to update old one or insert
+   * @returns {module:engine/model/element~Element} The model element corresponding to the inserted image
+   */
   insertMathml(mathml) {
     // This returns the value returned by the callback function (writer => {...})
     return this.editorObject.model.change((writer) => {
       const core = this.getCore();
       const selection = this.editorObject.model.document.selection;
 
-      const modelElementNew = writer.createElement('mathml', {
+      const modelElementNew = writer.createElement("mathml", {
         formula: mathml,
         ...Object.fromEntries(selection.getAttributes()), // To keep the format, such as style and font
       });
@@ -158,7 +159,8 @@ export default class CKEditor5Integration extends IntegrationModel {
         // Don't bother inserting anything at all if the MathML is empty.
         if (!mathml) return;
 
-        const viewSelection = this.core.editionProperties.selection || this.editorObject.editing.view.document.selection;
+        const viewSelection =
+          this.core.editionProperties.selection || this.editorObject.editing.view.document.selection;
         const modelPosition = this.editorObject.editing.mapper.toModelPosition(viewSelection.getLastPosition());
 
         this.editorObject.model.insertObject(modelElementNew, modelPosition);
@@ -194,19 +196,18 @@ export default class CKEditor5Integration extends IntegrationModel {
   }
 
   /**
-     * Finds the text node corresponding to given DOM text element.
-     * @param {element} viewElement Element to find corresponding text node of.
-     * @returns {module:engine/model/text~Text|undefined} Text node corresponding to the given element or undefined if it doesn't exist.
-     */
-  findText(viewElement) { // eslint-disable-line consistent-return
+   * Finds the text node corresponding to given DOM text element.
+   * @param {element} viewElement Element to find corresponding text node of.
+   * @returns {module:engine/model/text~Text|undefined} Text node corresponding to the given element or undefined if it doesn't exist.
+   */
+  findText(viewElement) {
+    // eslint-disable-line consistent-return
     // mapper always converts text nodes to *new* model elements so we need to convert the text's parents and then come back down
     let pivot = viewElement;
     let element;
     while (!element) {
       element = this.editorObject.editing.mapper.toModelElement(
-        this.editorObject.editing.view.domConverter.domToView(
-          pivot,
-        ),
+        this.editorObject.editing.view.domConverter.domToView(pivot),
       );
       pivot = pivot.parentElement;
     }
@@ -218,22 +219,23 @@ export default class CKEditor5Integration extends IntegrationModel {
       let viewElementData = viewElement.data;
       if (viewElement.nodeType === 3) {
         // Remove invisible white spaces
-        viewElementData = viewElementData.replaceAll(String.fromCharCode(8288), '')
+        viewElementData = viewElementData.replaceAll(String.fromCharCode(8288), "");
       }
-      if (node.is('textProxy') && node.data === viewElementData.replace(String.fromCharCode(160), ' ')) {
+      if (node.is("textProxy") && node.data === viewElementData.replace(String.fromCharCode(160), " ")) {
         return node.textNode;
       }
     }
   }
 
   /** @inheritdoc */
-  insertFormula(focusElement, windowTarget, mathml, wirisProperties) { // eslint-disable-line no-unused-vars
+  insertFormula(focusElement, windowTarget, mathml, wirisProperties) {
+    // eslint-disable-line no-unused-vars
     const returnObject = {};
 
     let mathmlOrigin;
     if (!mathml) {
-      this.insertMathml('');
-    } else if (this.core.editMode === 'latex') {
+      this.insertMathml("");
+    } else if (this.core.editMode === "latex") {
       returnObject.latex = Latex.getLatexFromMathML(mathml);
       returnObject.node = windowTarget.document.createTextNode(`$$${returnObject.latex}$$`);
 
@@ -246,28 +248,26 @@ export default class CKEditor5Integration extends IntegrationModel {
         let startPosition = writer.createPositionAt(startNode.parent, startNode.startOffset + latexRange.startOffset);
         let endPosition = writer.createPositionAt(endNode.parent, endNode.startOffset + latexRange.endOffset);
 
-        let range = writer.createRange(
-          startPosition,
-          endPosition,
-        );
-
-
+        let range = writer.createRange(startPosition, endPosition);
 
         // When Latex is next to image/formula.
         if (latexRange.startContainer.nodeType === 3 && latexRange.startContainer.previousSibling?.nodeType === 1) {
           // Get the position of the latex to be replaced.
-          let latexEdited = '$$' +(Latex.getLatexFromMathML(MathML.safeXmlDecode(this.core.editionProperties.temporalImage.dataset.mathml))) + '$$';
+          let latexEdited =
+            "$$" +
+            Latex.getLatexFromMathML(MathML.safeXmlDecode(this.core.editionProperties.temporalImage.dataset.mathml)) +
+            "$$";
           let data = latexRange.startContainer.data;
 
           // Remove invisible characters.
-          data = data.replaceAll(String.fromCharCode(8288), '')
+          data = data.replaceAll(String.fromCharCode(8288), "");
 
           // Get to the start of the latex we are editing.
           let offset = data.indexOf(latexEdited);
           let dataOffset = data.substring(offset);
           let second$ = dataOffset.substring(2).indexOf("$$") + 4;
           let substring = dataOffset.substr(0, second$);
-          data = data.replace(substring, '');
+          data = data.replace(substring, "");
 
           if (!data) {
             startPosition = writer.createPositionBefore(startNode);
@@ -275,10 +275,7 @@ export default class CKEditor5Integration extends IntegrationModel {
           } else {
             startPosition = startPosition = writer.createPositionAt(startNode.parent, startNode.startOffset + offset);
             endPosition = writer.createPositionAt(endNode.parent, endNode.startOffset + second$ + offset);
-            range = writer.createRange(
-              startPosition,
-              endPosition,
-            );
+            range = writer.createRange(startPosition, endPosition);
           }
         }
 
@@ -289,13 +286,12 @@ export default class CKEditor5Integration extends IntegrationModel {
       mathmlOrigin = this.core.editionProperties.temporalImage?.dataset.mathml;
       try {
         returnObject.node = this.editorObject.editing.view.domConverter.viewToDom(
-          this.editorObject.editing.mapper.toViewElement(
-            this.insertMathml(mathml),
-          ), windowTarget.document,
+          this.editorObject.editing.mapper.toViewElement(this.insertMathml(mathml)),
+          windowTarget.document,
         );
       } catch (e) {
         const x = e.toString();
-        if ((x).includes("CKEditorError: Cannot read property 'parent' of undefined")) {
+        if (x.includes("CKEditorError: Cannot read property 'parent' of undefined")) {
           this.core.modalDialog.cancelAction();
         }
       }
@@ -312,16 +308,17 @@ export default class CKEditor5Integration extends IntegrationModel {
     };
 
     // Remove desired null keys.
-    Object.keys(payload).forEach(key => {
-      if (key === 'mathml_origin' || key === 'editor_origin') !payload[key] ? delete payload[key] : {}
+    Object.keys(payload).forEach((key) => {
+      if (key === "mathml_origin" || key === "editor_origin") !payload[key] ? delete payload[key] : {};
     });
 
+    // Call Telemetry service to track the event.
     try {
       Telemeter.telemeter.track("INSERTED_FORMULA", {
         ...payload,
       });
-    } catch (err) {
-      console.error(err);
+    } catch (error) {
+      console.error("Error tracking INSERTED_FORMULA", error);
     }
 
     /* Due to PLUGINS-1329, we add the onChange event to the CK4 insertFormula.
@@ -335,8 +332,8 @@ export default class CKEditor5Integration extends IntegrationModel {
   }
 
   /**
-     * Function called when the content submits an action.
-     */
+   * Function called when the content submits an action.
+   */
   notifyWindowClosed() {
     this.editorObject.editing.view.focus();
   }

package/src/plugin.js

@@ -1,33 +1,33 @@
 // CKEditor imports
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';
-import HtmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor';
-import XmlDataProcessor from '@ckeditor/ckeditor5-engine/src/dataprocessor/xmldataprocessor';
-import UpcastWriter from '@ckeditor/ckeditor5-engine/src/view/upcastwriter';
-import { toWidget, viewToModelPositionOutsideModelElement } from '@ckeditor/ckeditor5-widget/src/utils';
-import Widget from '@ckeditor/ckeditor5-widget/src/widget';
+import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
+import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview";
+import ClickObserver from "@ckeditor/ckeditor5-engine/src/view/observer/clickobserver";
+import HtmlDataProcessor from "@ckeditor/ckeditor5-engine/src/dataprocessor/htmldataprocessor";
+import XmlDataProcessor from "@ckeditor/ckeditor5-engine/src/dataprocessor/xmldataprocessor";
+import UpcastWriter from "@ckeditor/ckeditor5-engine/src/view/upcastwriter";
+import { toWidget, viewToModelPositionOutsideModelElement } from "@ckeditor/ckeditor5-widget/src/utils";
+import Widget from "@ckeditor/ckeditor5-widget/src/widget";
 
 // MathType API imports
-import IntegrationModel from '@wiris/mathtype-html-integration-devkit/src/integrationmodel';
-import Core from '@wiris/mathtype-html-integration-devkit/src/core.src';
-import Parser from '@wiris/mathtype-html-integration-devkit/src/parser';
-import Util from '@wiris/mathtype-html-integration-devkit/src/util';
-import Image from '@wiris/mathtype-html-integration-devkit/src/image';
-import Configuration from '@wiris/mathtype-html-integration-devkit/src/configuration';
-import Listeners from '@wiris/mathtype-html-integration-devkit/src/listeners';
-import MathML from '@wiris/mathtype-html-integration-devkit/src/mathml';
-import Latex from '@wiris/mathtype-html-integration-devkit/src/latex';
-import StringManager from '@wiris/mathtype-html-integration-devkit/src/stringmanager';
+import IntegrationModel from "@wiris/mathtype-html-integration-devkit/src/integrationmodel";
+import Core from "@wiris/mathtype-html-integration-devkit/src/core.src";
+import Parser from "@wiris/mathtype-html-integration-devkit/src/parser";
+import Util from "@wiris/mathtype-html-integration-devkit/src/util";
+import Image from "@wiris/mathtype-html-integration-devkit/src/image";
+import Configuration from "@wiris/mathtype-html-integration-devkit/src/configuration";
+import Listeners from "@wiris/mathtype-html-integration-devkit/src/listeners";
+import MathML from "@wiris/mathtype-html-integration-devkit/src/mathml";
+import Latex from "@wiris/mathtype-html-integration-devkit/src/latex";
+import StringManager from "@wiris/mathtype-html-integration-devkit/src/stringmanager";
 
 // Local imports
-import { MathTypeCommand, ChemTypeCommand } from './commands';
-import CKEditor5Integration from './integration';
+import { MathTypeCommand, ChemTypeCommand } from "./commands";
+import CKEditor5Integration from "./integration";
 
-import mathIcon from '../theme/icons/ckeditor5-formula.svg';
-import chemIcon from '../theme/icons/ckeditor5-chem.svg';
+import mathIcon from "../theme/icons/ckeditor5-formula.svg";
+import chemIcon from "../theme/icons/ckeditor5-chem.svg";
 
-import packageInfo from '../package.json';
+import packageInfo from "../package.json";
 
 export let currentInstance = null; // eslint-disable-line import/no-mutable-exports
 
@@ -37,7 +37,7 @@ export default class MathType extends Plugin {
   }
 
   static get pluginName() {
-    return 'MathType';
+    return "MathType";
   }
 
   init() {
@@ -64,14 +64,15 @@ export default class MathType extends Plugin {
   /**
    * Inherited from Plugin class: Executed when CKEditor5 is destroyed
    */
-  destroy() { // eslint-disable-line class-methods-use-this
+  destroy() {
+    // eslint-disable-line class-methods-use-this
     currentInstance.destroy();
   }
 
   /**
-     * Create the MathType API Integration object
-     * @returns {CKEditor5Integration} the integration object
-     */
+   * Create the MathType API Integration object
+   * @returns {CKEditor5Integration} the integration object
+   */
   _addIntegration() {
     const { editor } = this;
 
@@ -81,15 +82,15 @@ export default class MathType extends Plugin {
      */
     const integrationProperties = {};
     integrationProperties.environment = {};
-    integrationProperties.environment.editor = 'CKEditor5';
-    integrationProperties.environment.editorVersion = '5.x';
+    integrationProperties.environment.editor = "CKEditor5";
+    integrationProperties.environment.editorVersion = "5.x";
     integrationProperties.version = packageInfo.version;
     integrationProperties.editorObject = editor;
     integrationProperties.serviceProviderProperties = {};
-    integrationProperties.serviceProviderProperties.URI = 'https://www.wiris.net/demo/plugins/app';
-    integrationProperties.serviceProviderProperties.server = 'java';
+    integrationProperties.serviceProviderProperties.URI = "https://www.wiris.net/demo/plugins/app";
+    integrationProperties.serviceProviderProperties.server = "java";
     integrationProperties.target = editor.sourceElement;
-    integrationProperties.scriptName = 'bundle.js';
+    integrationProperties.scriptName = "bundle.js";
     integrationProperties.managesLanguage = true;
     // etc
 
@@ -100,59 +101,64 @@ export default class MathType extends Plugin {
       // Instance of the integration associated to this editor instance
       integration = new CKEditor5Integration(integrationProperties);
       integration.init();
-      integration.listeners.fire('onTargetReady', {});
+      integration.listeners.fire("onTargetReady", {});
 
       integration.checkElement();
 
-      this.listenTo(editor.editing.view.document, 'click', (evt, data) => {
-        // Is Double-click
-        if (data.domEvent.detail === 2) {
-          integration.doubleClickHandler(data.domTarget, data.domEvent);
-          evt.stop();
-        }
-      }, { priority: 'highest' });
+      this.listenTo(
+        editor.editing.view.document,
+        "click",
+        (evt, data) => {
+          // Is Double-click
+          if (data.domEvent.detail === 2) {
+            integration.doubleClickHandler(data.domTarget, data.domEvent);
+            evt.stop();
+          }
+        },
+        { priority: "highest" },
+      );
     }
 
     return integration;
   }
 
   /**
-     * Add the MathType and ChemType commands to the editor
-     */
+   * Add the MathType and ChemType commands to the editor
+   */
   _addCommands() {
     const { editor } = this;
 
     // Add command to open the formula editor
-    editor.commands.add('MathType', new MathTypeCommand(editor));
+    editor.commands.add("MathType", new MathTypeCommand(editor));
 
     // Add command to open the chemistry formula editor
-    editor.commands.add('ChemType', new ChemTypeCommand(editor));
+    editor.commands.add("ChemType", new ChemTypeCommand(editor));
   }
 
   /**
-     * Add the buttons for MathType and ChemType
-     * @param {CKEditor5Integration} integration the integration object
-     */
+   * Add the buttons for MathType and ChemType
+   * @param {CKEditor5Integration} integration the integration object
+   */
   _addViews(integration) {
     const { editor } = this;
 
     // Check if MathType editor is enabled
-    if (Configuration.get('editorEnabled')) {
+    if (Configuration.get("editorEnabled")) {
       // Add button for the formula editor
-      editor.ui.componentFactory.add('MathType', (locale) => {
+      editor.ui.componentFactory.add("MathType", (locale) => {
         const view = new ButtonView(locale);
 
         // View is enabled iff command is enabled
-        view.bind('isEnabled').to(editor.commands.get('MathType'), 'isEnabled');
+        view.bind("isEnabled").to(editor.commands.get("MathType"), "isEnabled");
         view.set({
-          label: StringManager.get('insert_math', integration.getLanguage()),
+          label: StringManager.get("insert_math", integration.getLanguage()),
           icon: mathIcon,
           tooltip: true,
         });
 
         // Callback executed once the image is clicked.
-        view.on('execute', () => {
-          editor.execute('MathType', {
+        view.on("execute", () => {
+          editor.execute("MathType", {
             integration, // Pass integration as parameter
           });
         });
@@ -162,23 +168,23 @@ export default class MathType extends Plugin {
     }
 
     // Check if ChemType editor is enabled
-    if (Configuration.get('chemEnabled')) {
+    if (Configuration.get("chemEnabled")) {
       // Add button for the chemistry formula editor
-      editor.ui.componentFactory.add('ChemType', (locale) => {
+      editor.ui.componentFactory.add("ChemType", (locale) => {
         const view = new ButtonView(locale);
 
         // View is enabled iff command is enabled
-        view.bind('isEnabled').to(editor.commands.get('ChemType'), 'isEnabled');
+        view.bind("isEnabled").to(editor.commands.get("ChemType"), "isEnabled");
 
         view.set({
-          label: StringManager.get('insert_chem', integration.getLanguage()),
+          label: StringManager.get("insert_chem", integration.getLanguage()),
           icon: chemIcon,
           tooltip: true,
         });
 
         // Callback executed once the image is clicked.
-        view.on('execute', () => {
-          editor.execute('ChemType', {
+        view.on("execute", () => {
+          editor.execute("ChemType", {
             integration, // Pass integration as parameter
           });
         });
@@ -192,39 +198,39 @@ export default class MathType extends Plugin {
   }
 
   /**
-     * Registers the <mathml> element in the schema
-     */
+   * Registers the <mathml> element in the schema
+   */
   _addSchema() {
     const { schema } = this.editor.model;
 
-    schema.register('mathml', {
-      inheritAllFrom: '$inlineObject',
-      allowAttributes: ['formula'],
+    schema.register("mathml", {
+      inheritAllFrom: "$inlineObject",
+      allowAttributes: ["formula"],
     });
   }
 
   /**
-     * Add the downcast and upcast converters
-     */
+   * Add the downcast and upcast converters
+   */
   _addConverters(integration) {
     const { editor } = this;
 
     // Editing view -> Model
-    editor.conversion.for('upcast').elementToElement({
+    editor.conversion.for("upcast").elementToElement({
       view: {
-        name: 'span',
-        classes: 'ck-math-widget',
+        name: "span",
+        classes: "ck-math-widget",
       },
       model: (viewElement, { writer: modelWriter }) => {
-        const formula = MathML.safeXmlDecode(viewElement.getChild(0).getAttribute('data-mathml'));
-        return modelWriter.createElement('mathml', {
+        const formula = MathML.safeXmlDecode(viewElement.getChild(0).getAttribute("data-mathml"));
+        return modelWriter.createElement("mathml", {
           formula,
         });
       },
     });
 
     // Data view -> Model
-    editor.data.upcastDispatcher.on('element:math', (evt, data, conversionApi) => {
+    editor.data.upcastDispatcher.on("element:math", (evt, data, conversionApi) => {
       const { consumable, writer } = conversionApi;
       const { viewItem } = data;
 
@@ -246,28 +252,23 @@ export default class MathType extends Plugin {
       const viewDocumentFragment = upcastWriter.createDocumentFragment(viewItem.getChildren());
 
       // and obtain the attributes of <math> too!
-      const mathAttributes = [...viewItem.getAttributes()]
-        .map(([key, value]) => ` ${key}="${value}"`)
-        .join('');
+      const mathAttributes = [...viewItem.getAttributes()].map(([key, value]) => ` ${key}="${value}"`).join("");
 
       // We process the document fragment
-      let formula = processor.toData(viewDocumentFragment) || '';
+      let formula = processor.toData(viewDocumentFragment) || "";
 
       // And obtain the complete formula
       formula = Util.htmlSanitize(`<math${mathAttributes}>${formula}</math>`);
 
       // Replaces the < & > characters to its HTMLEntity to avoid render issues.
-      formula = formula.replaceAll('"<"', '"&lt;"')
-        .replaceAll('">"', '"&gt;"')
-        .replaceAll('><<', '>&lt;<');
-
+      formula = formula.replaceAll('"<"', '"&lt;"').replaceAll('">"', '"&gt;"').replaceAll("><<", ">&lt;<");
 
       /* Model node that contains what's going to actually be inserted. This can be either:
             - A <mathml> element with a formula attribute set to the given formula, or
             - If the original <math> had a LaTeX annotation, then the annotation surrounded by "$$...$$" */
       const modelNode = isLatex
         ? writer.createText(Parser.initParse(formula, integration.getLanguage()))
-        : writer.createElement('mathml', { formula });
+        : writer.createElement("mathml", { formula });
 
       // Find allowed parent for element that we are going to insert.
       // If current parent does not allow to insert element but one of the ancestors does
@@ -308,15 +309,15 @@ export default class MathType extends Plugin {
     });
 
     /**
-         * Whether the given view <math> element has a LaTeX annotation element.
-         * @param {*} math
-         * @returns {bool}
-         */
+     * Whether the given view <math> element has a LaTeX annotation element.
+     * @param {*} math
+     * @returns {bool}
+     */
     function mathIsLatex(math) {
       const semantics = math.getChild(0);
-      if (!semantics || semantics.name !== 'semantics') return false;
+      if (!semantics || semantics.name !== "semantics") return false;
       for (const child of semantics.getChildren()) {
-        if (child.name === 'annotation' && child.getAttribute('encoding') === 'LaTeX') {
+        if (child.name === "annotation" && child.getAttribute("encoding") === "LaTeX") {
           return true;
         }
       }
@@ -324,8 +325,8 @@ export default class MathType extends Plugin {
     }
 
     function createViewWidget(modelItem, { writer: viewWriter }) {
-      const widgetElement = viewWriter.createContainerElement('span', {
-        class: 'ck-math-widget',
+      const widgetElement = viewWriter.createContainerElement("span", {
+        class: "ck-math-widget",
       });
 
       const mathUIElement = createViewImage(modelItem, { writer: viewWriter }); // eslint-disable-line no-use-before-define
@@ -340,7 +341,7 @@ export default class MathType extends Plugin {
     function createViewImage(modelItem, { writer: viewWriter }) {
       const htmlDataProcessor = new HtmlDataProcessor(viewWriter.document);
 
-      const mathString = modelItem.getAttribute('formula').replaceAll('ref="<"', 'ref="&lt;"');
+      const mathString = modelItem.getAttribute("formula").replaceAll('ref="<"', 'ref="&lt;"');
       const imgHtml = Parser.initParse(mathString, integration.getLanguage());
       const imgElement = htmlDataProcessor.toView(imgHtml).getChild(0);
 
@@ -348,8 +349,8 @@ export default class MathType extends Plugin {
             we must create a new EmptyElement which is independent of the
             DataProcessor being used by this editor instance */
       if (imgElement) {
-        return viewWriter.createEmptyElement('img', imgElement.getAttributes(), {
-          renderUnsafeAttributes: ['src'],
+        return viewWriter.createEmptyElement("img", imgElement.getAttributes(), {
+          renderUnsafeAttributes: ["src"],
         });
       }
 
@@ -357,14 +358,14 @@ export default class MathType extends Plugin {
     }
 
     // Model -> Editing view
-    editor.conversion.for('editingDowncast').elementToElement({
-      model: 'mathml',
+    editor.conversion.for("editingDowncast").elementToElement({
+      model: "mathml",
       view: createViewWidget,
     });
 
     // Model -> Data view
-    editor.conversion.for('dataDowncast').elementToElement({
-      model: 'mathml',
+    editor.conversion.for("dataDowncast").elementToElement({
+      model: "mathml",
       view: createDataString, // eslint-disable-line no-use-before-define
     });
 
@@ -374,26 +375,27 @@ export default class MathType extends Plugin {
      * @returns {module:engine/view/node~Node} Copy of the node.
      */
     function clone(viewWriter, sourceNode) {
-      if (sourceNode.is('text')) {
+      if (sourceNode.is("text")) {
         return viewWriter.createText(sourceNode.data);
-      } if (sourceNode.is('element')) {
-        if (sourceNode.is('emptyElement')) {
+      }
+      if (sourceNode.is("element")) {
+        if (sourceNode.is("emptyElement")) {
           return viewWriter.createEmptyElement(sourceNode.name, sourceNode.getAttributes());
         }
         const element = viewWriter.createContainerElement(sourceNode.name, sourceNode.getAttributes());
         for (const child of sourceNode.getChildren()) {
-          viewWriter.insert(viewWriter.createPositionAt(element, 'end'), clone(viewWriter, child));
+          viewWriter.insert(viewWriter.createPositionAt(element, "end"), clone(viewWriter, child));
         }
         return element;
       }
 
-      throw new Exception('Given node has unsupported type.'); // eslint-disable-line no-undef
+      throw new Exception("Given node has unsupported type."); // eslint-disable-line no-undef
     }
 
     function createDataString(modelItem, { writer: viewWriter }) {
       const htmlDataProcessor = new HtmlDataProcessor(viewWriter.document);
 
-      let mathString = Parser.endParseSaveMode(modelItem.getAttribute('formula'));
+      let mathString = Parser.endParseSaveMode(modelItem.getAttribute("formula"));
 
       const sourceMathElement = htmlDataProcessor.toView(mathString).getChild(0);
 
@@ -402,8 +404,8 @@ export default class MathType extends Plugin {
 
     // This stops the view selection getting into the <span>s and messing up caret movement
     editor.editing.mapper.on(
-      'viewToModelPosition',
-      viewToModelPositionOutsideModelElement(editor.model, (viewElement) => viewElement.hasClass('ck-math-widget')),
+      "viewToModelPosition",
+      viewToModelPositionOutsideModelElement(editor.model, (viewElement) => viewElement.hasClass("ck-math-widget")),
     );
 
     // Keep a reference to the original get and set function.
@@ -412,54 +414,62 @@ export default class MathType extends Plugin {
     /**
      * Hack to transform $$latex$$ into <math> in editor.getData()'s output.
      */
-    editor.data.get = (options) => {
-      let output = get.bind(editor.data)(options);
-
-      // CKEditor 5 replaces all the time the &lt; and &gt; for < and >, which our render can't understand.
-      // We replace the values inserted for CKEditro5 to be able to render the formulas with the mentioned characters.
-      output = output.replaceAll('"<"', '"&lt;"')
-        .replaceAll('">"', '"&gt;"')
-        .replaceAll('><<', '>&lt;<');
-
-      // Ckeditor retrieves editor data and removes the image information on the formulas
-      // We transform all the retrieved data to images and then we Parse the data.
-      let imageFormula = Parser.initParse(output);
-      return Parser.endParse(imageFormula);
-    };
+    editor.data.on(
+      "get",
+      (e) => {
+        let output = e.return;
+
+        // CKEditor 5 replaces all the time the &lt; and &gt; for < and >, which our render can't understand.
+        // We replace the values inserted for CKEditor5 to be able to render the formulas with the mentioned characters.
+        output = output.replaceAll('"<"', '"&lt;"').replaceAll('">"', '"&gt;"').replaceAll("><<", ">&lt;<");
+
+        // Ckeditor retrieves editor data and removes the image information on the formulas
+        // We transform all the retrieved data to images and then we Parse the data.
+        let imageFormula = Parser.initParse(output);
+        e.return = Parser.endParse(imageFormula);
+      },
+      { priority: "low" },
+    );
 
     /**
-    * Hack to transform <math> with LaTeX into $$LaTeX$$ in editor.setData().
-    */
-    editor.data.set = (data) => {
-      // Retrieve the data to be set on the CKEditor.
-      let modifiedData = data;
-      // Regex to find all mathml formulas.
-      const regexp = /<math(.*?)<\/math>/gm;
-
-      // Get all MathML formulas and store them in an array.
-      // Using the conditional operator on data.main because the data patameter has different types depeding on:
-      //    editor.data.set can be used directly or by the source editing plugin.
-      //    With the source editor plugin, data is an object with the key `main` wich contains the source code string.
-      //    When using the editor.data.set method, the data is a string with the content to be set to the editor.
-      let formulas = Object.values(data)[0] ? [...Object.values(data)[0].matchAll(regexp)] : [...data.matchAll(regexp)];
-
-      // Loop to find LaTeX formulas and replace the MathML for the LaTeX notation.
-      formulas.forEach((formula) => {
-        let mathml = formula[0];
-        if (mathml.includes('encoding="LaTeX"')) { // LaTeX found.
-          let latex = '$$$' + Latex.getLatexFromMathML(mathml) + '$$$'; // We add $$$ instead of $$ because the replace function ignores one $.
-          modifiedData = modifiedData.replace(mathml, latex);
-        }
-      });
+     * Hack to transform <math> with LaTeX into $$LaTeX$$ in editor.setData().
+     */
+    editor.data.on(
+      "set",
+      (e, args) => {
+        // Retrieve the data to be set on the CKEditor.
+        let modifiedData = args[0];
+        // Regex to find all mathml formulas.
+        const regexp = /<math(.*?)<\/math>/gm;
+
+        // Get all MathML formulas and store them in an array.
+        // Using the conditional operator on data.main because the data parameter has different types depending on:
+        //    editor.data.set can be used directly or by the source editing plugin.
+        //    With the source editor plugin, data is an object with the key `main` which contains the source code string.
+        //    When using the editor.data.set method, the data is a string with the content to be set to the editor.
+        let formulas = Object.values(modifiedData)[0]
+          ? [...Object.values(modifiedData)[0].matchAll(regexp)]
+          : [...modifiedData.matchAll(regexp)];
+
+        // Loop to find LaTeX formulas and replace the MathML for the LaTeX notation.
+        formulas.forEach((formula) => {
+          let mathml = formula[0];
+          if (mathml.includes('encoding="LaTeX"')) {
+            // LaTeX found.
+            let latex = "$$$" + Latex.getLatexFromMathML(mathml) + "$$$"; // We add $$$ instead of $$ because the replace function ignores one $.
+            modifiedData = modifiedData.replace(mathml, latex);
+          }
+        });
 
-      // Run the setData code from CKEditor5 with the modified string.
-      set.bind(editor.data)(modifiedData);
-    };
+        args[0] = modifiedData;
+      },
+      { priority: "high" },
+    );
   }
 
   /**
-     * Expose the WirisPlugin variable to the window
-     */
+   * Expose the WirisPlugin variable to the window
+   */
   // eslint-disable-next-line class-methods-use-this
   _exposeWiris() {
     window.WirisPlugin = {