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
111 lines (110 loc) • 6.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 */
var E = Object.defineProperty;
var y = (s, r, c) => r in s ? E(s, r, { enumerable: !0, configurable: !0, writable: !0, value: c }) : s[r] = c;
var A = (s, r, c) => y(s, typeof r != "symbol" ? r + "" : r, c);
class x {
constructor(r, c) {
A(this, "container");
A(this, "editor");
this.container = r, this.editor = c;
}
/**
* Create preview form
*/
createPreview(r) {
if (!this.container) return;
this.container.innerHTML = "";
const c = document.createElement("form");
c.className = r.className || "generated-form", c.method = r.method, c.action = r.action, r.fields.forEach((i) => {
const e = this.createFieldElement(i);
e && c.appendChild(e);
});
const t = document.createElement("button");
t.type = "submit", t.className = "submit-button", t.textContent = this.editor.t("Submit"), c.appendChild(t), this.container.appendChild(c);
}
/**
* Create field element
*/
createFieldElement(r) {
const { id: c, type: t, label: i, options: e, validation: b } = r, l = document.createElement("div");
if (l.className = `form-field${b != null && b.required ? " required-field" : ""}`, i) {
const d = document.createElement("label");
d.htmlFor = c, d.textContent = i, l.appendChild(d);
}
let a;
switch (t) {
case "text":
case "email":
case "password":
case "number":
case "tel":
case "url":
case "date":
case "time":
case "datetime-local":
case "month":
case "week":
case "color":
case "range":
a = document.createElement("input"), a.setAttribute("type", t), a.id = c, a.setAttribute("name", (e == null ? void 0 : e.name) || c), this.applyCommonAttributes(a, r);
break;
case "textarea":
a = document.createElement("textarea"), a.id = c, a.setAttribute("name", (e == null ? void 0 : e.name) || c), this.applyCommonAttributes(a, r), e != null && e.rows && a.setAttribute("rows", e.rows.toString()), e != null && e.cols && a.setAttribute("cols", e.cols.toString());
break;
case "select":
a = document.createElement("select"), a.id = c, a.setAttribute("name", (e == null ? void 0 : e.name) || c), this.applyCommonAttributes(a, r), e != null && e.multiple && a.setAttribute("multiple", ""), e != null && e.options && e.options.forEach((u) => {
const m = document.createElement("option");
m.value = u, m.textContent = u, a.appendChild(m);
});
break;
case "checkbox":
a = document.createElement("input"), a.setAttribute("type", "checkbox"), a.id = c, a.setAttribute("name", (e == null ? void 0 : e.name) || c), this.applyCommonAttributes(a, r), e != null && e.checked && a.setAttribute("checked", "");
const d = (e == null ? void 0 : e.value) || r.label || "";
if (d) {
const u = document.createElement("div");
u.className = "checkbox-container";
const m = document.createElement("label");
return m.htmlFor = c, m.textContent = d, u.appendChild(a), u.appendChild(m), l.appendChild(u), l;
} else
return l.appendChild(a), l;
case "radio":
if (e != null && e.options) {
const u = document.createElement("div");
return e.options.forEach((m, C) => {
const f = `${c}_${C}`, n = document.createElement("input");
n.setAttribute("type", "radio"), n.id = f, n.setAttribute("name", (e == null ? void 0 : e.name) || c), n.value = m, this.applyCommonAttributes(n, r), (e == null ? void 0 : e.value) === m && n.setAttribute("checked", "");
const h = document.createElement("label");
h.htmlFor = f, h.textContent = m, u.appendChild(n), u.appendChild(h);
}), u;
}
return null;
case "file":
a = document.createElement("input"), a.setAttribute("type", "file"), a.id = c, a.setAttribute("name", (e == null ? void 0 : e.name) || c), this.applyCommonAttributes(a, r), e != null && e.accept && a.setAttribute("accept", e.accept), e != null && e.multiple && a.setAttribute("multiple", "");
break;
case "hidden":
a = document.createElement("input"), a.setAttribute("type", "hidden"), a.id = c, a.setAttribute("name", (e == null ? void 0 : e.name) || c), this.applyCommonAttributes(a, r);
break;
case "image":
a = document.createElement("input"), a.setAttribute("type", "image"), a.id = c, a.setAttribute("name", (e == null ? void 0 : e.name) || c), this.applyCommonAttributes(a, r), e != null && e.src && a.setAttribute("src", e.src), e != null && e.alt && a.setAttribute("alt", e.alt);
break;
case "button":
case "submit":
case "reset":
a = document.createElement("button"), a.setAttribute("type", t), a.id = c, a.setAttribute("name", (e == null ? void 0 : e.name) || c), this.applyCommonAttributes(a, r), a.textContent = i || t;
break;
default:
a = document.createElement("input"), a.setAttribute("type", "text"), a.id = c, a.setAttribute("name", (e == null ? void 0 : e.name) || c), this.applyCommonAttributes(a, r);
}
return l.appendChild(a), l;
}
/**
* Apply common attributes to form elements
*/
applyCommonAttributes(r, c) {
const { options: t, validation: i } = c;
t != null && t.placeholder && r.setAttribute("placeholder", t.placeholder), t != null && t.value && r.setAttribute("value", t.value), t != null && t.className && r.setAttribute("class", t.className), t != null && t.readonly && r.setAttribute("readonly", ""), t != null && t.disabled && r.setAttribute("disabled", ""), t != null && t.size && r.setAttribute("size", t.size.toString()), t != null && t.maxlength && r.setAttribute("maxlength", t.maxlength.toString()), t != null && t.minlength && r.setAttribute("minlength", t.minlength.toString()), (t == null ? void 0 : t.min) !== void 0 && r.setAttribute("min", t.min.toString()), (t == null ? void 0 : t.max) !== void 0 && r.setAttribute("max", t.max.toString()), (t == null ? void 0 : t.step) !== void 0 && r.setAttribute("step", t.step.toString()), t != null && t.autocomplete && r.setAttribute("autocomplete", t.autocomplete), i != null && i.required && r.setAttribute("required", ""), i != null && i.pattern && r.setAttribute("pattern", i.pattern), i && r.setAttribute("data-validation", JSON.stringify(i));
}
}
export {
x as FormPreview
};