fix: preserves empty tags and [] in footnote body

littlefoot no longer strips `[]` and empty tags from the footnote body except those around the
reference backlink

fix #25

src/dom/index.ts

@@ -103,13 +103,19 @@ function hideOriginalFootnote([reference, body]: RefBody): RefBody {
   return [reference, body]
 }
 
+function unmountRecursive(element: HTMLElement) {
+  const parent = element.parentElement
+  unmount(element)
+  if (parent && !parent.innerHTML.trim().replace('[]', '')) {
+    unmountRecursive(parent)
+  }
+}
+
 function prepareTemplateData([reference, body]: RefBody, idx: number): RefData {
   const content = body.cloneNode(true) as HTMLElement
   queryAll<HTMLElement>(content, '[href$="#' + reference.id + '"]').forEach(
-    unmount
+    unmountRecursive
   )
-  content.innerHTML = content.innerHTML.trim().replace('[]', '')
-  queryAll<HTMLElement>(content, '*:empty').forEach(unmount)
 
   const data: TemplateData = {
     id: `${idx + 1}`,

test/fixtures/backlink.html

@@ -7,10 +7,9 @@
     <hr />
     <ol>
       <li id="fn:1">
-        <p>
-          <sup>[<a href="#fnref:1">1</a>]</sup>
-          This footnote has a backlink with a wrapping element.
-        </p>
+        <sup>[<a href="#fnref:1">1</a>]</sup>
+        <hr />
+        This footnote has a backlink wrapped in [] and an element.
       </li>
     </ol>
   </aside>

test/setup.test.ts

@@ -57,11 +57,22 @@ test('strips backlink and its enclosing tags from the footnote body', () => {
   expect(getPopover('1').querySelector('sup')).toBeNull()
 })
 
+test('preserves empty tags and square brackets elsewhere in the footnote body', () => {
+  setDocumentBody('backlink.html')
+  littlefoot({ activateDelay: 1 })
+  fireEvent.click(getButton('1'))
+  const content = getPopover('1').querySelector('.littlefoot-footnote__content')
+  expect(content.querySelector('hr')).not.toBeNull()
+  expect(content).toContainHTML(
+    `This footnote has a backlink wrapped in [] and an element.`
+  )
+})
+
 test('wraps bare footnote body in a paragraph tag', () => {
   setDocumentBody('barebody.html')
   littlefoot({ activateDelay: 1 })
   fireEvent.click(getButton('1'))
-  expect(getPopover('1').querySelector('p').innerHTML).toBe(
+  expect(getPopover('1').querySelector('p')).toContainHTML(
     'The original footnote body is bare.'
   )
 })