chore: embedded noto font

background.html

@@ -30,6 +30,7 @@
     <link rel="preload" href="fonts/Roboto-Light.ttf" as="font" type="font/ttf" />
     <link rel="preload" href="fonts/Roboto-Bold.ttf" as="font" type="font/ttf" />
     <link rel="preload" href="fonts/lucide.ttf" as="font" type="font/ttf" />
+    <link rel="preload" href="fonts/NotoColorEmoji.ttf" as="font" type="font/ttf" />
     <link href="stylesheets/fonts.css" rel="stylesheet" type="text/css" />
     <link href="stylesheets/dist/manifest.css" rel="stylesheet" type="text/css" />
   </head>

package.json

@@ -89,7 +89,7 @@
     "dotenv": "^17.3.1",
     "electron-localshortcut": "^3.2.1",
     "electron-updater": "^6.3.9",
-    "emoji-mart": "https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.0/emoji-mart-v5.6.0.tgz",
+    "emoji-mart": "https://github.com/session-foundation/session-emoji-mart/releases/download/v5.6.2/emoji-mart-v5.6.2.tgz",
     "filesize": "10.1.6",
     "firstline": "^2.0.2",
     "focus-trap-react": "^11.0.4",

stylesheets/fonts.css

@@ -107,3 +107,11 @@
   font-family: 'Lucide';
   src: url('../fonts/lucide.ttf') format('truetype');
 }
+
+/** Emoji font
+ * Download from https://fonts.google.com/noto/specimen/Noto+Color+Emoji
+*/
+@font-face {
+  font-family: 'NotoColorEmoji';
+  src: url('../fonts/NotoColorEmoji.ttf') format('truetype');
+}

ts/components/conversation/SessionEmojiPanel.tsx

@@ -29,6 +29,7 @@ export const StyledEmojiPanel = styled.div<{
     border: var(--default-borders);
     padding-bottom: var(--margins-sm);
     --font-family: var(--font-default);
+    --emoji-font: 'NotoColorEmoji'; // Note: var(--emoji-font) doesn't go through shadow doms
     --font-size: var(--font-size-sm);
     --shadow: none;
     --border-radius: 8px;

ts/components/conversation/message/reactions/Reaction.tsx

@@ -33,6 +33,7 @@ const StyledReaction = styled.button<{
   padding: 0 7px;
   height: ${EMOJI_REACTION_HEIGHT}px;
   min-width: ${props => (props.$showCount ? 2 * EMOJI_REACTION_HEIGHT : EMOJI_REACTION_HEIGHT)}px;
+  font-family: var(--font-default);
 
   span {
     width: 100%;

ts/components/dialog/ReactListModal.tsx

@@ -55,6 +55,7 @@ const StyledContactContainer = styled.span`
 const StyledReactionBar = styled(Flex)`
   width: 100%;
   margin: 12px 0 20px 4px;
+  font-family: var(--font-default);
 
   p {
     color: var(--text-secondary-color);

ts/themes/globals.tsx

@@ -212,7 +212,7 @@ export function setSingleThemeValue(key: ThemeKeys, value: string) {
 
 // These are only set once in the global style (at root).
 export const THEME_GLOBALS: ThemeGlobals = {
-  '--font-default': 'Roboto',
+  '--font-default': 'Roboto, NotoColorEmoji',
   '--font-accent': 'Loor',
   '--font-mono': 'Roboto Mono',
   '--font-icon': 'Lucide',

ts/util/emoji.ts

@@ -63,15 +63,16 @@ export async function initialiseEmojiData(data: any): Promise<void> {
         if (!strings) {
           return null;
         }
-        return (Array.isArray(strings) ? strings : [strings])
+        const asArr = (Array.isArray(strings) ? strings : [strings])
           .map(string =>
             (split ? string.split(/[-|_|\s]+/) : [string]).map((s: string) => s.toLowerCase())
           )
           .flat();
+        return asArr;
       })
       .flat()
       .filter(a => a && a.trim())
-      .join(',')})}`;
+      .join(',')}`;
 
     (value as FixedBaseEmoji).skins.forEach(skin => {
       ariaLabels[skin.native] = value.name;