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
169 lines (168 loc) • 6.08 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 */
function i(n = "text", t = "", e = "", r) {
const c = document.createElement("input");
return c.type = n, c.placeholder = t, c.value = e, c.className = "form-input w-full p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all", r && c.addEventListener("input", (a) => {
r(a.target.value);
}), c;
}
function m(n, t = "", e) {
const r = document.createElement("select");
return r.className = "form-select w-full p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500", n.forEach((c) => {
const a = document.createElement("option");
a.value = c.value, a.textContent = c.label, r.appendChild(a);
}), r.value = t, e && r.addEventListener("change", (c) => {
e(c.target.value);
}), r;
}
function d(n, t = !1, e) {
const r = document.createElement("div");
r.className = "flex items-center";
const c = document.createElement("input");
c.type = "checkbox", c.checked = t, c.className = "form-checkbox h-4 w-4 text-blue-600 transition duration-150 ease-in-out", e && c.addEventListener("change", (o) => {
e(o.target.checked);
});
const a = document.createElement("label");
return a.textContent = n ?? "", a.className = "ml-2 text-sm text-gray-700", r.appendChild(c), n && r.appendChild(a), r;
}
function f(n, t = "") {
const e = document.createElement("label");
return e.textContent = n, e.className = "block text-sm font-medium text-gray-700 mb-1", t && (e.htmlFor = t), e;
}
function b(n, t, e = "primary") {
const r = document.createElement("button");
return r.textContent = n, r.type = "button", r.className = `px-4 py-2 rounded-md text-sm font-medium ${e === "primary" ? "bg-blue-500 text-white hover:bg-blue-600" : e === "secondary" ? "bg-gray-300 text-gray-700 hover:bg-gray-400" : "bg-red-500 text-white hover:bg-red-600"}`, r.addEventListener("click", t), r;
}
function x(n = "", t = null) {
const e = document.createElement("div");
return e.className = n, t && (e.textContent = t), e;
}
function p(n = "", t = null) {
const e = document.createElement("p");
return e.className = n, t && (e.textContent = t), e;
}
function E(n = "", t = null) {
const e = document.createElement("span");
return e.className = n, t && (e.textContent = t), e;
}
function g(n = "", t = null) {
const e = document.createElement("kbd");
return e.className = n, t && (e.textContent = t), e;
}
function N(n, t = "#", e = "_self", r = "text-blue-500 hover:text-blue-700 underline") {
const c = document.createElement("a");
return c.textContent = n, c.href = t, c.target = e, c.className = r, c;
}
function h(n = "", t = "", e) {
const r = document.createElement("textarea");
return r.placeholder = n, r.value = t, r.className = "form-textarea w-full p-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500", e && r.addEventListener("input", (c) => {
e(c.target.value);
}), r;
}
function v(n = "", t = null, e = null) {
const r = document.createElement("form");
return t && (r.action = t), e && (r.method = e), r.className = n, r;
}
function C(n = "", t = null) {
const e = document.createElement("br");
return e.className = n, t && (e.textContent = t), e;
}
function y(n = "", t = null) {
const e = document.createElement("hr");
return e.className = n, t && (e.textContent = t), e;
}
function k(n, t = "", e = null) {
const r = document.createElement(n);
return r.className = t, e && (r.textContent = e), r;
}
function w(n = "", t = null) {
const e = document.createElement("iframe");
return e.className = n, t && (e.textContent = t), e;
}
function F(n = "", t = null) {
const e = document.createElement("video");
return e.className = n, t && (e.textContent = t), e;
}
function L(n = "", t = null) {
const e = document.createElement("pre");
return e.className = n, t && (e.textContent = t), e;
}
function D(n = "", t = null) {
const e = document.createElement("sup");
return e.className = n, t && (e.textContent = t), e;
}
function S(n = "", t = null) {
const e = document.createElement("code");
return e.className = n, t && (e.textContent = t), e;
}
function V(n = "", t = null) {
const e = document.createElement("img");
return e.className = n, t && (e.src = t), e;
}
function H(n = "") {
const t = document.createElement("ol");
return t.className = n, t;
}
function B(n = "") {
const t = document.createElement("li");
return t.className = n, t;
}
function I(n = "") {
const t = document.createElement("ul");
return t.className = n, t;
}
function P() {
return document.createElement("canvas");
}
function u(n) {
const t = new FormData(n), e = {};
for (const [r, c] of t.entries())
c === "true" || c === "false" ? e[r] = c === "true" : !isNaN(Number(c)) && c !== "" ? e[r] = Number(c) : e[r] = c;
return e;
}
function l(n) {
return n.checkValidity();
}
function s(n) {
n.reportValidity();
}
function K(n, t, e) {
return (r) => {
if (r.preventDefault(), !l(n)) {
s(n);
return;
}
const c = u(n);
t(c);
};
}
export {
b as createButton,
P as createCanvas,
d as createCheckbox,
S as createCode,
x as createContainer,
v as createForm,
K as createFormSubmitHandler,
k as createH,
y as createHr,
w as createIframe,
V as createImg,
i as createInputField,
g as createKbd,
f as createLabel,
B as createLi,
C as createLineBreak,
N as createLink,
H as createOl,
p as createP,
L as createPre,
m as createSelectField,
E as createSpan,
D as createSup,
h as createTextarea,
I as createUl,
F as createVideo,
u as getFormData,
s as showFormValidationErrors,
l as validateForm
};