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!

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;
}

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.title = name;
    emoji.width = 24;
    emoji.height = 24;
    const range = window.getSelection()?.getRangeAt(0);
    if (!range) 
    	return contenteditable.appendChild(emoji);
    	
    range.deleteContents();
    range.insertNode(emoji);
    range.setStartAfter(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);
    
    function createEmojiButton(name, url) {
        const emojiWrapper = document.createElement("span");
        emojiWrapper.id = "fa-list";
        emojiWrapper.title = name;
        emojiWrapper.classList.add("chirimoji");
        
        const emoji = document.createElement("img");
        emoji.id = "rl-list-fa";
        emoji.border = 0;
        emoji.src = url;
        emojiWrapper.appendChild(emoji);
        return emojiWrapper;
    }
    
    for (const [name, data] of Object.entries(customEmojis)) {
    	if (typeof data === "string") {
    		panel.appendChild(createEmojiButton(name, data));
    		continue;
    	}
    	
		const emojiSection = document.createElement("details");
		emojiSection.open = true;
		panel.appendChild(emojiSection);
		
		const summary = document.createElement("summary");
		summary.textContent = name;
		emojiSection.appendChild(summary);
		
    	for (const [name, url] of Object.entries(data)) {
    		emojiSection.appendChild(createEmojiButton(name, url));
    	}
    }
}

setInterval(replaceEmojisPanel, 100);