notion-enhancer/mods/emoji-sets/mod.js

/*
 * emoji sets
 * (c) 2020 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
 * under the MIT license
 */

'use strict';

module.exports = {
  id: 'a2401ee1-93ba-4b8c-9781-7f570bf5d71e',
  tags: ['extension'],
  name: 'emoji sets',
  desc: 'pick from a variety of emoji styles to use.',
  version: '0.3.0',
  author: 'dragonwocky',
  options: [
    {
      key: 'style',
      label: '',
      type: 'select',
      value: [
        'twitter',
        'apple',
        'google',
        'microsoft',
        'samsung',
        'whatsapp',
        'facebook',
        'joypixels',
        'openmoji',
        'emojidex',
        'messenger',
        'lg',
        'htc',
        'mozilla',
      ],
    },
  ],
  hacks: {
    'renderer/preload.js'(store, __exports) {
      let tweaked = false;

      document.addEventListener('readystatechange', (event) => {
        if (document.readyState !== 'complete') return false;
        let queue = [];
        const observer = new MutationObserver((list, observer) => {
          if (!queue.length) requestAnimationFrame(handle);
          queue.push(...list);
        });
        observer.observe(document.body, {
          childList: true,
          subtree: true,
          characterData: true,
        });
        function handle() {
          queue = [];
          const isMac = process.platform === 'darwin',
            native =
              (store().style === 'microsoft' && process.platform === 'win32') ||
              (store().style === 'apple' && isMac);
          if (store().style !== (isMac ? 'apple' : 'twitter') || tweaked) {
            if (isMac) {
              if (native) {
                document
                  .querySelectorAll('span[role="image"][aria-label]')
                  .forEach((el) => {
                    el.style.background = '';
                    el.style.color = 'currentColor';
                  });
              } else {
                document
                  .querySelectorAll('span[role="image"][aria-label]')
                  .forEach((el) => {
                    if (!el.style.background.includes(store().style)) {
                      el.style.background = `url(https://emojicdn.elk.sh/${el.getAttribute(
                        'aria-label'
                      )}?style=${store().style})`;
                      el.style.width = el.parentElement.style.fontSize;
                      el.style.backgroundSize = 'contain';
                      el.style.backgroundRepeat = 'no-repeat';
                      el.style.color = 'transparent';
                    }
                  });
              }
            } else {
              document
                .querySelectorAll(
                  '[src*="notion-emojis.s3"]:not(.notion-emoji)'
                )
                .forEach((el) => el.remove());
              if (native) {
                document.querySelectorAll('.notion-emoji').forEach((el) => {
                  if (
                    el.parentElement.querySelectorAll(
                      'span[role="image"][aria-label]'
                    ).length !==
                    el.parentElement.querySelectorAll('.notion-emoji').length
                  ) {
                    el.insertAdjacentHTML(
                      'beforebegin',
                      `<span
                        role="image"
                        aria-label="${el.getAttribute('alt')}"
                        style='font-family: "Apple Color Emoji", "Segoe UI Emoji",
                        NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol",
                        "Android Emoji", EmojiSymbols; line-height: 1em;'
                      >${el.getAttribute('alt')}</span>`
                    );
                    el.style.display = 'none';
                    if (el.parentElement.getAttribute('contenteditable'))
                      el.remove();
                  }
                });
              } else {
                document.querySelectorAll('.notion-emoji').forEach((el) => {
                  el.parentElement
                    .querySelectorAll('span[role="image"][aria-label]')
                    .forEach((text) => text.remove());
                  if (!el.style.background.includes(store().style)) {
                    el.style.background = `url(https://emojicdn.elk.sh/${el.getAttribute(
                      'aria-label'
                    )}?style=${store().style})`;
                    el.style.display = 'inline-block';
                    el.style.backgroundSize = 'contain';
                    el.style.backgroundRepeat = 'no-repeat';
                    el.style.opacity = 1;
                  }
                });
              }
            }
            tweaked = true;
          }
        }
      });
    },
  },
};
// span[role="image"][aria-label]
/*  */

// <div style="position: relative; width: 36px; height: 36px;">
//   <img class="notion-emoji" alt="😀" aria-label="😀" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="width: 36px; height: 36px; background: url(&quot;/images/twitter-emoji-spritesheet-64.png&quot;) 53.5714% 62.5% / 5700% 5700%; opacity: 1; transition: opacity 100ms ease-out 0s;">
//   <img alt="😀" aria-label="😀" src="https://notion-emojis.s3-us-west-2.amazonaws.com/v0/svg-twitter/1f600.svg" style="position: absolute; top: 0px; left: 0px; opacity: 0; width: 36px; height: 36px;">
// </div>

//   <img class="notion-emoji" alt="✝" aria-label="✝" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="width: 100%; height: 100%; background: url(&quot;/images/twitter-emoji-spritesheet-64.png&quot;) 98.2143% 25% / 5700% 5700%;">