Provide more demo of migration from 4.x to picomo 5.x

[walsvid]

Hello, thanks for your great work. I used emoji-button version 4.x before. Since the new version API and the previous has big changes, could you provide more examples to guide how to migrate the version?

For example, in the 4.x version, the theme can be updated after construction through setTheme(), but the new version of the API does not seem to have this method.

In addition, in the 4.x version, I can use document.querySelector('.emoji-picker__search') to get the DOM variables of the search box. In the new version, the suffix of the class name will be added after packaging, and the previous method seems to be no longer successful.

I'm not familiar with ts, could you give more examples of what's changed before the version and how the equivalent operations should be implemented in the new version?

[joeattardi]

Thanks for your feedback. To address your points:

• There is some planned work to allow picker options to be changed at runtime and have the new values take effect. Theme would certainly be one of these, others have requested similar support for emojisPerRow, etc. Stay tuned!
• PicMo uses CSS modules with scoped class names. As such there is no reliable way to select them by class name. I haven't tested this but you may be able to access the root element via the el property of the emoji picker object. If this does not work, I can definitely add better support for accessing the DOM nodes.

The main differences from version 4 are:

• By default PicMo renders an inline picker in the page. The old popup picker functionality from Emoji Button is now in a separate package, @picmo/popup-picker.
• Twemoji support is also in a separate package, @picmo/renderer-twemoji
• Emoji data is not bundled with the picker, it is downloaded separately and stored in the browser via IndexedDB.
• It is possible to add other renderers (for example, to use JoyPixels styled emojis)

There are others I'm sure but these are the big ones.

Have you looked at the getting started/usage guides at https://picmojs.com ? They are pretty comprehensive and go over how to build a picker with PicMo 5.

[walsvid]

Thanks for your kindly reply. With .el I was able to control the DOM element simply to some extent. I tried guidance at https://picmojs.com/ . I was able to build a picker for picmo, just hoping to replicate the previous 4.x operations one-to-one. I also look forward to more convenient ways to manipulate the DOM and new APIs for modifying themes at runtime.

[joeattardi]

There isn't much difference between the functionality of the two versions, mostly the difference is in the API structure. That said, there definitely is not a one-to-one match of all the functionality from 4.x - this is why it was a major version change, which under semantic versioning indicates incompatible API changes.

I'm curious, can you give some more detail about your use cases for manipulating the DOM? What kinds of DOM manipulation are you looking to do with the picker?

[walsvid]

I have upgrade emoji-button to picmo in the project of https://github.com/walsvid/logseq-emoji-picker-fork. For DOM access example, I need to check whether the click event is inside the popup-picker, if not I need to exist the plugin. I also need to change theme according to the logseq app theme.

[joeattardi]

Are you trying to simply close a popup picker when clicking outside of it? This functionality is already available in the popup picker. In fact, a popup picker should already do this by default.