on-codemerge/dist/src/plugins/ImagePlugin/index.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

/*! on-codemerge v1.3.1 @author Pavel Kuzmin @license MIT @homepage https://s00d.github.io/on-codemerge/ @repository git+https://github.com/s00d/on-codemerge.git Copyright (c) 2026 Pavel Kuzmin - Built on 2026-07-02T13:39:17.947Z */
"use strict";var l=Object.defineProperty;var c=(s,e,t)=>e in s?l(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>c(s,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"),h=require("../../utils/ResizableElement.cjs"),m=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,r=e.clientY;console.log("Mouse coordinates with scroll:",n,r),(o=this.contextMenu)==null||o.show(t,n,r)}});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 h.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,o;const e=(t=this.editor)==null?void 0:t.getToolbar();e&&(this.toolbarButton=m.createToolbarButton({icon:g.default,title:(o=this.editor)==null?void 0:o.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,r;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"),(r=this.contextMenu)==null||r.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;