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
130 lines (129 loc) • 4.79 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 n = Object.defineProperty;
var r = (s, t, e) => t in s ? n(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
var a = (s, t, e) => r(s, typeof t != "symbol" ? t + "" : t, e);
import { PopupManager as h } from "../../../core/ui/PopupManager.mjs";
import { InsertLazyTableCommand as d } from "../commands/InsertLazyTableCommand.mjs";
import { ImportTableFromHTMLCommand as c } from "../commands/ImportTableFromHTMLCommand.mjs";
class f {
constructor(t, e, o = {}) {
a(this, "popup", null);
a(this, "editor");
a(this, "range");
a(this, "options");
this.editor = t, this.range = e.cloneRange(), this.options = o;
}
show() {
let t = this.editor.t("Insert Lazy Table");
this.options.isEdit ? t = this.editor.t("Edit Lazy Table") : this.options.isFillMode && (t = this.editor.t("Fill Table with Data")), this.popup = new h(this.editor, {
title: t,
className: "lazy-table-modal",
closeOnClickOutside: !0,
items: [
{
type: "list",
id: "import-type",
label: this.editor.t("Import Type"),
options: ["json", "csv", "html"],
value: this.options.format || "json",
onChange: (e) => this.onImportTypeChange(e)
},
{
type: "input",
id: "url",
label: this.editor.t("Data URL"),
placeholder: "https://example.com/data.json",
value: this.options.url || ""
},
{
type: "input",
id: "selector",
label: this.editor.t("CSS Selector (for HTML)"),
placeholder: "table, .my-table, #data-table",
value: "",
className: "html-only-field"
},
{
type: "checkbox",
id: "hasHeaders",
label: this.editor.t("First row contains headers"),
value: this.options.hasHeaders !== !1,
className: "json-csv-only-field"
},
{
type: "input",
id: "delimiter",
label: this.editor.t("CSV Delimiter"),
placeholder: ",",
value: this.options.delimiter || ",",
className: "csv-only-field"
},
{
type: "input",
id: "tableId",
label: this.editor.t("Table ID (optional)"),
placeholder: "my-data-table",
value: this.options.tableId || ""
}
],
buttons: [
{
label: this.editor.t("Cancel"),
variant: "secondary",
onClick: () => {
var e;
return (e = this.popup) == null ? void 0 : e.hide();
}
},
{
label: this.options.isEdit ? this.editor.t("Update Table") : this.options.isFillMode ? this.editor.t("Fill Table") : this.editor.t("Insert Table"),
variant: "primary",
onClick: () => this.insertTable()
}
]
}), this.onImportTypeChange(this.options.format || "json"), this.popup.show();
}
onImportTypeChange(t) {
if (!this.popup) return;
const e = this.popup.getElement().querySelectorAll(".html-only-field"), o = this.popup.getElement().querySelectorAll(".json-csv-only-field"), p = this.popup.getElement().querySelectorAll(".csv-only-field");
e.forEach((l) => {
const i = l.closest(".popup-item");
i && (i.style.display = t === "html" ? "block" : "none");
}), o.forEach((l) => {
const i = l.closest(".popup-item");
i && (i.style.display = t === "json" || t === "csv" ? "block" : "none");
}), p.forEach((l) => {
const i = l.closest(".popup-item");
i && (i.style.display = t === "csv" ? "block" : "none");
});
}
insertTable() {
if (!this.popup) return;
const t = this.popup.getValue("import-type"), e = this.popup.getValue("url");
if (!e) {
alert(this.editor.t("Please enter a valid URL"));
return;
}
if (t === "html") {
const o = {
url: e,
selector: this.popup.getValue("selector"),
tableId: this.popup.getValue("tableId")
};
this.options.onSave ? this.options.onSave(o) : new c(this.editor, o, this.range).execute();
} else {
const o = {
url: e,
format: t,
hasHeaders: this.popup.getValue("hasHeaders"),
delimiter: this.popup.getValue("delimiter"),
tableId: this.popup.getValue("tableId")
};
this.options.onSave ? this.options.onSave(o) : new d(this.editor, o, this.range).execute();
}
this.popup.hide();
}
}
export {
f as LazyTableModal
};