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
69 lines (68 loc) • 1.96 kB
JavaScript
var n = Object.defineProperty;
var a = (o, t, e) => t in o ? n(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
var i = (o, t, e) => a(o, typeof t != "symbol" ? t + "" : t, e);
import { PopupManager as s } from "../../../core/ui/PopupManager.mjs";
import { TYPOGRAPHY_STYLES as h } from "../constants.mjs";
import u from "../../../icons/clear.svg.mjs";
class m {
constructor(t) {
i(this, "editor");
i(this, "popup");
i(this, "onSelect", null);
this.editor = t, this.popup = new s(t, {
title: t.t("Typography Styles"),
className: "typography-menu",
closeOnClickOutside: !0,
buttons: [
{
label: t.t("Cancel"),
variant: "secondary",
onClick: () => this.popup.hide()
}
],
items: this.createPopupItems()
// Динамически создаем элементы
});
}
createPopupItems() {
const t = [];
return t.push({
type: "button",
id: "typography-clear",
text: this.editor.t("Clear Formatting"),
buttonVariant: "primary",
icon: u,
value: "clear",
onChange: (e) => {
var p;
(p = this.onSelect) == null || p.call(this, e.toString()), this.popup.hide();
}
}), t.push({
type: "divider",
id: "typography-divider"
}), h.forEach((e) => {
t.push({
type: "button",
id: `typography-${e.value}`,
text: this.editor.t(e.label),
buttonVariant: "secondary",
icon: e.icon,
value: e.value,
className: e.preview,
onChange: (p) => {
var r;
(r = this.onSelect) == null || r.call(this, p.toString()), this.popup.hide();
}
});
}), t;
}
show(t) {
this.onSelect = t, this.popup.show();
}
destroy() {
this.popup.destroy(), this.editor = null, this.popup = null, this.onSelect = null;
}
}
export {
m as TypographyMenu
};