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.72 kB
JavaScript
"use strict";var d=Object.defineProperty;var l=(s,e,t)=>e in s?d(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var n=(s,e,t)=>l(s,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("./style.scss.cjs");require("./public.scss.cjs");const a=require("./components/YouTubeVideoMenu.cjs"),h=require("./components/YouTubeVideoContextMenu.cjs"),m=require("../ToolbarPlugin/utils.cjs"),b=require("./commands/YouTubeVideoCommand.cjs"),f=require("../../icons/youtube.svg.cjs"),M=require("../../utils/ResizableElement.cjs");class T{constructor(){n(this,"name","youtube-video");n(this,"hotkeys",[{keys:"Ctrl+Alt+Y",description:"Insert YouTube video",command:"youtube-video",icon:"▶️"}]);n(this,"editor",null);n(this,"menu",null);n(this,"contextMenu",null);n(this,"resizer");this.resizer=new M.ResizableElement}initialize(e){this.editor=e,this.menu=new a.YouTubeVideoMenu(e),this.contextMenu=new h.YouTubeVideoContextMenu(e),this.addToolbarButton(),this.setupContextMenu(),this.setupResizer(),this.editor.on("youtube-video",()=>{this.openModal()})}setupResizer(){if(!this.editor)return;this.editor.getContainer().addEventListener("click",t=>{const o=t.target.closest("iframe");o instanceof HTMLIFrameElement&&o.src.includes("youtube.com")?this.resizer.attachTo(o):this.resizer.detach()})}addToolbarButton(){var t;const e=document.querySelector(".editor-toolbar");if(e){const o=m.createToolbarButton({icon:f.default,title:(t=this.editor)==null?void 0:t.t("Insert YouTube Video"),onClick:()=>this.openModal()});e.appendChild(o)}}setupContextMenu(){if(!this.editor)return;this.editor.getContainer().addEventListener("contextmenu",t=>{var i;const o=t.target.closest("iframe");if(o instanceof HTMLIFrameElement&&o.src.includes("youtube.com")){t.preventDefault();const r=t.clientX+window.scrollX,u=t.clientY+window.scrollY;console.log("Mouse coordinates with scroll:",r,u),(i=this.contextMenu)==null||i.show(o,r,u)}})}openModal(){var e;this.editor&&((e=this.menu)==null||e.show(t=>{var i;(i=this.editor)==null||i.ensureEditorFocus(),new b.YouTubeVideoCommand(this.editor,t).execute()}))}destroy(){var o,i,r,u;if(this.editor){const c=this.editor.getContainer();c.removeEventListener("click",this.setupResizer),c.removeEventListener("contextmenu",this.setupContextMenu)}(o=this.menu)==null||o.destroy(),(i=this.contextMenu)==null||i.destroy(),this.resizer.detach();const e=document.querySelector(".editor-toolbar"),t=e==null?void 0:e.querySelector(`[title="${(r=this.editor)==null?void 0:r.t("Insert YouTube Video")}"]`);t&&t.remove(),(u=this.editor)==null||u.off("youtube-video"),this.editor=null,this.menu=null,this.contextMenu=null}}exports.YouTubeVideoPlugin=T;