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) • 3 kB
JavaScript
"use strict";var l=Object.defineProperty;var c=(r,e,t)=>e in r?l(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t;var i=(r,e,t)=>c(r,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const d=require("./services/ImageUploader.cjs"),u=require("./components/ImageContextMenu.cjs"),m=require("../../utils/ResizableElement.cjs"),h=require("../ToolbarPlugin/utils.cjs"),a=require("./commands/ImageCommand.cjs"),g=require("../../icons/image.svg.cjs");class f{constructor(){i(this,"name","image");i(this,"hotkeys",[{keys:"Ctrl+Alt+I",description:"Insert image",command:"image",icon:"🖼️"}]);i(this,"editor",null);i(this,"uploader");i(this,"contextMenu",null);i(this,"resizer");i(this,"toolbarButton",null);i(this,"handleContextMenu",e=>{var o;const t=e.target.closest("img");if(t instanceof HTMLImageElement){if(t.classList.contains("svg-img")||t.classList.contains("svg-chart"))return;e.preventDefault();const n=e.clientX+window.scrollX,s=e.clientY+window.scrollY;console.log("Mouse coordinates with scroll:",n,s),(o=this.contextMenu)==null||o.show(t,n,s)}});i(this,"handleClick",e=>{const t=e.target.closest("img");t instanceof HTMLImageElement?this.resizer.attachTo(t):this.resizer.detach()});this.uploader=new d.ImageUploader,this.resizer=new m.ResizableElement}initialize(e){this.contextMenu=new u.ImageContextMenu(e),this.editor=e,this.addToolbarButton(),this.setupImageEvents(),this.editor.on("image",()=>{this.handleImageUpload()})}addToolbarButton(){var t;const e=document.querySelector(".editor-toolbar");e&&(this.toolbarButton=h.createToolbarButton({icon:g.default,title:(t=this.editor)==null?void 0:t.t("Insert Image"),onClick:()=>this.handleImageUpload()}),e.appendChild(this.toolbarButton))}setupImageEvents(){if(!this.editor)return;const e=this.editor.getContainer();e.addEventListener("contextmenu",this.handleContextMenu),e.addEventListener("click",this.handleClick),this.editor.on("file-drop",t=>{var o;t.type.startsWith("image/")&&((o=this.editor)==null||o.ensureEditorFocus(),new a.ImageCommand(this.editor,t.content).execute())})}async handleImageUpload(){var e;if(this.editor){(e=this.editor)==null||e.ensureEditorFocus();try{const t=await this.uploader.selectFile();if(!t)return;const o=await this.uploader.readFileAsDataUrl(t);new a.ImageCommand(this.editor,o).execute()}catch(t){console.error("Failed to upload image:",t)}}}destroy(){var t,o,n,s;const e=(t=this.editor)==null?void 0:t.getContainer();e&&(e.removeEventListener("contextmenu",this.handleContextMenu),e.removeEventListener("click",this.handleClick)),(o=this.editor)==null||o.off("image"),(n=this.editor)==null||n.off("file-drop"),(s=this.contextMenu)==null||s.destroy(),this.contextMenu=null,this.resizer.detach(),this.toolbarButton&&this.toolbarButton.parentElement&&this.toolbarButton.parentElement.removeChild(this.toolbarButton),this.editor=null,this.toolbarButton=null}}exports.ImagePlugin=f;