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