Add Emoji picker to message form

[simonspa]

This MR adds the new emoji picker from nextcloud-vue to the new message form of the Talk text chat. This fixes #1130 .

[simonspa]

What works:

• emoji picker popover from nextcloud-vue
• select emoji, add to end of text input

What doesn't work:

• add emoji to cursor position - we're losing the caret position when focusing the popover.
• re-focus the input after closing the picker - we can call AdvencedInput's focusInput() but that sets caret to start again
• (future) it would be nice to add a handleColonEvent to AdvancedInput to allow selecting emojis directly similar to the handleAtEvent for participant mentions.

I'd appreciate some help for fixing these issues. 😏

[marcoambrosini]

Super @simonspa!
As a minor note, I would swap the attachment and emoji buttons positions :)

[nickvergessen]

Looks good as a first version, CSS styling needs some adjustment (icon not centered on button and the buttons should be more to the left now, so the text input field is aligned with posted messages again).

• add emoji to cursor position - we're losing the caret position when focusing the popover.
• re-focus the input after closing the picker - we can call AdvencedInput's focusInput() but that sets caret to start again
  (future) it would be nice to add a handleColonEvent to AdvancedInput to allow selecting emojis directly similar to the handleAtEvent for participant mentions.

I have to admit I'm as clueless as you are. I tried to figure out cursor position handling once, but it is not working with one of the browsers all the time, no matter which attempt I tried. Maybe @danxuliu has an idea, otherwise this is what we use for now and then check later.

Due to some other merges a rebase seems needed.

[danxuliu]

add emoji to cursor position - we're losing the caret position when focusing the popover.

I have been investigating this but unfortunately I had limited success. I have added a commit to insert the emoji at the caret position that works as expected with latest Firefox. But...

• With older Firefox versions (at least, in Firefox 68; I do not know in which version it started to work) it does not work because clicking an emoji in the picker focuses that emoji, so the selection is cleared in the message input. This can be reproduced in the EmojiPicker documentation.
• With Chromium it does not work because clicking on the button to show the emoji picker moves the selection to the button to show the menu to attach files (I have no idea why). However, around 1 out of 5 times it works as expected, and the selection/caret position is not modified in the message input when clicking on the button to show the emoji picker. Again, no idea why.
  It is worth noting that it can not be reproduced in the EmojiPicker documentation (it always works as expected there). If you select a text in the page and then click on the button to show the EmojiPicker the selected text is not cleared, so it seems to be specific to Talk 🤷

Besides that the message input loses the caret position for example when writing in the search box of the picker. I have implemented a hack to keep a copy of the selection in the message input when it loses the focus and use that range to do the insertion. However I find it a bit counterintuitive, as it breaks the expectation regarding focus and selections (if you select some text, move the focus to other place and then add an emoji the emoji will replace what was in the selection even if it is no longer selected), so I would rather not apply it.

Independently of the above I have also fixed adding the emojis in Firefox when new lines are included in the input (as in that case Firefox adds an extra <br> at the end, so instead of just adding the emoji it has to be added before the last <br>).

@simonspa I have pushed my commits as well as one from @nickvergessen to your branch. I hope you do not mind :-) Also feel free to squash/fixup your commits with them ;-)

[nickvergessen]

It now uses vue-material-design-icons/EmoticonOutline (screenshot is outdated) which is correct.

[nickvergessen]

Needs a rebase

I would say let's get this in because of the feature freeze soon, and then we try to fix the position and focus things in a follow up

[nickvergessen]

Rebased in #3994

[nickvergessen]

Thanks a lot for the PR @simonspa we merged it via #3994 and it will be part of the Nextcloud 20 release