on-codemerge/dist/src/utils/helpers.mjs

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

function u(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 l(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 s(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 m(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 i(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 d(n = "", t = null) {
  const e = document.createElement("div");
  return e.className = n, t && (e.textContent = t), e;
}
function f(n = "", t = null) {
  const e = document.createElement("p");
  return e.className = n, t && (e.textContent = t), e;
}
function b(n = "", t = null) {
  const e = document.createElement("span");
  return e.className = n, t && (e.textContent = t), e;
}
function p(n = "", t = null) {
  const e = document.createElement("kbd");
  return e.className = n, t && (e.textContent = t), e;
}
function x(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 E(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 g(n = !1, t) {
  const e = document.createElement("input");
  return e.type = "file", e.multiple = n, e.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", e;
}
function h(n = "", t = null, e = null) {
  const r = document.createElement("form");
  return t && (r.action = t), e && (r.method = e), r.className = n, r;
}
function N(n, t) {
  const e = document.createElement("option");
  return e.value = n, e.textContent = t, e;
}
function v(n = "", t = null) {
  const e = document.createElement("br");
  return e.className = n, t && (e.textContent = t), e;
}
function C(n = "", t = null) {
  const e = document.createElement("hr");
  return e.className = n, t && (e.textContent = t), e;
}
function y(n, t = "", e = null) {
  const r = document.createElement(n);
  return r.className = t, e && (r.textContent = e), r;
}
function k(n = "", t = null) {
  const e = document.createElement("iframe");
  return e.className = n, t && (e.textContent = t), e;
}
function w(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 F(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 I(n = "", t = null) {
  const e = document.createElement("img");
  return e.className = n, t && (e.src = t), e;
}
function B(n = "") {
  const t = document.createElement("ol");
  return t.className = n, t;
}
function H(n = "") {
  const t = document.createElement("li");
  return t.className = n, t;
}
function O(n = "") {
  const t = document.createElement("ul");
  return t.className = n, t;
}
function P(n = "") {
  const t = document.createElement("th");
  return t.className = n, t;
}
function K() {
  return document.createElement("canvas");
}
export {
  i as createButton,
  K as createCanvas,
  s as createCheckbox,
  S as createCode,
  d as createContainer,
  g as createFileInput,
  h as createForm,
  y as createH,
  C as createHr,
  k as createIframe,
  I as createImg,
  u as createInputField,
  p as createKbd,
  m as createLabel,
  H as createLi,
  v as createLineBreak,
  x as createLink,
  B as createOl,
  f as createP,
  L as createPre,
  l as createSelectField,
  N as createSelectOption,
  b as createSpan,
  F as createSup,
  E as createTextarea,
  P as createTh,
  O as createUl,
  w as createVideo
};