MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 17: / Line 17: @@
 mw.hook('rcfilters.ui.initialized').add(function () {
    document.documentElement.classList.add('rcfilters-ready');
+});
+// MediaWiki:Common.js  — Emoji picker for the wikitext editor
+mw.loader.using([]).then(async () => {
+  // Only run on edit/new sections where the standard textarea exists
+  const $box = $('#wpTextbox1');
+  if (!$box.length) return;
+  // Dynamically import Emoji Button (ES module)
+  // Pin the version you want; 4.6.4 shown here.
+  const { EmojiButton } = await import('https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@4.6.4/dist/index.js');
+  // Create a trigger button and place it after the textarea label/toolbar
+  const $trigger = $('<button>')
+    .attr('type', 'button')
+    .attr('id', 'emoji-trigger')
+    .addClass('mw-ui-button')
+    .text('😀 Emoji');
+  // Try to tuck it into the standard edit tools area if present; else, put it above the textarea
+  const $tools = $('#wikiEditor-ui-toolbar, .editOptions').first();
+  if ($tools.length) {
+    $tools.prepend($trigger);
+  } else {
+    $box.before($('<div class="emoji-trigger-wrap">').append($trigger));
+  }
+  // Create the picker
+  const picker = new EmojiButton({
+    // tweak to taste:
+    autoHide: true,
+    showSearch: true,
+    showRecents: true,
+    emojisPerRow: 8
+  });
+  // Insert at the caret when an emoji is chosen
+  picker.on('emoji', selection => {
+    const textarea = $box.get(0);
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const before = textarea.value.slice(0, start);
+    const after  = textarea.value.slice(end);
+    textarea.value = before + selection.emoji + after;
+    // Move caret after the inserted emoji
+    const newPos = start + selection.emoji.length;
+    textarea.focus();
+    textarea.setSelectionRange(newPos, newPos);
+  });
+  // Toggle the picker anchored to the button
+  $('#emoji-trigger').on('click', function () {
+    picker.togglePicker(this);
+  });
 });