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
122 lines (121 loc) • 5.29 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 */
var h = Object.defineProperty;
var d = (o, t, e) => t in o ? h(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
var i = (o, t, e) => d(o, typeof t != "symbol" ? t + "" : t, e);
/* empty css */
/* empty css */
import { MathMenu as m } from "./components/MathMenu.mjs";
import { MathContextMenu as u } from "./components/MathContextMenu.mjs";
import { createToolbarButton as c } from "../ToolbarPlugin/utils.mjs";
import { Resizer as g } from "../../utils/Resizer.mjs";
import { createSpan as f, createLineBreak as p } from "../../utils/helpers.mjs";
import E from "../../icons/math.svg.mjs";
class D {
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 m(t), this.contextMenu = new u(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 = c({
icon: E,
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 g(n, {
handleSize: 10,
handleColor: "blue",
onResizeStart: () => {
var r;
return (r = this.editor) == null ? void 0 : r.disableObserver();
},
onResize: (r, s) => {
var a, l;
console.log(`Resized to ${r}x${s}`), n instanceof HTMLElement && ((l = this.menu) == null || l.redrawMath(n, ((a = n.dataset) == null ? void 0 : a.mathExpression) ?? "", {
width: r,
height: s
}));
},
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 s = e.clientX, a = e.clientY;
(r = this.contextMenu) == null || r.show(n, s, 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 = f("math-wrapper my-4");
r.draggable = !0, r.appendChild(n), r.appendChild(p()), 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;
}
}
export {
D as MathPlugin
};