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) • 7.31 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 m=Object.defineProperty;var u=(p,t,o)=>t in p?m(p,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):p[t]=o;var b=(p,t,o)=>u(p,typeof t!="symbol"?t+"":t,o);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("../../../core/ui/PopupManager.cjs"),g=require("./TableStyles.cjs"),e=require("../../../utils/helpers.cjs");class v{constructor(t){b(this,"editor");b(this,"popup");b(this,"activeCell",null);b(this,"options",{});this.editor=t,this.popup=new S.PopupManager(t,{title:t.t("Cell Formatting"),className:"cell-formatter-popup",closeOnClickOutside:!0,buttons:[{label:t.t("Apply"),variant:"primary",onClick:()=>this.applyFormatting()},{label:t.t("Cancel"),variant:"secondary",onClick:()=>this.popup.hide()}],items:[{type:"custom",id:"cell-formatter-content",content:()=>this.createContent()}]})}createContent(){const t=e.createContainer("cell-formatter-content p-4 space-y-4"),o=this.createTextSection();t.appendChild(o);const l=this.createAlignmentSection();t.appendChild(l);const r=this.createColorsSection();t.appendChild(r);const s=this.createBordersSection();t.appendChild(s);const a=this.createDimensionsSection();return t.appendChild(a),t}createTextSection(){const t=e.createContainer("text-section"),o=document.createElement("h3");o.textContent=this.editor.t("Text Formatting"),o.className="text-lg font-semibold mb-3";const l=e.createContainer("mb-3"),r=e.createLabel(this.editor.t("Font Weight")),s=e.createSelectField([{value:"normal",label:"Normal"},{value:"bold",label:"Bold"},{value:"bolder",label:"Bolder"},{value:"lighter",label:"Lighter"}],this.options.fontWeight||"normal",n=>this.options.fontWeight=n);l.appendChild(r),l.appendChild(s);const a=e.createContainer("mb-3"),c=e.createLabel(this.editor.t("Font Style")),d=e.createSelectField([{value:"normal",label:"Normal"},{value:"italic",label:"Italic"}],this.options.fontStyle||"normal",n=>this.options.fontStyle=n);a.appendChild(c),a.appendChild(d);const i=e.createContainer("mb-3"),h=e.createLabel(this.editor.t("Text Decoration")),C=e.createSelectField([{value:"none",label:"None"},{value:"underline",label:"Underline"},{value:"line-through",label:"Strikethrough"}],this.options.textDecoration||"none",n=>this.options.textDecoration=n);return i.appendChild(h),i.appendChild(C),t.appendChild(o),t.appendChild(l),t.appendChild(a),t.appendChild(i),t}createAlignmentSection(){const t=e.createContainer("alignment-section"),o=document.createElement("h3");o.textContent=this.editor.t("Alignment"),o.className="text-lg font-semibold mb-3";const l=e.createContainer("mb-3"),r=e.createLabel(this.editor.t("Horizontal Alignment")),s=e.createSelectField(g.CELL_ALIGNMENT_OPTIONS.map(i=>({value:i.value,label:i.label})),this.options.textAlign||"left",i=>this.options.textAlign=i);l.appendChild(r),l.appendChild(s);const a=e.createContainer("mb-3"),c=e.createLabel(this.editor.t("Vertical Alignment")),d=e.createSelectField(g.VERTICAL_ALIGNMENT_OPTIONS.map(i=>({value:i.value,label:i.label})),this.options.verticalAlign||"middle",i=>this.options.verticalAlign=i);return a.appendChild(c),a.appendChild(d),t.appendChild(o),t.appendChild(l),t.appendChild(a),t}createColorsSection(){const t=e.createContainer("colors-section"),o=document.createElement("h3");o.textContent=this.editor.t("Colors"),o.className="text-lg font-semibold mb-3";const l=e.createContainer("mb-3"),r=e.createLabel(this.editor.t("Background Color")),s=e.createInputField("color","",this.options.backgroundColor||"#ffffff",i=>this.options.backgroundColor=i);l.appendChild(r),l.appendChild(s);const a=e.createContainer("mb-3"),c=e.createLabel(this.editor.t("Text Color")),d=e.createInputField("color","",this.options.textColor||"#000000",i=>this.options.textColor=i);return a.appendChild(c),a.appendChild(d),t.appendChild(o),t.appendChild(l),t.appendChild(a),t}createBordersSection(){const t=e.createContainer("borders-section"),o=document.createElement("h3");o.textContent=this.editor.t("Borders"),o.className="text-lg font-semibold mb-3";const l=e.createContainer("mb-3"),r=e.createLabel(this.editor.t("Border Style")),s=e.createSelectField(g.BORDER_STYLES.map(n=>({value:n.value,label:n.label})),this.options.borderStyle||"solid",n=>this.options.borderStyle=n);l.appendChild(r),l.appendChild(s);const a=e.createContainer("mb-3"),c=e.createLabel(this.editor.t("Border Width")),d=e.createSelectField(g.BORDER_WIDTHS.map(n=>({value:n.value,label:n.label})),this.options.borderWidth||"1px",n=>this.options.borderWidth=n);a.appendChild(c),a.appendChild(d);const i=e.createContainer("mb-3"),h=e.createLabel(this.editor.t("Border Color")),C=e.createInputField("color","",this.options.borderColor||"#e0e0e0",n=>this.options.borderColor=n);return i.appendChild(h),i.appendChild(C),t.appendChild(o),t.appendChild(l),t.appendChild(a),t.appendChild(i),t}createDimensionsSection(){const t=e.createContainer("dimensions-section"),o=document.createElement("h3");o.textContent=this.editor.t("Dimensions"),o.className="text-lg font-semibold mb-3";const l=e.createContainer("mb-3"),r=e.createLabel(this.editor.t("Width")),s=e.createInputField("text","e.g., 100px, 50%",this.options.width||"",n=>this.options.width=n);l.appendChild(r),l.appendChild(s);const a=e.createContainer("mb-3"),c=e.createLabel(this.editor.t("Height")),d=e.createInputField("text","e.g., 50px",this.options.height||"",n=>this.options.height=n);a.appendChild(c),a.appendChild(d);const i=e.createContainer("mb-3"),h=e.createLabel(this.editor.t("Padding")),C=e.createInputField("text","e.g., 8px",this.options.padding||"",n=>this.options.padding=n);return i.appendChild(h),i.appendChild(C),t.appendChild(o),t.appendChild(l),t.appendChild(a),t.appendChild(i),t}show(t){this.activeCell=t,this.loadCurrentOptions(),this.popup.show()}loadCurrentOptions(){this.activeCell&&(this.options={textAlign:this.activeCell.style.textAlign||"left",verticalAlign:this.activeCell.style.verticalAlign||"middle",backgroundColor:this.activeCell.style.backgroundColor||"#ffffff",textColor:this.activeCell.style.color||"#000000",fontWeight:this.activeCell.style.fontWeight||"normal",fontStyle:this.activeCell.style.fontStyle||"normal",textDecoration:this.activeCell.style.textDecoration||"none",borderStyle:this.activeCell.style.borderStyle||"solid",borderWidth:this.activeCell.style.borderWidth||"1px",borderColor:this.activeCell.style.borderColor||"#000000",padding:this.activeCell.style.padding||"8px",width:this.activeCell.style.width||"",height:this.activeCell.style.height||""})}applyFormatting(){this.activeCell&&(Object.assign(this.activeCell.style,{textAlign:this.options.textAlign,verticalAlign:this.options.verticalAlign,backgroundColor:this.options.backgroundColor,color:this.options.textColor,fontWeight:this.options.fontWeight,fontStyle:this.options.fontStyle,textDecoration:this.options.textDecoration,border:`${this.options.borderWidth} ${this.options.borderStyle} ${this.options.borderColor}`,padding:this.options.padding,width:this.options.width,height:this.options.height}),this.popup.hide())}destroy(){this.popup.destroy()}}exports.CellFormatter=v;