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
128 lines (127 loc) • 4.33 kB
JavaScript
var d = Object.defineProperty;
var k = (s, t, i) => t in s ? d(s, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : s[t] = i;
var r = (s, t, i) => k(s, typeof t != "symbol" ? t + "" : t, i);
import v from "../../../icons/delete.svg.mjs";
import u from "../../../icons/duplicate.svg.mjs";
import p from "../../../icons/move.svg.mjs";
import m from "../../../icons/split-horizontal.svg.mjs";
import B from "../../../icons/split-vertical.svg.mjs";
import { ContextMenu as C } from "../../../core/ui/ContextMenu.mjs";
import { createContainer as a } from "../../../utils/helpers.mjs";
class z {
constructor(t) {
r(this, "editor");
r(this, "contextMenu");
r(this, "activeBlock", null);
this.editor = t, this.contextMenu = new C(
t,
[
{
title: t.t("Split Horizontally"),
icon: m,
action: "split-horizontal",
onClick: () => this.handleAction("split-horizontal")
},
{
title: t.t("Split Vertically"),
icon: B,
action: "split-vertical",
onClick: () => this.handleAction("split-vertical")
},
{
type: "divider"
},
{
title: t.t("Move Up"),
icon: p,
action: "move-up",
onClick: () => this.handleAction("move-up")
},
{
title: t.t("Move Down"),
icon: p,
action: "move-down",
onClick: () => this.handleAction("move-down")
},
{
type: "divider"
},
{
title: t.t("Duplicate"),
icon: u,
action: "duplicate",
onClick: () => this.handleAction("duplicate")
},
{
title: t.t("Remove"),
icon: v,
action: "remove",
className: "text-red-600",
onClick: () => this.handleAction("remove")
}
],
{ orientation: "vertical" }
// Ориентация меню (вертикальная)
);
}
handleAction(t) {
var i, c, e;
if (this.activeBlock)
switch (t) {
case "split-horizontal":
this.splitBlock("horizontal");
break;
case "split-vertical":
this.splitBlock("vertical");
break;
case "move-up":
const n = this.activeBlock.previousElementSibling;
n && ((i = n.parentNode) == null || i.insertBefore(this.activeBlock, n));
break;
case "move-down":
const o = this.activeBlock.nextElementSibling;
o && ((c = o.parentNode) == null || c.insertBefore(o, this.activeBlock));
break;
case "duplicate":
const l = this.activeBlock.cloneNode(!0);
(e = this.activeBlock.parentNode) == null || e.insertBefore(l, this.activeBlock.nextSibling);
break;
case "remove":
this.activeBlock.remove();
break;
}
}
splitBlock(t) {
var c;
if (!this.activeBlock) return;
if (this.activeBlock.classList.contains("split-container")) {
const e = this.activeBlock;
for (; e.firstChild; )
e.firstChild.remove();
const n = a("editor-block");
n.setAttribute("contenteditable", "true");
const o = a("editor-block");
o.setAttribute("contenteditable", "true");
const l = a("block-content"), h = a("block-content");
l.textContent = this.editor.t("Block 1"), h.textContent = this.editor.t("Block 2"), n.appendChild(l), o.appendChild(h), e.appendChild(n), e.appendChild(o);
} else {
const e = a(`split-container ${t}`), n = this.activeBlock.cloneNode(!0), o = this.activeBlock.cloneNode(!0), l = o.querySelector(".block-content");
l && (l.textContent = ""), e.appendChild(n), e.appendChild(o), (c = this.activeBlock.parentNode) == null || c.replaceChild(e, this.activeBlock);
}
}
show(t, i, c) {
this.activeBlock = t, this.contextMenu.show(t, i, c);
}
hide() {
this.contextMenu.hide(), this.activeBlock = null;
}
/**
* Уничтожение контекстного меню
*/
destroy() {
this.contextMenu && typeof this.contextMenu.destroy == "function" && this.contextMenu.destroy(), this.editor = null, this.contextMenu = null, this.activeBlock = null;
}
}
export {
z as BlockContextMenu
};