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
90 lines (89 loc) • 4.21 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 u = (c, l, t) => l in c ? b(c, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[l] = t;
var h = (c, l, t) => u(c, typeof l != "symbol" ? l + "" : l, t);
class m {
constructor(l, t, r) {
h(this, "direction");
h(this, "targetCell");
this.targetCell = t, this.direction = r;
}
execute() {
const l = this.findTable(this.targetCell);
if (!l) return;
const t = Array.from(l.children), r = this.targetCell.closest(".table-row, .table-header-row"), n = t.indexOf(r), e = Array.from(r.children).indexOf(this.targetCell);
switch (this.direction) {
case "left":
this.insertCellLeft(l, r, e);
break;
case "right":
this.insertCellRight(l, r, e);
break;
case "top":
this.insertCellTop(l, n, e);
break;
case "bottom":
this.insertCellBottom(l, n, e);
break;
}
this.updateCellIndexes(l);
}
insertCellLeft(l, t, r) {
const n = document.createElement("div");
n.className = t.classList.contains("table-header-row") ? "table-header-cell" : "table-cell", n.contentEditable = "true", n.setAttribute("data-colspan", "1"), n.setAttribute("data-rowspan", "1"), n.setAttribute("data-cell-index", r.toString()), t.insertBefore(n, t.children[r]);
for (let e = r + 1; e < t.children.length; e++) {
const i = t.children[e], a = parseInt(i.getAttribute("data-cell-index") || "0");
i.setAttribute("data-cell-index", (a + 1).toString());
}
}
insertCellRight(l, t, r) {
const n = document.createElement("div");
n.className = t.classList.contains("table-header-row") ? "table-header-cell" : "table-cell", n.contentEditable = "true", n.setAttribute("data-colspan", "1"), n.setAttribute("data-rowspan", "1"), n.setAttribute("data-cell-index", (r + 1).toString()), r + 1 < t.children.length ? t.insertBefore(n, t.children[r + 1]) : t.appendChild(n);
for (let e = r + 2; e < t.children.length; e++) {
const i = t.children[e], a = parseInt(i.getAttribute("data-cell-index") || "0");
i.setAttribute("data-cell-index", (a + 1).toString());
}
}
insertCellTop(l, t, r) {
const n = Array.from(l.children);
let e;
t === 0 ? (e = document.createElement("div"), e.className = "table-row", l.insertBefore(e, l.firstChild)) : e = n[t - 1];
const i = document.createElement("div");
i.className = "table-cell", i.contentEditable = "true", i.setAttribute("data-colspan", "1"), i.setAttribute("data-rowspan", "1"), i.setAttribute("data-cell-index", r.toString()), r < e.children.length ? e.insertBefore(i, e.children[r]) : e.appendChild(i);
const a = n[t];
for (let s = r; s < a.children.length; s++) {
const o = a.children[s], d = parseInt(o.getAttribute("data-cell-index") || "0");
o.setAttribute("data-cell-index", (d + 1).toString());
}
}
insertCellBottom(l, t, r) {
const n = Array.from(l.children);
let e;
t === n.length - 1 ? (e = document.createElement("div"), e.className = "table-row", l.appendChild(e)) : e = n[t + 1];
const i = document.createElement("div");
i.className = "table-cell", i.contentEditable = "true", i.setAttribute("data-colspan", "1"), i.setAttribute("data-rowspan", "1"), i.setAttribute("data-cell-index", r.toString()), r < e.children.length ? e.insertBefore(i, e.children[r]) : e.appendChild(i);
const a = n[t];
for (let s = r; s < a.children.length; s++) {
const o = a.children[s], d = parseInt(o.getAttribute("data-cell-index") || "0");
o.setAttribute("data-cell-index", (d + 1).toString());
}
}
findTable(l) {
return l.closest(".html-editor-table");
}
updateCellIndexes(l) {
Array.from(l.children).forEach((r, n) => {
Array.from(r.children).forEach((i, a) => {
i.setAttribute("data-cell-index", a.toString());
});
});
}
undo() {
}
redo() {
this.execute();
}
}
export {
m as InsertCellCommand
};