a11y-footnotes.min.js

!function(){"use strict";const t=(f,t)=>{let s=1;var e=document.createElement("style");function c(t,e,o){var n=t[o],t=t[o].querySelector("sup"),t=(t&&(t.textContent=`[${o+1}]`),n.href="#footnote-entry-"+(o+1),n.id=`footnote-entry-${o+1}-ref`,n.setAttribute("data-mce-href","#footnote-entry-"+(o+1)),n.setAttribute("aria-labelledby","#footnote-entry-footnote-"+(o+1)),e.id="footnote-entry-"+(o+1),e.querySelector('a[role="doc-backlink"]'));t&&(t.href=`#footnote-entry-${o+1}-ref`,t.setAttribute("data-mce-href",`#footnote-entry-${o+1}-ref`),t.setAttribute("aria-label",`="Back to content`))}function d(){var t=f.dom.select("ol");const o=f.dom.select('li[id^="footnote-"]');o.sort((t,e)=>{return parseInt(t.id.split("-").pop(),10)-parseInt(e.id.split("-").pop(),10)}),t.forEach(e=>{for(;e.firstChild;)e.removeChild(e.firstChild);o.forEach(t=>{e.appendChild(t)})})}function l(t,e){t[e].parentNode.removeChild(t[e])}e.type="text/css",e.appendChild(document.createTextNode(`
        .footnote-highlight {
            background-color: yellow !important;
        }
    `)),document.head.appendChild(e),f.ui.registry.addButton("a11y-footnotes",{icon:"custom-footnote-icon",tooltip:"Insert Footnote",onAction:()=>{const a=f.selection.getContent({format:"text"});a?f.windowManager.open({title:"Insert Footnote",body:{type:"panel",items:[{type:"input",name:"footnoteText",label:"Footnote Text"}]},buttons:[{type:"cancel",text:"Cancel"},{type:"submit",text:"Save",primary:!0}],onSubmit:function(t){var e=t.getData(),o=a,e=e.footnoteText,n="footnote-"+(new Date).getTime(),r=s++,o=`<span>${o}<a id="footnote-entry-${n}-ref" role="doc-noteref" aria-labelledby="footnote-entry-${n}" href="#footnote-entry-${n}"><sup>[${r}]</sup></a></span>`,r=`
            <li id="footnote-entry-${n}">
                <span contenteditable="true">${e}</span>
                <a role="doc-backlink" href="#footnote-entry-${n}-ref" aria-label="Back to content">↵</a>
            </li>`,l=(f.insertContent(o),(e=f.dom.select('section[role="doc-footnotes"] ol')[0])?e.innerHTML+=r:f.setContent(f.getContent()+`<hr /><section role="doc-footnotes" aria-label="footnotes" contenteditable="false">
                <h3 class="sr-only" id="footnotes-block-${n}">Footnotes</h3>
                <ol>${r.trim()}</ol>
            </section>`),f.dom.select('a[role="doc-noteref"]')),i=f.dom.select('li[id^="footnote-"]');if(l.length!==i.length)console.error("Mismatch between number of footnote references and footnotes");else{let t=l[0],o=i[i.length-1];if(t.href.endsWith("#"+o.id)){c(l,o,0);for(let t=1;t<l.length;t++)o=i[t-1],c(l,o,t);d()}else if(t=l[l.length-1],o=i[i.length-1],!t.href.endsWith("#"+o.id)){for(let e=0;e<l.length;e++)if(t=l[e],o=i[i.length-1],t.href.endsWith("#"+o.id)){c(l,o,e);for(let t=e+1;t<l.length;t++)o=i[t-1],c(l,o,t);break}d()}}t.close()}}):f.windowManager.alert("Please select a word or text to add a footnote.")}}),f.ui.registry.addIcon("custom-footnote-icon",'<img src="https://wittjeff.github.io/tinymce-accessible-footnotes-plugin/icons/footnote.svg" " style="height: 24px; width: 24px; display: block; margin-top: 3px;"/>'),f.on("input",function(){var n=f.dom.select('a[role="doc-noteref"]'),r=f.dom.select('li[id^="footnote-"]');if(n.length<r.length)if(0==n.length)l(r,0);else for(let o=0;o<r.length;o++){let e=n[o];var t=r[o];if(!e.href.endsWith("#"+t.id)){l(r,o);for(let t=o+1;o<r.length;t++)e=n[t],c(n,r[t],t-1);break}}})};tinymce.PluginManager.add("a11y-footnotes",t)}();