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) • 4.68 kB
JavaScript
"use strict";var h=Object.defineProperty;var u=(a,e,t)=>e in a?h(a,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[e]=t;var o=(a,e,t)=>u(a,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css */;/* empty css */const c=require("./components/MathMenu.cjs"),g=require("./components/MathContextMenu.cjs"),m=require("../ToolbarPlugin/utils.cjs"),f=require("../../utils/Resizer.cjs"),d=require("../../utils/helpers.cjs"),p=require("../../icons/math.svg.cjs");class M{constructor(){o(this,"name","math");o(this,"hotkeys",[{keys:"Ctrl+Shift+M",description:"Insert math formula",command:"math-editor",icon:"𝛢"}]);o(this,"editor",null);o(this,"menu",null);o(this,"contextMenu",null);o(this,"currentResizer",null);o(this,"toolbarButton",null);o(this,"draggedElement",null)}initialize(e){this.editor=e,this.menu=new c.MathMenu(e),this.contextMenu=new g.MathContextMenu(e,this.menu),this.addToolbarButton(),this.setupMathEvents(),this.editor.on("math",()=>{var t,n;this.insertMath(),(n=(t=this.editor)==null?void 0:t.getSelector())==null||n.saveSelection()}),this.editor.on("drag-start",({e:t})=>{const n=t.target.closest(".math-wrapper");n instanceof HTMLElement&&this.handleDragStart(t,n)}),this.editor.on("drag-end",({e:t})=>{const n=t.target.closest(".math-wrapper");n instanceof HTMLElement&&this.handleDragEnd(t,n)}),this.editor.on("drag-over",({e:t})=>{this.handleDragOver(t)}),this.editor.on("drag-drop",({e:t})=>{this.handleDrop(t)}),this.editor.on("math",()=>{var t,n;(n=(t=this.editor)==null?void 0:t.getSelector())==null||n.saveSelection(),this.insertMath()})}handleDragStart(e,t){e.dataTransfer&&(this.draggedElement=t,e.dataTransfer.setData("text/plain",""),e.dataTransfer.effectAllowed="move",t.classList.add("dragging"))}handleDragOver(e){this.draggedElement&&(e.preventDefault(),e.dataTransfer.dropEffect="move")}handleDragEnd(e,t){t.classList.remove("dragging"),this.draggedElement=null}handleDrop(e){if(!this.draggedElement||!this.editor)return;e.preventDefault();const t=this.editor.getContainer(),n=this.draggedElement.parentElement;n&&n.removeChild(this.draggedElement);const r=document.caretRangeFromPoint(e.clientX,e.clientY);r?r.insertNode(this.draggedElement):t.appendChild(this.draggedElement),this.draggedElement.classList.remove("dragging"),this.draggedElement=null}addToolbarButton(){var t;const e=document.querySelector(".editor-toolbar");e&&(this.toolbarButton=m.createToolbarButton({icon:p.default,title:(t=this.editor)==null?void 0:t.t("Insert Math"),onClick:()=>{var n,r;(r=(n=this.editor)==null?void 0:n.getSelector())==null||r.saveSelection(),this.insertMath()}}),e.appendChild(this.toolbarButton))}setupMathEvents(){if(!this.editor)return;const e=this.editor.getContainer();e.addEventListener("click",t=>{const n=t.target.closest(".math-container");n instanceof HTMLElement&&(this.currentResizer&&(this.currentResizer.destroy(),this.currentResizer=null),this.currentResizer=new f.Resizer(n,{handleSize:10,handleColor:"blue",onResizeStart:()=>{var r;return(r=this.editor)==null?void 0:r.disableObserver()},onResize:(r,s)=>{var l,i;console.log(`Resized to ${r}x${s}`),n instanceof HTMLElement&&((i=this.menu)==null||i.redrawMath(n,((l=n.dataset)==null?void 0:l.mathExpression)??"",{width:r,height:s}))},onResizeEnd:()=>{var r;return(r=this.editor)==null?void 0:r.enableObserver()}}))}),e.addEventListener("contextmenu",t=>{var r;const n=t.target.closest(".math-container");if(n instanceof HTMLElement){t.preventDefault();const s=t.clientX+window.scrollX,l=t.clientY+window.scrollY;(r=this.contextMenu)==null||r.show(n,s,l)}})}insertMath(){var n,r,s;if(!this.editor)return;this.editor.ensureEditorFocus();const e=window.getSelection();let t=(r=(n=this.editor)==null?void 0:n.getSelector())==null?void 0:r.restoreSelection(this.editor.getContainer());t||(t=document.createRange(),t.selectNodeContents(this.editor.getContainer()),t.collapse(!1)),(s=this.menu)==null||s.show(l=>{if(!this.editor)return;const i=d.createSpan("math-wrapper my-4");i.draggable=!0,i.appendChild(l),i.appendChild(d.createLineBreak()),t.deleteContents(),t.insertNode(i),t.setStartAfter(i),t.setEndAfter(i),e==null||e.removeAllRanges(),e==null||e.addRange(t)})}destroy(){var e;this.menu&&(this.menu.destroy(),this.menu=null),this.contextMenu&&(this.contextMenu.destroy(),this.contextMenu=null),this.currentResizer&&(this.currentResizer.destroy(),this.currentResizer=null),this.toolbarButton&&this.toolbarButton.parentElement&&(this.toolbarButton.parentElement.removeChild(this.toolbarButton),this.toolbarButton=null),(e=this.editor)==null||e.off("math"),this.editor=null}}exports.MathPlugin=M;