When using the Content Editor to write Markdown in a WYSIWYG environment, we want to provide as much guidance as possible when inserting rich content. There's no more rich content in the world than emoji. 😜
Currently, if you know the emoji name like :slight_smile: you can insert an emoji using the Content Editor. When the page is saved, the emoji is rendered correctly. Alternatively, you can paste emoji in from another editor and it will save correctly. But that's not as intuitive as it should be. 🤦🏻
Proposal 💡
Add an icon to the toolbar of the Content Editor that brings up an emoji picker. Trigger this same picker inline with the content when the user types :
Details
For consistency, we should use the icon and picker from the issue view, when you add a reaction.
This page may contain information related to upcoming products, features and functionality.
It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes.
Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.
In particular, I want to distinguish between two ways of inserting emoji right now in GitLab, and what direction we want to go forward in for content editor.
Type in : to see suggested emoji based on keywords.
A full emoji dropdown, perhaps an icon that goes in the toolbar. However this cannot go inside the + menu since that would mean two levels of dropdowns and we currently don't support that in Pajamas.
I believe that we should be able to unify both the experiences, but that would be a bit of an involved process, since it would touch many components outside the scope of our group. But that would be my ideal approach.
For our MVC, I would be happy to have consistency with comment and issue editor (approach 1 above). But I agree, an ideal solution would have the full emoji picker with the search bar and tabs triggered when you type : or click a button in the toolbar.
Good call on not putting it in the + menu though, that would be awkward.
@mle I propose adding an emoji icon to the toolbar that brings up the full picker. What do you think?
For MVC, going with the typing approach of : is a good start with the single list menu and is consistent with the writing experience across the product.
If we can use the full emoji picker with search would be good but I see that there could be issues with how it works versus the simple menu because there is an element of learnability of how to insert :white_check_mark: because the text appears there.
With the toolbar approach, I don't think the + dropdown menu needs to be remained open after you click on "emoji". It could close and a view for selecting an emoji could appear. Whether this view is a modal or anchored to cursor or to the + menu is something that is worth discussing further in this issue [Discussion] Inserting objects from toolbar wit... (#367197)
@himkp This issue looks like it may slip this current milestone. Can you leave a 👍 or 👎 to signify if you are on track to deliver this issue?
Please also consider updating the issue's Health Status or Milestone to reflect its current state,
and communicate with your Product Manager as appropriate.
@himkp This issue looks like it may slip this current milestone. Can you leave a 👍 or 👎 to signify if you are on track to deliver this issue?
Please also consider updating the issue's Health Status or Milestone to reflect its current state,
and communicate with your Product Manager as appropriate.
@himkp This issue looks like it may slip this current milestone. Can you leave a 👍 or 👎 to signify if you are on track to deliver this issue?
Please also consider updating the issue's Health Status or Milestone to reflect its current state,
and communicate with your Product Manager as appropriate.
@himkp This issue looks like it may slip this current milestone. Can you leave a 👍 or 👎 to signify if you are on track to deliver this issue?
Please also consider updating the issue's Health Status or Milestone to reflect its current state,
and communicate with your Product Manager as appropriate.
@himkp This issue looks like it may slip this current milestone. Can you leave a 👍 or 👎 to signify if you are on track to deliver this issue?
Please also consider updating the issue's Health Status or Milestone to reflect its current state,
and communicate with your Product Manager as appropriate.
@himkp This issue looks like it may slip this current milestone. Can you leave a 👍 or 👎 to signify if you are on track to deliver this issue?
Please also consider updating the issue's Health Status or Milestone to reflect its current state,
and communicate with your Product Manager as appropriate.
But I agree, an ideal solution would have the full emoji picker with the search bar and tabs triggered when you type : or click a button in the toolbar.
When you type in :, we don't need the search bar since whatever the user is typing in content editor after the : is the search string. We'll need to modify and customize our emoji picker quite a bit, especially to add keyboard support.
Alternatively, we leave the : emoji picker as is, and use the full emoji picker in the toolbar.