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
209 lines (208 loc) • 8.44 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 v = Object.defineProperty;
var x = (C, t, e) => t in C ? v(C, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : C[t] = e;
var u = (C, t, e) => x(C, typeof t != "symbol" ? t + "" : t, e);
import { PopupManager as y } from "../../../core/ui/PopupManager.mjs";
import { CELL_ALIGNMENT_OPTIONS as S, VERTICAL_ALIGNMENT_OPTIONS as f, BORDER_STYLES as A, BORDER_WIDTHS as L } from "./TableStyles.mjs";
import { createContainer as s, createLabel as a, createSelectField as c, createInputField as b } from "../../../utils/helpers.mjs";
class D {
constructor(t) {
u(this, "editor");
u(this, "popup");
u(this, "activeCell", null);
u(this, "options", {});
this.editor = t, this.popup = new y(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 = s("cell-formatter-content p-4 space-y-4"), e = this.createTextSection();
t.appendChild(e);
const n = this.createAlignmentSection();
t.appendChild(n);
const r = this.createColorsSection();
t.appendChild(r);
const d = this.createBordersSection();
t.appendChild(d);
const l = this.createDimensionsSection();
return t.appendChild(l), t;
}
createTextSection() {
const t = s("text-section"), e = document.createElement("h3");
e.textContent = this.editor.t("Text Formatting"), e.className = "text-lg font-semibold mb-3";
const n = s("mb-3"), r = a(this.editor.t("Font Weight")), d = c(
[
{ value: "normal", label: "Normal" },
{ value: "bold", label: "Bold" },
{ value: "bolder", label: "Bolder" },
{ value: "lighter", label: "Lighter" }
],
this.options.fontWeight || "normal",
(i) => this.options.fontWeight = i
);
n.appendChild(r), n.appendChild(d);
const l = s("mb-3"), h = a(this.editor.t("Font Style")), p = c(
[
{ value: "normal", label: "Normal" },
{ value: "italic", label: "Italic" }
],
this.options.fontStyle || "normal",
(i) => this.options.fontStyle = i
);
l.appendChild(h), l.appendChild(p);
const o = s("mb-3"), m = a(this.editor.t("Text Decoration")), g = c(
[
{ value: "none", label: "None" },
{ value: "underline", label: "Underline" },
{ value: "line-through", label: "Strikethrough" }
],
this.options.textDecoration || "none",
(i) => this.options.textDecoration = i
);
return o.appendChild(m), o.appendChild(g), t.appendChild(e), t.appendChild(n), t.appendChild(l), t.appendChild(o), t;
}
createAlignmentSection() {
const t = s("alignment-section"), e = document.createElement("h3");
e.textContent = this.editor.t("Alignment"), e.className = "text-lg font-semibold mb-3";
const n = s("mb-3"), r = a(this.editor.t("Horizontal Alignment")), d = c(
S.map((o) => ({ value: o.value, label: o.label })),
this.options.textAlign || "left",
(o) => this.options.textAlign = o
);
n.appendChild(r), n.appendChild(d);
const l = s("mb-3"), h = a(this.editor.t("Vertical Alignment")), p = c(
f.map((o) => ({ value: o.value, label: o.label })),
this.options.verticalAlign || "middle",
(o) => this.options.verticalAlign = o
);
return l.appendChild(h), l.appendChild(p), t.appendChild(e), t.appendChild(n), t.appendChild(l), t;
}
createColorsSection() {
const t = s("colors-section"), e = document.createElement("h3");
e.textContent = this.editor.t("Colors"), e.className = "text-lg font-semibold mb-3";
const n = s("mb-3"), r = a(this.editor.t("Background Color")), d = b(
"color",
"",
this.options.backgroundColor || "#ffffff",
(o) => this.options.backgroundColor = o
);
n.appendChild(r), n.appendChild(d);
const l = s("mb-3"), h = a(this.editor.t("Text Color")), p = b(
"color",
"",
this.options.textColor || "#000000",
(o) => this.options.textColor = o
);
return l.appendChild(h), l.appendChild(p), t.appendChild(e), t.appendChild(n), t.appendChild(l), t;
}
createBordersSection() {
const t = s("borders-section"), e = document.createElement("h3");
e.textContent = this.editor.t("Borders"), e.className = "text-lg font-semibold mb-3";
const n = s("mb-3"), r = a(this.editor.t("Border Style")), d = c(
A.map((i) => ({ value: i.value, label: i.label })),
this.options.borderStyle || "solid",
(i) => this.options.borderStyle = i
);
n.appendChild(r), n.appendChild(d);
const l = s("mb-3"), h = a(this.editor.t("Border Width")), p = c(
L.map((i) => ({ value: i.value, label: i.label })),
this.options.borderWidth || "1px",
(i) => this.options.borderWidth = i
);
l.appendChild(h), l.appendChild(p);
const o = s("mb-3"), m = a(this.editor.t("Border Color")), g = b(
"color",
"",
this.options.borderColor || "#e0e0e0",
(i) => this.options.borderColor = i
);
return o.appendChild(m), o.appendChild(g), t.appendChild(e), t.appendChild(n), t.appendChild(l), t.appendChild(o), t;
}
createDimensionsSection() {
const t = s("dimensions-section"), e = document.createElement("h3");
e.textContent = this.editor.t("Dimensions"), e.className = "text-lg font-semibold mb-3";
const n = s("mb-3"), r = a(this.editor.t("Width")), d = b(
"text",
"e.g., 100px, 50%",
this.options.width || "",
(i) => this.options.width = i
);
n.appendChild(r), n.appendChild(d);
const l = s("mb-3"), h = a(this.editor.t("Height")), p = b(
"text",
"e.g., 50px",
this.options.height || "",
(i) => this.options.height = i
);
l.appendChild(h), l.appendChild(p);
const o = s("mb-3"), m = a(this.editor.t("Padding")), g = b(
"text",
"e.g., 8px",
this.options.padding || "",
(i) => this.options.padding = i
);
return o.appendChild(m), o.appendChild(g), t.appendChild(e), t.appendChild(n), t.appendChild(l), t.appendChild(o), 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();
}
}
export {
D as CellFormatter
};