FEATURE Introducing dedicated external component

resources/js/singles/footnote-format.ts

@@ -0,0 +1,27 @@
+import {
+  scrollToFootnoteInIndexPanel,
+  toggleActiveTabPanel,
+  toggleActiveFootnoteLinkInIndexPanel,
+} from './index-panel';
+
+export default function handleFootnoteFormat(): void {
+  const footnotes = document.querySelectorAll('.content-area .footnote-reference');
+
+  footnotes.forEach((footnote) => {
+    const footnoteId = footnote.getAttribute('id');
+    if (!footnoteId) return;
+
+    footnote.addEventListener('click', () => {
+      toggleActiveTabPanel('footnotes');
+      scrollToFootnoteInIndexPanel(footnoteId);
+      toggleActiveFootnoteLinkInIndexPanel(footnoteId);
+    });
+  });
+}
+
+export function scrollToFootnote(footnoteId: string): void {
+  const footnote = document.querySelector(`a.footnote-reference#${footnoteId}`);
+  if (!footnote) return;
+
+  footnote.scrollIntoView({ behavior: 'smooth' });
+}