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.74 kB
JavaScript
"use strict";var l=Object.defineProperty;var c=(n,e,t)=>e in n?l(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var i=(n,e,t)=>c(n,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./style.scss.cjs");require("./public.scss.cjs");const a=require("./services/VideoUploader.cjs"),u=require("./components/VideoContextMenu.cjs"),h=require("../../utils/ResizableElement.cjs"),m=require("../ToolbarPlugin/utils.cjs"),d=require("./commands/VideoCommand.cjs"),v=require("../../icons/video.svg.cjs");class p{constructor(){i(this,"name","video");i(this,"hotkeys",[{keys:"Ctrl+Alt+V",description:"Insert video",command:"video",icon:"🎥"}]);i(this,"editor",null);i(this,"uploader");i(this,"contextMenu",null);i(this,"resizer");i(this,"handleContextMenu",e=>{var o;const t=e.target.closest("video");if(t instanceof HTMLVideoElement){e.preventDefault();const r=e.clientX+window.scrollX,s=e.clientY+window.scrollY;console.log("Mouse coordinates with scroll:",r,s),(o=this.contextMenu)==null||o.show(t,r,s)}});i(this,"handleClick",e=>{const t=e.target.closest("video");t instanceof HTMLVideoElement?this.resizer.attachTo(t):this.resizer.detach()});this.uploader=new a.VideoUploader,this.resizer=new h.ResizableElement}initialize(e){this.contextMenu=new u.VideoContextMenu(e),this.editor=e,this.addToolbarButton(),this.setupVideoEvents(),this.editor.on("video",()=>{this.handleVideoUpload()})}addToolbarButton(){var t;const e=document.querySelector(".editor-toolbar");if(e){const o=m.createToolbarButton({icon:v.default,title:(t=this.editor)==null?void 0:t.t("Insert Video"),onClick:()=>this.handleVideoUpload()});e.appendChild(o)}}setupVideoEvents(){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("video/")&&((o=this.editor)==null||o.ensureEditorFocus(),new d.VideoCommand(this.editor,t.content).execute())})}async handleVideoUpload(e){if(this.editor){this.editor.ensureEditorFocus();try{const t=e||await this.uploader.selectFile();if(!t)return;const o=await this.uploader.readFileAsDataUrl(t);new d.VideoCommand(this.editor,o).execute()}catch(t){console.error("Failed to upload video:",t)}}}destroy(){var e,t;if(this.editor){const o=this.editor.getContainer();o.removeEventListener("contextmenu",this.handleContextMenu),o.removeEventListener("click",this.handleClick)}this.contextMenu&&(this.contextMenu.destroy(),this.contextMenu=null),(e=this.editor)==null||e.off("video"),(t=this.editor)==null||t.off("file-drop"),this.resizer.detach(),this.editor=null,this.uploader=null,this.resizer=null}}exports.VideoPlugin=p;