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
207 lines (206 loc) • 6.86 kB
JavaScript
var a = Object.defineProperty;
var s = (l, e, t) => e in l ? a(l, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : l[e] = t;
var i = (l, e, t) => s(l, typeof e != "symbol" ? e + "" : e, t);
import { ContextMenu as m } from "../../../core/ui/ContextMenu.mjs";
import { AddRowCommand as c } from "../commands/AddRowCommand.mjs";
import { AddColumnCommand as r } from "../commands/AddColumnCommand.mjs";
import { DeleteRowCommand as d } from "../commands/DeleteRowCommand.mjs";
import { DeleteColumnCommand as p } from "../commands/DeleteColumnCommand.mjs";
import { DeleteTableCommand as u } from "../commands/DeleteTableCommand.mjs";
import { StyleTableCellCommand as h } from "../commands/StyleTableCellCommand.mjs";
import { CopyTableCommand as C } from "../commands/CopyTableCommand.mjs";
import { MergeCellsCommand as w } from "../commands/MergeCellsCommand.mjs";
import { SplitCellCommand as f } from "../commands/SplitCellCommand.mjs";
import { AddHeaderRowCommand as b } from "../commands/AddHeaderRowCommand.mjs";
import { RemoveHeaderRowCommand as k } from "../commands/RemoveHeaderRowCommand.mjs";
import { SetCellBorderCommand as v } from "../commands/SetCellBorderCommand.mjs";
import g from "../../../icons/copy.svg.mjs";
import x from "../../../icons/delete-table.svg.mjs";
import M from "../../../icons/delete-row.svg.mjs";
import y from "../../../icons/delete-column.svg.mjs";
import { PopupManager as A } from "../../../core/ui/PopupManager.mjs";
const n = {
arrowUp: "↑",
arrowDown: "↓",
arrowLeft: "←",
arrowRight: "→",
remove: "×"
}, P = "🟰", R = "✂️";
class N {
constructor(e) {
i(this, "contextMenu");
i(this, "activeCell", null);
i(this, "popupManager");
i(this, "colorPicker", null);
this.contextMenu = new m(
e,
[
{
title: e.t("Add Row Above"),
icon: n.arrowUp,
action: "add-row-above",
onClick: () => this.executeAction("add-row-above")
},
{
title: e.t("Add Row Below"),
icon: n.arrowDown,
action: "add-row-below",
onClick: () => this.executeAction("add-row-below")
},
{
title: e.t("Add Column Left"),
icon: n.arrowLeft,
action: "add-col-left",
onClick: () => this.executeAction("add-col-left")
},
{
title: e.t("Add Column Right"),
icon: n.arrowRight,
action: "add-col-right",
onClick: () => this.executeAction("add-col-right")
},
{
type: "divider"
},
{
title: e.t("Delete Row"),
icon: M,
action: "delete-row",
onClick: () => this.executeAction("delete-row")
},
{
title: e.t("Delete Column"),
icon: y,
action: "delete-col",
onClick: () => this.executeAction("delete-col")
},
{
title: e.t("Delete Table"),
icon: x,
action: "delete-table",
onClick: () => this.executeAction("delete-table")
},
{
type: "divider"
},
{
title: e.t("Copy"),
icon: g,
action: "copy-table",
onClick: () => this.executeAction("copy-table")
},
{
type: "divider"
},
{
title: e.t("Merge Cells"),
icon: P,
action: "merge-cells",
onClick: () => this.executeAction("merge-cells")
},
{
title: e.t("Split Cell"),
icon: R,
action: "split-cell",
onClick: () => this.executeAction("split-cell")
},
{
type: "divider"
},
{
type: "custom",
customHTML: `<input type="color" class="table-color-picker" title="${e.t("Background Color")}">`
}
],
{ orientation: "vertical" }
), this.popupManager = new A(e, {
title: e.t("Set Cell Border"),
closeOnClickOutside: !0,
buttons: [
{
label: e.t("Confirm"),
variant: "primary",
onClick: () => this.handleBorderConfirm()
},
{
label: e.t("Cancel"),
variant: "secondary",
onClick: () => this.popupManager.hide()
}
]
}), this.setupColorPicker();
}
handleBorderConfirm() {
const e = this.popupManager.getValue("border-style");
e && this.activeCell && new v(this.activeCell, e).execute(), this.popupManager.hide();
}
setupColorPicker() {
this.colorPicker = this.contextMenu.getElement().querySelector(".table-color-picker"), this.colorPicker && (this.colorPicker.addEventListener("input", (e) => {
this.activeCell && new h(this.activeCell, {
backgroundColor: e.target.value
}).execute();
}), this.colorPicker.addEventListener("contextmenu", (e) => e.stopPropagation()));
}
executeAction(e) {
if (!this.activeCell) return;
const t = this.activeCell.closest("table");
if (!t || !(t instanceof HTMLTableElement)) return;
let o = null;
switch (e) {
case "add-row-above":
o = new c(t, this.activeCell, !0);
break;
case "add-row-below":
o = new c(t, this.activeCell, !1);
break;
case "add-col-left":
o = new r(t, this.activeCell, !0);
break;
case "add-col-right":
o = new r(t, this.activeCell, !1);
break;
case "delete-row":
o = new d(t, this.activeCell);
break;
case "delete-col":
o = new p(t, this.activeCell);
break;
case "delete-table":
o = new u(t);
break;
case "copy-table":
o = new C(t);
break;
case "merge-cells":
o = new w(t, this.activeCell);
break;
case "split-cell":
o = new f(t, this.activeCell);
break;
case "add-header-row":
o = new b(t);
break;
case "remove-header-row":
o = new k(t);
break;
}
o && o.execute(), e !== "set-background" && this.contextMenu.hide();
}
show(e, t, o) {
this.activeCell = e, this.contextMenu.show(e, t, o);
}
hide() {
this.contextMenu.hide(), this.activeCell = null;
}
destroy() {
this.colorPicker && (this.colorPicker.removeEventListener("input", () => {
}), this.colorPicker.removeEventListener("contextmenu", () => {
}), this.colorPicker = null), this.contextMenu && typeof this.contextMenu.destroy == "function" && this.contextMenu.destroy(), this.popupManager && typeof this.popupManager.destroy == "function" && this.popupManager.destroy(), this.contextMenu = null, this.popupManager = null, this.activeCell = null;
}
}
export {
N as TableContextMenu,
P as mergeIcon,
n as navigationIcons,
R as splitIcon
};