fix(editable-html): preserve existing spans on load and prevent unnecessary updates PIE-665

Author: andreeimiron

packages/editable-html-tip-tap/src/components/EditableHtml.jsx

@@ -334,7 +334,7 @@ export const EditableHtml = (props) => {
     const nextMarkup = normalizeInitialMarkup(props.markup);
 
     if (nextMarkup !== editor.getHTML()) {
-      editor.commands.setContent(nextMarkup, false);
+      editor.commands.setContent(nextMarkup, { emitUpdate: false });
     }
   }, [props.markup, editor]);
 

packages/editable-html-tip-tap/src/extensions/css.js

@@ -169,14 +169,27 @@ export const CSSMark = Mark.create({
   },
 
   parseHTML() {
-    // Any span with a class that matches one of allowed classes
+    // Any span with a class that matches one of allowed classes any span that carries a class attribute
+    // so that pre-existing spans are preserved when loading content
     return [
       {
         tag: 'span[class]',
         getAttrs: (el) => {
           const cls = el.getAttribute('class') || '';
-          const match = this.options.classes.find((name) => cls.includes(name));
-          return match ? { class: match } : false;
+
+          if (!cls) {
+            return false;
+          }
+
+          const allowedClasses = (this.options && this.options.classes) || [];
+
+          if (allowedClasses.length > 0) {
+            const match = this.options.classes.find((name) => cls.includes(name));
+
+            return match ? { class: match } : false;
+          }
+
+          return { class: cls };
         },
       },
     ];