on-codemerge
Version:
A WYSIWYG editor for on-codemerge is a user-friendly interface that allows users to edit and view their code in real time, exactly as it will appear in the final product
2 lines (1 loc) • 3.46 kB
JavaScript
"use strict";var m=Object.defineProperty;var p=(r,t,e)=>t in r?m(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e;var i=(r,t,e)=>p(r,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const F=require("./services/FootnoteManager.cjs"),b=require("./components/FootnoteMenu.cjs"),C=require("../ToolbarPlugin/utils.cjs"),B=require("../../icons/footnote.svg.cjs"),s=require("../../utils/helpers.cjs");class q{constructor(){i(this,"name","footnotes");i(this,"hotkeys",[{keys:"Ctrl+Alt+N",description:"Insert footnote",command:"footnotes",icon:"👣"}]);i(this,"editor",null);i(this,"manager");i(this,"menu",null);i(this,"toolbarButton",null);this.manager=new F.FootnoteManager}initialize(t){this.menu=new b.FootnoteMenu(t),this.editor=t,this.addToolbarButton(),this.setupEventListeners(),this.editor.on("footnotes",()=>{this.insertFootnote()})}addToolbarButton(){var e;const t=document.querySelector(".editor-toolbar");t&&(this.toolbarButton=C.createToolbarButton({icon:B.default,title:((e=this.editor)==null?void 0:e.t("Insert Footnote"))??"",onClick:()=>this.insertFootnote()}),t.appendChild(this.toolbarButton))}setupEventListeners(){if(!this.editor)return;this.editor.getContainer().addEventListener("click",e=>{const n=e.target.closest(".footnote-ref");if(n instanceof HTMLElement){const o=n.getAttribute("data-footnote-id");o&&this.editFootnote(o)}})}insertFootnote(){var e;!this.editor||!window.getSelection()||(e=this.menu)==null||e.show(n=>{const o=this.manager.createFootnote(n);this.insertFootnoteReference(o.id),this.updateFootnotesList()})}editFootnote(t){var n;const e=this.manager.getFootnote(t);e&&((n=this.menu)==null||n.show(o=>{this.manager.updateFootnote(t,o),this.updateFootnotesList()},e.content))}insertFootnoteReference(t){if(!this.editor)return;const e=s.createSup("footnote-ref");e.className="footnote-ref",e.setAttribute("data-footnote-id",t),e.textContent=`[${this.manager.getFootnoteNumber(t)}]`;const n=window.getSelection();if(n&&n.rangeCount>0){const o=n.getRangeAt(0);o.deleteContents(),o.insertNode(e),o.collapse(!1)}}updateFootnotesList(){var u;if(!this.editor)return;const t=this.editor.getContainer(),e=t.querySelector(".footnotes-section");e&&e.remove();const n=this.manager.getAllFootnotes();if(n.length===0)return;const o=s.createContainer();o.className="footnotes-section";const a=s.createHr();a.className="my-8",o.appendChild(a);const h=s.createH("h2","text-xl font-semibold mb-4",((u=this.editor)==null?void 0:u.t("Footnotes"))??"");o.appendChild(h);const d=s.createOl("footnotes-list");n.forEach(f=>{const c=s.createLi();c.id=`footnote-${f.id}`,f.content.split(/\r?\n/).filter(l=>l.trim()).forEach(l=>{const g=s.createP("footnote-line",l);c.appendChild(g)}),d.appendChild(c)}),o.appendChild(d),t.appendChild(o)}destroy(){var t;if(this.editor&&this.editor.getContainer().removeEventListener("click",n=>{const o=n.target.closest(".footnote-ref");if(o instanceof HTMLElement){const a=o.getAttribute("data-footnote-id");a&&this.editFootnote(a)}}),this.toolbarButton&&this.toolbarButton.parentElement&&this.toolbarButton.parentElement.removeChild(this.toolbarButton),this.editor){const e=this.editor.getContainer().querySelector(".footnotes-section");e&&e.remove()}(t=this.editor)==null||t.off("footnotes"),this.editor=null,this.menu=null,this.toolbarButton=null,this.manager.destroy()}}exports.FootnotesPlugin=q;