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
3 lines (2 loc) • 5.28 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);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class p{constructor(r,c){A(this,"container");A(this,"editor");this.container=r,this.editor=c}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)}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}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))}}exports.FormPreview=p;