MDL-65896 core: create emoji picker

lang/en/moodle.php

@@ -727,6 +727,15 @@ $string['emailstop'] = 'Email stop';
 $string['emailtoprivatefiles'] = 'You can also e-mail files as attachments straight to your private files space. Simply attach your files to an e-mail and send it to {$a}';
 $string['emailtoprivatefilesdenied'] = 'Your administrator has disabled the option to upload your own private files.';
 $string['emailvia'] = '{$a->name} (via {$a->siteshortname})';
+$string['emojicategoryactivities'] = 'Activities';
+$string['emojicategoryanimalsnature'] = 'Animals & nature';
+$string['emojicategoryflags'] = 'Flags';
+$string['emojicategoryfooddrink'] = 'Food & drink';
+$string['emojicategoryobjects'] = 'Objects';
+$string['emojicategoryrecent'] = 'Recent';
+$string['emojicategorysmileyspeople'] = 'Smileys & people';
+$string['emojicategorysymbols'] = 'Symbols';
+$string['emojicategorytravelplaces'] = 'Travel & places';
 $string['emptydragdropregion'] = 'empty region';
 $string['enable'] = 'Enable';
 $string['encryptedcode'] = 'Encrypted code';

lib/amd/src/emoji/picker.js

@@ -0,0 +1,858 @@
+// This file is part of Moodle - http://moodle.org/
+//
+// Moodle is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// Moodle is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+
+/**
+ * Emoji picker.
+ *
+ * @copyright  2019 Ryan Wyllie <ryan@moodle.com>
+ * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
+ */
+import LocalStorage from 'core/localstorage';
+import * as EmojiData from 'core/emoji/data';
+import {throttle, debounce} from 'core/utils';
+import {get_string} from 'core/str';
+import {render as renderTemplate} from 'core/templates';
+
+const VISIBLE_ROW_COUNT = 10;
+const ROW_RENDER_BUFFER_COUNT = 5;
+const RECENT_EMOJIS_STORAGE_KEY = 'moodle-recent-emojis';
+const ROW_HEIGHT_RAW = 40;
+const EMOJIS_PER_ROW = 7;
+const MAX_RECENT_COUNT = EMOJIS_PER_ROW * 3;
+const ROW_TYPE = {
+    EMOJI: 0,
+    HEADER: 1
+};
+const SELECTORS = {
+    CATEGORY_SELECTOR: '[data-action="show-category"]',
+    EMOJIS_CONTAINER: '[data-region="emojis-container"]',
+    EMOJI_PREVIEW: '[data-region="emoji-preview"]',
+    EMOJI_SHORT_NAME: '[data-region="emoji-short-name"]',
+    ROW_CONTAINER: '[data-region="row-container"]',
+    SEARCH_INPUT: '[data-region="search-input"]',
+    SEARCH_RESULTS_CONTAINER: '[data-region="search-results-container"]'
+};
+
+/**
+ * Create the row data for a category.
+ *
+ * @param {String} categoryName The category name
+ * @param {String} categoryDisplayName The category display name
+ * @param {Array} emojis The emoji data
+ * @param {Number} totalRowCount The total number of rows generated so far
+ * @return {Array}
+ */
+const createRowDataForCategory = (categoryName, categoryDisplayName, emojis, totalRowCount) => {
+    const rowData = [];
+    rowData.push({
+        index: totalRowCount + rowData.length,
+        type: ROW_TYPE.HEADER,
+        data: {
+            name: categoryName,
+            displayName: categoryDisplayName
+        }
+    });
+
+    for (let i = 0; i < emojis.length; i += EMOJIS_PER_ROW) {
+        const rowEmojis = emojis.slice(i, i + EMOJIS_PER_ROW);
+        rowData.push({
+            index: totalRowCount + rowData.length,
+            type: ROW_TYPE.EMOJI,
+            data: rowEmojis
+        });
+    }
+
+    return rowData;
+};
+
+/**
+ * Add each row's index to it's value in the row data.
+ *
+ * @param {Array} rowData List of emoji row data
+ * @return {Array}
+ */
+const addIndexesToRowData = (rowData) => {
+    return rowData.map((data, index) => {
+        return {...data, index};
+    });
+};
+
+/**
+ * Calculate the scroll position for the beginning of each category from
+ * the row data.
+ *
+ * @param {Array} rowData List of emoji row data
+ * @return {Object}
+ */
+const getCategoryScrollPositionsFromRowData = (rowData) => {
+    return rowData.reduce((carry, row, index) => {
+        if (row.type === ROW_TYPE.HEADER) {
+            carry[row.data.name] = index * ROW_HEIGHT_RAW;
+        }
+        return carry;
+    }, {});
+};
+
+/**
+ * Create a header row element for the category name.
+ *
+ * @param {Number} rowIndex Index of the row in the row data
+ * @param {String} name The category display name
+ * @return {Element}
+ */
+const createHeaderRow = async (rowIndex, name) => {
+    const context = {
+        index: rowIndex,
+        text: name
+    };
+    const html = await renderTemplate('core/emoji/header_row', context);
+    const temp = document.createElement('div');
+    temp.innerHTML = html;
+    return temp.firstChild;
+};
+
+/**
+ * Create an emoji row element.
+ *
+ * @param {Number} rowIndex Index of the row in the row data
+ * @param {Array} emojis The list of emoji data for the row
+ * @return {Element}
+ */
+const createEmojiRow = async (rowIndex, emojis) => {
+    const context = {
+        index: rowIndex,
+        emojis: emojis.map(emojiData => {
+            const charCodes = emojiData.unified.split('-').map(code => `0x${code}`);
+            const emojiText = String.fromCodePoint.apply(null, charCodes);
+            return {
+                shortnames: `:${emojiData.shortnames.join(': :')}:`,
+                unified: emojiData.unified,
+                text: emojiText,
+                spacer: false
+            };
+        }),
+        spacers: Array(EMOJIS_PER_ROW - emojis.length).fill(true)
+    };
+    const html = await renderTemplate('core/emoji/emoji_row', context);
+    const temp = document.createElement('div');
+    temp.innerHTML = html;
+    return temp.firstChild;
+};
+
+/**
+ * Check if the element is an emoji element.
+ *
+ * @param {Element} element Element to check
+ * @return {Bool}
+ */
+const isEmojiElement = element => element.getAttribute('data-short-names') !== null;
+
+/**
+ * Search from an element and up through it's ancestors to fine the category
+ * selector element and return it.
+ *
+ * @param {Element} element Element to begin searching from
+ * @return {Element|null}
+ */
+const findCategorySelectorFromElement = element => {
+    if (!element) {
+        return null;
+    }
+
+    if (element.getAttribute('data-action') === 'show-category') {
+        return element;
+    } else {
+        return findCategorySelectorFromElement(element.parentElement);
+    }
+};
+
+const getCategorySelectorByCategoryName = (root, name) => {
+    return root.querySelector(`[data-category="${name}"]`);
+};
+
+/**
+ * Sets the given category selector element as active.
+ *
+ * @param {Element} root The root picker element
+ * @param {Element} element The category selector element to make active
+ */
+const setCategorySelectorActive = (root, element) => {
+    const allCategorySelectors = root.querySelectorAll(SELECTORS.CATEGORY_SELECTOR);
+    allCategorySelectors.forEach(selector => {
+        selector.classList.remove('selected');
+    });
+
+    element.classList.add('selected');
+};
+
+/**
+ * Get the category selector element and the scroll positions for the previous and
+ * next categories for the given scroll position.
+ *
+ * @param {Element} root The picker root element
+ * @param {Number} position The position to get the category for
+ * @param {Object} categoryScrollPositions Set of scroll positions for all categories
+ * @return {Array}
+ */
+const getCategoryByScrollPosition = (root, position, categoryScrollPositions) => {
+    let positions = [];
+
+    if (position < 0) {
+        position = 0;
+    }
+
+    // Get all of the category positions.
+    for (const categoryName in categoryScrollPositions) {
+        const categoryPosition = categoryScrollPositions[categoryName];
+        positions.push([categoryPosition, categoryName]);
+    }
+
+    // Sort the positions in ascending order.
+    positions.sort(([a], [b]) => {
+        if (a < b) {
+            return -1;
+        } else if (a > b) {
+            return 1;
+        } else {
+            return 0;
+        }
+    });
+
+    // Get the current category name as well as the previous and next category
+    // positions from the sorted list of positions.
+    const {categoryName, previousPosition, nextPosition} = positions.reduce(
+        (carry, candidate) => {
+            const [categoryPosition, categoryName] = candidate;
+
+            if (categoryPosition <= position) {
+                carry.categoryName = categoryName;
+                carry.previousPosition = carry.currentPosition;
+                carry.currentPosition = position;
+            } else if (carry.nextPosition === null) {
+                carry.nextPosition = categoryPosition;
+            }
+
+            return carry;
+        },
+        {
+            categoryName: null,
+            currentPosition: null,
+            previousPosition: null,
+            nextPosition: null
+        }
+    );
+
+    return [getCategorySelectorByCategoryName(root, categoryName), previousPosition, nextPosition];
+};
+
+/**
+ * Get the list of recent emojis data from local storage.
+ *
+ * @return {Array}
+ */
+const getRecentEmojis = () => {
+    const storedData = LocalStorage.get(RECENT_EMOJIS_STORAGE_KEY);
+    return storedData ? JSON.parse(storedData) : [];
+};
+
+/**
+ * Save the list of recent emojis in local storage.
+ *
+ * @param {Array} recentEmojis List of emoji data to save
+ */
+const saveRecentEmoji = (recentEmojis) => {
+    LocalStorage.set(RECENT_EMOJIS_STORAGE_KEY, JSON.stringify(recentEmojis));
+};
+
+/**
+ * Add an emoji data to the set of recent emojis. This function will update the row
+ * data to ensure that the recent emoji rows are correct and all of the rows are
+ * re-indexed.
+ *
+ * The new set of recent emojis are saved in local storage and the full set of updated
+ * row data and new emoji row count are returned.
+ *
+ * @param {Array} rowData The emoji rows data
+ * @param {Number} recentEmojiRowCount Count of the recent emoji rows
+ * @param {Object} newEmoji The emoji data for the emoji to add to the recent emoji list
+ * @return {Array}
+ */
+const addRecentEmoji = (rowData, recentEmojiRowCount, newEmoji) => {
+    // The first set of rows is always the recent emojis.
+    const categoryName = rowData[0].data.name;
+    const categoryDisplayName = rowData[0].data.displayName;
+    const recentEmojis = getRecentEmojis();
+    // Add the new emoji to the start of the list of recent emojis.
+    let newRecentEmojis = [newEmoji, ...recentEmojis.filter(emoji => emoji.unified != newEmoji.unified)];
+    // Limit the number of recent emojis.
+    newRecentEmojis = newRecentEmojis.slice(0, MAX_RECENT_COUNT);
+    const newRecentEmojiRowData = createRowDataForCategory(categoryName, categoryDisplayName, newRecentEmojis);
+
+    // Save the new list in local storage.
+    saveRecentEmoji(newRecentEmojis);
+
+    return [
+        // Return the new rowData and re-index it to make sure it's all correct.
+        addIndexesToRowData(newRecentEmojiRowData.concat(rowData.slice(recentEmojiRowCount))),
+        newRecentEmojiRowData.length
+    ];
+};
+
+/**
+ * Calculate which rows should be visible based on the given scroll position. Adds a
+ * buffer to amount to either side of the total number of requested rows so that
+ * scrolling the emoji rows container is smooth.
+ *
+ * @param {Number} scrollPosition Scroll position within the emoji container
+ * @param {Number} visibleRowCount How many rows should be visible
+ * @param {Array} rowData The emoji rows data
+ * @return {Array}
+ */
+const getRowsToRender = (scrollPosition, visibleRowCount, rowData) => {
+    const minVisibleRow = scrollPosition > ROW_HEIGHT_RAW ? Math.floor(scrollPosition / ROW_HEIGHT_RAW) : 0;
+    const start = minVisibleRow >= ROW_RENDER_BUFFER_COUNT ? minVisibleRow - ROW_RENDER_BUFFER_COUNT : minVisibleRow;
+    const end = minVisibleRow + visibleRowCount + ROW_RENDER_BUFFER_COUNT;
+    const rows = rowData.slice(start, end);
+    return rows;
+};
+
+/**
+ * Create a row element from the row data.
+ *
+ * @param {Object} rowData The emoji row data
+ * @return {Element}
+ */
+const createRowElement = async (rowData) => {
+    let row = null;
+    if (rowData.type === ROW_TYPE.HEADER) {
+        row = await createHeaderRow(rowData.index, rowData.data.displayName);
+    } else {
+        row = await createEmojiRow(rowData.index, rowData.data);
+    }
+
+    row.style.position = 'absolute';
+    row.style.left = 0;
+    row.style.right = 0;
+    row.style.top = `${rowData.index * ROW_HEIGHT_RAW}px`;
+
+    return row;
+};
+
+/**
+ * Check if the given rows match.
+ *
+ * @param {Object} a The first row
+ * @param {Object} b The second row
+ * @return {Bool}
+ */
+const doRowsMatch = (a, b) => {
+    if (a.index !== b.index) {
+        return false;
+    }
+
+    if (a.type !== b.type) {
+        return false;
+    }
+
+    if (typeof a.data != typeof b.data) {
+        return false;
+    }
+
+    if (a.type === ROW_TYPE.HEADER) {
+        return a.data.name === b.data.name;
+    } else {
+        if (a.data.length !== b.data.length) {
+            return false;
+        }
+
+        for (let i = 0; i < a.data.length; i++) {
+            if (a.data[i].unified != b.data[i].unified) {
+                return false;
+            }
+        }
+    }
+
+    return true;
+};
+
+/**
+ * Update the visible rows. Deletes any row elements that should no longer
+ * be visible and creates the newly visible row elements. Any rows that haven't
+ * changed visibility will be left untouched.
+ *
+ * @param {Element} rowContainer The container element for the emoji rows
+ * @param {Array} currentRows List of row data that matches the currently visible rows
+ * @param {Array} nextRows List of row data containing the new list of rows to be made visible
+ */
+const renderRows = async (rowContainer, currentRows, nextRows) => {
+    // We need to add any rows that are in nextRows but not in currentRows.
+    const toAdd = nextRows.filter(nextRow => !currentRows.some(currentRow => doRowsMatch(currentRow, nextRow)));
+    // Remember which rows will still be visible so that we can insert our element in the correct place in the DOM.
+    let toKeep = currentRows.filter(currentRow => nextRows.some(nextRow => doRowsMatch(currentRow, nextRow)));
+    // We need to remove any rows that are in currentRows but not in nextRows.
+    const toRemove = currentRows.filter(currentRow => !nextRows.some(nextRow => doRowsMatch(currentRow, nextRow)));
+    const toRemoveElements = toRemove.map(rowData => rowContainer.querySelectorAll(`[data-row="${rowData.index}"]`));
+
+    // Render all of the templates first.
+    const rows = await Promise.all(toAdd.map(rowData => createRowElement(rowData)));
+
+    rows.forEach((row, index) => {
+        const rowData = toAdd[index];
+        let nextRowIndex = null;
+
+        for (let i = 0; i < toKeep.length; i++) {
+            const candidate = toKeep[i];
+            if (candidate.index > rowData.index) {
+                nextRowIndex = i;
+                break;
+            }
+        }
+
+        // Make sure the elements get added to the DOM in the correct order (ascending by row data index)
+        // so that they appear naturally in the tab order.
+        if (nextRowIndex !== null) {
+            const nextRowData = toKeep[nextRowIndex];
+            const nextRowNode = rowContainer.querySelector(`[data-row="${nextRowData.index}"]`);
+
+            rowContainer.insertBefore(row, nextRowNode);
+            toKeep.splice(nextRowIndex, 0, toKeep);
+        } else {
+            toKeep.push(rowData);
+            rowContainer.append(row);
+        }
+    });
+
+    toRemoveElements.forEach(rows => rows.forEach(row => rowContainer.removeChild(row)));
+};
+
+/**
+ * Build a function to render the visible emoji rows for a given scroll
+ * position.
+ *
+ * @param {Element} rowContainer The container element for the emoji rows
+ * @return {Function}
+ */
+const generateRenderRowsAtPositionFunction = (rowContainer) => {
+    let currentRows = [];
+    let nextRows = [];
+    let rowCount = 0;
+    let isRendering = false;
+    const renderNextRows = async () => {
+        if (!nextRows.length) {
+            return;
+        }
+
+        if (isRendering) {
+            return;
+        }
+
+        isRendering = true;
+        const nextRowsToRender = nextRows.slice();
+        nextRows = [];
+
+        await renderRows(rowContainer, currentRows, nextRowsToRender);
+        currentRows = nextRowsToRender;
+        isRendering = false;
+        renderNextRows();
+    };
+
+    return (scrollPosition, rowData, rowLimit = VISIBLE_ROW_COUNT) => {
+        nextRows = getRowsToRender(scrollPosition, rowLimit, rowData);
+        renderNextRows();
+
+        if (rowCount !== rowData.length) {
+            // Adjust the height of the container to match the number of rows.
+            rowContainer.style.height = `${rowData.length * ROW_HEIGHT_RAW}px`;
+        }
+
+        rowCount = rowData.length;
+    };
+};
+
+/**
+ * Show the search results container and hide the emoji container.
+ *
+ * @param {Element} emojiContainer The emojis container
+ * @param {Element} searchResultsContainer The search results container
+ */
+const showSearchResults = (emojiContainer, searchResultsContainer) => {
+    searchResultsContainer.classList.remove('hidden');
+    emojiContainer.classList.add('hidden');
+};
+
+/**
+ * Hide the search result container and show the emojis container.
+ *
+ * @param {Element} emojiContainer The emojis container
+ * @param {Element} searchResultsContainer The search results container
+ * @param {Element} searchInput The search input
+ */
+const clearSearch = (emojiContainer, searchResultsContainer, searchInput) => {
+    searchResultsContainer.classList.add('hidden');
+    emojiContainer.classList.remove('hidden');
+    searchInput.value = '';
+};
+
+/**
+ * Build function to handle mouse hovering an emoji. Shows the preview.
+ *
+ * @param {Element} emojiPreview The emoji preview element
+ * @param {Element} emojiShortName The emoji short name element
+ * @return {Function}
+ */
+const getHandleMouseEnter = (emojiPreview, emojiShortName) => {
+    return (e) => {
+        const target = e.target;
+        if (isEmojiElement(target)) {
+            emojiShortName.textContent = target.getAttribute('data-short-names');
+            emojiPreview.textContent = target.textContent;
+        }
+    };
+};
+
+/**
+ * Build function to handle mouse leaving an emoji. Removes the preview.
+ *
+ * @param {Element} emojiPreview The emoji preview element
+ * @param {Element} emojiShortName The emoji short name element
+ * @return {Function}
+ */
+const getHandleMouseLeave = (emojiPreview, emojiShortName) => {
+    return (e) => {
+        const target = e.target;
+        if (isEmojiElement(target)) {
+            emojiShortName.textContent = '';
+            emojiPreview.textContent = '';
+        }
+    };
+};
+
+/**
+ * Build the function to handle a user clicking something in the picker.
+ *
+ * The function currently handles clicking on the category selector or selecting
+ * a specific emoji.
+ *
+ * @param {Number} recentEmojiRowCount Number of rows of recent emojis
+ * @param {Element} emojiContainer Container element for the visible of emojis
+ * @param {Element} searchResultsContainer Contaienr element for the search results
+ * @param {Element} searchInput Search input element
+ * @param {Function} selectCallback Callback function to execute when a user selects an emoji
+ * @param {Function} renderAtPosition Render function to display current visible emojis
+ * @return {Function}
+ */
+const getHandleClick = (
+    recentEmojiRowCount,
+    emojiContainer,
+    searchResultsContainer,
+    searchInput,
+    selectCallback,
+    renderAtPosition
+) => {
+    return (e, rowData, categoryScrollPositions) => {
+        const target = e.target;
+        let newRowData = rowData;
+        let newCategoryScrollPositions = categoryScrollPositions;
+
+        // Hide the search results if they are visible.
+        clearSearch(emojiContainer, searchResultsContainer, searchInput);
+
+        if (isEmojiElement(target)) {
+            // Emoji selected.
+            const unified = target.getAttribute('data-unified');
+            const shortnames = target.getAttribute('data-short-names').replace(/:/g, '').split(' ');
+            // Build the emoji data from the selected element.
+            const emojiData = {unified, shortnames};
+            const currentScrollTop = emojiContainer.scrollTop;
+            const isRecentEmojiRowVisible = emojiContainer.querySelector(`[data-row="${recentEmojiRowCount - 1}"]`) !== null;
+            // Save the selected emoji in the recent emojis list.
+            [newRowData, recentEmojiRowCount] = addRecentEmoji(rowData, recentEmojiRowCount, emojiData);
+            // Re-index the category scroll positions because the additional recent emoji may have
+            // changed their positions.
+            newCategoryScrollPositions = getCategoryScrollPositionsFromRowData(newRowData);
+
+            if (isRecentEmojiRowVisible) {
+                // If the list of recent emojis is currently visible then we need to re-render the emojis
+                // to update the display and show the newly selected recent emoji.
+                renderAtPosition(currentScrollTop, newRowData);
+            }
+
+            // Call the client's callback function with the selected emoji.
+            selectCallback(target.textContent);
+            // Return the newly calculated row data and scroll positions.
+            return [newRowData, newCategoryScrollPositions];
+        }
+
+        const categorySelector = findCategorySelectorFromElement(target);
+        if (categorySelector) {
+            // Category selector.
+            const selectedCategory = categorySelector.getAttribute('data-category');
+            const position = categoryScrollPositions[selectedCategory];
+            // Scroll the container to the selected category. This will trigger the
+            // on scroll handler to re-render the visibile emojis.
+            emojiContainer.scrollTop = position;
+        }
+
+        return [newRowData, newCategoryScrollPositions];
+    };
+};
+
+/**
+ * Build the function that handles scrolling of the emoji container to display the
+ * correct emojis.
+ *
+ * We render the emoji rows as they are needed rather than all up front so that we
+ * can avoid adding tends of thousands of elements to the DOM unnecessarily which
+ * would bog down performance.
+ *
+ * @param {Element} root The picker root element
+ * @param {Number} currentVisibleRowScrollPosition The current scroll position of the container
+ * @param {Element} emojiContainer The emojis container element
+ * @param {Object} initialCategoryScrollPositions Scroll positions for each category
+ * @param {Function} renderAtPosition Function to render the appropriate emojis for a scroll position
+ * @return {Function}
+ */
+const getHandleScroll = (
+    root,
+    currentVisibleRowScrollPosition,
+    emojiContainer,
+    initialCategoryScrollPositions,
+    renderAtPosition
+) => {
+    // Scope some local variables to track the scroll positions of the categories. We need to
+    // recalculate these because adding recent emojis can change those positions by adding
+    // additional rows.
+    let [
+        currentCategoryElement,
+        previousCategoryPosition,
+        nextCategoryPosition
+    ] = getCategoryByScrollPosition(root, emojiContainer.scrollTop, initialCategoryScrollPositions);
+
+    return (categoryScrollPositions, rowData) => {
+        const newScrollPosition = emojiContainer.scrollTop;
+        const upperScrollBound = currentVisibleRowScrollPosition + ROW_HEIGHT_RAW;
+        const lowerScrollBound = currentVisibleRowScrollPosition - ROW_HEIGHT_RAW;
+        // We only need to update the active category indicator if the user has scrolled into a
+        // new category scroll position.
+        const updateActiveCategory = (newScrollPosition >= nextCategoryPosition) ||
+                       (newScrollPosition < previousCategoryPosition);
+        // We only need to render new emoji rows if the user has scrolled far enough that a new row
+        // would be visible (i.e. they've scrolled up or down more than 40px - the height of a row).
+        const updateRenderRows = (newScrollPosition < lowerScrollBound) || (newScrollPosition > upperScrollBound);
+
+        if (updateActiveCategory) {
+            // New category is visible so update the active category selector and re-index the
+            // positions incase anything has changed.
+            [
+                currentCategoryElement,
+                previousCategoryPosition,
+                nextCategoryPosition
+            ] = getCategoryByScrollPosition(root, newScrollPosition, categoryScrollPositions);
+            setCategorySelectorActive(root, currentCategoryElement);
+        }
+
+        if (updateRenderRows) {
+            // A new row should be visible so re-render the visible emojis at this new position.
+            // We request an animation frame from the browser so that we're not blocking anything.
+            // The animation only needs to occur as soon as the browser is ready not immediately.
+            requestAnimationFrame(() => {
+                renderAtPosition(newScrollPosition, rowData);
+                // Remember the updated position.
+                currentVisibleRowScrollPosition = newScrollPosition;
+            });
+        }
+    };
+};
+
+/**
+ * Build the function that handles search input from the user.
+ *
+ * @param {Element} searchInput The search input element
+ * @param {Element} searchResultsContainer Container element to display the search results
+ * @param {Element} emojiContainer Container element for the emoji rows
+ * @return {Function}
+ */
+const getHandleSearch = (searchInput, searchResultsContainer, emojiContainer) => {
+    const rowContainer = searchResultsContainer.querySelector(SELECTORS.ROW_CONTAINER);
+    // Build a render function for the search results.
+    const renderSearchResultsAtPosition = generateRenderRowsAtPositionFunction(rowContainer);
+    searchResultsContainer.append(rowContainer);
+
+    return async () => {
+        const searchTerm = searchInput.value.toLowerCase();
+
+        if (searchTerm) {
+            // Display the search results container and hide the emojis container.
+            showSearchResults(emojiContainer, searchResultsContainer);
+
+            // Find which emojis match the user's search input.
+            const matchingEmojis = Object.keys(EmojiData.byShortName).reduce((carry, shortName) => {
+                if (shortName.includes(searchTerm)) {
+                    carry.push({
+                        shortnames: [shortName],
+                        unified: EmojiData.byShortName[shortName]
+                    });
+                }
+                return carry;
+            }, []);
+
+            const searchResultsString = await get_string('searchresults', 'core');
+            const rowData = createRowDataForCategory(searchResultsString, searchResultsString, matchingEmojis, 0);
+            // Show the emoji rows for the search results.
+            renderSearchResultsAtPosition(0, rowData, rowData.length);
+        } else {
+            // Hide the search container and show the emojis container.
+            clearSearch(emojiContainer, searchResultsContainer, searchInput);
+        }
+    };
+};
+
+/**
+ * Register the emoji picker event listeners.
+ *
+ * @param {Element} root The picker root element
+ * @param {Element} emojiContainer Root element containing the list of visible emojis
+ * @param {Function} renderAtPosition Function to render the visible emojis at a given scroll position
+ * @param {Number} currentVisibleRowScrollPosition What is the current scroll position
+ * @param {Function} selectCallback Function to execute when the user picks an emoji
+ * @param {Object} categoryScrollPositions Scroll positions for where each of the emoji categories begin
+ * @param {Array} rowData Data representing each of the display rows for hte emoji container
+ * @param {Number} recentEmojiRowCount Number of rows of recent emojis
+ */
+const registerEventListeners = (
+    root,
+    emojiContainer,
+    renderAtPosition,
+    currentVisibleRowScrollPosition,
+    selectCallback,
+    categoryScrollPositions,
+    rowData,
+    recentEmojiRowCount
+) => {
+    const searchInput = root.querySelector(SELECTORS.SEARCH_INPUT);
+    const searchResultsContainer = root.querySelector(SELECTORS.SEARCH_RESULTS_CONTAINER);
+    const emojiPreview = root.querySelector(SELECTORS.EMOJI_PREVIEW);
+    const emojiShortName = root.querySelector(SELECTORS.EMOJI_SHORT_NAME);
+    // Build the click handler function.
+    const clickHandler = getHandleClick(
+        recentEmojiRowCount,
+        emojiContainer,
+        searchResultsContainer,
+        searchInput,
+        selectCallback,
+        renderAtPosition
+    );
+    // Build the scroll handler function.
+    const scrollHandler = getHandleScroll(
+        root,
+        currentVisibleRowScrollPosition,
+        emojiContainer,
+        categoryScrollPositions,
+        renderAtPosition
+    );
+    const searchHandler = getHandleSearch(searchInput, searchResultsContainer, emojiContainer);
+
+    // Mouse enter/leave events to show the emoji preview on hover or focus.
+    root.addEventListener('focus', getHandleMouseEnter(emojiPreview, emojiShortName), true);
+    root.addEventListener('blur', getHandleMouseLeave(emojiPreview, emojiShortName), true);
+    root.addEventListener('mouseenter', getHandleMouseEnter(emojiPreview, emojiShortName), true);
+    root.addEventListener('mouseleave', getHandleMouseLeave(emojiPreview, emojiShortName), true);
+    // User selects an emoji or clicks on one of the emoji category selectors.
+    root.addEventListener('click', e => {
+        // Update the row data and category scroll positions because they may have changes if the
+        // user selects an emoji which updates the recent emojis list.
+        [rowData, categoryScrollPositions] = clickHandler(e, rowData, categoryScrollPositions);
+    });
+    // Throttle the scroll event to only execute once every 50 milliseconds to prevent performance issues
+    // in the browser when re-rendering the picker emojis. The scroll event fires a lot otherwise.
+    emojiContainer.addEventListener('scroll', throttle(() => scrollHandler(categoryScrollPositions, rowData), 50));
+    // Debounce the search input so that it only executes 200 milliseconds after the user has finished typing.
+    searchInput.addEventListener('input', debounce(searchHandler, 200));
+};
+
+/**
+ * Initialise the emoji picker.
+ *
+ * @param {Element} root The root element for the picker
+ * @param {Function} selectCallback Callback for when the user selects an emoji
+ */
+export default (root, selectCallback) => {
+    const emojiContainer = root.querySelector(SELECTORS.EMOJIS_CONTAINER);
+    const rowContainer = emojiContainer.querySelector(SELECTORS.ROW_CONTAINER);
+    const recentEmojis = getRecentEmojis();
+    // Add the recent emojis category to the list of standard categories.
+    const allData = [{
+        name: 'Recent',
+        emojis: recentEmojis
+    }, ...EmojiData.byCategory];
+    let rowData = [];
+    let recentEmojiRowCount = 0;
+
+    /**
+     * Split categories data into rows which represent how they will be displayed in the
+     * picker. Each category will add a row containing the display name for the category
+     * and a row for every 9 emojis in the category. The row data will be used to calculate
+     * which emojis should be visible in the picker at any given time.
+     *
+     * E.g.
+     * input = [
+     *  {name: 'example1', emojis: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]},
+     *  {name: 'example2', emojis: [13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]},
+     * ]
+     * output = [
+     *      {type: 'categoryName': data: 'Example 1'},
+     *      {type: 'emojiRow': data: [1, 2, 3, 4, 5, 6, 7, 8, 9]},
+     *      {type: 'emojiRow': data: [10, 11, 12]},
+     *      {type: 'categoryName': data: 'Example 2'},
+     *      {type: 'emojiRow': data: [13, 14, 15, 16, 17, 18, 19, 20, 21]},
+     *      {type: 'emojiRow': data: [22, 23]},
+     * ]
+     */
+    allData.forEach(category => {
+        const categorySelector = getCategorySelectorByCategoryName(root, category.name);
+        // Get the display name from the category selector button so that we don't need to
+        // send an ajax request for the string.
+        const categoryDisplayName = categorySelector.title;
+        const categoryRowData = createRowDataForCategory(category.name, categoryDisplayName, category.emojis, rowData.length);
+
+        if (category.name === 'Recent') {
+            // Remember how many recent emoji rows there are because it needs to be used to
+            // re-index the row data later when we're adding more recent emojis.
+            recentEmojiRowCount = categoryRowData.length;
+        }
+
+        rowData = rowData.concat(categoryRowData);
+    });
+
+    // Index the row data so that we can calculate which rows should be visible.
+    rowData = addIndexesToRowData(rowData);
+    // Calculate the scroll positions for each of the categories within the emoji container.
+    // These are used to know where to jump to when the user selects a specific category.
+    const categoryScrollPositions = getCategoryScrollPositionsFromRowData(rowData);
+    const renderAtPosition = generateRenderRowsAtPositionFunction(rowContainer);
+    // Display the initial set of emojis.
+    renderAtPosition(0, rowData);
+
+    registerEventListeners(
+        root,
+        emojiContainer,
+        renderAtPosition,
+        0,
+        selectCallback,
+        categoryScrollPositions,
+        rowData,
+        recentEmojiRowCount
+    );
+};

