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

/*! 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=(i,t,e)=>t in i?d(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e;var o=(i,t,e)=>m(i,typeof t!="symbol"?t+"":t,e);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});;/* empty css             */;/* empty css              */const c=require("../../core/ui/ContextMenu.cjs"),h=require("../../icons/delete.svg.cjs"),f=require("../../icons/edit.svg.cjs"),s=require("../../icons/form.svg.cjs"),M=require("./services/FormManager.cjs"),p=require("./services/TemplateManager.cjs"),F=require("./components/FormPopup.cjs"),C=require("./components/TemplatesModal.cjs"),l=require("./components/FormBuilderModal.cjs"),g=require("../ToolbarPlugin/utils.cjs"),B=require("../../utils/helpers.cjs"),b=require("./commands/DeleteFormCommand.cjs"),x=require("./commands/DuplicateFormCommand.cjs");class a{constructor(){o(this,"name","form-builder");o(this,"hotkeys",[{keys:"Ctrl+Alt+F",description:"Insert form",command:"form",icon:"📝"}]);o(this,"editor");o(this,"formPopup",null);o(this,"templatesModal",null);o(this,"contextMenu",null);o(this,"formManager");o(this,"templateManager");o(this,"toolbarButton",null);o(this,"handleFormContextMenu",t=>{var r;const e=t.target.closest("form");if(e instanceof HTMLElement){t.preventDefault();const n=t.clientX,u=t.clientY;(r=this.contextMenu)==null||r.show(e,n,u)}})}initialize(t){this.editor=t,this.formPopup=new F.FormPopup(this.editor),this.templatesModal=new C.TemplatesModal(this.editor),this.addToolbarButton(),this.setupContextMenu(),this.setupFormEvents(),this.formManager=new M.FormManager(this.editor),this.templateManager=new p.TemplateManager(this.editor),this.templateManager.initialize(),this.editor.on("form",()=>{this.openFormBuilder()})}openFormBuilder(){const t=this.editor.saveCursorPosition();new l.FormBuilderModal(this.editor).show(r=>{t&&this.editor.restoreCursorPosition(t);const n=this.formManager.createForm(r);this.editor.insertContent(n),this.editor.insertContent(B.createLineBreak())},!1,null)}setupContextMenu(){const t=[{label:this.editor.t("Edit Form"),icon:f.default,onClick:e=>{e&&e.tagName==="FORM"&&new l.FormBuilderModal(this.editor).show(n=>{},!0,e)}},{label:this.editor.t("Duplicate Form"),icon:s.default,onClick:e=>{e&&e.tagName==="FORM"&&new x.DuplicateFormCommand(this.editor,e).execute()}},{label:this.editor.t("Delete Form"),icon:h.default,onClick:e=>{e&&e.tagName==="FORM"&&new b.DeleteFormCommand(this.editor,e).execute()}}];this.contextMenu=new c.ContextMenu(this.editor,t)}setupFormEvents(){if(!this.editor)return;const t=this.editor.getContainer();t&&t.addEventListener("contextmenu",this.handleFormContextMenu)}addToolbarButton(){const t=this.editor.getToolbar();t&&(this.toolbarButton=g.createToolbarButton({icon:s.default,title:this.editor.t("Insert Form"),onClick:()=>this.openFormBuilder()}),t.appendChild(this.toolbarButton))}destroy(){var t;if(this.contextMenu&&(this.contextMenu.destroy(),this.contextMenu=null),this.formPopup&&(this.formPopup.destroy(),this.formPopup=null),this.templatesModal&&(this.templatesModal.destroy(),this.templatesModal=null),this.toolbarButton&&(this.toolbarButton.remove(),this.toolbarButton=null),this.editor){const e=this.editor.getContainer();e&&e.removeEventListener("contextmenu",this.handleFormContextMenu)}(t=this.editor)==null||t.off("form-builder"),this.editor=null}}exports.FormBuilderPlugin=a;exports.default=a;