@wiris/mathtype-ckeditor5 8.13.3 → 8.14.0

package/src/plugin.js

@@ -306,57 +306,80 @@ export default class MathType extends Plugin {
     });
 
     // Data view -> Model
-    editor.data.upcastDispatcher.on("element:img", (evt, data, conversionApi) => {
-      const { consumable, writer } = conversionApi;
-      const { viewItem } = data;
+    editor.data.upcastDispatcher.on(
+      "element:img",
+      (evt, data, conversionApi) => {
+        const { consumable, writer } = conversionApi;
+        const { viewItem } = data;
+
+        // Only upcast when is wiris formula
+        if (viewItem.getClassNames().next().value !== "Wirisformula") {
+          return;
+        }
 
-      // Only upcast when is wiris formula
-      if (viewItem.getClassNames().next().value !== "Wirisformula") {
-        return;
-      }
+        //  The following code ensures that the element's name, attributes, and classes are consumed.
+        // This means that they are marked as handled so that other parts of the system or plugins don't process them again.
 
-      const mathAttributes = [...viewItem.getAttributes()].map(([key, value]) => ` ${key}="${value}"`).join("");
-      const htmlContent = Util.htmlSanitize(`<img${mathAttributes}>`);
+        // Check if we can consume the element name.
+        if (!consumable.test(viewItem, { name: true })) {
+          return;
+        }
 
-      const modelNode = writer.createElement("mathml", { htmlContent });
+        // Consume the name, attributes, and classes so nothing else processes it.
+        consumable.consume(viewItem, { name: true });
+        for (const attrName of viewItem.getAttributes()) {
+          consumable.consume(viewItem, { attributes: [attrName] });
+        }
 
-      // 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
-      // then split nodes to allowed parent.
-      const splitResult = conversionApi.splitToAllowedParent(modelNode, data.modelCursor);
+        for (const className of viewItem.getClassNames()) {
+          consumable.consume(viewItem, { classes: [className] });
+        }
 
-      // When there is no split result it means that we can't insert element to model tree, so let's skip it.
-      if (!splitResult) {
-        return;
-      }
+        const mathAttributes = [...viewItem.getAttributes()].map(([key, value]) => ` ${key}="${value}"`).join("");
+        const htmlContent = Util.htmlSanitize(`<img${mathAttributes}>`);
 
-      // Insert element on allowed position.
-      conversionApi.writer.insert(modelNode, splitResult.position);
+        const modelNode = writer.createElement("mathml", { htmlContent });
 
-      // Consume appropriate value from consumable values list.
-      consumable.consume(viewItem, { name: true });
+        // 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
+        // then split nodes to allowed parent.
+        const splitResult = conversionApi.splitToAllowedParent(modelNode, data.modelCursor);
 
-      const parts = conversionApi.getSplitParts(modelNode);
+        // When there is no split result it means that we can't insert element to model tree, so let's skip it.
+        if (!splitResult) {
+          return;
+        }
 
-      // Set conversion result range.
-      data.modelRange = writer.createRange(
-        conversionApi.writer.createPositionBefore(modelNode),
-        conversionApi.writer.createPositionAfter(parts[parts.length - 1]),
-      );
+        // Insert element on allowed position.
+        conversionApi.writer.insert(modelNode, splitResult.position);
 
-      // Now we need to check where the `modelCursor` should be.
-      if (splitResult.cursorParent) {
-        // If we split parent to insert our element then we want to continue conversion in the new part of the split parent.
-        //
-        // before: <allowed><notAllowed>foo[]</notAllowed></allowed>
-        // after:  <allowed><notAllowed>foo</notAllowed><converted></converted><notAllowed>[]</notAllowed></allowed>
+        // Consume appropriate value from consumable values list.
+        consumable.consume(viewItem, { name: true });
 
-        data.modelCursor = conversionApi.writer.createPositionAt(splitResult.cursorParent, 0);
-      } else {
-        // Otherwise just continue after inserted element.
-        data.modelCursor = data.modelRange.end;
-      }
-    });
+        const parts = conversionApi.getSplitParts(modelNode);
+
+        // Set conversion result range.
+        data.modelRange = writer.createRange(
+          conversionApi.writer.createPositionBefore(modelNode),
+          conversionApi.writer.createPositionAfter(parts[parts.length - 1]),
+        );
+
+        // Now we need to check where the `modelCursor` should be.
+        if (splitResult.cursorParent) {
+          // If we split parent to insert our element then we want to continue conversion in the new part of the split parent.
+          //
+          // before: <allowed><notAllowed>foo[]</notAllowed></allowed>
+          // after:  <allowed><notAllowed>foo</notAllowed><converted></converted><notAllowed>[]</notAllowed></allowed>
+
+          data.modelCursor = conversionApi.writer.createPositionAt(splitResult.cursorParent, 0);
+        } else {
+          // Otherwise just continue after inserted element.
+          data.modelCursor = data.modelRange.end;
+        }
+      },
+      // Ensures MathType processes the Wiris formulas before other plugins, preventing conflicts.
+      { priority: "high" },
+    );
 
     /**
      * Whether the given view <math> element has a LaTeX annotation element.