MWPW-142894: fragments can lead to invalid html

libs/blocks/fragment/fragment.js

@@ -63,6 +63,14 @@ export default async function init(a) {
   let relHref = localizeLink(a.href);
   let inline = false;
 
+  if (a.parentElement?.nodeName === 'P') {
+    const children = a.parentElement.childNodes;
+    const div = createTag('div');
+    for (const attr of a.parentElement.attributes) div.setAttribute(attr.name, attr.value);
+    a.parentElement.replaceWith(div);
+    div.append(...children);
+  }
+
   if (a.href.includes('#_inline')) {
     inline = true;
     a.href = a.href.replace('#_inline', '');

libs/blocks/global-navigation/utilities/utilities.js

@@ -315,15 +315,7 @@ export async function fetchAndProcessPlainHtml({ url, shouldDecorateLinks = true
   const inlineFrags = [...body.querySelectorAll('a[href*="#_inline"]')];
   if (inlineFrags.length) {
     const { default: loadInlineFrags } = await import('../../fragment/fragment.js');
-
     const fragPromises = inlineFrags.map((link) => {
-      // Replacing paragraphs should happen in the fragment module
-      // https://jira.corp.adobe.com/browse/MWPW-141039
-      if (link.parentElement && link.parentElement.nodeName === 'P') {
-        const div = document.createElement('div');
-        link.parentElement.replaceWith(div);
-        div.appendChild(link);
-      }
       link.href = getFederatedUrl(link.href);
       return loadInlineFrags(link);
     });

test/blocks/fragment/fragment.test.js

@@ -95,4 +95,23 @@ describe('Fragments', () => {
     const pic = document.querySelector('picture.frag-image');
     expect(pic.classList.contains('decorated')).to.be.true;
   });
+
+  it('only valid HTML should exist after resolving the fragments', async () => {
+    const { body } = new DOMParser().parseFromString(await readFile({ path: './mocks/body.html' }), 'text/html');
+    for (const a of body.querySelectorAll('a[href*="/fragment"]')) await getFragment(a);
+    const innerHtml = body.innerHTML;
+    // eslint-disable-next-line
+    body.innerHTML = body.innerHTML; // after reassignment, the parser guarantees the presence of only valid HTML
+    expect(innerHtml).to.equal(body.innerHTML);
+  });
+
+  it('should transfer all attributes when replacing a paragraph parent with a div parent', async () => {
+    const a = document.querySelector('a.frag-p');
+    const { attributes } = a.parentElement;
+    await getFragment(a);
+    const wrapper = document.querySelector('.frag-p-wrapper');
+    for (const attr of attributes) {
+      expect(wrapper.getAttribute(attr.name)).to.equal(attr.value);
+    }
+  });
 });

test/blocks/fragment/mocks/body.html

@@ -6,6 +6,9 @@
 <a class="parent-link" href="/test/blocks/fragment/mocks/fragments/fragment">Fragment</a>
 <a class="frag-a" href="/test/blocks/fragment/mocks/fragments/frag-a">Fragment</a>
 <a class="frag-image" href="/test/blocks/fragment/mocks/fragments/frag-image">Fragment</a>
+<p class="frag-p-wrapper" test="test">
+  <a class="frag-p" href="/test/blocks/fragment/mocks/fragments/frag-p">Fragment</a>
+</p>
 <div class="parent"></div>
 <div class="marquee-section">
   <div>

test/blocks/fragment/mocks/fragments/frag-p.plain.html

@@ -0,0 +1,7 @@
+<div>
+  <ul>
+    <li>List item</li>  
+    <li>List item</li>  
+    <li>List item</li>  
+  </ul>
+</div>

test/utils/utils.test.js

@@ -97,14 +97,14 @@ describe('Utils', () => {
       it('Does not unwrap when sibling content present', () => {
         const fragments = document.querySelectorAll('.link-block.fragment');
         utils.decorateAutoBlock(fragments[1]);
-        expect(fragments[1].parentElement.nodeName).to.equal('P');
+        expect(fragments[1].parentElement.nodeName).to.equal('DIV');
         expect(fragments[1].parentElement.textContent).to.contain('My sibling');
       });
 
       it('Does not unwrap when not in paragraph tag', () => {
         const fragments = document.querySelectorAll('.link-block.fragment');
         utils.decorateAutoBlock(fragments[1]);
-        expect(fragments[1].parentElement.nodeName).to.equal('P');
+        expect(fragments[1].parentElement.nodeName).to.equal('DIV');
         expect(fragments[1].parentElement.textContent).to.contain('My sibling');
       });
     });