Font Size in Editor

[eduardoadmdev]

Summary

Adds a font size selection tool to the editor toolbar, behaving similarly to other rich text editors (e.g., MS Word).

Changes

• Added FontSizeButton component.
• UX Improvements:
  • Visual display shows unitless numbers (e.g., "14") while applying specific pixel logic (14px) internally.
  • Auto-detection: The input automatically updates to show the font size of the currently selected text or cursor position.
  • The box acts as a clean input field.
• Added editing-font-size localization string.
• Added strict TypeScript typing for the new component.

Testing

• Manual Test: Verified that selecting text updates the input value, and changing the value applies the correct font size.
• Automated Checks: Passed ./ninja check:svelte.

[GithubAnon0000]

Works

1. Changing font size.

Needs Changes

1. The font size of the current selection isn't highlighted in your drop down but should be. E.g. if you change the size to 10, then 10 should be highlighted.
2. The new font size button doesn't update the number based on the current mouse caret. E.g. type two words "Hello World" and make "Hello" 10px and "World" 48px. Your tool will only display the last used number / font size, not the font size of the word currently selected.
3. The new font size button needs styling updates. It currently is taller than the other buttons and also looks different from the styling. Especially the arrow button looks out of place, possibly due to its border:

4. The box with the number inside (next to the arrow) cannot be clicked. It visually looks like you could click it and choose a value of your liking, but it doesn't work.

---

I didn't thoroughly check the code here but just like in #4502 I question if this is needed frequently enough. Though maybe one would want to change the font size to highlight certain words, just like e.g. <b> would but with font size instead.