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
82 lines (81 loc) • 4.67 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 */
"use strict";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);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../components/Table.cjs");class h{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.Table({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); });
})();
`}}exports.InsertLazyTableCommand=h;