emoji-sets: fix native emoji alignment

repo/emoji-sets/client.css

@@ -0,0 +1,10 @@
+/*
+ * notion-enhancer: emoji sets
+ * (c) 2021 Arecsu
+ * (c) 2021 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
+ * (https://notion-enhancer.github.io/) under the MIT license
+ */
+
+[aria-label][role='image'][style*='Apple Color Emoji']:not([data-emoji-sets-unsupported]) {
+  margin-left: 2.5px !important;
+}

repo/emoji-sets/client.mjs

@@ -7,8 +7,8 @@
 export default async function ({ web, env }, db) {
   const style = await db.get(['style']),
     // real emojis are used on macos instead of the twitter set
-    nativeEmojiSelector = `[style*='"Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols']:not(data-emoji-sets-unsupported)`,
-    imgEmojiSelector = '.notion-emoji:not(data-emoji-sets-unsupported)',
+    nativeEmojiSelector = `[aria-label][role="image"][style*="Apple Color Emoji"]:not([data-emoji-sets-unsupported])`,
+    imgEmojiSelector = '.notion-emoji:not([data-emoji-sets-unsupported])',
     imgEmojiOverlaySelector = `${imgEmojiSelector} + [src*="notion-emojis"]`;
 
   await web.whenReady();
@@ -44,7 +44,6 @@ export default async function ({ web, env }, db) {
           $emoji.style.height = '1em';
           $emoji.style.display = 'inline-block';
           $emoji.innerText = '';
-          await new Promise((res, rej) => requestAnimationFrame(res));
         } else {
           $emoji.dataset.emojiSetsUnsupported = true;
         }

repo/emoji-sets/mod.json

@@ -15,12 +15,15 @@
   "js": {
     "client": ["client.mjs"]
   },
-  "css": {},
+  "css": {
+    "client": ["client.css"]
+  },
   "options": [
     {
       "type": "select",
       "key": "style",
       "label": "emoji style",
+      "tooltip": "**initial use may involve some lag and load-time for emojis until they have all been cached**",
       "values": [
         "twitter",
         "apple",