fix(chat): preserve selection (caret) on new message input

[ShGKme]

☑️ Resolves

• Fix Emoji not always inserted at the correct position #4265

Preserve new message input's selection (caret position) on blur and restore on focus.
Currently only useful for emoji picker, but can be useful in other inserts.

Using preserved selection, emoji picker inserts the selected emoji in the correct position.

Additional change: after the emoji picker close, the focus returns to the field.

🖌️ UI Checklist

🖼️ Screenshots / Screencasts

Works:

• In the end
• In the middle
• With replace
• Having new lines and mentions (without adding <br>)
• Opening the picker by mouse, by SHIFT+Tab + Enter
• Closing the picker by ESC, by click outside, by click on the trigger

🏁 Checklist

• 🌏 Tested with different browsers / clients:
  • Chromium (Chrome / Edge / Opera / Brave)
  • Firefox
  • Safari
  • Talk Desktop
  • Not risky to browser differences / client
• 🖌️ Design was reviewed, approved or inspired by the design team
• ⛑️ Tests are included or not possible
• 📗 User documentation in https://github.com/nextcloud/documentation/tree/master/user_manual/talk has been updated or is not required

[ShGKme]

• Fixed by: fix(NcPopover): emit after-show after focus-trap init to correctly return focus when content set focus initially (e.g. NcEmojiPicker) nextcloud-libraries/nextcloud-vue#6342

[nickvergessen]

Not risky to browser differences / client

From my past memory (at phpBB with BBCodes, as well as Nextcloud with the mentions bubbles) this is giving me nightmares. This needs proper testing on each supported browser / platform combination before merging:

• Desktop Client
• Windows / Firefox
• Windows / Chromium
• Linux / Firefox
• Linux / Chromium
• Mac OS / Firefox
• Mac OS / Chromium
• Mac OS / Safari
• iPhone/iPad / Safari Mobile
• Android / Firefox
• Android / Chrome

---

Testcases:

• In the end
• In the middle
• With replace
• Having new lines and mentions (without adding <br>)
• With replacing new lines and mentions
• Opening the picker by mouse, by SHIFT+Tab + Enter
• Closing the picker by ESC, by click outside, by click on the trigger

Not sure which browser/OS it was, but I remember multiple selections being a thing? If that is correct we also need to test this 🙈

[ShGKme]

Testcases:

All mentioned testcases are cross-platform.

Problematic testcases:

• Select, then turn into "Edit message" mode
• Multi-selection, when the first range is outside the field

[ShGKme]

From my past memory (at phpBB with BBCodes, as well as Nextcloud with the mentions bubbles) this is giving me nightmares. This needs proper testing on each supported browser / platform combination before merging:

• Desktop Client

Windows-desktop.mp4

• Windows / Firefox

windows-firefox.mp4

• Windows / Chromium

windows-chrome.mp4

• Linux / Firefox

linux-firefox.mp4

• Linux / Chromium

linux-chromium.mp4

• Mac OS / Firefox

macos-firefox.mp4

• Mac OS / Chromium

macos-chrome.mp4

• Mac OS / Safari

macos-safari.mp4

• iPhone/iPad / Safari Mobile

ios-safari.mp4

• Android / Firefox

android-firefox.mp4

• Android / Chrome

android-chromium.mp4

[Antreesy]

Tested, left a couple of comments

[Antreesy]

/backport to stable31

.