feat(texteditor): swap editor view on touhscreens detection

[habibayman]

Summary

Following a conversation with Jessica on the design thread link, In this PR I've configured the editor to switch to touch screens design based on touch device detection. in this way the design will work for tablets & mobile phones too.
for the check, I copied a utility from Kolibri here. It's not used anywhere else in studio but it'll help when we decide to prepare the whole UI of studio for touch screens too.

I also moved the <AssessmentItemToolbar /> up on touch screens and for medium desktop screen sizes.

I noticed that the overflow button in the specs had text next to the icon, I added that too.

---

References

• currently this PR represents part of Update rich text editor to flexible, extensible rich text editing framework #5049

• fixes [New Rich Text Editor]: Swap Editor UI on screen type not size #5259

• Studio UI Figma Design

---

Reviewer Guidance

Try the editor in different screen sizes + in touch/non-touch screens

Important

This branch has a dependency on 2 PRs and should be rebased once merged DONE

• refactor(texteditor): replace image data urls with server uploads  #5271
• refactor(texteditor): lazy load heavy extensions and general optimization #5304

---

Visuals

desktop.webm

RTL-Desktop.webm

Mobile.webm

[nucleogenesis]

I gave the code a good look through (I'm pretty sure I got the right commit range 😅) -- and overall it looks excellent.

I tested it locally and on touchscreen devices it was exactly as expected w/ the toolbar at the bottom & the dropdown menu. I tested on the question & hints editors successfully.

I think this is ready to go to QA

[nucleogenesis]

I see elsewhere you're using isTouchDevice || screenSizeLevel <= 3 - should this be similar or !isMobile && !isTouchDevice?

[habibayman]

This condition flips the toolbar component itself (Mobile / Desktop), while the isTouchDevice || screenSizeLevel <= 3 condition manages the <AssessmentItemToolbar /> placement.

++ I've checked with Jessica and she said that the Mobile Formatting bar mustn't appear unless it's displayed on a touch device, so I manage the desktop toolbar on small screens elsewhere.

[habibayman]

I found a problem with the touchscreens formatting bar. Sometimes it did get positioned right over the keyboard and sometimes not. after some debugging I found out that the problem was the autoscroll behavior the browser does to keep the cursor visible.

fixed in fae6155

Please try the formatting bar in browserstack to see if it aligns correctly -- @nucleogenesis