fix: DomPurify replacing undesired tags

CHANGES.md

@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Last release of this project is was 30th of September 2021.
 
+### [Unreleased]
+
+  - fix: DomPurify replacing undesired characters. KB-39549
+
 ### 8.6.0 2023-10-10
 
   - Feat: Add branch name and commit hash to demo page

packages/ckeditor5/src/plugin.js

@@ -257,6 +257,14 @@ export default class MathType extends Plugin {
       // And obtain the complete formula
       formula = Util.htmlSanitize(`<math${mathAttributes}>${formula}</math>`);
 
+      // Replaces the < & > characters to its HTMLEntity to avoid render issues.
+      formula = formula.split('"<"').join('"&lt;"')
+        .split('">"')
+        .join('"&gt;"')
+        .split('><<')
+        .join('>&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 "$$...$$" */

packages/devkit/src/util.js

@@ -404,7 +404,7 @@ export default class Util {
     // Get all the annotation content including the tags.
     let annotation = html.match(annotationRegex);
     // Sanitize html code without removing the <semantics> and <annotation> tags.
-    html = DOMPurify.sanitize(html, { ADD_TAGS: ['semantics', 'annotation'], ALLOWED_ATTR: ['mathvariant', 'class', 'linebreak']});
+    html = DOMPurify.sanitize(html, { ADD_TAGS: ['semantics', 'annotation'], ALLOWED_ATTR: ['mathvariant', 'class', 'linebreak', 'open', 'close']});
     // Readd old annotation content.
     return html.replace(annotationRegex, annotation);
   }