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
2 lines (1 loc) • 1.46 kB
JavaScript
"use strict";var u=Object.defineProperty;var h=(a,e,t)=>e in a?u(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var i=(a,e,t)=>h(a,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../utils/helpers.cjs");class b{constructor(e,t,r){i(this,"editor");i(this,"element");i(this,"onSubmit");i(this,"template");this.editor=e,this.element=n.createContainer(),this.onSubmit=t,this.template=r,this.initialize()}initialize(){var d,c;const e=n.createForm("space-y-4"),t=n.createContainer(),r=n.createLabel(this.editor.t("Name"));r.className="block text-sm font-medium text-gray-700";const o=n.createInputField("text","Template Name",((d=this.template)==null?void 0:d.name)||"");o.className="template-name mt-1 block w-full rounded-md border-gray-300 shadow-sm",o.required=!0,t.appendChild(r),t.appendChild(o);const m=n.createContainer(),s=n.createLabel(this.editor.t("Content"));s.className="block text-sm font-medium text-gray-700";const l=n.createTextarea(this.editor.t("Content"),((c=this.template)==null?void 0:c.content)||"");l.className="template-content mt-1 block w-full rounded-md border-gray-300 shadow-sm h-40",l.required=!0,m.appendChild(s),m.appendChild(l),e.appendChild(t),e.appendChild(m),e.addEventListener("submit",p=>{p.preventDefault(),this.onSubmit({name:o.value,content:l.value})}),this.element.appendChild(e)}getElement(){return this.element}}exports.TemplateForm=b;