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.54 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 */
"use strict";var u=Object.defineProperty;var b=(h,e,s)=>e in h?u(h,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):h[e]=s;var t=(h,e,s)=>b(h,typeof e!="symbol"?e+"":e,s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("../../../core/ui/PopupManager.cjs"),i=require("../../../utils/helpers.cjs");class g{constructor(e){t(this,"editor");t(this,"popup");t(this,"selectedRows",0);t(this,"selectedCols",0);t(this,"hasHeader",!1);t(this,"callback",null);t(this,"grid",null);t(this,"label",null);t(this,"headerCheckbox",null);t(this,"handleGridMouseMove",e=>{const s=e.target,l=Array.from(this.grid.children),r=l.indexOf(s);if(r>=0){const a=Math.floor(r/10),o=r%10;this.selectedRows=a+1,this.selectedCols=o+1,l.forEach((d,n)=>{const c=Math.floor(n/10),p=n%10;d.classList.toggle("selected",c<this.selectedRows&&p<this.selectedCols)}),this.label.textContent=`${this.selectedRows} x ${this.selectedCols}`}});t(this,"handleGridMouseLeave",()=>{Array.from(this.grid.children).forEach(s=>s.classList.remove("selected")),this.label.textContent="0 x 0"});t(this,"handleGridClick",()=>{var e;this.selectedRows>0&&this.selectedCols>0&&((e=this.callback)==null||e.call(this,{rows:this.selectedRows,cols:this.selectedCols,hasHeader:this.hasHeader}),this.popup.hide())});t(this,"handleHeaderCheckboxChange",e=>{this.hasHeader=e.target.checked});this.editor=e,this.popup=new C.PopupManager(e,{title:e.t("Insert Table"),className:"table-popup",closeOnClickOutside:!0,buttons:[{label:e.t("Cancel"),variant:"secondary",onClick:()=>this.popup.hide()}],items:[{type:"custom",id:"table-content",content:()=>this.createContent()}]})}createContent(){const e=i.createContainer("p-4"),s=i.createContainer("table-options mb-4"),l=i.createLabel("label");l.className="flex items-center gap-2",this.headerCheckbox=i.createInputField("checkbox","","",()=>{var a;this.hasHeader=((a=this.headerCheckbox)==null?void 0:a.checked)??!1}),this.headerCheckbox.className="table-option-checkbox",this.headerCheckbox.id="tableHeader";const r=i.createSpan("table-option-label",this.editor.t("Include header row"));l.appendChild(this.headerCheckbox),l.appendChild(r),s.appendChild(l),this.grid=i.createContainer("table-size-grid");for(let a=0;a<100;a++){const o=i.createContainer("grid-cell");this.grid.appendChild(o)}return this.label=i.createContainer("text-sm text-gray-600 mt-2","0 x 0"),e.appendChild(s),e.appendChild(this.grid),e.appendChild(this.label),this.setupEventListeners(),e}setupEventListeners(){!this.grid||!this.label||!this.headerCheckbox||(this.grid.addEventListener("mousemove",this.handleGridMouseMove),this.grid.addEventListener("mouseleave",this.handleGridMouseLeave),this.grid.addEventListener("click",this.handleGridClick),this.headerCheckbox.addEventListener("change",this.handleHeaderCheckboxChange))}show(e){this.callback=e,this.popup.show()}destroy(){this.grid&&(this.grid.removeEventListener("mousemove",this.handleGridMouseMove),this.grid.removeEventListener("mouseleave",this.handleGridMouseLeave),this.grid.removeEventListener("click",this.handleGridClick)),this.headerCheckbox&&this.headerCheckbox.removeEventListener("change",this.handleHeaderCheckboxChange),this.popup.destroy(),this.grid=null,this.label=null,this.headerCheckbox=null,this.callback=null}}exports.TablePopup=g;