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
101 lines (100 loc) • 4.34 kB
JavaScript
/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
var S = Object.defineProperty;
var f = (n, t, e) => t in n ? S(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
var u = (n, t, e) => f(n, typeof t != "symbol" ? t + "" : t, e);
import { PopupManager as m } from "../../../core/ui/PopupManager.mjs";
import { createContainer as c, createSpan as a, createUl as g, createLi as w, createKbd as k } from "../../../utils/helpers.mjs";
class I {
constructor(t) {
u(this, "popup", null);
u(this, "editor");
u(this, "container", null);
this.editor = t;
}
initialize(t) {
this.popup = new m(t, {
title: this.editor.t("Keyboard Shortcuts"),
className: "shortcuts-menu",
closeOnClickOutside: !0,
items: [
{
type: "custom",
id: "shortcuts-search",
content: () => this.createSearchSection()
},
{
type: "custom",
id: "shortcuts-content",
content: () => this.createContentSection()
}
]
});
}
createSearchSection() {
const t = c("shortcuts-search"), e = document.createElement("input");
e.type = "text", e.placeholder = this.editor.t("Search shortcuts..."), e.className = "shortcuts-search-input";
const r = a("search-icon", "🔍");
return t.appendChild(r), t.appendChild(e), e.addEventListener("input", (o) => {
const s = o.target.value.toLowerCase();
this.filterShortcuts(s);
}), t;
}
createContentSection() {
const t = c("shortcuts-content"), e = c("shortcuts-grid");
return t.appendChild(e), this.renderShortcuts(e), t;
}
renderShortcuts(t) {
var r;
t.innerHTML = "";
const e = (r = this.editor) == null ? void 0 : r.getHotkeys();
e && this.renderAllShortcuts(t, e);
}
renderAllShortcuts(t, e) {
Object.entries(e).forEach(([r, o]) => {
const s = this.renderCategory(r, o);
t.appendChild(s);
});
}
renderCategory(t, e) {
const r = c("shortcuts-category"), o = c("category-header"), s = a("category-title", t), i = a("shortcuts-count", `(${e.length})`);
o.appendChild(s), o.appendChild(i), r.appendChild(o);
const h = g("shortcuts-list");
return e.forEach((l) => {
const p = this.renderShortcut(l);
h.appendChild(p);
}), r.appendChild(h), r;
}
renderShortcut(t) {
const e = w("shortcut-item"), r = c("shortcut-info"), o = a("shortcut-icon", t.icon || "⌨️"), s = a("shortcut-description", t.description);
r.appendChild(o), r.appendChild(s);
const i = c("shortcut-keys"), h = k("shortcut-key", this.formatShortcut(t.keys));
return i.appendChild(h), e.appendChild(r), e.appendChild(i), 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", "→");
}
filterShortcuts(t) {
var o;
const e = (o = this.container) == null ? void 0 : o.querySelector(".shortcuts-grid");
if (!e) return;
e.querySelectorAll(".shortcut-item").forEach((s) => {
var p, d, y, C;
const i = ((d = (p = s.querySelector(".shortcut-description")) == null ? void 0 : p.textContent) == null ? void 0 : d.toLowerCase()) || "", h = ((C = (y = s.querySelector(".shortcut-key")) == null ? void 0 : y.textContent) == null ? void 0 : C.toLowerCase()) || "";
i.includes(t) || h.includes(t) ? s.style.display = "flex" : s.style.display = "none";
});
}
show() {
if (this.initialize(this.editor), this.popup) {
this.popup.show();
const t = this.editor.getDOMContext().querySelector(".shortcuts-menu");
t && (t.style.position = "fixed", t.style.top = "50%", t.style.left = "50%", t.style.transform = "translate(-50%, -50%)", t.style.zIndex = "9999", t.style.maxHeight = "90vh", t.style.overflowY = "auto");
}
}
destroy() {
var t;
this.popup && (this.popup.destroy(), this.popup = null), (t = this.container) == null || t.remove();
}
}
export {
I as ShortcutsMenu
};