Add emoji picker to menubar (Fixes: #987)

[mejo-]

• Resolves: Make it easy to insert emojis #987
• Target version: master

Summary

This is a first attempt to add the emoji picker to the text editor menubar. It works for me, but still has some rough edges.

Here's a screencast:

I'm curious to hear your thoughts @juliushaertl and @azul 😊

The way menu actions are organized in src/mixins/menubar.js at the moment unfortunately is a bit limited. Since the emoji picker isn't a simple <button> or <ActionButton> element and I prefer to reuse the <EmojiPicker> component from nextcloud-vue, I went a different route: I added the emoji action in src/mixins/menubar.js but special-treated it in the MenuBar component. I'm not particularly happy with this approach though. Maybe you have a better idea for a clean implementation?

[juliusknorr]

I'm not particularly happy with this approach though. Maybe you have a better idea for a clean implementation?

Yes, that one is indeed a bit tricky. The reason I went for the array instead of having the buttons directly in the component is that this allows to do some straight forward subset for rendering the popovermenu if the space exceeds the width. I might need to think about that a bit more.

[szaimen]

And I think a rebase is probably needed...

[mejo-]

Yes, that one is indeed a bit tricky. The reason I went for the array instead of having the buttons directly in the component is that this allows to do some straight forward subset for rendering the popovermenu if the space exceeds the width. I might need to think about that a bit more.

After thinking about it a second time, I'm more confident with my solution of special-treating the EmojiPicker in the for-loop.

Beware though that the way I implemented it results in the EmojiPicker being always displayed as the last non-hidden tool. That's on purpose, given that adding an emoji would require three clicks otherwise (open popovermenu, open emojipicker, select emoji).

Let me know what you think about it :)

[juliusknorr]

I'm not particularly happy with this approach though. Maybe you have a better idea for a clean implementation?

Yes, that one is indeed a bit tricky. The reason I went for the array instead of having the buttons directly in the component is that this allows to do some straight forward subset for rendering the popovermenu if the space exceeds the width. I might need to think about that a bit more.

We could probably have a dedicated component with a slot that takes all the actions and then does conditional rendering based on the slot elements but not fully sure if that would be successful.

Something similar how it is done in the actions component https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/Actions/Actions.vue#L649

[juliusknorr]

Anyways I'd be fine with the current workaround for now. Doesn't seem too bad ;)

[mejo-]

We could probably have a dedicated component with a slot that takes all the actions and then does conditional rendering based on the slot elements but not fully sure if that would be successful.

To be honest, I'm not sure whether it's worth the effort at the moment 😉. But you decide. If you'd like it to be that way, I'd give it a try.

Anyways I'd be fine with the current workaround for now. Doesn't seem too bad ;)

Yay 😊 Feel free to approve/merge. I just changed the PR from draft to ready to merge.

[mejo-]

Rebased on latest master.

[mejo-]

😍

[juliusknorr]

Awesome contribution @mejo- 👏