on-codemerge/dist/src/plugins/TablePlugin/components/TableEditor.mjs

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

/*! 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 y = Object.defineProperty;
var T = (C, e, t) => e in C ? y(C, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : C[e] = t;
var u = (C, e, t) => T(C, typeof e != "symbol" ? e + "" : e, t);
import { PopupManager as E } from "../../../core/ui/PopupManager.mjs";
import { TABLE_STYLES as L, TABLE_THEMES as w, BORDER_STYLES as B, BORDER_WIDTHS as N } from "./TableStyles.mjs";
import { createContainer as s, createLabel as c, createSelectField as S, createInputField as x } from "../../../utils/helpers.mjs";
import { ApplyTableStyleCommand as D } from "../commands/ApplyTableStyleCommand.mjs";
import { ApplyTableResponsiveCommand as z } from "../commands/ApplyTableResponsiveCommand.mjs";
import { GetTableBreakpointCommand as W } from "../commands/GetTableBreakpointCommand.mjs";
class _ {
  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 E(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 = s("table-editor-content p-4 space-y-4"), t = this.createStyleSection();
    e.appendChild(t);
    const n = this.createDimensionsSection();
    e.appendChild(n);
    const l = this.createBordersSection();
    e.appendChild(l);
    const a = this.createColorsSection();
    e.appendChild(a);
    const i = this.createEffectsSection();
    e.appendChild(i);
    const p = this.createResponsiveSection();
    return e.appendChild(p), e;
  }
  createStyleSection() {
    const e = s("style-section"), t = document.createElement("h3");
    t.textContent = this.editor.t("Style & Theme"), t.className = "text-lg font-semibold mb-3";
    const n = s("mb-3"), l = c(this.editor.t("Table Style")), a = S(
      L.map((o) => ({ value: o.id, label: o.name })),
      this.options.style || "default",
      (o) => this.options.style = o
    );
    n.appendChild(l), n.appendChild(a);
    const i = s("mb-3"), p = c(this.editor.t("Theme")), d = S(
      w.map((o) => ({ value: o.id, label: o.name })),
      this.options.theme || "light",
      (o) => this.options.theme = o
    );
    return i.appendChild(p), i.appendChild(d), e.appendChild(t), e.appendChild(n), e.appendChild(i), e;
  }
  createDimensionsSection() {
    const e = s("dimensions-section"), t = document.createElement("h3");
    t.textContent = this.editor.t("Dimensions"), t.className = "text-lg font-semibold mb-3";
    const n = s("mb-3 width-container"), l = c(this.editor.t("Width")), a = x(
      "text",
      "e.g., 100%, 800px",
      this.options.width || "100%",
      (o) => this.options.width = o
    );
    if (a.name = "width", this.options.enableScroll && (a.disabled = !0, a.style.opacity = "0.5", a.style.cursor = "not-allowed"), n.appendChild(l), n.appendChild(a), this.options.enableScroll) {
      const o = s("mb-3 width-warning"), h = document.createElement("p");
      h.textContent = this.editor.t(
        "Note: Width is disabled when Horizontal Scroll is enabled"
      ), h.className = "text-sm text-orange-600 bg-orange-50 p-2 rounded border border-orange-200", o.appendChild(h), n.appendChild(o);
    }
    const i = s("mb-3"), p = c(this.editor.t("Cell Padding")), d = x(
      "text",
      "e.g., 8px",
      this.options.cellPadding || "8px",
      (o) => this.options.cellPadding = o
    );
    return i.appendChild(p), i.appendChild(d), e.appendChild(t), e.appendChild(n), e.appendChild(i), e;
  }
  createBordersSection() {
    const e = s("borders-section"), t = document.createElement("h3");
    t.textContent = this.editor.t("Borders"), t.className = "text-lg font-semibold mb-3";
    const n = s("mb-3"), l = c(this.editor.t("Border Style")), a = S(
      B.map((r) => ({ value: r.value, label: r.label })),
      this.options.borderStyle || "solid",
      (r) => this.options.borderStyle = r
    );
    n.appendChild(l), n.appendChild(a);
    const i = s("mb-3"), p = c(this.editor.t("Border Width")), d = S(
      N.map((r) => ({ value: r.value, label: r.label })),
      this.options.borderWidth || "1px",
      (r) => this.options.borderWidth = r
    );
    i.appendChild(p), i.appendChild(d);
    const o = s("mb-3"), h = c(this.editor.t("Border Color")), f = x(
      "color",
      "",
      this.options.borderColor || "#e0e0e0",
      (r) => this.options.borderColor = r
    );
    return o.appendChild(h), o.appendChild(f), e.appendChild(t), e.appendChild(n), e.appendChild(i), e.appendChild(o), e;
  }
  createColorsSection() {
    const e = s("colors-section"), t = document.createElement("h3");
    t.textContent = this.editor.t("Colors"), t.className = "text-lg font-semibold mb-3";
    const n = s("mb-3"), l = c(this.editor.t("Header Background")), a = x(
      "color",
      "",
      this.options.headerBackground || "#f8f9fa",
      (o) => this.options.headerBackground = o
    );
    n.appendChild(l), n.appendChild(a);
    const i = s("mb-3"), p = c(this.editor.t("Header Text Color")), d = x(
      "color",
      "",
      this.options.headerColor || "#495057",
      (o) => this.options.headerColor = o
    );
    return i.appendChild(p), i.appendChild(d), e.appendChild(t), e.appendChild(n), e.appendChild(i), e;
  }
  createEffectsSection() {
    const e = s("effects-section"), t = document.createElement("h3");
    t.textContent = this.editor.t("Effects"), t.className = "text-lg font-semibold mb-3";
    const n = s("mb-3"), l = c(this.editor.t("Zebra Stripe")), a = document.createElement("input");
    a.type = "checkbox", a.checked = this.options.zebraStripe || !1, a.className = "form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out", a.addEventListener("change", (o) => {
      this.options.zebraStripe = o.target.checked;
    }), n.appendChild(l), n.appendChild(a);
    const i = s("mb-3"), p = c(this.editor.t("Hover Effect")), d = document.createElement("input");
    return d.type = "checkbox", d.checked = this.options.hoverEffect || !1, d.className = "form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out", d.addEventListener("change", (o) => {
      this.options.hoverEffect = o.target.checked;
    }), i.appendChild(p), i.appendChild(d), e.appendChild(t), e.appendChild(n), e.appendChild(i), e;
  }
  createResponsiveSection() {
    var g;
    const e = s("responsive-section"), t = document.createElement("h3");
    t.textContent = this.editor.t("Responsive Settings"), t.className = "text-lg font-semibold mb-3";
    const n = s("mb-3"), l = c(this.editor.t("Breakpoint")), a = S(
      [
        { 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",
      (b) => {
        this.options.breakpoint = b ? parseInt(b) : 768;
      }
    );
    n.appendChild(l), n.appendChild(a);
    const i = s("mb-3"), p = c(this.editor.t("Enable Horizontal Scroll")), d = s("flex items-center"), o = document.createElement("input");
    o.type = "checkbox", o.checked = this.options.enableScroll || !1, o.className = "form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out", o.addEventListener("change", (b) => {
      this.options.enableScroll = b.target.checked;
    }), d.appendChild(o), i.appendChild(p), i.appendChild(d);
    const h = s("mb-3"), f = c(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", (b) => {
      this.options.enableTouch = b.target.checked;
    }), h.appendChild(f), h.appendChild(r);
    const v = s("mb-3"), k = c(this.editor.t("Enable Cards on Mobile")), m = document.createElement("input");
    return m.type = "checkbox", m.checked = this.options.enableCards || !1, m.className = "form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out", m.addEventListener("change", (b) => {
      this.options.enableCards = b.target.checked;
    }), v.appendChild(k), v.appendChild(m), e.appendChild(t), e.appendChild(n), e.appendChild(i), e.appendChild(h), e.appendChild(v), e;
  }
  show(e) {
    this.activeTable = e, this.loadCurrentOptions(), this.popup.show();
  }
  loadCurrentOptions() {
    var n, l;
    if (!this.activeTable) return;
    const e = window.getComputedStyle(this.activeTable), t = new W(this.editor, this.activeTable);
    t.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: ((n = this.activeTable.querySelector(".table-header-cell")) == null ? void 0 : n.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"),
      // Responsive settings
      breakpoint: t.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
    }, t = {
      breakpoint: this.options.breakpoint,
      enableScroll: this.options.enableScroll,
      enableTouch: this.options.enableTouch,
      enableCards: this.options.enableCards
    }, n = new D(this.editor, this.activeTable, e), l = new z(
      this.editor,
      this.activeTable,
      t
    );
    n.execute(), l.execute(), this.popup.hide();
  }
  destroy() {
    this.popup.destroy();
  }
}
export {
  _ as TableEditor
};