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
3 lines (2 loc) • 3.71 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 C=Object.defineProperty;var S=(n,t,e)=>t in n?C(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var p=(n,t,e)=>S(n,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../../../core/ui/PopupManager.cjs"),o=require("../../../utils/helpers.cjs");class g{constructor(t){p(this,"popup",null);p(this,"editor");p(this,"container",null);this.editor=t}initialize(t){this.popup=new f.PopupManager(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=o.createContainer("shortcuts-search"),e=document.createElement("input");e.type="text",e.placeholder=this.editor.t("Search shortcuts..."),e.className="shortcuts-search-input";const r=o.createSpan("search-icon","🔍");return t.appendChild(r),t.appendChild(e),e.addEventListener("input",s=>{const c=s.target.value.toLowerCase();this.filterShortcuts(c)}),t}createContentSection(){const t=o.createContainer("shortcuts-content"),e=o.createContainer("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,s])=>{const c=this.renderCategory(r,s);t.appendChild(c)})}renderCategory(t,e){const r=o.createContainer("shortcuts-category"),s=o.createContainer("category-header"),c=o.createSpan("category-title",t),i=o.createSpan("shortcuts-count",`(${e.length})`);s.appendChild(c),s.appendChild(i),r.appendChild(s);const a=o.createUl("shortcuts-list");return e.forEach(u=>{const h=this.renderShortcut(u);a.appendChild(h)}),r.appendChild(a),r}renderShortcut(t){const e=o.createLi("shortcut-item"),r=o.createContainer("shortcut-info"),s=o.createSpan("shortcut-icon",t.icon||"⌨️"),c=o.createSpan("shortcut-description",t.description);r.appendChild(s),r.appendChild(c);const i=o.createContainer("shortcut-keys"),a=o.createKbd("shortcut-key",this.formatShortcut(t.keys));return i.appendChild(a),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 s;const e=(s=this.container)==null?void 0:s.querySelector(".shortcuts-grid");if(!e)return;e.querySelectorAll(".shortcut-item").forEach(c=>{var h,l,d,y;const i=((l=(h=c.querySelector(".shortcut-description"))==null?void 0:h.textContent)==null?void 0:l.toLowerCase())||"",a=((y=(d=c.querySelector(".shortcut-key"))==null?void 0:d.textContent)==null?void 0:y.toLowerCase())||"";i.includes(t)||a.includes(t)?c.style.display="flex":c.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()}}exports.ShortcutsMenu=g;