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
79 lines (78 loc) • 3.19 kB
JavaScript
var f = Object.defineProperty;
var w = (s, t, e) => t in s ? f(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
var h = (s, t, e) => w(s, typeof t != "symbol" ? t + "" : t, e);
import { PopupManager as L } from "../../../core/ui/PopupManager.mjs";
import { createContainer as u, createSpan as d, createUl as S, createHr as b, createLi as k, createKbd as A } from "../../../utils/helpers.mjs";
class H {
constructor(t) {
h(this, "popup", null);
h(this, "editor");
h(this, "container", null);
this.editor = t;
}
initialize(t) {
this.popup = new L(t, {
title: t.t("Keyboard Shortcuts"),
className: "shortcuts-menu",
closeOnClickOutside: !0,
items: [
{
type: "custom",
id: "shortcuts-content",
content: () => this.createContent()
}
]
});
}
createContent() {
var o, i;
(o = this.container) == null || o.remove(), this.container = u("p-4");
const t = document.createElement("input");
t.type = "text", t.placeholder = "Search by category or shortcut...", t.className = "w-full p-2 mb-4 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500", this.container.appendChild(t);
const e = u("shortcuts-grid");
this.container.appendChild(e);
const r = (i = this.editor) == null ? void 0 : i.getHotkeys(), c = (n = "") => {
e.innerHTML = "", r && Object.entries(r).forEach(([a, C]) => {
const l = C.filter((p) => {
const m = a.toLowerCase().includes(n), y = p.description.toLowerCase().includes(n), g = this.formatShortcut(p.keys).toLowerCase().includes(n);
return m || y || g;
});
if (l.length > 0) {
const p = this.renderCategory(a, l);
e.appendChild(p);
}
});
};
return c(), t.addEventListener("input", (n) => {
const a = n.target.value.toLowerCase();
c(a);
}), this.container;
}
// Метод для отображения категории
renderCategory(t, e) {
const r = u(), c = d("shortcuts-category", t), o = S("shortcuts-group");
return e.forEach((i) => {
const n = this.renderShortcut(i);
o.appendChild(n);
}), r.appendChild(c), r.appendChild(o), r.appendChild(b()), r;
}
// Метод для отображения шортката
renderShortcut(t) {
const e = k("shortcut"), r = d("shortcut-icon", t.icon), c = d("shortcut-description", t.description), o = A("shortcut-key", this.formatShortcut(t.keys));
return e.appendChild(r), e.appendChild(c), e.appendChild(o), e;
}
formatShortcut(t) {
return t.replace("Ctrl", "⌃").replace("Shift", "⇧").replace("Alt", "⌥").replace("Enter", "↵").replace("Backspace", "⌫").replace("Delete", "⌦").replace("ArrowUp", "↑").replace("ArrowDown", "↓").replace("ArrowLeft", "←").replace("ArrowRight", "→");
}
show() {
var t;
this.initialize(this.editor), (t = this.popup) == null || t.show();
}
destroy() {
var t;
this.popup && (this.popup.destroy(), this.popup = null), (t = this.container) == null || t.remove();
}
}
export {
H as ShortcutsMenu
};