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) • 3.42 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 */
"use strict";var d=Object.defineProperty;var m=(l,t,e)=>t in l?d(l,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):l[t]=e;var i=(l,t,e)=>m(l,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("../../../core/ui/PopupManager.cjs"),C=require("../services/TemplateManager.cjs"),a=require("../../../utils/helpers.cjs");class S{constructor(t){i(this,"editor");i(this,"popup",null);i(this,"templateManager");i(this,"callback",null);i(this,"methodSelect",null);i(this,"actionInput",null);i(this,"submitButtonCheckbox",null);i(this,"templateSelect",null);this.editor=t,this.templateManager=new C.TemplateManager(t)}createContent(){const t=a.createContainer("p-4 space-y-4"),e=a.createContainer("template-section"),n=a.createLabel(this.editor.t("Template (optional):"));this.templateSelect=a.createSelectField(this.getTemplateOptions(),"",u=>this.handleTemplateChange(u)),e.appendChild(n),e.appendChild(this.templateSelect),t.appendChild(e);const o=a.createContainer("method-section"),p=a.createLabel(this.editor.t("Method:"));this.methodSelect=a.createSelectField([{value:"GET",label:"GET"},{value:"POST",label:"POST"}],"POST",()=>{}),o.appendChild(p),o.appendChild(this.methodSelect),t.appendChild(o);const s=a.createContainer("action-section"),c=a.createLabel(this.editor.t("Action URL:"));this.actionInput=a.createInputField("text",this.editor.t("Enter form action URL"),"",()=>{}),s.appendChild(c),s.appendChild(this.actionInput),t.appendChild(s);const r=a.createContainer("submit-section"),h=a.createLabel("label");return h.className="flex items-center gap-2",this.submitButtonCheckbox=a.createCheckbox(this.editor.t("Include submit button"),!0,()=>{}),this.submitButtonCheckbox.id="submitButton",h.appendChild(this.submitButtonCheckbox),r.appendChild(h),t.appendChild(r),t}getTemplateOptions(){const t=this.templateManager.getTemplates(),e=[{value:"",label:this.editor.t("No template")}];return t.forEach(n=>{e.push({value:n.id,label:n.name})}),e}handleTemplateChange(t){if(!t)return;const e=this.templateManager.getTemplate(t);e&&(this.methodSelect&&(this.methodSelect.value=e.config.method),this.actionInput&&(this.actionInput.value=e.config.action))}handleCreate(){var e,n,o,p,s;if(!this.callback)return;const t={method:((e=this.methodSelect)==null?void 0:e.value)||"POST",action:((n=this.actionInput)==null?void 0:n.value)||"",hasSubmitButton:((o=this.submitButtonCheckbox)==null?void 0:o.checked)||!1};if((p=this.templateSelect)!=null&&p.value){const c=this.templateManager.getTemplate(this.templateSelect.value);c&&(t.template=c)}this.callback(t),(s=this.popup)==null||s.hide()}show(t){this.callback=t,this.popup||(this.popup=new b.PopupManager(this.editor,{title:this.editor.t("Create Form"),className:"form-popup",closeOnClickOutside:!0,buttons:[{label:this.editor.t("Create"),variant:"primary",onClick:()=>this.handleCreate()},{label:this.editor.t("Cancel"),variant:"secondary",onClick:()=>this.popup.hide()}],items:[{type:"custom",id:"form-content",content:()=>this.createContent()}]})),this.popup.show()}destroy(){this.popup&&(this.popup.destroy(),this.popup=null),this.callback=null}}exports.FormPopup=S;