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) • 2.53 kB
JavaScript
"use strict";var m=Object.defineProperty;var h=(a,e,t)=>e in a?m(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var r=(a,e,t)=>h(a,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../utils/formatters.cjs"),C=require("../../../icons/delete.svg.cjs"),f=require("../../../icons/edit.svg.cjs"),n=require("../../../utils/helpers.cjs");class g{constructor(e,t,i,s){r(this,"editor");r(this,"element");r(this,"templates",[]);r(this,"onSelect");r(this,"onEdit");r(this,"onDelete");this.editor=e,this.element=n.createContainer(),this.onSelect=t,this.onEdit=i,this.onDelete=s}setTemplates(e){this.templates=e,this.render()}render(){if(this.element.innerHTML="",this.templates.length===0){const t=n.createContainer("text-center text-gray-500 py-4",'No templates yet. Click "New Template" to create one.');this.element.appendChild(t);return}const e=n.createContainer("space-y-2");this.templates.forEach(t=>{const i=this.createTemplateItem(t);e.appendChild(i)}),this.element.appendChild(e),this.setupEventListeners()}createTemplateItem(e){const t=n.createContainer("template-item");t.dataset.templateId=e.id;const i=n.createContainer("flex items-center justify-between p-3 rounded-lg cursor-pointer"),s=n.createContainer("div"),l=n.createContainer("font-medium",e.name),o=n.createContainer("ext-xs text-gray-500",this.editor.t("Updated")+` ${u.formatDate(e.updatedAt)}`);s.appendChild(l),s.appendChild(o);const d=n.createContainer("flex items-center gap-2"),p=n.createButton("",()=>{});p.className="edit-button p-1 text-gray-500 hover:text-gray-700 rounded",p.innerHTML=f.default;const c=n.createButton("",()=>{});return c.className="delete-button p-1 text-gray-500 hover:text-red-600 rounded",c.innerHTML=C.default,d.appendChild(p),d.appendChild(c),i.appendChild(s),i.appendChild(d),t.appendChild(i),t}setupEventListeners(){this.element.addEventListener("click",e=>{const t=e.target,i=t.closest("[data-template-id]");if(!i)return;const s=i.getAttribute("data-template-id");if(!s)return;const l=this.templates.find(o=>o.id===s);l&&(t.closest(".delete-button")?this.onDelete(l):t.closest(".edit-button")?this.onEdit(l):this.onSelect(l))})}getElement(){return this.element}destroy(){this.element.removeEventListener("click",this.setupEventListeners),this.element.parentElement&&this.element.parentElement.removeChild(this.element),this.editor=null,this.element=null,this.templates=[],this.onSelect=null,this.onEdit=null,this.onDelete=null}}exports.TemplatesList=g;