Oh no I was also working on this 😅😁

I would like to add support for auto completing :emoji stuff and also mentions and magazine mentions. But that is of course out of scopefor this PR.

I am not so sure about the placement of the pop up. I did place it underneath the textbox, so you can still see the text. What do you think?

I would like to add support for auto completing :emoji stuff and also mentions and magazine mentions. But that is of course out of scopefor this PR.

No sure how easy this it. That would require changes in rich_textarea_controller.js.. And I actually didn't want to prefill icons when the user is typing anything. But that is maybe just me.

I am not so sure about the placement of the pop up. I did place it underneath the textbox, so you can still see the text. What do you think?

Normally the placement is almost below the button.. But in this case instead of placement bottom-start I used bottom-end:

placement: 'bottom-end',

Very similar how Nextcloud text add-on is also doing it (they are having a placement in the middle, but also a popover):

The icon is always inserted on the cursor location anyways. So.. yea.

EDIT: In GTK you have something you might are thinking of. Which is the popup is placed in near the button, but near the cursor. right?

Above, you see an example how I implemented the icon picker using GTK in LibreWeb. Although the heaving lifting here was done by GTK itself.

Oh, I might have to steal this for Interstellar :)

I would like to add support for auto completing :emoji stuff and also mentions and magazine mentions. But that is of course out of scopefor this PR.

No sure how easy this it. That would require changes in rich_textarea_controller.js.. And I actually didn't want to prefill icons when the user is typing anything. But that is maybe just me.

I do actually not want this behavior.

If you are just typing and use : in a sentence, it shouldn't trigger the emoji picker or selector IMO. Since I also often use just the : symbol. So that would be very annoying that I constantly trigger an emoji picker of any kind.

if you are just using it in a normal sentence then you would basically always have a space after the : so we can just trigger it after the furst letter directly after :. Many UIs do it this way e.g. Mastodon web UI and GitHub UI. Would you be fine with that?

I think it would be more of "emoji autocomplete" as opposed to opening the emoji picker

if you are just using it in a normal sentence then you would basically always have a space after the : so we can just trigger it after the furst letter directly after :. Many UIs do it this way e.g. Mastodon web UI and GitHub UI. Would you be fine with that?

Ah I see yes. That would make more sense.

I think it would be more of "emoji autocomplete" as opposed to opening the emoji picker

I currently only added this emoji picker. So adding auto complete might require a different npm package once again to add this somehow I'm afraid.

I see that popper.js is actually also replaced by floating-ui or.. try to use the existing popover.js implementation Nevermind popover.js is very cumbersome and only seems to work reliably with mouseover events.

Normally the placement is almost below the button.. But in this case instead of placement bottom-start I used bottom-end:

placement: 'bottom-end',

I will now just use bottom. I think this makes the most sense, since that is where you mouse cursor is located.

Using the new middleware middleware: [flip(), shift({limiter: limitShift()})], it allow to fit the screen in all other cases (think mobile).

@BentiGorlich could you please approve this PR?

A drop-down with auto-complete emoji picker is for now out of scope.. Something like this would require more npm dependencies etc.

Like I said in my first comment:

I would like to add support for auto completing :emoji stuff and also mentions and magazine mentions. But that is of course out of scopefor this PR.

I just did not get around to reviewing this PR, yet

In general I would approve, though the emoji picker itself is not styled. Because my browser does not send the light/dark mode preference my picker is styled in light mode:

I added the style changes that I made when I was developing the same feature to this branch: add_emoji_picker_styling. It should make it more fitting to mbin and the selected theme. If you like it you can just cherry pick it to this branch

Ah great catch. I see. Not sure how easy it is to apply styles. But the bare minimum would be at least light & dark mode should be matching the theme.

This is how it looks like on my browser on mobile BTW..

Like I said my branch (add_emoji_picker_styling) already implements all the styles of the themes.
https://github.com/MbinOrg/mbin/tree/add_emoji_picker_styling

Ah nice. I see you build on top of my changed. Feel free to just put the commit in this PR.

will do :)

OK lol. Now I can't approve because I'm the PR author. You already approved but you are the latest commiter...

Did we set the branch protection too strict? Or would you like to approve @jwr1 to help us out here, 😂?

Oh :D
I could've just created a PR afterwards I suppose... but yeah it would be easier if @jwr1 or @TheVillageGuy approved this PR :D

We could.. of course... also force merge it.. Or just change the branch protection rules slightly. ;)

Specifically this option should not be checked: