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.11 kB
JavaScript
"use strict";var l=Object.defineProperty;var r=(n,e,t)=>e in n?l(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var o=(n,e,t)=>r(n,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const a=require("./components/BlockContextMenu.cjs"),u=require("./commands/BlockCommand.cjs"),d=require("../ToolbarPlugin/utils.cjs"),h=require("../../icons/block.svg.cjs"),k=require("../../utils/Resizer.cjs");class B{constructor(){o(this,"name","block");o(this,"hotkeys",[{keys:"Ctrl+Alt+B",description:"Insert block",command:"block",icon:"🧱"}]);o(this,"editor",null);o(this,"contextMenu",null);o(this,"activeBlock",null);o(this,"currentResizer",null)}initialize(e){this.contextMenu=new a.BlockContextMenu(e),this.editor=e,this.addToolbarButton(),this.setupBlockEvents(),this.editor.on("block",()=>{this.insertBlock()})}addToolbarButton(){const e=document.querySelector(".editor-toolbar");if(!e)return;const t=d.createToolbarButton({icon:h.default,title:"Insert Block",onClick:()=>this.insertBlock()});e.appendChild(t)}setupBlockEvents(){if(!this.editor)return;const e=this.editor.getContainer();this.handleBlockClick=this.handleBlockClick.bind(this),this.handleContextMenu=this.handleContextMenu.bind(this),e.addEventListener("click",this.handleBlockClick),e.addEventListener("contextmenu",this.handleContextMenu)}handleBlockClick(e){if(!this.editor)return;const t=e.target.closest(".editor-block");if(t instanceof HTMLElement){this.activeBlock!==t&&(this.deactivateBlock(),this.activateBlock(t)),this.currentResizer&&(this.currentResizer.destroy(),this.currentResizer=null),this.currentResizer=new k.Resizer(t,{handleSize:10,handleColor:"blue",onResizeStart:()=>{var i;return(i=this.editor)==null?void 0:i.disableObserver()},onResize:(i,s)=>console.log(`Resized to ${i}x${s}`),onResizeEnd:()=>{var i;return(i=this.editor)==null?void 0:i.enableObserver()}});const c=t.querySelector(".block-content");c&&c.focus()}else this.deactivateBlock()}handleContextMenu(e){var c;const t=e.target.closest(".editor-block");if(t instanceof HTMLElement){e.preventDefault();const i=e.clientX+window.scrollX,s=e.clientY+window.scrollY;console.log("Mouse coordinates with scroll:",i,s),(c=this.contextMenu)==null||c.show(t,i,s)}}activateBlock(e){this.activeBlock=e,e.classList.add("active"),e.focus()}deactivateBlock(){if(this.activeBlock){this.activeBlock.classList.remove("active");const e=this.activeBlock.querySelector(".block-content");e&&(e.contentEditable="false")}this.activeBlock=null}insertBlock(){if(!this.editor)return;new u.BlockCommand(this.editor).execute()}destroy(){var e;if(this.editor){const t=this.editor.getContainer();t.removeEventListener("click",this.handleBlockClick),t.removeEventListener("contextmenu",this.handleContextMenu)}(e=this.editor)==null||e.off("block"),this.currentResizer&&(this.currentResizer.destroy(),this.currentResizer=null),this.contextMenu&&(this.contextMenu.destroy(),this.contextMenu=null),this.deactivateBlock(),this.editor=null,this.activeBlock=null}}exports.BlockPlugin=B;