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
150 lines (149 loc) • 4.79 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 h = Object.defineProperty;
var l = (i, t, e) => t in i ? h(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
var p = (i, t, e) => l(i, typeof t != "symbol" ? t + "" : t, e);
import { PopupManager as o } from "../../../core/ui/PopupManager.mjs";
import { TemplatesList as r } from "./TemplatesList.mjs";
import { TemplateForm as n } from "./TemplateForm.mjs";
class w {
constructor(t, e) {
p(this, "popup");
p(this, "editor");
p(this, "manager");
p(this, "list");
p(this, "onSelect", null);
this.editor = e, this.manager = t, this.list = new r(
this.editor,
(s) => this.handleSelect(s),
(s) => this.showEditForm(s),
(s) => this.handleDelete(s)
), this.popup = this.createMainPopup(), this.updateContent();
}
createMainPopup() {
return new o(this.editor, {
title: this.editor.t("Templates"),
className: "templates-menu",
closeOnClickOutside: !0,
buttons: [
{
label: this.editor.t("New Template"),
variant: "primary",
onClick: () => this.showNewForm()
}
],
items: [
{
type: "custom",
id: "templates-content",
content: () => this.list.getElement()
}
]
});
}
updateContent() {
const t = this.manager.getTemplates();
this.list.setTemplates(t), this.popup.setContent(this.list.getElement());
}
showNewForm() {
this.popup.destroy();
const t = new n(this.editor, (e) => {
this.manager.saveTemplate(e), this.popup.destroy(), this.popup = this.createMainPopup(), this.updateContent(), this.popup.show();
});
this.popup = new o(this.editor, {
title: this.editor.t("New Template"),
className: "templates-menu",
closeOnClickOutside: !0,
buttons: [
{
label: this.editor.t("Cancel"),
variant: "secondary",
onClick: () => {
this.popup.destroy(), this.popup = this.createMainPopup(), this.updateContent(), this.popup.show();
}
},
{
label: this.editor.t("Save"),
variant: "primary",
onClick: () => {
const e = t.getElement().querySelector("form");
if (e) {
const s = new Event("submit", {
bubbles: !0,
cancelable: !0
});
e.dispatchEvent(s);
}
}
}
],
items: [
{
type: "custom",
id: "template-form",
content: () => t.getElement()
}
]
}), this.popup.show();
}
showEditForm(t) {
this.popup.destroy();
const e = new n(
this.editor,
(s) => {
this.manager.updateTemplate(t.id, s), this.popup.destroy(), this.popup = this.createMainPopup(), this.updateContent(), this.popup.show();
},
t
);
this.popup = new o(this.editor, {
title: this.editor.t("Edit Template"),
className: "templates-menu",
closeOnClickOutside: !0,
buttons: [
{
label: this.editor.t("Cancel"),
variant: "secondary",
onClick: () => {
this.popup.destroy(), this.popup = this.createMainPopup(), this.updateContent(), this.popup.show();
}
},
{
label: this.editor.t("Update"),
variant: "primary",
onClick: () => {
const s = e.getElement().querySelector("form");
if (s) {
const a = new Event("submit", {
bubbles: !0,
cancelable: !0
});
s.dispatchEvent(a);
}
}
}
],
items: [
{
type: "custom",
id: "template-form",
content: () => e.getElement()
}
]
}), this.popup.show();
}
handleSelect(t) {
var e;
(e = this.onSelect) == null || e.call(this, t), this.popup.hide();
}
handleDelete(t) {
confirm(this.editor.t("Are you sure you want to delete this template?")) && (this.manager.deleteTemplate(t.id), this.updateContent());
}
show(t) {
this.onSelect = t, this.popup && this.popup.destroy(), this.popup = this.createMainPopup(), this.updateContent(), this.popup.show();
}
destroy() {
this.popup && (this.popup.hide(), this.popup.destroy(), this.popup = null), this.list && (this.list.destroy(), this.list = null), this.editor = null, this.manager = null, this.onSelect = null;
}
}
export {
w as TemplatesMenu
};