on-codemerge/dist/src/plugins/TablePlugin/index.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 b = Object.defineProperty;
var f = (a, e, t) => e in a ? b(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
var r = (a, e, t) => f(a, typeof e != "symbol" ? e + "" : e, t);
/* empty css            */
/* empty css             */
import { TablePopup as p } from "./components/TablePopup.mjs";
import { TableContextMenu as C } from "./components/TableContextMenu.mjs";
import { TableEditor as S } from "./components/TableEditor.mjs";
import { CellFormatter as v } from "./components/CellFormatter.mjs";
import { TableExportService as y } from "./services/TableExportService.mjs";
import { createToolbarButton as g } from "../ToolbarPlugin/utils.mjs";
import w from "../../icons/table.svg.mjs";
import { Resizer as T } from "../../utils/Resizer.mjs";
import { ExportTableCommand as x } from "./commands/ExportTableCommand.mjs";
import { ImportTableCommand as E } from "./commands/ImportTableCommand.mjs";
import { FormatCellCommand as k } from "./commands/FormatCellCommand.mjs";
import { ShowTablePropertiesCommand as L } from "./commands/ShowTablePropertiesCommand.mjs";
import { SortTableCommand as z } from "./commands/SortTableCommand.mjs";
import { ResizeColumnsCommand as M } from "./commands/ResizeColumnsCommand.mjs";
import { DeleteCellContentCommand as A } from "./commands/DeleteCellContentCommand.mjs";
import { CopyCellCommand as R } from "./commands/CopyCellCommand.mjs";
import { PasteCellCommand as P } from "./commands/PasteCellCommand.mjs";
import { CutCellCommand as D } from "./commands/CutCellCommand.mjs";
import { SelectAllCommand as q } from "./commands/SelectAllCommand.mjs";
import { LazyTableModal as m } from "./components/LazyTableModal.mjs";
import { EditLazyTableCommand as F } from "./commands/EditLazyTableCommand.mjs";
class ne {
  constructor() {
    r(this, "name", "table");
    r(this, "hotkeys", [
      { keys: "Ctrl+Shift+T", description: "Insert table", command: "insert-table", icon: "📊" },
      {
        keys: "Ctrl+Shift+J",
        description: "Insert lazy table",
        command: "insert-lazy-table",
        icon: "📊⏳"
      },
      { keys: "Ctrl+L", description: "Edit lazy table", command: "edit-lazy-table", icon: "🔄" },
      {
        keys: "Ctrl+Shift+Z",
        description: "Import from HTML",
        command: "import-from-html",
        icon: "🌐"
      },
      { keys: "Ctrl+Shift+E", description: "Export table", command: "export-table", icon: "📤" },
      { keys: "Ctrl+Shift+I", description: "Import table", command: "import-table", icon: "📥" },
      { keys: "Alt+Shift+F", description: "Format cells", command: "format-cells", icon: "🎨" },
      {
        keys: "Ctrl+Shift+P",
        description: "Table properties",
        command: "table-properties",
        icon: "⚙️"
      },
      { keys: "Alt+Shift+S", description: "Sort table", command: "sort-table", icon: "📈" },
      { keys: "Ctrl+Shift+R", description: "Resize columns", command: "resize-columns", icon: "📏" },
      {
        keys: "Delete",
        description: "Delete selected cells",
        command: "delete-selected-cells",
        icon: "🗑️"
      },
      {
        keys: "Backspace",
        description: "Delete selected cells",
        command: "delete-selected-cells",
        icon: "🗑️"
      },
      {
        keys: "Alt+Shift+C",
        description: "Copy selected cells",
        command: "copy-selected-cells",
        icon: "📋"
      },
      { keys: "Ctrl+Shift+V", description: "Paste cells", command: "paste-cells", icon: "📋" },
      {
        keys: "Ctrl+Shift+X",
        description: "Cut selected cells",
        command: "cut-selected-cells",
        icon: "✂️"
      },
      {
        keys: "Ctrl+Shift+A",
        description: "Select all cells",
        command: "select-all-cells",
        icon: "☑️"
      }
    ]);
    r(this, "editor", null);
    r(this, "popup", null);
    r(this, "contextMenu", null);
    r(this, "tableEditor", null);
    r(this, "cellFormatter", null);
    r(this, "exportService", null);
    r(this, "currentResizer", null);
    r(this, "selectedCells", []);
    r(this, "toolbarButton", null);
    r(this, "handleContextMenu", (e) => {
      var l;
      const t = e.target.closest(".table-cell, .table-header-cell");
      if (t instanceof HTMLElement) {
        e.preventDefault();
        const o = e.clientX, s = e.clientY;
        (l = this.contextMenu) == null || l.show(t, o, s);
      }
    });
    r(this, "handleClick", (e) => {
      var o, s, i, n;
      const t = e.target.closest(".html-editor-table");
      t instanceof HTMLElement && (e.preventDefault(), (s = (o = this.editor) == null ? void 0 : o.getSelector()) == null || s.saveTable(t));
      const l = e.target.closest(
        ".table-cell, .table-header-cell"
      );
      l && l instanceof HTMLElement && (e.preventDefault(), (n = (i = this.editor) == null ? void 0 : i.getSelector()) == null || n.selectCell(l), this.currentResizer && (this.currentResizer.destroy(), this.currentResizer = null), this.currentResizer = new T(l, {
        handleSize: 10,
        handleColor: "blue",
        onResizeStart: () => {
          var c;
          return (c = this.editor) == null ? void 0 : c.disableObserver();
        },
        onResize: (c, d) => {
          l.style.width = `${c}px`, l.style.height = `${d}px`;
        },
        onResizeEnd: () => {
          var c;
          return (c = this.editor) == null ? void 0 : c.enableObserver();
        }
      }));
    });
    r(this, "handleMouseDown", (e) => {
      const t = e.target.closest(
        ".table-cell, .table-header-cell"
      );
      t && (e.shiftKey ? (e.preventDefault(), this.addToSelection(t)) : (this.clearSelection(), this.addToSelection(t)));
    });
    r(this, "handleMouseOver", (e) => {
      const t = e.target.closest(
        ".table-cell, .table-header-cell"
      );
      t && t.classList.add("hover");
    });
    r(this, "handleMouseOut", (e) => {
      const t = e.target.closest(
        ".table-cell, .table-header-cell"
      );
      t && t.classList.remove("hover");
    });
    r(this, "handleKeydown", (e) => {
      var t, l, o, s;
      if (e.key === "Delete") {
        const i = (l = (t = this.editor) == null ? void 0 : t.getSelector()) == null ? void 0 : l.restoreTable();
        i && (i.remove(), (s = (o = this.editor) == null ? void 0 : o.getSelector()) == null || s.clearTable());
      }
      e.target instanceof HTMLElement && (e.target.classList.contains("table-cell") || e.target.classList.contains("table-header-cell")) && this.handleTableNavigation(e);
    });
  }
  initialize(e) {
    this.editor = e, this.popup = new p(e), this.contextMenu = new C(e), this.tableEditor = new S(e), this.cellFormatter = new v(e), this.exportService = new y(), this.addToolbarButton(), this.setupTableEvents(), this.setupKeyboardShortcuts(), this.editor.on("table", () => {
      var l, o;
      const t = (l = this.editor) == null ? void 0 : l.saveCursorPosition();
      (o = this.popup) == null || o.show((s) => {
        var i;
        t && ((i = this.editor) == null || i.restoreCursorPosition(t)), this.insertTable(s);
      });
    });
  }
  addToolbarButton() {
    var t, l;
    const e = (t = this.editor) == null ? void 0 : t.getToolbar();
    if (e) {
      const o = g({
        icon: w,
        title: (l = this.editor) == null ? void 0 : l.t("Insert Table"),
        onClick: () => {
          var i, n;
          const s = (i = this.editor) == null ? void 0 : i.saveCursorPosition();
          (n = this.popup) == null || n.show((c) => {
            var d;
            s && ((d = this.editor) == null || d.restoreCursorPosition(s)), this.insertTable(c);
          });
        }
      });
      this.toolbarButton = o, e.appendChild(o);
    }
  }
  setupTableEvents() {
    if (!this.editor) return;
    const e = this.editor.getContainer();
    e && (e.addEventListener("click", this.handleClick), e.addEventListener("contextmenu", this.handleContextMenu), e.addEventListener("keydown", this.handleKeydown), e.addEventListener("mousedown", this.handleMouseDown), e.addEventListener("mouseover", this.handleMouseOver), e.addEventListener("mouseout", this.handleMouseOut));
  }
  setupKeyboardShortcuts() {
    this.editor && (this.editor.on("insert-table", () => {
      var t, l;
      const e = (t = this.editor) == null ? void 0 : t.saveCursorPosition();
      (l = this.popup) == null || l.show((o) => {
        var s;
        e && ((s = this.editor) == null || s.restoreCursorPosition(e)), this.insertTable(o);
      });
    }), this.editor.on("insert-lazy-table", () => {
      var l, o, s, i;
      const e = (l = this.editor) == null ? void 0 : l.saveCursorPosition();
      e && ((o = this.editor) == null || o.restoreCursorPosition(e));
      const t = (i = (s = this.editor) == null ? void 0 : s.getTextFormatter()) == null ? void 0 : i.getSelection();
      if (t && t.rangeCount > 0) {
        const n = t.getRangeAt(0);
        new m(this.editor, n).show();
      }
    }), this.editor.on("edit-lazy-table", () => {
      var t, l;
      const e = (l = (t = this.editor) == null ? void 0 : t.getSelector()) == null ? void 0 : l.restoreTable();
      e && this.editor && e.classList.contains("lazy-table") && new F(this.editor, e).execute();
    }), this.editor.on("import-from-html", () => {
      var l, o, s, i;
      const e = (l = this.editor) == null ? void 0 : l.saveCursorPosition();
      e && ((o = this.editor) == null || o.restoreCursorPosition(e));
      const t = (i = (s = this.editor) == null ? void 0 : s.getTextFormatter()) == null ? void 0 : i.getSelection();
      if (t && t.rangeCount > 0) {
        const n = t.getRangeAt(0);
        new m(this.editor, n).show();
      }
    }), this.editor.on("export-table", () => {
      var t, l;
      const e = (l = (t = this.editor) == null ? void 0 : t.getSelector()) == null ? void 0 : l.restoreTable();
      e && this.editor && new x(this.editor, e).execute();
    }), this.editor.on("import-table", () => {
      this.editor && new E(this.editor).execute();
    }), this.editor.on("format-cells", () => {
      var t, l;
      const e = (l = (t = this.editor) == null ? void 0 : t.getSelector()) == null ? void 0 : l.restoreTable();
      if (e && this.editor) {
        const o = e.querySelectorAll(
          ".table-cell.selected, .table-header-cell.selected"
        );
        o.length > 0 && new k(this.editor, o[0]).execute();
      }
    }), this.editor.on("table-properties", () => {
      var t, l;
      const e = (l = (t = this.editor) == null ? void 0 : t.getSelector()) == null ? void 0 : l.restoreTable();
      e && this.editor && new L(this.editor, e).execute();
    }), this.editor.on("sort-table", () => {
      var t, l;
      const e = (l = (t = this.editor) == null ? void 0 : t.getSelector()) == null ? void 0 : l.restoreTable();
      e && this.editor && new z(this.editor, e).execute();
    }), this.editor.on("resize-columns", () => {
      var t, l;
      const e = (l = (t = this.editor) == null ? void 0 : t.getSelector()) == null ? void 0 : l.restoreTable();
      e && this.editor && new M(this.editor, e).execute();
    }), this.editor.on("delete-selected-cells", () => {
      var t, l;
      const e = (l = (t = this.editor) == null ? void 0 : t.getSelector()) == null ? void 0 : l.restoreTable();
      if (e && this.editor) {
        const o = e.querySelectorAll(
          ".table-cell.selected, .table-header-cell.selected"
        );
        o.length > 0 && new A(
          this.editor,
          o[0]
        ).execute();
      }
    }), this.editor.on("copy-selected-cells", () => {
      var t, l;
      const e = (l = (t = this.editor) == null ? void 0 : t.getSelector()) == null ? void 0 : l.restoreTable();
      if (e && this.editor) {
        const o = e.querySelectorAll(
          ".table-cell.selected, .table-header-cell.selected"
        );
        o.length > 0 && new R(this.editor, o[0]).execute();
      }
    }), this.editor.on("paste-cells", () => {
      var t, l;
      const e = (l = (t = this.editor) == null ? void 0 : t.getSelector()) == null ? void 0 : l.restoreTable();
      if (e && this.editor) {
        const o = e.querySelectorAll(
          ".table-cell.selected, .table-header-cell.selected"
        );
        o.length > 0 && new P(this.editor, o[0]).execute();
      }
    }), this.editor.on("cut-selected-cells", () => {
      var t, l;
      const e = (l = (t = this.editor) == null ? void 0 : t.getSelector()) == null ? void 0 : l.restoreTable();
      if (e && this.editor) {
        const o = e.querySelectorAll(
          ".table-cell.selected, .table-header-cell.selected"
        );
        o.length > 0 && new D(this.editor, o[0]).execute();
      }
    }), this.editor.on("select-all-cells", () => {
      var t, l;
      const e = (l = (t = this.editor) == null ? void 0 : t.getSelector()) == null ? void 0 : l.restoreTable();
      e && this.editor && new q(this.editor, e).execute();
    }));
  }
  handleTableNavigation(e) {
    var n, c;
    const t = e.target;
    if (!t.closest(".html-editor-table")) return;
    const o = t.parentElement, s = Array.from(
      o.querySelectorAll(".table-cell, .table-header-cell")
    ).indexOf(t);
    let i = null;
    switch (e.key) {
      case "ArrowUp":
        o.previousElementSibling && (i = o.previousElementSibling.querySelectorAll(".table-cell, .table-header-cell")[s] || null);
        break;
      case "ArrowDown":
        o.nextElementSibling && (i = o.nextElementSibling.querySelectorAll(".table-cell, .table-header-cell")[s] || null);
        break;
      case "ArrowLeft":
        i = o.querySelectorAll(".table-cell, .table-header-cell")[s - 1] || null;
        break;
      case "ArrowRight":
        i = o.querySelectorAll(".table-cell, .table-header-cell")[s + 1] || null;
        break;
      case "Tab":
        e.preventDefault(), e.shiftKey ? i = o.querySelectorAll(".table-cell, .table-header-cell")[s - 1] || null : i = o.querySelectorAll(".table-cell, .table-header-cell")[s + 1] || null;
        break;
    }
    i && (e.preventDefault(), i.focus(), (c = (n = this.editor) == null ? void 0 : n.getSelector()) == null || c.selectCell(i));
  }
  addToSelection(e) {
    this.selectedCells.includes(e) || (this.selectedCells.push(e), e.classList.add("selected"));
  }
  clearSelection() {
    this.selectedCells.forEach((e) => e.classList.remove("selected")), this.selectedCells = [];
  }
  insertTable(e) {
    var l;
    if (!this.editor) return;
    const t = document.createElement("div");
    if (t.className = "html-editor-table table-modern", e.hasHeader) {
      const o = document.createElement("div");
      o.className = "table-header-row";
      for (let s = 0; s < e.cols; s++) {
        const i = document.createElement("div");
        i.className = "table-header-cell", i.textContent = `Header ${s + 1}`, i.contentEditable = "true", o.appendChild(i);
      }
      t.appendChild(o);
    }
    for (let o = 0; o < e.rows; o++) {
      const s = document.createElement("div");
      s.className = "table-row";
      for (let i = 0; i < e.cols; i++) {
        const n = document.createElement("div");
        n.className = "table-cell", n.textContent = `Cell ${o + 1}-${i + 1}`, n.contentEditable = "true", s.appendChild(n);
      }
      t.appendChild(s);
    }
    this.editor.insertContent(t), (l = this.editor.getSelector()) == null || l.saveTable(t);
  }
  destroy() {
    var t;
    if (!this.editor) return;
    this.toolbarButton && (this.toolbarButton.remove(), this.toolbarButton = null);
    const e = this.editor.getContainer();
    e && (e.removeEventListener("click", this.handleClick), e.removeEventListener("contextmenu", this.handleContextMenu), e.removeEventListener("keydown", this.handleKeydown), e.removeEventListener("mousedown", this.handleMouseDown), e.removeEventListener("mouseover", this.handleMouseOver), e.removeEventListener("mouseout", this.handleMouseOut)), this.popup && (this.popup.destroy(), this.popup = null), this.contextMenu && (this.contextMenu.destroy(), this.contextMenu = null), this.tableEditor && (this.tableEditor.destroy(), this.tableEditor = null), this.cellFormatter && (this.cellFormatter.destroy(), this.cellFormatter = null), this.currentResizer && (this.currentResizer.destroy(), this.currentResizer = null), this.exportService && (this.exportService = null), this.editor.off("table"), (t = this.editor.getSelector()) == null || t.clearTable(), this.editor = null, this.selectedCells = [];
  }
}
export {
  F as EditLazyTableCommand,
  m as LazyTableModal,
  ne as TablePlugin
};