on-codemerge/dist/src/plugins/FileUploadPlugin/components/FileUploadMenu.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

"use strict";var d=Object.defineProperty;var p=(r,e,s)=>e in r?d(r,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[e]=s;var a=(r,e,s)=>p(r,typeof e!="symbol"?e+"":e,s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../../../core/ui/PopupManager.cjs"),u=require("../../../icons/upload-message.svg.cjs"),l=require("../../../utils/helpers.cjs");class c{constructor(e,s,o,t){a(this,"editor");a(this,"popup");a(this,"uploader");a(this,"config");a(this,"onUpload",null);a(this,"uploadArea",null);a(this,"uploadMessage",null);a(this,"uploadProgress",null);a(this,"progressFill",null);a(this,"filename",null);this.onUpload=t,this.editor=e,this.uploader=s,this.config=o,this.popup=new h.PopupManager(e,{title:"Upload File",className:"file-upload-menu",closeOnClickOutside:!0,buttons:[{label:e.t("Cancel"),variant:"secondary",onClick:()=>this.popup.hide()}],items:[{type:"custom",id:"upload-content",content:()=>this.createUploadContent()}]})}createUploadContent(){const e=l.createContainer("p-4");this.uploadArea=l.createContainer("upload-area border-2 border-dashed border-gray-300 rounded-lg p-8 text-center"),this.uploadMessage=l.createContainer("upload-message"),this.uploadMessage.insertAdjacentHTML("afterbegin",u.default);const s=l.createP("p");s.className="mt-2 text-sm text-gray-600",s.innerHTML=`
    ${this.editor.t("Drag and drop your file here, or")}
    <button type="button" class="browse-button text-blue-500 hover:text-blue-700">
      ${this.editor.t("browse")}
    </button>
  `,this.uploadMessage.appendChild(s);const o=l.createP("mt-1 text-xs text-gray-500",this.editor.t("Maximum file size: ")+this.uploader.formatFileSize(this.config.maxFileSize??10*1024*1024));this.uploadMessage.appendChild(o),this.uploadProgress=l.createContainer("upload-progress hidden");const t=l.createContainer("progress-bar h-2 bg-gray-200 rounded-full overflow-hidden");this.progressFill=l.createContainer("progress-fill h-full bg-blue-500 transition-all duration-300"),this.progressFill.style.width="0%",t.appendChild(this.progressFill),this.uploadProgress.appendChild(t),this.filename=l.createP("mt-2 text-sm text-gray-600",`${this.editor.t("Uploading")} <span class="filename"></span>...`),this.uploadProgress.appendChild(this.filename);const i=l.createInputField("file");return i.className="hidden",this.uploadArea.appendChild(this.uploadMessage),this.uploadArea.appendChild(this.uploadProgress),e.appendChild(this.uploadArea),e.appendChild(i),this.setupEventListeners(this.uploadArea,i),e}setupEventListeners(e,s){const o=e.querySelector(".browse-button");this.editor.on("file-drop",async t=>{var i;if(!t.type.startsWith("image/")){if((i=this.editor)==null||i.ensureEditorFocus(),t.content instanceof File)await this.handleFileUpload(t.content);else if(t.content instanceof ArrayBuffer){const n=new File([t.content],t.name,{type:t.type});await this.handleFileUpload(n)}else if(typeof t.content=="string"){const n=new File([t.content],t.name,{type:"text/plain"});await this.handleFileUpload(n)}}}),o.addEventListener("click",()=>{s.click()}),s.addEventListener("change",async()=>{var i;const t=(i=s.files)==null?void 0:i[0];t&&(await this.handleFileUpload(t),s.value="")})}async handleFileUpload(e){this.popup.show(),setTimeout(async()=>{if(e.size>10*1024*1024){alert(this.editor.t("File size exceeds 10MB limit",{max:this.uploader.formatFileSize(this.config.maxFileSize??10*1024*1024)}));return}if(!this.uploadMessage||!this.uploadProgress||!this.progressFill||!this.filename){console.error("UI elements are not initialized");return}this.uploadMessage.classList.add("hidden"),this.uploadProgress.classList.remove("hidden"),this.filename.textContent=e.name;let s=0;const o=setInterval(()=>{s=Math.min(95,s+5),this.progressFill.style.width=`${s}%`},50);try{const t=await this.uploader.uploadFile(e);clearInterval(o),this.progressFill.style.width="100%",await new Promise(i=>setTimeout(i,500)),this.onUpload&&this.onUpload(t),this.popup.hide(),setTimeout(()=>{this.uploadMessage.classList.remove("hidden"),this.uploadProgress.classList.add("hidden"),this.progressFill.style.width="0%"},300)}catch{clearInterval(o),alert(this.editor.t("Upload failed. Please try again.")),this.uploadMessage.classList.remove("hidden"),this.uploadProgress.classList.add("hidden"),this.progressFill.style.width="0%"}},100)}show(){this.uploadMessage&&this.uploadProgress&&this.progressFill&&(this.uploadMessage.classList.remove("hidden"),this.uploadProgress.classList.add("hidden"),this.progressFill.style.width="0%"),this.popup.show()}destroy(){this.popup.hide(),this.uploadArea&&(this.editor.off("drag-enter"),this.editor.off("drag-leave"),this.editor.off("drop")),this.uploadArea=null,this.uploadMessage=null,this.uploadProgress=null,this.progressFill=null,this.filename=null,this.editor=null,this.uploader=null,this.popup=null,this.onUpload=null}}exports.FileUploadMenu=c;