fix: keep content if no main found in html (#85)

Author: kptdobe

src/collab.js

@@ -148,65 +148,69 @@ export function aem2doc(html, ydoc) {
     html = EMPTY_DOC;
   }
   const tree = fromHtml(html, { fragment: true });
-  const main = tree.children.find((child) => child.tagName === 'main') || { children: [] };
-  fixImageLinks(main);
-  removeComments(main);
-  (main.children || []).forEach((parent) => {
-    if (parent.tagName === 'div' && parent.children) {
-      const children = [];
-      let modified = false;
-      parent.children.forEach((child) => {
-        if (child.tagName === 'div' && child.properties.className?.length > 0) {
-          modified = true;
-          blockToTable(child, children);
-        } else if (child.tagName === 'da-loc-deleted' || child.tagName === 'da-loc-added') {
-          modified = true;
-          const locChildren = [];
-          child.children.forEach((locChild) => {
-            if (locChild.tagName === 'div' && locChild.properties.className?.length > 0) {
-              blockToTable(locChild, locChildren);
-            } else {
-              locChildren.push(locChild);
-            }
-          });
+  const main = tree.children.find((child) => child.tagName === 'main');
+  console.log('tree', tree);
+  console.log('main', main);
+  if (main) {
+    fixImageLinks(main);
+    removeComments(main);
+    (main.children || []).forEach((parent) => {
+      if (parent.tagName === 'div' && parent.children) {
+        const children = [];
+        let modified = false;
+        parent.children.forEach((child) => {
+          if (child.tagName === 'div' && child.properties.className?.length > 0) {
+            modified = true;
+            blockToTable(child, children);
+          } else if (child.tagName === 'da-loc-deleted' || child.tagName === 'da-loc-added') {
+            modified = true;
+            const locChildren = [];
+            child.children.forEach((locChild) => {
+              if (locChild.tagName === 'div' && locChild.properties.className?.length > 0) {
+                blockToTable(locChild, locChildren);
+              } else {
+                locChildren.push(locChild);
+              }
+            });
+            // eslint-disable-next-line no-param-reassign
+            child.children = locChildren;
+            children.push(child);
+          } else {
+            children.push(child);
+          }
+        });
+        if (modified) {
           // eslint-disable-next-line no-param-reassign
-          child.children = locChildren;
-          children.push(child);
-        } else {
-          children.push(child);
+          parent.children = children;
         }
-      });
-      if (modified) {
-        // eslint-disable-next-line no-param-reassign
-        parent.children = children;
       }
-    }
-  });
-  convertSectionBreak(main);
-  let count = 0;
-  main.children = main.children.flatMap((node) => {
-    const result = [];
-    if (node.tagName === 'div') {
-      if (count > 0) {
-        result.push({
-          type: 'element', tagName: 'p', children: [], properties: {},
-        });
-        result.push({
-          type: 'element', tagName: 'hr', children: [], properties: {},
-        });
-        result.push({
-          type: 'element', tagName: 'p', children: [], properties: {},
-        });
-        result.push(...node.children);
+    });
+    convertSectionBreak(main);
+    let count = 0;
+    main.children = main.children.flatMap((node) => {
+      const result = [];
+      if (node.tagName === 'div') {
+        if (count > 0) {
+          result.push({
+            type: 'element', tagName: 'p', children: [], properties: {},
+          });
+          result.push({
+            type: 'element', tagName: 'hr', children: [], properties: {},
+          });
+          result.push({
+            type: 'element', tagName: 'p', children: [], properties: {},
+          });
+          result.push(...node.children);
+        } else {
+          result.push(node);
+        }
+        count += 1;
       } else {
         result.push(node);
       }
-      count += 1;
-    } else {
-      result.push(node);
-    }
-    return result;
-  });
+      return result;
+    });
+  }
   const handler2 = {
     get(target, prop) {
       const source = target;
@@ -277,7 +281,7 @@ export function aem2doc(html, ydoc) {
     },
   };
 
-  const json = DOMParser.fromSchema(getSchema()).parse(new Proxy(main, handler2));
+  const json = DOMParser.fromSchema(getSchema()).parse(new Proxy(main || tree, handler2));
   prosemirrorToYXmlFragment(json, ydoc.getXmlFragment('prosemirror'));
 }
 

test/collab.test.js

@@ -595,12 +595,12 @@ assert.equal(result, html);
     assert.equal(collapseWhitespace(result), collapseWhitespace(EMPTY_DOC));
   });
 
-  it('can parse no main', async () => {
-    const html = '<body><header></header><footer></footer></body>';
+  it('can parse no main - results should remain unchanged - doc2aem wraps content into main', async () => {
+    const html = '<body><div><p>Hello</p></div><footer><p>World</p></footer></body>';
     const yDoc = new Y.Doc();
     aem2doc(html, yDoc);
     const result = doc2aem(yDoc);
-    assert.equal(collapseWhitespace(result), collapseWhitespace(EMPTY_DOC));
+    assert.equal(collapseWhitespace(result), collapseWhitespace('<body><header></header><main><div><p>Hello</p><p>World</p></div></main><footer></footer></body>'));
   });
 });