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
109 lines (108 loc) • 4.8 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 o = Object.defineProperty;
var d = (r, e, t) => e in r ? o(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
var l = (r, e, t) => d(r, typeof e != "symbol" ? e + "" : e, t);
import { Table as c } from "../components/Table.mjs";
class m {
constructor(e, t, a) {
l(this, "options");
l(this, "range");
l(this, "editor");
this.editor = e, this.options = t, this.range = a.cloneRange();
}
execute() {
const e = this.options.tableId || `lazy-table-${Date.now()}`, t = new c({ hasHeader: !1, rows: 1, cols: 1 }, this.editor), a = t.getElement();
a.id = e, a.setAttribute("data-lazy-url", this.options.url), a.setAttribute("data-lazy-format", this.options.format), this.options.delimiter && a.setAttribute("data-lazy-delimiter", this.options.delimiter), this.options.hasHeaders !== void 0 && a.setAttribute("data-lazy-headers", String(this.options.hasHeaders)), a.classList.add("lazy-table");
const s = a.querySelector(".table-cell");
s && (s.textContent = "Загрузка..."), this.range.deleteContents();
const n = document.createDocumentFragment();
n.appendChild(a);
const i = document.createElement("script");
i.type = "text/javascript", i.textContent = this.generateLazyScript(e, this.options), n.appendChild(i), this.range.insertNode(n), t.focusFirstCell();
}
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 {
m as InsertLazyTableCommand
};