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
93 lines (92 loc) • 4.31 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 b = Object.defineProperty;
var C = (h, e, s) => e in h ? b(h, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : h[e] = s;
var t = (h, e, s) => C(h, typeof e != "symbol" ? e + "" : e, s);
import { PopupManager as u } from "../../../core/ui/PopupManager.mjs";
import { createContainer as o, createLabel as g, createInputField as k, createSpan as x } from "../../../utils/helpers.mjs";
class L {
constructor(e) {
t(this, "editor");
t(this, "popup");
t(this, "selectedRows", 0);
t(this, "selectedCols", 0);
t(this, "hasHeader", !1);
t(this, "callback", null);
// Ссылки на элементы
t(this, "grid", null);
t(this, "label", null);
t(this, "headerCheckbox", null);
t(this, "handleGridMouseMove", (e) => {
const s = e.target, i = Array.from(this.grid.children), a = i.indexOf(s);
if (a >= 0) {
const l = Math.floor(a / 10), r = a % 10;
this.selectedRows = l + 1, this.selectedCols = r + 1, i.forEach((n, d) => {
const c = Math.floor(d / 10), p = d % 10;
n.classList.toggle(
"selected",
c < this.selectedRows && p < this.selectedCols
);
}), this.label.textContent = `${this.selectedRows} x ${this.selectedCols}`;
}
});
t(this, "handleGridMouseLeave", () => {
Array.from(this.grid.children).forEach((s) => s.classList.remove("selected")), this.label.textContent = "0 x 0";
});
t(this, "handleGridClick", () => {
var e;
this.selectedRows > 0 && this.selectedCols > 0 && ((e = this.callback) == null || e.call(this, {
rows: this.selectedRows,
cols: this.selectedCols,
hasHeader: this.hasHeader
}), this.popup.hide());
});
t(this, "handleHeaderCheckboxChange", (e) => {
this.hasHeader = e.target.checked;
});
this.editor = e, this.popup = new u(e, {
title: e.t("Insert Table"),
className: "table-popup",
closeOnClickOutside: !0,
buttons: [
{
label: e.t("Cancel"),
variant: "secondary",
onClick: () => this.popup.hide()
}
],
items: [
{
type: "custom",
id: "table-content",
content: () => this.createContent()
}
]
});
}
createContent() {
const e = o("p-4"), s = o("table-options mb-4"), i = g("label");
i.className = "flex items-center gap-2", this.headerCheckbox = k("checkbox", "", "", () => {
var l;
this.hasHeader = ((l = this.headerCheckbox) == null ? void 0 : l.checked) ?? !1;
}), this.headerCheckbox.className = "table-option-checkbox", this.headerCheckbox.id = "tableHeader";
const a = x("table-option-label", this.editor.t("Include header row"));
i.appendChild(this.headerCheckbox), i.appendChild(a), s.appendChild(i), this.grid = o("table-size-grid");
for (let l = 0; l < 100; l++) {
const r = o("grid-cell");
this.grid.appendChild(r);
}
return this.label = o("text-sm text-gray-600 mt-2", "0 x 0"), e.appendChild(s), e.appendChild(this.grid), e.appendChild(this.label), this.setupEventListeners(), e;
}
setupEventListeners() {
!this.grid || !this.label || !this.headerCheckbox || (this.grid.addEventListener("mousemove", this.handleGridMouseMove), this.grid.addEventListener("mouseleave", this.handleGridMouseLeave), this.grid.addEventListener("click", this.handleGridClick), this.headerCheckbox.addEventListener("change", this.handleHeaderCheckboxChange));
}
show(e) {
this.callback = e, this.popup.show();
}
destroy() {
this.grid && (this.grid.removeEventListener("mousemove", this.handleGridMouseMove), this.grid.removeEventListener("mouseleave", this.handleGridMouseLeave), this.grid.removeEventListener("click", this.handleGridClick)), this.headerCheckbox && this.headerCheckbox.removeEventListener("change", this.handleHeaderCheckboxChange), this.popup.destroy(), this.grid = null, this.label = null, this.headerCheckbox = null, this.callback = null;
}
}
export {
L as TablePopup
};