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 Comments
Good question @riegel02!
default.js
is bundled at runtime from a few separate JS files undervendor/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:resources/js/emojiPicker.js
:Script
extender inapp/Providers/WaterholeServiceProvider.php
: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!
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![😀](https://cdn.jsdelivr.net/gh/twitter/twemoji@latest/assets/svg/1f600.svg)
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.
@riegel02 To change where emojis are hosted, you can change the
emoji_url
setting inconfig/waterhole/design.php
. Note this is a separate thing from the emoji-picker-element data source discussed in my previous comment.