fix: improved backlink reference detection

improved backlink reference detection

fix #25

src/dom/index.ts

@@ -12,7 +12,7 @@ type TemplateData = Readonly<{
   reference: string
 }>
 
-type RefBody = readonly [HTMLElement, HTMLElement]
+type RefBody = readonly [HTMLElement, string, HTMLElement]
 type RefData = readonly [HTMLElement, TemplateData]
 
 const CLASS_PRINT_ONLY = 'footnote-print-only'
@@ -69,7 +69,6 @@ function findRefBody(
   footnoteSelector: string
 ) {
   const processed: Element[] = []
-
   return (link: HTMLAnchorElement): RefBody | undefined => {
     const fragment = link.href.split('#')[1]
     const selector = '#' + fragment.replace(/[:.+~*[\]]/g, '\\$&')
@@ -80,8 +79,9 @@ function findRefBody(
 
     if (body) {
       processed.push(body)
-      const reference = link.closest(anchorParentSelector) as HTMLElement
-      return [reference || link, body]
+      const parent = link.closest(anchorParentSelector) as HTMLElement | null
+      const reference = parent || link
+      return [reference, reference.id ? reference.id : link.id, body]
     }
   }
 }
@@ -96,14 +96,14 @@ function hideFootnoteContainer(container: HTMLElement): void {
   }
 }
 
-function hideOriginalFootnote([reference, body]: RefBody): RefBody {
+function hideOriginalFootnote([reference, refId, body]: RefBody): RefBody {
   setPrintOnly(reference)
   setPrintOnly(body)
   hideFootnoteContainer(body.parentElement as HTMLElement)
-  return [reference, body]
+  return [reference, refId, body]
 }
 
-function unmountRecursive(element: HTMLElement) {
+function recursiveUnmount(element: HTMLElement) {
   const parent = element.parentElement
   unmount(element)
   const html =
@@ -113,20 +113,23 @@ function unmountRecursive(element: HTMLElement) {
       .replace('&nbsp;', ' ')
       .trim()
   if (parent && !html) {
-    unmountRecursive(parent)
+    recursiveUnmount(parent)
   }
 }
 
-function prepareTemplateData([reference, body]: RefBody, idx: number): RefData {
+function prepareTemplateData(
+  [reference, referenceId, body]: RefBody,
+  idx: number
+): RefData {
   const content = body.cloneNode(true) as HTMLElement
-  queryAll<HTMLElement>(content, '[href$="#' + reference.id + '"]').forEach(
-    unmountRecursive
+  queryAll<HTMLElement>(content, '[href$="#' + referenceId + '"]').forEach(
+    recursiveUnmount
   )
 
   const data: TemplateData = {
     id: `${idx + 1}`,
     number: idx + 1,
-    reference: reference.id,
+    reference: referenceId,
     content: content.innerHTML.startsWith('<')
       ? content.innerHTML
       : '<p>' + content.innerHTML + '</p>'

test/fixtures/backlink.html

@@ -3,6 +3,7 @@
     This paragraph is footnoted.
     <sup id="fnref:1"><a href="#fn:1">[1]</a></sup>
     <sup id="fnref:2"><a href="#fn:2">[2]</a></sup>
+    <sup><a href="#fn:3" id="fnref:3">[3]</a></sup>
   </p>
   <aside class="footnotes">
     <hr />
@@ -19,6 +20,12 @@
           whitespace.
         </p>
       </li>
+      <li id="fn:3">
+        <p>
+          <sup>[<a href="#fnref:3">3</a>]&nbsp;</sup>
+          This footnote's ID is provided by the link, not the link's wrapper.
+        </p>
+      </li>
     </ol>
   </aside>
 </article>

test/options/anchorParentSelector.test.ts

@@ -1,8 +1,16 @@
-import { setDocumentBody, queryAll } from '../helper'
+import { fireEvent } from '@testing-library/dom'
+import { setDocumentBody, queryAll, getButton, getPopover } from '../helper'
 import littlefoot from '../../src'
 
 test('hides original footnote anchor parent', () => {
   setDocumentBody('default.html')
   littlefoot({ anchorParentSelector: 'sup' })
   expect(queryAll('sup.footnote-print-only')).toHaveLength(4)
 })
+
+test('uses reference ID from the link', () => {
+  setDocumentBody('backlink.html')
+  littlefoot({ activateDelay: 1 })
+  fireEvent.click(getButton('3'))
+  expect(getPopover('3').querySelector('sup')).toBeNull()
+})