Implement math formula insertion tool using KaTeX

[Copilot]

The math tool button (la-square-root-alt) was present in the toolbar but disabled with no implementation. This wires it up end-to-end in both entrypoints.

Changes

• KaTeX CDN — Added katex.min.css and katex.min.js (v0.16.21) to both src/index.html and root index.html
• Enabled button — Removed disabled class from the mathsTool label in both entrypoints
• Modal dialog — New Bootstrap modal with LaTeX input, live preview via katex.render(), Insert/Cancel actions, and Enter key support in both entrypoints
• Tool wiring (jquery.whiteboard.js and root inline script):
  • Registered mathsTool as tool 4 in the radio change handler
  • case 4 in addElement() captures click coordinates and opens the modal
  • On insert: renders LaTeX into a <span>, wraps it in a draggable .wbjs-el container, positions it at click location
  • Follows existing patterns: auto-switches back to pointer, drag handle, element ID tracking
• Modal cancel handling — Resets active tool back to mouse pointer when the math modal is dismissed, preventing users from getting stuck in math mode

Usage

Select √ tool → click canvas → type LaTeX (e.g. \frac{-b \pm \sqrt{b^2-4ac}}{2a}) → see live preview → Insert.

[Copilot]

Pull request overview

This PR implements end-to-end math formula insertion on the whiteboard using KaTeX, wiring up the previously disabled √ toolbar tool.

Changes:

• Adds KaTeX CSS/JS via CDN and introduces a new “Insert Math Formula” Bootstrap modal with live preview.
• Enables the mathsTool button in the toolbar and wires it to tool ID 4.
• Implements formula insertion in jquery.whiteboard.js, placing rendered KaTeX output at the click/tap location inside a draggable whiteboard element.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
src/index.html	Enables the math tool button, adds KaTeX CDN assets, and adds the math insertion modal UI.
src/jquery.whiteboard.js	Registers/selects the math tool and implements modal open, live preview, and insertion of a draggable rendered formula element.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The repo has two entrypoints: src/index.html (served by src/app.js) and the root index.html (used for the GitHub Pages demo). This PR enables mathsTool only in src/index.html; the root index.html still has the maths button disabled and doesn’t load KaTeX, so the hosted demo won’t show this feature. Consider updating the root index.html as well (or consolidating to avoid duplicated UI).

[Copilot]

The comment says “reset tool on cancel”, but the handler only clears mathInsertCoords and leaves the current tool as mathsTool. Either update the comment to match the intended behavior, or actually reset the active tool (e.g., trigger #mouseTool on modal close / cancel) so users don’t get stuck repeatedly reopening the modal on the next click.

Suggested change

	mathInsertCoords = null;
	mathInsertCoords = null;
	if (tool === 4) {
	$("#mouseTool").trigger("click");
	}

[ionutfinta]

@copilot apply changes based on the comments in this thread

[Copilot]

@copilot apply changes based on the comments in this thread

Applied both review comments in commit 26ad4b4:

1. Root index.html updated — enabled the mathsTool button, added KaTeX CSS/JS CDN, added the math formula modal, and added math tool handling (tool selection, addElement case 4, live preview, insert, Enter key, cancel reset) to the inline script.

2. Tool reset on modal cancel — the hidden.bs.modal handler now switches back to the mouse tool when tool === 4, preventing users from getting stuck reopening the modal on every click.