MediaWiki:EmojiPicker.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

mw.loader.using([]).then(() => {
  const $box = $('#wpTextbox1');
  if (!$box.length) return;

  // Use the globally provided EmojiButton from EmojiLib
  const EmojiButton = window.EmojiButton;
  if (!EmojiButton) { console.error('EmojiButton global missing'); return; }

  const $trigger = $('<button type="button" id="emoji-trigger" class="mw-ui-button">😀 Emoji</button>');
  const $tools = $('#wikiEditor-ui-toolbar, .editOptions').first();
  ($tools.length ? $tools : $box.before($('<div class="emoji-trigger-wrap">')).prev()).prepend($trigger);

  const picker = new EmojiButton({ showSearch: true, showRecents: true, autoHide: true, emojisPerRow: 8 });

  picker.on('emoji', sel => {
    const ta = $box.get(0);
    const { selectionStart: s, selectionEnd: e, value } = ta;
    ta.value = value.slice(0, s) + sel.emoji + value.slice(e);
    const pos = s + sel.emoji.length;
    ta.focus(); ta.setSelectionRange(pos, pos);
  });

  $('#emoji-trigger').on('click', function () { picker.togglePicker(this); });
});