🎨 QuillKit - Math Selection & Formatting

Testing the ability to select and format MathML/LaTeX elements with font size and color changes.

What's New?

✅ Math elements can now be selected!

Previously, math elements had user-select: none which prevented them from being selected at all. This made it impossible to apply formatting like font size or color changes to math expressions.

Now you can select math elements and apply font formatting just like regular text!

How It Works

  1. Math elements still have contentEditable="false" to prevent accidental editing of their internal structure
  2. But user-select: none has been removed, allowing selection
  3. When you select math and apply formatting (font size, color, etc.), the editor wraps the math element
  4. The wrapSelection function has special logic to handle MathML elements properly

Live Demo - Try It Out!

Instructions:
  1. Click and drag to select one or more math expressions below
  2. Use the font size dropdown or font color dropdown in the toolbar
  3. The formatting will be applied to the selected math elements
  4. Notice that you can still select math along with regular text

Test Cases

Test 1: Select Individual Math Element

✅ Click on a single math expression and apply formatting

Test 2: Select Multiple Math Elements

✅ Click and drag across multiple math expressions and apply formatting to all at once

Test 3: Select Mixed Content (Text + Math)

✅ Select both regular text and math expressions together, then apply formatting

Test 4: Font Size Changes

✅ Select math and use the Font Size dropdown to make it larger or smaller

Test 5: Font Color Changes

✅ Select math and use the Font Color dropdown to change its color

Test 6: Both LaTeX and MathML

✅ Verify that both LaTeX (rendered with KaTeX) and native MathML can be selected and formatted

🔒 Safety Note:

Math elements still have contentEditable="false", so clicking inside them won't allow you to edit the math structure itself. This prevents accidental corruption of math expressions while still allowing formatting to be applied to the entire element.