❓ Support
riegel02 riegel02 May 27, 2024

How to self host "Emoji Picker Element Data" without jsDelivr?

We have privacy focused community and tend to self host everything and don't rely on any 3rd party/CDN services. Community won't be happy about the fact that we use jsDelivr to serve "https://cdn.jsdelivr.net/npm/emoji-picker-element-data@^1/en/emojibase/data.json" instead of doing it our self. Since we are not in control and there is also CloudFlare in the middle.

We had similar issue with Ghost and UNPKG, but it was rather easy to fix by simply uploading the script and changing it in the file. This one is more challenging since default.js is changing all the time (?) and reverts all the changes made in the file.

I know that this will require manual changes and monitoring the data.json for the updates, but this is simply how we need to handle it.

I asked ChatGPT for fun, but not sure if this is the proper way or if it will even work:

Example with Nginx:

location /cdn.jsdelivr.net/npm/emoji-picker-element-data@%5E1/en/emojibase/data.json {
    proxy_pass https://your-custom-url.com/path/to/data.json;

Example with Apache:

RewriteEngine On
RewriteRule ^/cdn.jsdelivr.net/npm/emoji-picker-element-data@%5E1/en/emojibase/data.json$ https://your-custom-url.com/p

Will appreciate if someone can suggest proper way to do this! 🤗

P.S I also prefer to selfhost such scripts to avoid possible downtime such as https://www.jsdelivr.com/blog/jsdelivr-may-outage-postmortem/_

4 ⁨4⁩ ⁨comments⁩
Answered by Toby Toby

@riegel02 To change where emojis are hosted, you can change the emoji_url setting in config/waterhole/design.php. Note this is a separate thing from the emoji-picker-element data source discussed in my previous comment.

View Answer

⁨4⁩ ⁨Comments⁩

Toby Toby Waterhole Founder May 27, 2024

Good question @riegel02!

default.js is bundled at runtime from a few separate JS files under vendor/waterhole/core/resources/dist - you might have more luck making changes in those files, but then they will still be overwritten whenever you update Waterhole, so this wouldn't be the recommended way to do it.

I don't think what ChatGPT has suggested will work, because the browser's request to cdn.jsdelivr.net will bypass your server completely.

In theory, the way to do this would be to add a custom script to monitor for <emoji-picker> elements and switch their data source to your own:

  1. Create a new file at resources/js/emojiPicker.js:
function updateEmojiPickerDataSource() {
  document.querySelectorAll('emoji-picker').forEach((el) => {
    // https://github.com/nolanlawson/emoji-picker-element?tab=readme-ov-file#javascript-api
    el.dataSource = "DATA_SOURCE_URL";
  });
}

// Update emoji-picker elements already on the page
updateEmojiPickerDataSource();

// Observer for new emoji-picker elements added to the page
const observer = new MutationObserver(updateEmojiPickerDataSource);
observer.observe(document.documentElement, {
  childList: true,
  subtree: true,
});
  1. Add it to your forum using the Script extender in app/Providers/WaterholeServiceProvider.php:
Extend\Script::add(resource_path('js/emojiPicker.js'));

However, unfortunately this is not actually working - I am still seeing requests to the cdn.jsdelivr.net domain when navigating between pages. I've run out of time to debug right now, but will keep thinking about how this can be achieved!
riegel02 riegel02 Jun 23, 2024
In reply to Toby Toby

Hey Toby!

Just wanted to update that changing file in /core/resources/dist/emoji.js does the job! However it took me couple of minutes to understand why there was still jsdeliver in the background. But after quick debugging I found out that all of emojis are hosted on jsdeliver.

So for example this 😂 laughing emoji https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f602.svg

Either way this is not biggie and can be replaced in the admin. Wish we had an option to upload .svg files as images. Right now it is not possible, but I can just replace it with icons from Blade with different icon pack.

Thanks a lot for the help! This is all I wanted and I got used to changing this kind of things manually 😀
riegel02 riegel02 Jun 23, 2024
In reply to Toby Toby

Okay, I was too happy that I found solution and didn't notice that I cannot turn off or replace emojis in the editor. Users can still pick up emojis and they all are coming from CDN instead of being hosted on the server. I will try to find a way to fix this, but let me know if you know a workaround :)

#update

Possible way around would be to selfhost data? emoji-picker-element? However I see no option for Laravel and don't really understand how to make it.
Answer
Toby Toby Waterhole Founder Jun 24, 2024
In reply to riegel02 riegel02

@riegel02 To change where emojis are hosted, you can change the emoji_url setting in config/waterhole/design.php. Note this is a separate thing from the emoji-picker-element data source discussed in my previous comment.
Comment Controls