on-codemerge/dist/src/plugins/FormBuilderPlugin/index.cjs

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

"use strict";var Y=Object.defineProperty;var W=(c,t,n)=>t in c?Y(c,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):c[t]=n;var r=(c,t,n)=>W(c,typeof t!="symbol"?t+"":t,n);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css             */;/* empty css              */const _=require("../../core/ui/PopupManager.cjs"),j=require("../../core/ui/ContextMenu.cjs"),z=require("../../icons/delete.svg.cjs"),J=require("../../icons/edit.svg.cjs"),K=require("../../icons/form.svg.cjs"),Q=require("./services/FormManager.cjs"),Z=require("../ToolbarPlugin/utils.cjs"),a=require("../../utils/helpers.cjs");class ${constructor(){r(this,"name","form-builder");r(this,"hotkeys",[{keys:"Ctrl+Alt+F",description:"Insert form",command:"form",icon:"📝"}]);r(this,"editor",null);r(this,"popup",null);r(this,"contextMenu",null);r(this,"container",null);r(this,"editFormElement",null);r(this,"formManager");r(this,"type","GET");r(this,"url","");r(this,"formButton",null);this.formManager=new Q.FormManager}initialize(t){this.editor=t,this.setupPopup(),this.addToolbarButton(),this.setupContextMenu(),this.editor.on("form",()=>{var n;this.formManager.clearFields(),this.addFormField("text","New Field",!1,"",[]),(n=this.popup)==null||n.show()})}setupContextMenu(){this.editor&&(this.contextMenu=new j.ContextMenu(this.editor,[{title:"Edit Form",icon:J.default,onClick:t=>this.editForm(t)},{title:"Delete Form",icon:z.default,onClick:t=>this.deleteForm(t)}]),this.editor.getInnerContainer().addEventListener("contextmenu",t=>{var i;const n=t.target.closest("form");if(n){t.preventDefault();const l=t.clientX+window.scrollX,s=t.clientY+window.scrollY;console.log("Mouse coordinates with scroll:",l,s),(i=this.contextMenu)==null||i.show(n,l,s)}}))}addToolbarButton(){const t=document.querySelector(".editor-toolbar");t&&(this.formButton=Z.createToolbarButton({icon:K.default,title:"Insert Form",onClick:()=>{var n;this.formManager.clearFields(),this.addFormField("text","New Field",!1,"",[]),(n=this.popup)==null||n.show()}}),t.appendChild(this.formButton))}setupPopup(){this.editor&&(this.popup=new _.PopupManager(this.editor,{title:"Form Builder",className:"form-builder",closeOnClickOutside:!0,buttons:[{label:"Add Field",variant:"info",onClick:()=>this.addFormField()},{label:"Insert",variant:"primary",onClick:()=>this.handleFormInsert(this.url,this.type)},{label:"Cancel",variant:"secondary",onClick:()=>{var t;return(t=this.popup)==null?void 0:t.hide()}}],items:[{type:"custom",id:"form-builder-content",content:()=>this.createFormBuilderContent()}]}))}createFormBuilderContent(){return this.container=a.createContainer("form-builder-container p-4"),this.formManager.clearOptions(),this.container}addFormField(t="text",n="",i=!1,l="",s=[],d=""){const p={type:t,label:n,options:{placeholder:"",className:"form-input",target:d,options:[]},validation:{required:i,pattern:l}};t==="select"&&p.options&&(p.options.options=s),this.formManager.addField(p),this.renderFormBuilderContent()}renderFormBuilderContent(){if(!this.container)return;this.container.innerHTML="";const t=a.createContainer("form-type-container mb-4"),n=a.createLabel("Form Method:"),i=a.createSelectField([{value:"GET",label:"GET"},{value:"POST",label:"POST"}],this.type,e=>{this.type=e});t.appendChild(n),t.appendChild(i);const l=a.createContainer("form-url-container mb-4"),s=a.createLabel("Form URL:"),d=a.createInputField("text","Enter form submission URL",this.url,e=>{this.url=e});l.appendChild(s),l.appendChild(d),this.container.appendChild(t),this.container.appendChild(l);const p=this.formManager.getFields();let y=1;p.forEach((e,m)=>{var v,h,x,w,C,E,L,I,P,S,O,R;const u=a.createContainer("field-container mb-4 p-3 border rounded");[{type:"select",label:"Field Type",value:e.type,options:[{value:"text",label:"Text Input"},{value:"textarea",label:"Text Area"},{value:"select",label:"Dropdown"},{value:"checkbox",label:"Checkbox"},{value:"radio",label:"Radio Button"},{value:"button",label:"Button"},{value:"file",label:"File Upload"},{value:"date",label:"Date"},{value:"time",label:"Time"},{value:"range",label:"Range"},{value:"email",label:"Email"},{value:"password",label:"Password"},{value:"number",label:"Number"},{value:"tel",label:"Phone"},{value:"url",label:"URL"},{value:"color",label:"Color"},{value:"datetime-local",label:"Date & Time"},{value:"month",label:"Month"},{value:"week",label:"Week"},{value:"hidden",label:"Hidden"},{value:"image",label:"Image Button"}],onChange:o=>{e.type=o,this.renderFormBuilderContent()}},{type:"input",label:"Field Label",value:e.label,onChange:o=>{e.label=o}},{type:"input",label:"Regex Validation",value:((v=e.validation)==null?void 0:v.pattern)||"",onChange:o=>{e.validation||(e.validation={}),e.validation.pattern=o}},{type:"input",label:"Placeholder",value:((h=e.options)==null?void 0:h.placeholder)||"",onChange:o=>{e.options||(e.options={}),e.options.placeholder=o}},{type:"select",label:"Autocomplete",value:((x=e.options)==null?void 0:x.autocomplete)||"on",options:[{value:"on",label:"On"},{value:"off",label:"Off"}],onChange:o=>{e.options||(e.options={}),e.options.autocomplete=o}},{type:"checkbox",label:null,title:"Required",value:((w=e.validation)==null?void 0:w.required)||!1,onChange:o=>{e.validation||(e.validation={}),e.validation.required=o}},{type:"checkbox",label:null,title:"ReadOnly",value:((C=e.options)==null?void 0:C.readonly)||!1,onChange:o=>{e.options||(e.options={}),e.options.readonly=o}},{type:"checkbox",label:null,title:"Disabled",value:((E=e.options)==null?void 0:E.disabled)||!1,onChange:o=>{e.options||(e.options={}),e.options.disabled=o}},{type:"checkbox",label:null,title:"Multiple",value:((L=e.options)==null?void 0:L.multiple)||!1,onChange:o=>{e.options||(e.options={}),e.options.multiple=o}},{type:"input",label:"Name",value:((I=e.options)==null?void 0:I.name)||"",onChange:o=>{e.options||(e.options={}),e.options.name=o}},{type:"input",label:"Value",value:((P=e.options)==null?void 0:P.value)||"",onChange:o=>{e.options||(e.options={}),e.options.value=o}},{type:"input",label:"Class Name",value:((S=e.options)==null?void 0:S.className)||"",onChange:o=>{e.options||(e.options={}),e.options.className=o}},{type:"input",label:"ID",value:((O=e.options)==null?void 0:O.id)||"input-"+y++,onChange:o=>{e.options||(e.options={}),e.options.id=o}}].forEach(o=>{var N;let B=null;o.label&&(B=a.createLabel(o.label));let F;switch(o.type){case"input":F=a.createInputField("text","",o.value,o.onChange);break;case"select":F=a.createSelectField(o.options||[],o.value,o.onChange);break;case"checkbox":F=a.createCheckbox(o.label??o.title,o.value,o.onChange);break;default:F=a.createContainer();break}const k=a.createContainer("field-wrapper mb-2");if(B&&k.appendChild(B),k.appendChild(F),u.appendChild(k),o.label==="Field Type"){const q=a.createContainer("options-container mt-2");if(e.type==="select"&&((N=e.options)!=null&&N.options)){e.options.options.forEach((G,A)=>{const H=a.createInputField("text","Option Value",G,D=>{e.options.options[A]=D}),V=a.createButton("Remove",()=>{e.options.options=e.options.options.filter((D,X)=>X!==A),this.renderFormBuilderContent()},"danger"),T=a.createContainer("option-container flex items-center mb-2");T.appendChild(H),T.appendChild(V),q.appendChild(T)});const U=a.createButton("Add Option",()=>{e.options||(e.options={}),e.options.options||(e.options.options=[]),e.options.options.push(""),this.renderFormBuilderContent()},"primary");q.appendChild(U)}u.appendChild(q)}});const b=a.createButton("Remove",()=>{this.formManager.removeField(m),this.renderFormBuilderContent()},"danger");u.appendChild(b),(R=this.container)==null||R.appendChild(u)})}handleFormInsert(t,n="GET"){if(!this.editor||!this.popup)return;this.editFormElement&&(this.editFormElement.remove(),this.editFormElement=null);const i=this.formManager.createForm(t,n);this.editor.insertContent(i.outerHTML),this.editor.insertContent(a.createLineBreak()),this.popup.hide()}editForm(t){var l,s,d;if(!t)return;this.editFormElement=t,(l=this.popup)==null||l.show(),this.formManager.clearFields();const n=(d=(s=this.popup)==null?void 0:s.getElement())==null?void 0:d.querySelector(".form-builder-container");n&&(n.innerHTML=""),t.querySelectorAll(".form-field").forEach(p=>{var v;const y=((v=p.querySelector("label"))==null?void 0:v.textContent)||"",e=p.querySelector("input, select, textarea, button"),m=(e==null?void 0:e.tagName.toLowerCase())||"text",u=(e==null?void 0:e.hasAttribute("required"))||!1,M=(e==null?void 0:e.getAttribute("pattern"))||"",b=[];if(m==="select"){const h=e==null?void 0:e.querySelectorAll("option");h==null||h.forEach(x=>{b.push(x.value)})}console.log(2222,m,y,u,M,b),this.addFormField(m,y,u,M,b)})}deleteForm(t){t&&t.remove()}destroy(){this.contextMenu&&(this.contextMenu.destroy(),this.contextMenu=null),this.popup&&(this.popup.destroy(),this.popup=null),this.formButton&&this.formButton.remove(),this.editor=null}}exports.FormBuilderPlugin=$;