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
44 lines (43 loc) • 1.62 kB
JavaScript
var b = Object.defineProperty;
var a = (o, l, t) => l in o ? b(o, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[l] = t;
var e = (o, l, t) => a(o, typeof l != "symbol" ? l + "" : l, t);
import { createContainer as n, createButton as i } from "../../../utils/helpers.mjs";
class h {
constructor(l) {
e(this, "container");
e(this, "onInsertSymbol");
e(this, "buttons", []);
this.container = n("math-toolbar flex gap-2 mb-4"), this.onInsertSymbol = l, this.initialize();
}
initialize() {
[
{ label: "+", symbol: "+" },
{ label: "-", symbol: "-" },
{ label: "×", symbol: "\\times" },
{ label: "÷", symbol: "\\div" },
{ label: "√", symbol: "\\sqrt{}" },
{ label: "^", symbol: "^{}" },
{ label: "∫", symbol: "\\int_{}^{}" },
{ label: "∑", symbol: "\\sum_{}^{}" },
{ label: "sin", symbol: "\\sin()" },
{ label: "cos", symbol: "\\cos()" },
{ label: "tan", symbol: "\\tan()" },
{ label: "lim", symbol: "\\lim_{}" },
{ label: "frac", symbol: "\\frac{}{}" },
{ label: "(", symbol: "\\left(\\right)" },
{ label: ")", symbol: "\\right)" }
].forEach((t) => {
const s = i(t.label, () => this.onInsertSymbol(t.symbol));
s.className = "math-toolbar-button px-3 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600", this.container.appendChild(s), this.buttons.push(s);
});
}
getElement() {
return this.container;
}
destroy() {
this.buttons.forEach((l) => l.remove()), this.buttons = [], this.container.innerHTML = "";
}
}
export {
h as MathToolbar
};