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
91 lines (90 loc) • 2.84 kB
JavaScript
var s = Object.defineProperty;
var c = (i, t, e) => t in i ? s(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
var a = (i, t, e) => c(i, typeof t != "symbol" ? t + "" : t, e);
import o from "../../../icons/align-center.svg.mjs";
import r from "../../../icons/align-left.svg.mjs";
import d from "../../../icons/align-right.svg.mjs";
import M from "../../../icons/delete.svg.mjs";
import g from "../../../icons/edit.svg.mjs";
import { ContextMenu as f } from "../../../core/ui/ContextMenu.mjs";
class A {
constructor(t, e) {
a(this, "contextMenu");
a(this, "activeMath", null);
this.mathMenu = e, this.contextMenu = new f(
t,
[
{
title: t.t("Edit"),
icon: g,
action: "edit",
onClick: () => this.handleEdit()
},
{
title: t.t("Delete"),
icon: M,
action: "delete",
className: "text-red-600",
onClick: () => this.handleDelete()
},
{
type: "divider"
// Разделитель между группами
},
{
title: t.t("Align Left"),
icon: r,
action: "align-left",
onClick: () => this.handleAlign("flex-start")
},
{
title: t.t("Align Center"),
icon: o,
action: "align-center",
onClick: () => this.handleAlign("center")
},
{
title: t.t("Align Right"),
icon: d,
action: "align-right",
onClick: () => this.handleAlign("flex-end")
}
],
{ orientation: "vertical" }
);
}
handleAlign(t) {
var e, n, l, h;
if (this.activeMath)
switch ((e = this.activeMath.parentElement) == null || e.classList.remove("align-left", "align-center", "align-right"), t) {
case "flex-start":
(n = this.activeMath.parentElement) == null || n.classList.add("align-left");
break;
case "center":
(l = this.activeMath.parentElement) == null || l.classList.add("align-center");
break;
case "flex-end":
(h = this.activeMath.parentElement) == null || h.classList.add("align-right");
break;
}
}
handleEdit() {
if (!this.activeMath) return;
this.activeMath.getAttribute("data-math-expression") && this.mathMenu.edit(this.activeMath);
}
handleDelete() {
this.activeMath && this.activeMath.remove();
}
show(t, e, n) {
this.activeMath = t, this.contextMenu.show(t, e, n);
}
hide() {
this.contextMenu.hide(), this.activeMath = null;
}
destroy() {
typeof this.contextMenu.destroy == "function" && this.contextMenu.destroy(), this.contextMenu = null, this.activeMath = null, this.mathMenu = null;
}
}
export {
A as MathContextMenu
};