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
186 lines (185 loc) • 7.85 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 v = Object.defineProperty;
var g = (d, e, t) => e in d ? v(d, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : d[e] = t;
var l = (d, e, t) => g(d, typeof e != "symbol" ? e + "" : e, t);
/* empty css */
/* empty css */
import { CalendarMenu as E } from "./components/CalendarMenu.mjs";
import { CalendarManager as b } from "./services/CalendarManager.mjs";
import { createToolbarButton as w } from "../ToolbarPlugin/utils.mjs";
import y from "../../icons/calendar.svg.mjs";
import { CalendarContextMenu as M } from "./components/CalendarContextMenu.mjs";
import { createLineBreak as k } from "../../utils/helpers.mjs";
class F {
constructor() {
l(this, "name", "calendar");
l(this, "hotkeys", [
{ keys: "Ctrl+Alt+L", description: "Insert calendar", command: "calendar", icon: "📅" }
]);
l(this, "editor", null);
l(this, "menu", null);
l(this, "manager");
l(this, "toolbarButton", null);
l(this, "contextMenu", null);
this.manager = new b();
}
initialize(e) {
this.menu = new E(this.manager, e, () => this.showImportDialog()), this.editor = e, this.contextMenu = new M(e, this.handleContextMenuAction.bind(this)), this.addToolbarButton(), this.setupEventListeners(), this.editor.on("calendar", () => {
this.showCalendarMenu();
});
}
addToolbarButton() {
var t, n;
const e = (t = this.editor) == null ? void 0 : t.getToolbar();
e && (this.toolbarButton = w({
icon: y,
title: (n = this.editor) == null ? void 0 : n.t("Calendar"),
onClick: () => this.showCalendarMenu()
}), e.appendChild(this.toolbarButton));
}
setupEventListeners() {
if (!this.editor) return;
const e = this.editor.getContainer();
e.addEventListener("click", this.handleCalendarClick.bind(this)), e.addEventListener("contextmenu", this.handleContextMenu.bind(this));
}
handleCalendarClick(e) {
var r;
const t = e.target.closest(".calendar-event");
if (!t) return;
e.preventDefault();
const n = t.getAttribute("data-event-id");
if (!n) return;
const i = this.manager.getEvent(n);
i && ((r = this.menu) == null || r.showEditEvent(i, () => this.refreshCalendar()));
}
handleContextMenu(e) {
var i, r;
const t = e.target.closest(".calendar-widget"), n = e.target.closest(".calendar-event");
if (t instanceof HTMLElement) {
e.preventDefault();
const a = t.getAttribute("data-calendar-id"), o = a ? this.manager.getCalendar(a) : null;
o && ((i = this.contextMenu) == null || i.show(o, e.clientX, e.clientY));
} else if (n instanceof HTMLElement) {
e.preventDefault();
const a = n.getAttribute("data-event-id"), o = a ? this.manager.getEvent(a) : null;
o && ((r = this.contextMenu) == null || r.show(o, e.clientX, e.clientY));
}
}
handleContextMenuAction(e, t) {
var i, r, a, o, s, c, h, u, m, f, p;
const n = () => this.refreshCalendar();
if ("events" in t)
switch (e) {
case "add-event":
(i = this.menu) == null || i.showCreateEvent(t.id, n);
break;
case "edit-calendar":
(r = this.menu) == null || r.showEditCalendarForm(t);
break;
case "copy-calendar":
try {
this.manager.copyCalendar(t.id), (o = this.editor) == null || o.showSuccessNotification(
((a = this.editor) == null ? void 0 : a.t("Calendar copied successfully")) || "Calendar copied successfully"
), this.refreshCalendar();
} catch {
(c = this.editor) == null || c.showErrorNotification(
((s = this.editor) == null ? void 0 : s.t("Failed to copy calendar")) || "Failed to copy calendar"
);
}
break;
case "export-calendar":
this.showExportDialog(t);
break;
case "import-calendar":
this.showImportDialog();
break;
case "delete-calendar":
this.manager.deleteCalendar(t.id), this.refreshCalendar();
break;
}
else
switch (e) {
case "edit-event":
(h = this.menu) == null || h.showEditEvent(t, n);
break;
case "copy-event":
try {
this.manager.copyEvent(t.id), (m = this.editor) == null || m.showSuccessNotification(
((u = this.editor) == null ? void 0 : u.t("Event copied successfully")) || "Event copied successfully"
), this.refreshCalendar();
} catch {
(p = this.editor) == null || p.showErrorNotification(
((f = this.editor) == null ? void 0 : f.t("Failed to copy event")) || "Failed to copy event"
);
}
break;
case "delete-event":
this.manager.deleteEvent(t.id), this.refreshCalendar();
break;
}
}
showCalendarMenu() {
var t;
if (!this.editor) return;
const e = this.editor.saveCursorPosition();
(t = this.menu) == null || t.show((n) => {
this.editor && (e && this.editor.restoreCursorPosition(e), this.insertCalendar(n));
});
}
insertCalendar(e) {
if (!this.editor) return;
const t = this.manager.generateCalendarHTML(e);
this.editor.insertContent(t), this.editor.insertContent(k());
}
refreshCalendar() {
var t;
const e = (t = this.editor) == null ? void 0 : t.getContainer().querySelectorAll(".calendar-widget");
e == null || e.forEach((n) => {
const i = n.getAttribute("data-calendar-id");
if (!i) return;
const r = this.manager.getCalendar(i);
if (!r) return;
const a = this.manager.generateCalendarHTML(r), o = document.createElement("div");
o.innerHTML = a;
const s = o.firstElementChild;
s && n.parentNode && n.parentNode.replaceChild(s, n);
});
}
showExportDialog(e) {
var t;
try {
const n = JSON.stringify(e, null, 2), i = new Blob([n], { type: "application/json" }), r = URL.createObjectURL(i), a = document.createElement("a");
a.href = r, a.download = `calendar-${e.id}.json`, a.click(), URL.revokeObjectURL(r);
} catch {
(t = this.editor) == null || t.showErrorNotification(this.editor.t("Export failed") || "Export failed");
}
}
showImportDialog() {
const e = document.createElement("input");
e.type = "file", e.accept = ".json", e.onchange = (t) => {
var i;
const n = (i = t.target.files) == null ? void 0 : i[0];
if (n) {
const r = new FileReader();
r.onload = (a) => {
var o, s, c, h, u;
try {
const m = JSON.parse((o = a.target) == null ? void 0 : o.result);
this.manager.importCalendar(m), (c = this.editor) == null || c.showSuccessNotification(
((s = this.editor) == null ? void 0 : s.t("Calendar imported successfully")) || "Calendar imported successfully"
), this.refreshCalendar();
} catch {
(u = this.editor) == null || u.showErrorNotification(((h = this.editor) == null ? void 0 : h.t("Import failed")) || "Import failed");
}
}, r.readAsText(n);
}
}, e.click();
}
destroy() {
var e;
this.toolbarButton && this.toolbarButton.parentElement && this.toolbarButton.parentElement.removeChild(this.toolbarButton), this.menu && (this.menu.destroy(), this.menu = null), this.contextMenu && (this.contextMenu.destroy(), this.contextMenu = null), (e = this.editor) == null || e.off("calendar"), this.editor = null, this.manager = null, this.toolbarButton = null;
}
}
export {
F as CalendarPlugin
};