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
3 lines (2 loc) • 2.87 kB
JavaScript
/*! 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 c=Object.defineProperty;var l=(s,e,t)=>e in s?c(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 d=require("./components/YouTubeVideoMenu.cjs"),a=require("./components/YouTubeVideoContextMenu.cjs"),h=require("../ToolbarPlugin/utils.cjs"),m=require("./commands/YouTubeVideoCommand.cjs"),b=require("../../icons/youtube.svg.cjs"),f=require("../../utils/ResizableElement.cjs");class M{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,"toolbarButton",null);n(this,"menu",null);n(this,"contextMenu",null);n(this,"resizer");this.resizer=new f.ResizableElement}initialize(e){this.editor=e,this.menu=new d.YouTubeVideoMenu(e),this.contextMenu=new a.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,o;const e=(t=this.editor)==null?void 0:t.getToolbar();e&&(this.toolbarButton=h.createToolbarButton({icon:b.default,title:(o=this.editor)==null?void 0:o.t("Insert YouTube Video"),onClick:()=>this.openModal()}),e.appendChild(this.toolbarButton))}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 u=t.clientX,r=t.clientY;console.log("Mouse coordinates:",u,r),(i=this.contextMenu)==null||i.show(o,u,r)}})}openModal(){var e;this.editor&&((e=this.menu)==null||e.show(t=>{var i;(i=this.editor)==null||i.ensureEditorFocus(),new m.YouTubeVideoCommand(this.editor,t).execute()}))}destroy(){var e,t,o;if(this.editor){const i=this.editor.getContainer();i.removeEventListener("click",this.setupResizer),i.removeEventListener("contextmenu",this.setupContextMenu)}(e=this.menu)==null||e.destroy(),(t=this.contextMenu)==null||t.destroy(),this.resizer.detach(),this.toolbarButton&&(this.toolbarButton.remove(),this.toolbarButton=null),(o=this.editor)==null||o.off("youtube-video"),this.editor=null,this.menu=null,this.contextMenu=null}}exports.YouTubeVideoPlugin=M;