MediaWiki:Gadget-EmojiVE.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.

// MediaWiki:Gadget-EmojiVE.js  — VisualEditor tool
mw.loader.using(['ext.visualEditor.desktopArticleTarget.init']).then(async () => {
  // Load the picker module
  const { EmojiButton } = await import('https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@4.6.4/dist/index.js');

  // Define a simple command that opens the picker and inserts the result
  function openEmojiPickerWithSurface(surface, anchorEl) {
    const picker = new EmojiButton({ showSearch: true, showRecents: true });
    picker.on('emoji', sel => {
      const dmDoc = surface.getModel().getDocument();
      const fragment = surface.getModel().getFragment();
      fragment.insertContent(sel.emoji);
      surface.getView().focus();
    });
    picker.togglePicker(anchorEl);
  }

  // Create a VE tool
  function registerTool() {
    function EmojiTool() {
      EmojiTool.super.apply(this, arguments);
    }
    OO.inheritClass(EmojiTool, ve.ui.Tool);
    EmojiTool.static.name = 'emojiButton';
    EmojiTool.static.group = 'insert';
    EmojiTool.static.icon = 'smiley'; // built-in OOUI icon
    EmojiTool.static.title = 'Insert emoji';

    EmojiTool.prototype.onSelect = function () {
      const surface = this.toolbar.getSurface();
      const anchor = this.$element[0]; // button element as anchor
      openEmojiPickerWithSurface(surface, anchor);
      this.setActive(false);
    };

    EmojiTool.prototype.onUpdateState = function () {};

    ve.ui.toolFactory.register(EmojiTool);
  }

  // Wait until VE is ready on the page, then register
  mw.hook('ve.activationComplete').add(() => registerTool());
});