Оффтопик

// ==UserScript==
// @name         New smileys
// @namespace    http://shikimori.me/
// @version      1.0
// @description  Smileys button
// @author       Fujitawa
// @match        https://shikimori.one/*
// @match        https://shikimori.me/*
// @grant        none
// ==/UserScript==


(function() {
    'use strict';

function addEmojisAndSmileys(container) {
  if (container.querySelector('.new-smileys')) {
    return;
  }

  const smileysStyle = document.createElement('style');
  smileysStyle.textContent = `
    .new-smileys {
      position: relative;
    }

.new-smileys-content {
    position: absolute;
    padding: 5px;
    width: auto;
    background: white;
    border: 1px solid lightgrey;
    display: none;
    border-radius: 4px;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
    height: 150px;
    place-content: start;
    overflow: scroll;
    inset: auto auto 20px 50%;
    z-index: 99;
}

.b-shiki_editor  .controls .new-smileys-content {
  transform: translatex(-50%);
}

.b-shiki_editor-v2 .new-smileys-content {
transform: translatex(50%);
}
   .b-shiki_editor .controls .new-smiley-button {
      margin-left: 15px;
    }

    .new-smileys-content > img {
      min-width:30px;
      min-height:30px;
      max-width:30px;
      max-height:30px;
      width: 30px;
      height: 30px;
      object-fit: cover;
      border-radius:0;
    }


.menubar .icons .new-smileys {
    position: absolute;
    bottom: 20px;
    left: 0;
}
/*изменен ксс чтобы новая иконка была больше и не занимала все пространство*/
.icon.new-smiley-button {
  font-size: 20px;
  border-radius: 50%;
  margin: 0 5px 0 10px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  height: 23px !important;
  bottom: 6px !important;
}

.new-smiley-button:hover {
    background: 0 !important;
}
  `;

  document.head.appendChild(smileysStyle);

const imageUrls = [
    'https://cdn.discordapp.com/emojis/1001846475292160053.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/999634426751369246.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1030839578589929532.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1118796173365485638.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1011640404254404708.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1001844999614378014.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1144911009396576288.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1144910985962995722.webp?size=128&quality=lossless',
    'https://cdn.discordapp.com/emojis/1144910996293566496.webp?size=128&quality=lossless'
];

  const imageContainer = document.createElement('div');
  imageContainer.className = 'new-smileys';

  const contentContainer = document.createElement('div');
  contentContainer.className = 'new-smileys-content';

  imageUrls.forEach((imageUrl) => {
    const imageElement = document.createElement('img');
    imageElement.src = imageUrl;
    imageElement.style.cursor = 'pointer';

// изменен размер смайликов на более подходящий к обычным шикиморивским
imageElement.addEventListener('click', () => {
  const textareas = document.querySelectorAll('.editor-area');
  const imageTag = `[img no-zoom w=36]${imageUrl}[/img]`;

  textareas.forEach((textarea) => {
    textarea.value += imageTag;
  });

  const proseMirrorContainers = document.querySelectorAll('.ProseMirror');
  proseMirrorContainers.forEach((proseMirrorContainer) => {
    const divElement = document.createElement('div');
    divElement.innerHTML = imageTag;
    proseMirrorContainer.appendChild(divElement);
  });
});


    contentContainer.appendChild(imageElement);
  });
// заменен кружок на ромб, добавлен класс icon чтобы адаптироваться хоть чуток под чужие стили
  const toggleButton = document.createElement('button');
  toggleButton.className = 'icon new-smiley-button';
   toggleButton.textContent = '◇';

  toggleButton.type = 'button';

const markersElement = container.querySelector('.b-shiki_editor aside.markers');
const smileyIconElement = container.querySelector('.menu_group.menu_group-item .icon-smiley');

if (smileyIconElement) {
  container.insertBefore(imageContainer, smileyIconElement);
  container.insertBefore(toggleButton, smileyIconElement);
} else if (markersElement) {
  container.insertBefore(imageContainer, markersElement);
  container.insertBefore(toggleButton, markersElement);
}





  imageContainer.appendChild(contentContainer);

  let isContainerOpen = false;

  toggleButton.addEventListener('click', () => {
    if (!isContainerOpen) {
      contentContainer.style.display = 'grid';
      toggleButton.textContent = '◈';
    } else {
      contentContainer.style.display = 'none';
      toggleButton.textContent = '◇';
    }

    isContainerOpen = !isContainerOpen;
  });
}

function checkAndAddEmojisAndSmileys() {
  if (document.readyState === 'complete') {
    const controlsBlock = document.querySelector('.b-shiki_editor.shiki_editor-selector > .controls, .b-shiki_editor-v2 .vue-node .menubar .icons .menu_group.menu_group-item ');
    addEmojisAndSmileys(controlsBlock);
  }
}

checkAndAddEmojisAndSmileys();



setInterval(checkAndAddEmojisAndSmileys, 1000);
})();