lib/classes/output/icon_system_fontawesome.php

@@ -217,6 +217,15 @@ class icon_system_fontawesome extends icon_system_font {
             'core:i/down' => 'fa-arrow-down',
             'core:i/dragdrop' => 'fa-arrows',
             'core:i/duration' => 'fa-clock-o',
+            'core:i/emojicategoryactivities' => 'fa-futbol-o',
+            'core:i/emojicategoryanimalsnature' => 'fa-leaf',
+            'core:i/emojicategoryflags' => 'fa-flag',
+            'core:i/emojicategoryfooddrink' => 'fa-cutlery',
+            'core:i/emojicategoryobjects' => 'fa-lightbulb-o',
+            'core:i/emojicategoryrecent' => 'fa-clock-o',
+            'core:i/emojicategorysmileyspeople' => 'fa-smile-o',
+            'core:i/emojicategorysymbols' => 'fa-heart',
+            'core:i/emojicategorytravelplaces' => 'fa-plane',
             'core:i/edit' => 'fa-pencil',
             'core:i/email' => 'fa-envelope',
             'core:i/empty' => 'fa-fw',

lib/templates/emoji/emoji_row.mustache

@@ -0,0 +1,51 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core_message/emoji/picker
+
+    This template will render the emoji picker.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    *
+
+    Context variables required for this template:
+    *
+
+    Example context (json):
+    {}
+
+}}
+
+<div
+    class="align-middle d-flex align-items-center justify-content-between picker-row"
+    data-row="{{index}}"
+>
+    {{#emojis}}
+        <button
+            data-short-names="{{shortnames}}"
+            data-unified="{{unified}}"
+            class="btn btn-link btn-icon p-0 rounded-lg emoji-button"
+            title="{{shortnames}}"
+        >{{text}}</button>
+    {{/emojis}}
+    {{#spacers}}
+        <div class="emoji-button"></div>
+    {{/spacers}}
+</div>

lib/templates/emoji/header_row.mustache

@@ -0,0 +1,38 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core_message/emoji/picker
+
+    This template will render the emoji picker.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    *
+
+    Context variables required for this template:
+    *
+
+    Example context (json):
+    {}
+
+}}
+
+<div class="align-middle picker-row" data-row="{{index}}">
+    <h3 class="h6 font-weight-bold mb-0 category-name">{{text}}</h3>
+</div>

lib/templates/emoji/picker.mustache

@@ -0,0 +1,143 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core_message/emoji/picker
+
+    This template will render the emoji picker.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    *
+
+    Context variables required for this template:
+    *
+
+    Example context (json):
+    {}
+
+}}
+
+<div
+    data-region="emoji-picker"
+    class="card shadow emoji-picker"
+>
+    <div class="card-header px-1 pt-1 pb-0 d-flex justify-content-between flex-shrink-0">
+        <button
+            class="btn btn-outline-secondary icon-no-margin category-button selected"
+            data-action="show-category"
+            data-category="Recent"
+            title="{{#str}} emojicategoryrecent, core {{/str}}"
+        >
+            {{#pix}} i/emojicategoryrecent, core {{/pix}}
+        </button>
+        <button
+            class="btn btn-outline-secondary icon-no-margin category-button"
+            data-action="show-category"
+            data-category="Smileys & People"
+            title="{{#str}} emojicategorysmileyspeople, core {{/str}}"
+        >
+            {{#pix}} i/emojicategorysmileyspeople, core {{/pix}}
+        </button>
+        <button
+            class="btn btn-outline-secondary icon-no-margin category-button"
+            data-action="show-category"
+            data-category="Animals & Nature"
+            title="{{#str}} emojicategoryanimalsnature, core {{/str}}"
+        >
+            {{#pix}} i/emojicategoryanimalsnature, core {{/pix}}
+        </button>
+        <button
+            class="btn btn-outline-secondary icon-no-margin category-button"
+            data-action="show-category"
+            data-category="Food & Drink"
+            title="{{#str}} emojicategoryfooddrink, core {{/str}}"
+        >
+            {{#pix}} i/emojicategoryfooddrink, core {{/pix}}
+        </button>
+        <button
+            class="btn btn-outline-secondary icon-no-margin category-button"
+            data-action="show-category"
+            data-category="Travel & Places"
+            title="{{#str}} emojicategorytravelplaces, core {{/str}}"
+        >
+            {{#pix}} i/emojicategorytravelplaces, core {{/pix}}
+        </button>
+        <button
+            class="btn btn-outline-secondary icon-no-margin category-button"
+            data-action="show-category"
+            data-category="Activities"
+            title="{{#str}} emojicategoryactivities, core {{/str}}"
+        >
+            {{#pix}} i/emojicategoryactivities, core {{/pix}}
+        </button>
+        <button
+            class="btn btn-outline-secondary icon-no-margin category-button"
+            data-action="show-category"
+            data-category="Objects"
+            title="{{#str}} emojicategoryobjects, core {{/str}}"
+        >
+            {{#pix}} i/emojicategoryobjects, core {{/pix}}
+        </button>
+        <button
+            class="btn btn-outline-secondary icon-no-margin category-button"
+            data-action="show-category"
+            data-category="Symbols"
+            title="{{#str}} emojicategorysymbols, core {{/str}}"
+        >
+            {{#pix}} i/emojicategorysymbols, core {{/pix}}
+        </button>
+        <button
+            class="btn btn-outline-secondary icon-no-margin category-button"
+            data-action="show-category"
+            data-category="Flags"
+            title="{{#str}} emojicategoryflags, core {{/str}}"
+        >
+            {{#pix}} i/emojicategoryflags, core {{/pix}}
+        </button>
+    </div>
+    <div class="card-body p-2 d-flex flex-column overflow-hidden">
+        <div class="input-group mb-1 flex-shrink-0">
+            <div class="input-group-prepend">
+                <span class="input-group-text pr-0 bg-white text-muted">
+                    {{#pix}} i/search, core {{/pix}}
+                </span>
+            </div>
+            <input
+                type="text"
+                class="form-control border-left-0"
+                placeholder="{{#str}} search, core {{/str}}"
+                aria-label="{{#str}} search, core {{/str}}"
+                data-region="search-input"
+            >
+        </div>
+        <div class="flex-grow-1 overflow-auto emojis-container h-100" data-region="emojis-container">
+            <div class="position-relative" data-region="row-container"></div>
+        </div>
+        <div class="flex-grow-1 overflow-auto search-results-container h-100 hidden" data-region="search-results-container">
+            <div class="position-relative" data-region="row-container"></div>
+        </div>
+    </div>
+    <div
+        class="card-footer d-flex flex-shrink-0"
+        data-region="footer"
+    >
+        <div class="emoji-preview" data-region="emoji-preview"></div>
+        <div data-region="emoji-short-name" class="emoji-short-name text-muted text-wrap ml-2"></div>
+    </div>
+</div>

pix/i/emojicategoryactivities.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M609 816l287-208 287 208-109 336h-355zm287-816q182 0 348 71t286 191 191 286 71 348-71 348-191 286-286 191-348 71-348-71-286-191-191-286-71-348 71-348 191-286 286-191 348-71zm619 1350q149-203 149-454v-3l-102 89-240-224 63-323 134 12q-150-206-389-282l53 124-287 159-287-159 53-124q-239 76-389 282l135-12 62 323-240 224-102-89v3q0 251 149 454l30-132 326 40 139 298-116 69q117 39 240 39t240-39l-116-69 139-298 326-40z" fill="#999"/></svg>

pix/i/emojicategoryanimalsnature.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1280 704q0-26-19-45t-45-19q-172 0-318 49.5t-259.5 134-235.5 219.5q-19 21-19 45 0 26 19 45t45 19q24 0 45-19 27-24 74-71t67-66q137-124 268.5-176t313.5-52q26 0 45-19t19-45zm512-198q0 95-20 193-46 224-184.5 383t-357.5 268q-214 108-438 108-148 0-286-47-15-5-88-42t-96-37q-16 0-39.5 32t-45 70-52.5 70-60 32q-43 0-63.5-17.5t-45.5-59.5q-2-4-6-11t-5.5-10-3-9.5-1.5-13.5q0-35 31-73.5t68-65.5 68-56 31-48q0-4-14-38t-16-44q-9-51-9-104 0-115 43.5-220t119-184.5 170.5-139 204-95.5q55-18 145-25.5t179.5-9 178.5-6 163.5-24 113.5-56.5l29.5-29.5 29.5-28 27-20 36.5-16 43.5-4.5q39 0 70.5 46t47.5 112 24 124 8 96z" fill="#999"/></svg>

pix/i/emojicategoryflags.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M320 256q0 72-64 110v1266q0 13-9.5 22.5t-22.5 9.5h-64q-13 0-22.5-9.5t-9.5-22.5v-1266q-64-38-64-110 0-53 37.5-90.5t90.5-37.5 90.5 37.5 37.5 90.5zm1472 64v763q0 25-12.5 38.5t-39.5 27.5q-215 116-369 116-61 0-123.5-22t-108.5-48-115.5-48-142.5-22q-192 0-464 146-17 9-33 9-26 0-45-19t-19-45v-742q0-32 31-55 21-14 79-43 236-120 421-120 107 0 200 29t219 88q38 19 88 19 54 0 117.5-21t110-47 88-47 54.5-21q26 0 45 19t19 45z" fill="#999"/></svg>

pix/i/emojicategoryfooddrink.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M832 64v640q0 61-35.5 111t-92.5 70v779q0 52-38 90t-90 38h-128q-52 0-90-38t-38-90v-779q-57-20-92.5-70t-35.5-111v-640q0-26 19-45t45-19 45 19 19 45v416q0 26 19 45t45 19 45-19 19-45v-416q0-26 19-45t45-19 45 19 19 45v416q0 26 19 45t45 19 45-19 19-45v-416q0-26 19-45t45-19 45 19 19 45zm768 0v1600q0 52-38 90t-90 38h-128q-52 0-90-38t-38-90v-512h-224q-13 0-22.5-9.5t-9.5-22.5v-800q0-132 94-226t226-94h256q26 0 45 19t19 45z" fill="#999"/></svg>

pix/i/emojicategoryobjects.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1120 576q0 13-9.5 22.5t-22.5 9.5-22.5-9.5-9.5-22.5q0-46-54-71t-106-25q-13 0-22.5-9.5t-9.5-22.5 9.5-22.5 22.5-9.5q50 0 99.5 16t87 54 37.5 90zm160 0q0-72-34.5-134t-90-101.5-123-62-136.5-22.5-136.5 22.5-123 62-90 101.5-34.5 134q0 101 68 180 10 11 30.5 33t30.5 33q128 153 141 298h228q13-145 141-298 10-11 30.5-33t30.5-33q68-79 68-180zm128 0q0 155-103 268-45 49-74.5 87t-59.5 95.5-34 107.5q47 28 47 82 0 37-25 64 25 27 25 64 0 52-45 81 13 23 13 47 0 46-31.5 71t-77.5 25q-20 44-60 70t-87 26-87-26-60-70q-46 0-77.5-25t-31.5-71q0-24 13-47-45-29-45-81 0-37 25-64-25-27-25-64 0-54 47-82-4-50-34-107.5t-59.5-95.5-74.5-87q-103-113-103-268 0-99 44.5-184.5t117-142 164-89 186.5-32.5 186.5 32.5 164 89 117 142 44.5 184.5z" fill="#999"/></svg>

pix/i/emojicategoryrecent.svg

@@ -0,0 +1,3 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid meet" overflow="visible"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 14c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm4-6c0 .6-.4 1-1 1H8c-.6 0-1-.4-1-1V4c0-.6.4-1 1-1s1 .4 1 1v3h2c.6 0 1 .4 1 1z" fill="#999"/></svg>

pix/i/emojicategorysmileyspeople.svg

@@ -0,0 +1,3 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+	<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid meet" overflow="visible"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.5 8-8-3.6-8-8-8zm0 15c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.2 7 7c0 3.9-3.1 7-7 7zm0-2.2c-4.9 0-5.8-4.4-5.8-4.4-.1-.2 0-.5.3-.6.3 0 .6.2.6.4 0 .1.8 3.6 4.9 3.6 4.1 0 4.8-3.5 4.9-3.6.1-.3.3-.4.6-.4.3.1.4.3.4.6-.1.1-1 4.4-5.9 4.4zm3.4-7.6c0 .8-.3 1.5-.7 1.5-.4 0-.7-.7-.7-1.5s.3-1.5.7-1.5c.4 0 .7.7.7 1.5zM6 5.2c0 .8-.3 1.5-.7 1.5-.4 0-.7-.7-.7-1.5s.3-1.5.7-1.5c.4 0 .7.7.7 1.5z" fill="#999"/></svg>

pix/i/emojicategorysymbols.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M896 1664q-26 0-44-18l-624-602q-10-8-27.5-26t-55.5-65.5-68-97.5-53.5-121-23.5-138q0-220 127-344t351-124q62 0 126.5 21.5t120 58 95.5 68.5 76 68q36-36 76-68t95.5-68.5 120-58 126.5-21.5q224 0 351 124t127 344q0 221-229 450l-623 600q-18 18-44 18z" fill="#999"/></svg>

pix/i/emojicategorytravelplaces.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1568 160q44 52 12 148t-108 172l-161 161 160 696q5 19-12 33l-128 96q-7 6-19 6-4 0-7-1-15-3-21-16l-279-508-259 259 53 194q5 17-8 31l-96 96q-9 9-23 9h-2q-15-2-24-13l-189-252-252-189q-11-7-13-23-1-13 9-25l96-97q9-9 23-9 6 0 8 1l194 53 259-259-508-279q-14-8-17-24-2-16 9-27l128-128q14-13 30-8l665 159 160-160q76-76 172-108t148 12z" fill="#999"/></svg>

theme/boost/scss/moodle/core.scss

@@ -2285,3 +2285,73 @@ $switch-transition: .2s all !default;
 .float-right {
     float: right !important; /* stylelint-disable-line declaration-no-important */
 }
+
+
+// Emoji picker.
+$picker-width: 350px !default;
+$picker-width-xs: 320px !default;
+$picker-height: 400px !default;
+$picker-row-height: 40px !default;
+$picker-emoji-button-size: 40px !default;
+$picker-emoji-button-font-size: 24px !default;
+$picker-emoji-category-count: 9 !default;
+$picker-emojis-per-row: 7 !default;
+
+.emoji-picker {
+    width: $picker-width;
+    height: $picker-height;
+
+    .category-button {
+        padding: .375rem 0;
+        height: 100%;
+        width: $picker-width / $picker-emoji-category-count;
+        border-top: none;
+        border-left: none;
+        border-right: none;
+        border-bottom: 2px solid transparent;
+
+        &.selected {
+            border-bottom: 2px solid map-get($theme-colors, 'primary');
+        }
+    }
+
+    .emojis-container,
+    .search-results-container {
+        min-width: $picker-emojis-per-row * $picker-emoji-button-size;
+    }
+
+    .picker-row {
+        height: $picker-row-height;
+
+        .category-name {
+            line-height: $picker-row-height;
+        }
+
+        .emoji-button {
+            height: $picker-emoji-button-size;
+            width: $picker-emoji-button-size;
+            line-height: $picker-emoji-button-size;
+            font-size: $picker-emoji-button-font-size;
+            overflow: hidden;
+
+            @include hover-focus {
+                color: inherit;
+                text-decoration: none;
+            }
+        }
+    }
+
+    .emoji-preview {
+        height: $picker-row-height;
+        font-size: $picker-row-height;
+        line-height: $picker-row-height;
+    }
+
+    .emoji-short-name {
+        line-height: $picker-row-height / 2;
+    }
+
+    @include media-breakpoint-down(xs) {
+        width: $picker-width-xs;
+    }
+}

theme/boost/style/moodle.css

@@ -11481,6 +11481,45 @@ div.editor_atto_toolbar button .icon {
   float: right !important;
   /* stylelint-disable-line declaration-no-important */ }
 
+.emoji-picker {
+  width: 350px;
+  height: 400px; }
+  .emoji-picker .category-button {
+    padding: .375rem 0;
+    height: 100%;
+    width: 38.8888888889px;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: 2px solid transparent; }
+    .emoji-picker .category-button.selected {
+      border-bottom: 2px solid #1177d1; }
+  .emoji-picker .emojis-container,
+  .emoji-picker .search-results-container {
+    min-width: 280px; }
+  .emoji-picker .picker-row {
+    height: 40px; }
+    .emoji-picker .picker-row .category-name {
+      line-height: 40px; }
+    .emoji-picker .picker-row .emoji-button {
+      height: 40px;
+      width: 40px;
+      line-height: 40px;
+      font-size: 24px;
+      overflow: hidden; }
+      .emoji-picker .picker-row .emoji-button:hover, .emoji-picker .picker-row .emoji-button:focus {
+        color: inherit;
+        text-decoration: none; }
+  .emoji-picker .emoji-preview {
+    height: 40px;
+    font-size: 40px;
+    line-height: 40px; }
+  .emoji-picker .emoji-short-name {
+    line-height: 20px; }
+  @media (max-width: 575.98px) {
+    .emoji-picker {
+      width: 320px; } }
+
 .icon {
   font-size: 16px;
   width: 16px;

theme/classic/style/moodle.css

@@ -11736,6 +11736,45 @@ div.editor_atto_toolbar button .icon {
   float: right !important;
   /* stylelint-disable-line declaration-no-important */ }
 
+.emoji-picker {
+  width: 350px;
+  height: 400px; }
+  .emoji-picker .category-button {
+    padding: .375rem 0;
+    height: 100%;
+    width: 38.8888888889px;
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: 2px solid transparent; }
+    .emoji-picker .category-button.selected {
+      border-bottom: 2px solid #1177d1; }
+  .emoji-picker .emojis-container,
+  .emoji-picker .search-results-container {
+    min-width: 280px; }
+  .emoji-picker .picker-row {
+    height: 40px; }
+    .emoji-picker .picker-row .category-name {
+      line-height: 40px; }
+    .emoji-picker .picker-row .emoji-button {
+      height: 40px;
+      width: 40px;
+      line-height: 40px;
+      font-size: 24px;
+      overflow: hidden; }
+      .emoji-picker .picker-row .emoji-button:hover, .emoji-picker .picker-row .emoji-button:focus {
+        color: inherit;
+        text-decoration: none; }
+  .emoji-picker .emoji-preview {
+    height: 40px;
+    font-size: 40px;
+    line-height: 40px; }
+  .emoji-picker .emoji-short-name {
+    line-height: 20px; }
+  @media (max-width: 575.98px) {
+    .emoji-picker {
+      width: 320px; } }
+
 .icon {
   font-size: 16px;
   width: 16px;