Update @joeattardi/emoji-button to @picmo/popup-picker

[ahukkanen]

🎩 What? Why?

As it often happens with NPM packages, @joeattardi/emoji-button is now deprecated as stated here:
https://emoji-button.js.org/

Fortunately the update is rather easy to @picmo/popup-picker which is what this PR does. As a bonus, this adds the possibility to translate the UI strings for the picker as pointed out at #9631.

Note that this is still a draft PR until the following issue is resolved at the dependency:
joeattardi/picmo#224

📌 Related Issues

• Related issues at upstream
  • Content Security Policy Issues - BLOCKER joeattardi/picmo#224
  • Invalid CSS for scrollbar-width joeattardi/picmo#226
  • Popup picker "jumping" effect after upgrade 5.4.0 -> 5.6.0 joeattardi/picmo#240
  • CSS validation issues joeattardi/picmo#241
• Related to CI HTML validation issue "One operand must be a number" #8596
• Fixes Translation for Emojis Headings #9631

Testing

• Re-create the development app or replace its packages folder with the updated one
• If you updated the packages folder manually
  • Run npm i within the development_app
  • Delete the previous assets by running rm -rf public/decidim-packs within the development_app
• Start the development app
• Log in
• Find some place with a comments section (e.g. a proposal) and test out the updated emoji picker

📷 Screenshots

Before

After

[ahukkanen]

Seems also we have similar validation issues generated as with the previous version.

We fixed this by disabling the error temporarily until it is fixed upstream (#8597) but it seems it is still not fixed for the HTML validator. We are still waiting for update of the HTML validator, the issue is already resolved at the CSS validator (see #8596).

The problem with the new version is that it contains many more of these values that we would need to ignore, so let's see if the HTML validator would be updated meanwhile we are waiting for the remaining issues to be resolved at @joeattardi/emoji-button.

There is also one additional CSS validation issue at @joeattardi/emoji-button that I reported here:
joeattardi/picmo#226

[joeattardi]

Hi all, PicMo maintainer here, I am working on the CSP issue and hope to have it resolved soon.

[ahukkanen]

This is finally ready for review thanks to the fixes provided by @joeattardi. Many thanks!

Regarding the Nu validator bugs, unfortunately there is still no progress regarding those. In this PR, I am just ignoring the validator errors the same way as we used to do. The CSS generated by Picmo is valid but the problem is at the Nu validator. Related issues at the validator repositories:

• Nu validator - Incorrect "One operand must be a number" for CSS variable calculations w3c/css-validator#355
• Incorrect validation of css calc in combination with var (missing upstream sync with css-validator) validator/validator#1284

[ahukkanen]

The underlying issue with the HTML Nu validator seems to be finally fixed but we are still waiting for them to release a new version of the Docker container for those fixes to reach our CI flows.

More about this: #8596 (comment)

[ahukkanen]

Note for the reviewer:
The redesign changes at #9469 have broken the emoji picker positioning in the old layout as follows e.g. at the comments section:

This is not related to any changes in this PR.

If you enable redesign and go to conversations, the button is positioned correctly:

[andreslucena]

Tried it locally, it works as expected. I see that we've also won i18n for this 👏🏽 👏🏽