Skip to content

Instantly share code, notes, and snippets.

@kabili207

kabili207/Scribble Chirimojis.md

Forked from ChiriVulpes/Scribble Chirimojis.md
Created April 21, 2021 16:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kabili207/589ac165c4ed5faab3f80c502b4c6d4a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kabili207/589ac165c4ed5faab3f80c502b4c6d4a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Scribble Chirimojis.md

Chirimojis for Scribble Hub

This allows you to create your own custom emoji picker of all the emojis that you want to be able to use on Scribble Hub.

Note: It completely replaces Scribble's default emoji.

Using this script:

  1. Add the content of scribble.chirimojis.js to a userscript extension in your browser, for example, Tampermonkey for Firefox.
  2. Add the content of scribble.chirimojis.css to a userstyles extension in your browser, for example, Stylish.
  3. Fill in your emoji to the customEmojis variable in scribble.chirimojis.js. There's an example of the format in the file.

Note: Please make sure your images aren't too big! We don't want to lose custom emoji privileges. Respect the site! If you want to use Discord emojis, make sure your url ends with ?size=32 (replace ?v=1 if it's there)

Thanks for discovering the ability to make custom emoji on Scribble, Lena!

Raw
scribble.chirimojis.css
.chirimoji-panel {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0.7em;
max-height: calc(100% + 10px);
overflow: auto;
margin-bottom: -10px;
}
.chirimoji {
max-width: 50px !important;
max-height: 50px !important;
width: auto !important;
padding: 0.2em;
}
.chirimoji:hover {
background: #fff3;
box-sizing: border-box;
border-radius: 4px;
}
Raw
scribble.chirimojis.js
/*
this will hold an object containing your custom emojis
as an example, here's what one of Scribble's emojis would look like:
const customEmojis = {
"Blob Cookie": "https://www.scribblehub.com/wp-content/themes/writeit-child/emojis/blobs/blob_cookie_3.png",
};
basically, the format is: "name": "url",
*/
const customEmojis = {};
// implementation
function addCustomEmoji(near, name, url) {
let contenteditable;
do {
near = near.parentElement;
contenteditable = near.querySelector("[contenteditable]");
} while (!contenteditable);
if (!contenteditable)
return;
const emoji = document.createElement("img");
emoji.id = "emoji_list";
emoji.src = url;
emoji.classList.add("mceSmilieSprite", "mceSmilie35", "sp-wrap-yellow", "mce-charmap");
emoji.title = name;
emoji.width = 24;
emoji.height = 24;
contenteditable.appendChild(emoji);
}
window.addEventListener("click", event => {
const chirimoji = event.target.closest(".chirimoji");
if (chirimoji)
addCustomEmoji(chirimoji.closest(".chirimoji-panel"), chirimoji.title, chirimoji.firstElementChild.src);
});
function replaceEmojisPanel() {
const tabs = document.querySelector("[onclick=\"insert_emoji(this);\"]")?.closest("#tabs");
if (!tabs)
return;
const panel = document.createElement("div");
panel.classList.add("chirimoji-panel");
tabs.replaceWith(panel);
for (const [name, url] of Object.entries(customEmojis)) {
const emojiWrapper = document.createElement("span");
emojiWrapper.id = "fa-list";
emojiWrapper.title = name;
emojiWrapper.classList.add("chirimoji");
panel.appendChild(emojiWrapper);
const emoji = document.createElement("img");
emoji.id = "rl-list-fa";
emoji.border = 0;
emoji.src = url;
emojiWrapper.appendChild(emoji);
}
}
setInterval(replaceEmojisPanel, 100);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment