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
111 lines (110 loc) • 4.27 kB
JavaScript
var m = Object.defineProperty;
var p = (s, t, o) => t in s ? m(s, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : s[t] = o;
var i = (s, t, o) => p(s, typeof t != "symbol" ? t + "" : t, o);
/* empty css */
/* empty css */
import { FootnoteManager as g } from "./services/FootnoteManager.mjs";
import { FootnoteMenu as F } from "./components/FootnoteMenu.mjs";
import { createToolbarButton as b } from "../ToolbarPlugin/utils.mjs";
import C from "../../icons/footnote.svg.mjs";
import { createSup as B, createContainer as E, createHr as L, createH as v, createOl as w, createLi as y, createP as S } from "../../utils/helpers.mjs";
class I {
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 g();
}
initialize(t) {
this.menu = new F(t), this.editor = t, this.addToolbarButton(), this.setupEventListeners(), this.editor.on("footnotes", () => {
this.insertFootnote();
});
}
addToolbarButton() {
var o;
const t = document.querySelector(".editor-toolbar");
t && (this.toolbarButton = b({
icon: C,
title: ((o = this.editor) == null ? void 0 : o.t("Insert Footnote")) ?? "",
onClick: () => this.insertFootnote()
}), t.appendChild(this.toolbarButton));
}
setupEventListeners() {
if (!this.editor) return;
this.editor.getContainer().addEventListener("click", (o) => {
const n = o.target.closest(".footnote-ref");
if (n instanceof HTMLElement) {
const e = n.getAttribute("data-footnote-id");
e && this.editFootnote(e);
}
});
}
insertFootnote() {
var o;
!this.editor || !window.getSelection() || (o = this.menu) == null || o.show((n) => {
const e = this.manager.createFootnote(n);
this.insertFootnoteReference(e.id), this.updateFootnotesList();
});
}
editFootnote(t) {
var n;
const o = this.manager.getFootnote(t);
o && ((n = this.menu) == null || n.show((e) => {
this.manager.updateFootnote(t, e), this.updateFootnotesList();
}, o.content));
}
insertFootnoteReference(t) {
if (!this.editor) return;
const o = B("footnote-ref");
o.className = "footnote-ref", o.setAttribute("data-footnote-id", t), o.textContent = `[${this.manager.getFootnoteNumber(t)}]`;
const n = window.getSelection();
if (n && n.rangeCount > 0) {
const e = n.getRangeAt(0);
e.deleteContents(), e.insertNode(o), e.collapse(!1);
}
}
updateFootnotesList() {
var d;
if (!this.editor) return;
const t = this.editor.getContainer(), o = t.querySelector(".footnotes-section");
o && o.remove();
const n = this.manager.getAllFootnotes();
if (n.length === 0) return;
const e = E();
e.className = "footnotes-section";
const r = L();
r.className = "my-8", e.appendChild(r);
const h = v("h2", "text-xl font-semibold mb-4", ((d = this.editor) == null ? void 0 : d.t("Footnotes")) ?? "");
e.appendChild(h);
const l = w("footnotes-list");
n.forEach((f) => {
const a = y();
a.id = `footnote-${f.id}`, f.content.split(/\r?\n/).filter((c) => c.trim()).forEach((c) => {
const u = S("footnote-line", c);
a.appendChild(u);
}), l.appendChild(a);
}), e.appendChild(l), t.appendChild(e);
}
destroy() {
var t;
if (this.editor && this.editor.getContainer().removeEventListener("click", (n) => {
const e = n.target.closest(".footnote-ref");
if (e instanceof HTMLElement) {
const r = e.getAttribute("data-footnote-id");
r && this.editFootnote(r);
}
}), this.toolbarButton && this.toolbarButton.parentElement && this.toolbarButton.parentElement.removeChild(this.toolbarButton), this.editor) {
const o = this.editor.getContainer().querySelector(".footnotes-section");
o && o.remove();
}
(t = this.editor) == null || t.off("footnotes"), this.editor = null, this.menu = null, this.toolbarButton = null, this.manager.destroy();
}
}
export {
I as FootnotesPlugin
};