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) • 10.2 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 y=Object.defineProperty;var k=(b,e,o)=>e in b?y(b,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):b[e]=o;var u=(b,e,o)=>k(b,typeof e!="symbol"?e+"":e,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../../../core/ui/PopupManager.cjs"),m=require("./TableStyles.cjs"),t=require("../../../utils/helpers.cjs"),L=require("../commands/ApplyTableStyleCommand.cjs"),T=require("../commands/ApplyTableResponsiveCommand.cjs"),E=require("../commands/GetTableBreakpointCommand.cjs");class w{constructor(e){u(this,"editor");u(this,"popup");u(this,"activeTable",null);u(this,"options",{breakpoint:768,enableScroll:!1,enableTouch:!1,enableCards:!1});this.editor=e,this.popup=new f.PopupManager(e,{title:e.t("Table Properties"),className:"table-editor-popup",closeOnClickOutside:!0,buttons:[{label:e.t("Apply"),variant:"primary",onClick:()=>this.applyChanges()},{label:e.t("Cancel"),variant:"secondary",onClick:()=>this.popup.hide()}],items:[{type:"custom",id:"table-editor-content",content:()=>this.createContent()}]})}createContent(){const e=t.createContainer("table-editor-content p-4 space-y-4"),o=this.createStyleSection();e.appendChild(o);const a=this.createDimensionsSection();e.appendChild(a);const l=this.createBordersSection();e.appendChild(l);const s=this.createColorsSection();e.appendChild(s);const i=this.createEffectsSection();e.appendChild(i);const d=this.createResponsiveSection();return e.appendChild(d),e}createStyleSection(){const e=t.createContainer("style-section"),o=document.createElement("h3");o.textContent=this.editor.t("Style & Theme"),o.className="text-lg font-semibold mb-3";const a=t.createContainer("mb-3"),l=t.createLabel(this.editor.t("Table Style")),s=t.createSelectField(m.TABLE_STYLES.map(n=>({value:n.id,label:n.name})),this.options.style||"default",n=>this.options.style=n);a.appendChild(l),a.appendChild(s);const i=t.createContainer("mb-3"),d=t.createLabel(this.editor.t("Theme")),c=t.createSelectField(m.TABLE_THEMES.map(n=>({value:n.id,label:n.name})),this.options.theme||"light",n=>this.options.theme=n);return i.appendChild(d),i.appendChild(c),e.appendChild(o),e.appendChild(a),e.appendChild(i),e}createDimensionsSection(){const e=t.createContainer("dimensions-section"),o=document.createElement("h3");o.textContent=this.editor.t("Dimensions"),o.className="text-lg font-semibold mb-3";const a=t.createContainer("mb-3 width-container"),l=t.createLabel(this.editor.t("Width")),s=t.createInputField("text","e.g., 100%, 800px",this.options.width||"100%",n=>this.options.width=n);if(s.name="width",this.options.enableScroll&&(s.disabled=!0,s.style.opacity="0.5",s.style.cursor="not-allowed"),a.appendChild(l),a.appendChild(s),this.options.enableScroll){const n=t.createContainer("mb-3 width-warning"),p=document.createElement("p");p.textContent=this.editor.t("Note: Width is disabled when Horizontal Scroll is enabled"),p.className="text-sm text-orange-600 bg-orange-50 p-2 rounded border border-orange-200",n.appendChild(p),a.appendChild(n)}const i=t.createContainer("mb-3"),d=t.createLabel(this.editor.t("Cell Padding")),c=t.createInputField("text","e.g., 8px",this.options.cellPadding||"8px",n=>this.options.cellPadding=n);return i.appendChild(d),i.appendChild(c),e.appendChild(o),e.appendChild(a),e.appendChild(i),e}createBordersSection(){const e=t.createContainer("borders-section"),o=document.createElement("h3");o.textContent=this.editor.t("Borders"),o.className="text-lg font-semibold mb-3";const a=t.createContainer("mb-3"),l=t.createLabel(this.editor.t("Border Style")),s=t.createSelectField(m.BORDER_STYLES.map(r=>({value:r.value,label:r.label})),this.options.borderStyle||"solid",r=>this.options.borderStyle=r);a.appendChild(l),a.appendChild(s);const i=t.createContainer("mb-3"),d=t.createLabel(this.editor.t("Border Width")),c=t.createSelectField(m.BORDER_WIDTHS.map(r=>({value:r.value,label:r.label})),this.options.borderWidth||"1px",r=>this.options.borderWidth=r);i.appendChild(d),i.appendChild(c);const n=t.createContainer("mb-3"),p=t.createLabel(this.editor.t("Border Color")),S=t.createInputField("color","",this.options.borderColor||"#e0e0e0",r=>this.options.borderColor=r);return n.appendChild(p),n.appendChild(S),e.appendChild(o),e.appendChild(a),e.appendChild(i),e.appendChild(n),e}createColorsSection(){const e=t.createContainer("colors-section"),o=document.createElement("h3");o.textContent=this.editor.t("Colors"),o.className="text-lg font-semibold mb-3";const a=t.createContainer("mb-3"),l=t.createLabel(this.editor.t("Header Background")),s=t.createInputField("color","",this.options.headerBackground||"#f8f9fa",n=>this.options.headerBackground=n);a.appendChild(l),a.appendChild(s);const i=t.createContainer("mb-3"),d=t.createLabel(this.editor.t("Header Text Color")),c=t.createInputField("color","",this.options.headerColor||"#495057",n=>this.options.headerColor=n);return i.appendChild(d),i.appendChild(c),e.appendChild(o),e.appendChild(a),e.appendChild(i),e}createEffectsSection(){const e=t.createContainer("effects-section"),o=document.createElement("h3");o.textContent=this.editor.t("Effects"),o.className="text-lg font-semibold mb-3";const a=t.createContainer("mb-3"),l=t.createLabel(this.editor.t("Zebra Stripe")),s=document.createElement("input");s.type="checkbox",s.checked=this.options.zebraStripe||!1,s.className="form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out",s.addEventListener("change",n=>{this.options.zebraStripe=n.target.checked}),a.appendChild(l),a.appendChild(s);const i=t.createContainer("mb-3"),d=t.createLabel(this.editor.t("Hover Effect")),c=document.createElement("input");return c.type="checkbox",c.checked=this.options.hoverEffect||!1,c.className="form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out",c.addEventListener("change",n=>{this.options.hoverEffect=n.target.checked}),i.appendChild(d),i.appendChild(c),e.appendChild(o),e.appendChild(a),e.appendChild(i),e}createResponsiveSection(){var g;const e=t.createContainer("responsive-section"),o=document.createElement("h3");o.textContent=this.editor.t("Responsive Settings"),o.className="text-lg font-semibold mb-3";const a=t.createContainer("mb-3"),l=t.createLabel(this.editor.t("Breakpoint")),s=t.createSelectField([{value:"320",label:"Mobile Small (320px)"},{value:"480",label:"Mobile (480px)"},{value:"640",label:"Mobile Large (640px)"},{value:"768",label:"Tablet (768px)"},{value:"1024",label:"Tablet Large (1024px)"},{value:"1280",label:"Desktop (1280px)"},{value:"1440",label:"Desktop Large (1440px)"},{value:"1536",label:"Desktop XL (1536px)"},{value:"1920",label:"Desktop 2XL (1920px)"},{value:"2560",label:"Desktop 3XL (2560px)"}],((g=this.options.breakpoint)==null?void 0:g.toString())||"768",h=>{this.options.breakpoint=h?parseInt(h):768});a.appendChild(l),a.appendChild(s);const i=t.createContainer("mb-3"),d=t.createLabel(this.editor.t("Enable Horizontal Scroll")),c=t.createContainer("flex items-center"),n=document.createElement("input");n.type="checkbox",n.checked=this.options.enableScroll||!1,n.className="form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out",n.addEventListener("change",h=>{this.options.enableScroll=h.target.checked}),c.appendChild(n),i.appendChild(d),i.appendChild(c);const p=t.createContainer("mb-3"),S=t.createLabel(this.editor.t("Enable Touch Support")),r=document.createElement("input");r.type="checkbox",r.checked=this.options.enableTouch||!1,r.className="form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out",r.addEventListener("change",h=>{this.options.enableTouch=h.target.checked}),p.appendChild(S),p.appendChild(r);const v=t.createContainer("mb-3"),x=t.createLabel(this.editor.t("Enable Cards on Mobile")),C=document.createElement("input");return C.type="checkbox",C.checked=this.options.enableCards||!1,C.className="form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out",C.addEventListener("change",h=>{this.options.enableCards=h.target.checked}),v.appendChild(x),v.appendChild(C),e.appendChild(o),e.appendChild(a),e.appendChild(i),e.appendChild(p),e.appendChild(v),e}show(e){this.activeTable=e,this.loadCurrentOptions(),this.popup.show()}loadCurrentOptions(){var a,l;if(!this.activeTable)return;const e=window.getComputedStyle(this.activeTable),o=new E.GetTableBreakpointCommand(this.editor,this.activeTable);o.execute(),this.options={width:this.activeTable.style.width||e.width,cellPadding:e.padding||"8px",borderStyle:e.borderStyle||"solid",borderWidth:e.borderWidth||"1px",borderColor:e.borderColor||"#e0e0e0",headerBackground:((a=this.activeTable.querySelector(".table-header-cell"))==null?void 0:a.style.backgroundColor)||"#f8f9fa",headerColor:((l=this.activeTable.querySelector(".table-header-cell"))==null?void 0:l.style.color)||"#495057",zebraStripe:this.activeTable.classList.contains("table-striped"),hoverEffect:this.activeTable.classList.contains("table-hover"),breakpoint:o.getBreakpoint(),enableScroll:this.activeTable.classList.contains("responsive-table--scroll"),enableTouch:this.activeTable.classList.contains("responsive-table--touch"),enableCards:this.activeTable.classList.contains("responsive-table--cards")}}applyChanges(){if(!this.activeTable)return;const e={style:this.options.style,theme:this.options.theme,width:this.options.width,cellPadding:this.options.cellPadding,borderStyle:this.options.borderStyle,borderWidth:this.options.borderWidth,borderColor:this.options.borderColor,headerBackground:this.options.headerBackground,headerColor:this.options.headerColor,zebraStripe:this.options.zebraStripe,hoverEffect:this.options.hoverEffect},o={breakpoint:this.options.breakpoint,enableScroll:this.options.enableScroll,enableTouch:this.options.enableTouch,enableCards:this.options.enableCards},a=new L.ApplyTableStyleCommand(this.editor,this.activeTable,e),l=new T.ApplyTableResponsiveCommand(this.editor,this.activeTable,o);a.execute(),l.execute(),this.popup.hide()}destroy(){this.popup.destroy()}}exports.TableEditor=w;