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
113 lines (112 loc) • 4.63 kB
JavaScript
/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
var u = Object.defineProperty;
var p = (r, t, o) => t in r ? u(r, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[t] = o;
var s = (r, t, o) => p(r, 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 x, createLi as T, createP as y } from "../../utils/helpers.mjs";
class q {
constructor() {
s(this, "name", "footnotes");
s(this, "hotkeys", [
{ keys: "Ctrl+Alt+X", description: "Insert footnote", command: "footnotes", icon: "👣" }
]);
s(this, "editor", null);
s(this, "manager");
s(this, "menu", null);
s(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, e;
const t = (o = this.editor) == null ? void 0 : o.getToolbar();
t && (this.toolbarButton = b({
icon: C,
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", (o) => {
const e = o.target.closest(".footnote-ref");
if (e instanceof HTMLElement) {
const n = e.getAttribute("data-footnote-id");
n && this.editFootnote(n);
}
});
}
insertFootnote() {
var o, e;
!this.editor || !((o = this.editor.getTextFormatter()) != null && o.getSelection()) || (e = this.menu) == null || e.show((n) => {
const i = this.manager.createFootnote(n);
this.insertFootnoteReference(i.id), this.updateFootnotesList();
});
}
editFootnote(t) {
var e;
const o = this.manager.getFootnote(t);
o && ((e = this.menu) == null || e.show((n) => {
this.manager.updateFootnote(t, n), this.updateFootnotesList();
}, o.content));
}
insertFootnoteReference(t) {
var n;
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 e = (n = this.editor.getTextFormatter()) == null ? void 0 : n.getSelection();
if (e && e.rangeCount > 0) {
const i = e.getRangeAt(0);
i.deleteContents(), i.insertNode(o), i.collapse(!1);
}
}
updateFootnotesList() {
var d;
if (!this.editor) return;
const t = this.editor.getContainer(), o = t.querySelector(".footnotes-section");
o && o.remove();
const e = this.manager.getAllFootnotes();
if (e.length === 0) return;
const n = E();
n.className = "footnotes-section";
const i = L();
i.className = "my-8", n.appendChild(i);
const h = v("h2", "text-xl font-semibold mb-4", ((d = this.editor) == null ? void 0 : d.t("Footnotes")) ?? "");
n.appendChild(h);
const l = x("footnotes-list");
e.forEach((f) => {
const a = T();
a.id = `footnote-${f.id}`, f.content.split(/\r?\n/).filter((c) => c.trim()).forEach((c) => {
const m = y("footnote-line", c);
a.appendChild(m);
}), l.appendChild(a);
}), n.appendChild(l), t.appendChild(n);
}
destroy() {
var t;
if (this.editor && this.editor.getContainer().removeEventListener("click", (e) => {
const n = e.target.closest(".footnote-ref");
if (n instanceof HTMLElement) {
const i = n.getAttribute("data-footnote-id");
i && this.editFootnote(i);
}
}), 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 {
q as FootnotesPlugin
};