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) • 4.35 kB
JavaScript
"use strict";var p=Object.defineProperty;var u=(n,t,e)=>t in n?p(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var s=(n,t,e)=>u(n,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("../../../core/ui/PopupManager.cjs"),v=require("../services/HTMLHighlighter.cjs"),y=require("../../../icons/copy.svg.cjs"),b=require("../../../icons/save.svg.cjs"),i=require("../../../utils/helpers.cjs");class T{constructor(t){s(this,"editor");s(this,"popup");s(this,"highlighter");s(this,"codeElement",null);s(this,"editElement",null);s(this,"copyButton",null);s(this,"saveButton",null);s(this,"tabs",null);s(this,"viewTab",null);s(this,"editTab",null);this.editor=t,this.popup=new m.PopupManager(t,{className:"html-viewer-modal",closeOnClickOutside:!0,items:[{type:"custom",id:"html-viewer-content",content:()=>this.createContent()}]}),this.highlighter=new v.HTMLHighlighter}createContent(){const t=i.createContainer(),e=i.createContainer("modal-header"),l=i.createContainer("text-lg font-semibold",this.editor.t("HTML Source"));l.textContent=this.editor.t("HTML Source"),this.copyButton=i.createButton("",()=>{if(this.codeElement){navigator.clipboard.writeText(this.codeElement.textContent||"");const h=this.copyButton.innerHTML;this.copyButton.innerHTML=this.editor.t("Copied!"),setTimeout(()=>{this.copyButton.innerHTML=h},2e3)}}),this.copyButton.className="copy-button",this.copyButton.innerHTML=`${y.default} `+this.editor.t("Copy"),this.saveButton=i.createButton("",()=>{var h;if(this.editElement){const c=this.editElement.value;this.codeElement.textContent=c,this.highlighter.highlight(this.codeElement),(h=this.editor)==null||h.setHtml(c),this.switchTab("view")}}),this.saveButton.className="save-button",this.saveButton.innerHTML=`${b.default} `+this.editor.t("Save"),this.saveButton.style.display="none",e.appendChild(l),e.appendChild(this.copyButton),e.appendChild(this.saveButton),this.tabs=i.createContainer("tabs"),this.viewTab=i.createButton(this.editor.t("View"),()=>{this.switchTab("view")}),this.viewTab.className="tab active",this.editTab=i.createButton(this.editor.t("Edit"),()=>{this.switchTab("edit")}),this.editTab.className="tab",this.tabs.appendChild(this.viewTab),this.tabs.appendChild(this.editTab);const o=i.createContainer("modal-body"),a=i.createContainer("view-container"),r=i.createPre();this.codeElement=i.createCode("html-content"),r.appendChild(this.codeElement),a.appendChild(r);const d=i.createContainer("edit-container");return d.style.display="none",this.editElement=i.createTextarea(),this.editElement.className="html-edit w-full border border-gray-300 rounded-lg p-2",this.editElement.rows=10,d.appendChild(this.editElement),o.appendChild(a),o.appendChild(d),t.appendChild(e),t.appendChild(this.tabs),t.appendChild(o),t}switchTab(t){var e,l,o,a;t==="view"?((e=this.viewTab)==null||e.classList.add("active"),(l=this.editTab)==null||l.classList.remove("active"),this.popup.getElement().querySelector(".view-container").style.display="block",this.popup.getElement().querySelector(".edit-container").style.display="none",this.copyButton.style.display="flex",this.saveButton.style.display="none"):t==="edit"&&((o=this.viewTab)==null||o.classList.remove("active"),(a=this.editTab)==null||a.classList.add("active"),this.popup.getElement().querySelector(".view-container").style.display="none",this.popup.getElement().querySelector(".edit-container").style.display="block",this.copyButton.style.display="none",this.saveButton.style.display="flex",this.editElement&&this.codeElement&&(this.editElement.value=this.codeElement.textContent||""))}show(t){this.codeElement&&(this.codeElement.textContent=t,this.highlighter.highlight(this.codeElement)),this.popup.show()}hide(){this.popup.hide()}destroy(){var t,e;this.hide(),this.viewTab&&this.viewTab.removeEventListener("click",()=>this.switchTab("view")),this.editTab&&this.editTab.removeEventListener("click",()=>this.switchTab("edit")),this.copyButton&&this.copyButton.removeEventListener("click",()=>{}),this.saveButton&&this.saveButton.removeEventListener("click",()=>{}),this.codeElement=null,this.editElement=null,this.copyButton=null,this.saveButton=null,this.tabs=null,this.viewTab=null,this.editTab=null,(e=(t=this.popup).destroy)==null||e.call(t),this.highlighter=null}}exports.HTMLViewerModal=T;