on-codemerge/dist/src/plugins/MathPlugin/index.mjs

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

var d = Object.defineProperty;
var h = (a, e, t) => e in a ? d(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
var o = (a, e, t) => h(a, typeof e != "symbol" ? e + "" : e, t);
/* empty css            */
/* empty css             */
import { MathMenu as c } from "./components/MathMenu.mjs";
import { MathContextMenu as m } from "./components/MathContextMenu.mjs";
import { createToolbarButton as u } 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 B {
  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(e), this.contextMenu = new m(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 = u({
      icon: E,
      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 g(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 = f("math-wrapper my-4");
      i.draggable = !0, i.appendChild(l), i.appendChild(p()), 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;
  }
}
export {
  B as MathPlugin
};