on-codemerge/dist/src/plugins/TablePlugin/commands/EditLazyTableCommand.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 n = Object.defineProperty;
var s = (r, e, t) => e in r ? n(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
var i = (r, e, t) => s(r, typeof e != "symbol" ? e + "" : e, t);
import { LazyTableModal as o } from "../components/LazyTableModal.mjs";
class u {
  constructor(e, t, a = {}) {
    i(this, "editor");
    i(this, "table");
    this.editor = e, this.table = t;
  }
  execute() {
    const e = {
      url: this.table.getAttribute("data-lazy-url") || "",
      format: this.table.getAttribute("data-lazy-format") || "json",
      hasHeaders: this.table.getAttribute("data-lazy-headers") !== "false",
      delimiter: this.table.getAttribute("data-lazy-delimiter") || ",",
      tableId: this.table.id || "",
      isEdit: !0,
      onSave: (a) => this.updateTable(a)
    };
    new o(this.editor, document.createRange(), e).show();
  }
  updateTable(e) {
    var d;
    e.url && this.table.setAttribute("data-lazy-url", e.url), e.format && this.table.setAttribute("data-lazy-format", e.format), e.delimiter && this.table.setAttribute("data-lazy-delimiter", e.delimiter), e.hasHeaders !== void 0 && this.table.setAttribute("data-lazy-headers", String(e.hasHeaders)), e.tableId && (this.table.id = e.tableId);
    const t = this.table.nextElementSibling;
    t && t.tagName === "SCRIPT" && t.remove();
    const a = document.createElement("script");
    a.type = "text/javascript", a.textContent = this.generateLazyScript(this.table.id, {
      url: this.table.getAttribute("data-lazy-url") || "",
      format: this.table.getAttribute("data-lazy-format") || "json",
      hasHeaders: this.table.getAttribute("data-lazy-headers") !== "false",
      delimiter: this.table.getAttribute("data-lazy-delimiter") || ","
    }), (d = this.table.parentNode) == null || d.insertBefore(a, this.table.nextSibling), setTimeout(() => {
      const l = document.createElement("script");
      l.textContent = a.textContent, document.head.appendChild(l), document.head.removeChild(l);
    }, 100);
  }
  generateLazyScript(e, t) {
    return `
(function() {
  var table = document.getElementById('${e}');
  if (!table) return;
  var url = table.getAttribute('data-lazy-url');
  var format = table.getAttribute('data-lazy-format');
  var delimiter = table.getAttribute('data-lazy-delimiter') || ',';
  var hasHeaders = table.getAttribute('data-lazy-headers') !== 'false';
  
  function showLoading() {
    table.innerHTML = '<div class="table-row"><div class="table-cell" style="text-align:center;padding:20px;">Загрузка данных...</div></div>';
  }
  
  function showError(msg) {
    table.innerHTML = '<div class="table-row"><div class="table-cell" style="text-align:center;padding:20px;color:#e74c3c;">Ошибка загрузки: ' + msg + '</div></div>';
  }
  
  function parseCSV(csv, delimiter) {
    var rows = csv.trim().split('\\n');
    return rows.map(function(row) {
      var result = [], current = '', inQuotes = false;
      for (var i = 0; i < row.length; i++) {
        var char = row[i];
        if (char === '"') inQuotes = !inQuotes;
        else if (char === delimiter && !inQuotes) { result.push(current.trim()); current = ''; }
        else current += char;
      }
      result.push(current.trim());
      return result;
    });
  }
  
  function renderCSV(data, hasHeaders) {
    table.innerHTML = '';
    data.forEach(function(row, rowIndex) {
      var rowDiv = document.createElement('div');
      rowDiv.className = rowIndex === 0 && hasHeaders ? 'table-header-row' : 'table-row';
      row.forEach(function(cellData) {
        var cell = document.createElement('div');
        cell.className = rowIndex === 0 && hasHeaders ? 'table-header-cell' : 'table-cell';
        cell.textContent = cellData;
        rowDiv.appendChild(cell);
      });
      table.appendChild(rowDiv);
    });
  }
  
  function renderJSON(data) {
    table.innerHTML = '';
    if (!Array.isArray(data) || !data.length) {
      table.innerHTML = '<div class="table-row"><div class="table-cell">Нет данных</div></div>';
      return;
    }
    var headers = Object.keys(data[0]);
    var headerRow = document.createElement('div');
    headerRow.className = 'table-header-row';
    headers.forEach(function(header) {
      var cell = document.createElement('div');
      cell.className = 'table-header-cell';
      cell.textContent = header;
      headerRow.appendChild(cell);
    });
    table.appendChild(headerRow);
    data.forEach(function(row) {
      var rowDiv = document.createElement('div');
      rowDiv.className = 'table-row';
      headers.forEach(function(header) {
        var cell = document.createElement('div');
        cell.className = 'table-cell';
        cell.textContent = row[header] || '';
        rowDiv.appendChild(cell);
      });
      table.appendChild(rowDiv);
    });
  }
  
  showLoading();
  fetch(url).then(function(resp) {
    if (!resp.ok) throw new Error('HTTP ' + resp.status);
    return format === 'json' ? resp.json() : resp.text();
  }).then(function(data) {
    if (format === 'json') renderJSON(data);
    else renderCSV(parseCSV(data, delimiter), hasHeaders);
  }).catch(function(e) { showError(e.message); });
})();
`;
  }
}
export {
  u as EditLazyTableCommand
};