Merge branch 'master' into fix-mentions-text-replace

Author: Tom Hutman

package.json

@@ -119,6 +119,7 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-sort-destructure-keys": "1.3.5",
     "eslint-plugin-typescript-sort-keys": "1.5.0",
+    "file-loader": "^6.2.0",
     "htmlparser2": "^5.0.1",
     "husky": "^4.3.0",
     "jest": "^26.6.3",

src/assets/EmojiOneColor.woff2

@@ -1,6 +1,7 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 
 import { TranslationContext } from '../../context/TranslationContext';
+import { escapeRegExp } from '../../utils';
 
 import Item from './Item';
 import { KEY_CODES } from './listener';
@@ -125,7 +126,7 @@ const List = (props) => {
   const restructureItem = (item) => {
     const matched = item.name || item.id;
 
-    const editedPropValue = propValue.slice(1);
+    const editedPropValue = escapeRegExp(propValue.slice(1));
     const parts = matched.split(new RegExp(`(${editedPropValue})`, 'gi'));
 
     const itemNameParts = { match: editedPropValue, parts };

src/assets/NotoColorEmoji-flags.woff2

@@ -244,7 +244,15 @@ const ChannelInner = <
     onMentionsHover,
   } = props;
 
-  const { client, mutes, theme } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { client, mutes, theme, useImageFlagEmojisOnWindows } = useChatContext<
+    At,
+    Ch,
+    Co,
+    Ev,
+    Me,
+    Re,
+    Us
+  >();
   const { t } = useTranslationContext();
 
   const [notifications, setNotifications] = useState<ChannelNotifications>([]);
@@ -804,7 +812,13 @@ const ChannelInner = <
   }
 
   return (
-    <div className={`str-chat str-chat-channel ${theme}`}>
+    <div
+      className={`str-chat str-chat-channel ${theme}${
+        useImageFlagEmojisOnWindows && navigator.platform.match(/Win/)
+          ? ' str-chat--windows-flags'
+          : ''
+      }`}
+    >
       <ChannelProvider<At, Ch, Co, Ev, Me, Re, Us> value={channelContextValue}>
         <div className='str-chat__container'>{children}</div>
       </ChannelProvider>

src/components/AutoCompleteTextarea/List.js

@@ -291,6 +291,7 @@ const UnMemoizedChannelList = <
     navOpen = false,
     setActiveChannel,
     theme,
+    useImageFlagEmojisOnWindows,
   } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   const channelListRef = useRef<HTMLDivElement>(null);
@@ -441,6 +442,10 @@ const UnMemoizedChannelList = <
       <div
         className={`str-chat str-chat-channel-list ${theme} ${
           navOpen ? 'str-chat-channel-list--open' : ''
+        } ${
+          useImageFlagEmojisOnWindows && navigator.platform.match(/Win/)
+            ? 'str-chat--windows-flags'
+            : ''
         }`}
         ref={channelListRef}
       >

src/components/Channel/Channel.tsx

@@ -83,6 +83,14 @@ export type ChatProps<
    *  - `livestream dark`
    */
   theme?: Theme;
+  /**
+   * Windows 10 does not support country flag emojis out of the box.
+   * It chooses to render these emojis as characters instead.
+   * Stream chat can override this by loading a custom web font that will
+   * render images (PNGs or SVGs depending on the platform) instead.
+   * Set this prop to true if you want to use these custom emojis for Windows users.
+   */
+  useImageFlagEmojisOnWindows?: boolean;
 };
 
 /**
@@ -121,6 +129,7 @@ export const Chat = <
     i18nInstance,
     initialNavOpen = true,
     theme = 'messaging light',
+    useImageFlagEmojisOnWindows = false,
   } = props;
 
   const {
@@ -136,7 +145,7 @@ export const Chat = <
   if (!translators.t) return null;
 
   return (
-    <ChatProvider<At, Ch, Co, Ev, Me, Re, Us>
+    <ChatProvider
       value={{
         channel,
         client,
@@ -146,6 +155,7 @@ export const Chat = <
         openMobileNav,
         setActiveChannel,
         theme,
+        useImageFlagEmojisOnWindows,
       }}
     >
       <TranslationProvider value={translators}>{children}</TranslationProvider>

src/components/ChannelList/ChannelList.tsx

@@ -1 +1,2 @@
 export * from './Chat';
+export * from './hooks/useChat';

src/components/Chat/Chat.tsx

@@ -25,17 +25,18 @@ export type ChatContextValue<
   Us extends DefaultUserType<Us> = DefaultUserType
 > = {
   client: StreamChat<At, Ch, Co, Ev, Me, Re, Us>;
-  theme: Theme;
-  channel?: Channel<At, Ch, Co, Ev, Me, Re, Us>;
-  closeMobileNav?: () => void;
-  mutes?: Mute<Us>[];
-  navOpen?: boolean;
-  openMobileNav?: () => void;
-  setActiveChannel?: (
+  closeMobileNav: () => void;
+  mutes: Mute<Us>[];
+  openMobileNav: () => void;
+  setActiveChannel: (
     newChannel?: Channel<At, Ch, Co, Ev, Me, Re, Us>,
     watchers?: { limit?: number; offset?: number },
     event?: React.SyntheticEvent,
   ) => void;
+  theme: Theme;
+  useImageFlagEmojisOnWindows: boolean;
+  channel?: Channel<At, Ch, Co, Ev, Me, Re, Us>;
+  navOpen?: boolean;
 };
 
 export const ChatContext = React.createContext({} as ChatContextValue);

src/components/Chat/index.ts

@@ -67,6 +67,47 @@
   }
 }
 
+/* declare a font faces for our Emoji Replacement font, based on the default font used by Stream Chat React */
+
+$emoji-flag-unicode-range: U+1F1E6-1F1FF;
+
+/* png based woff for most browsers */
+@font-face {
+  font-family: ReplaceFlagEmojiPNG;
+  src: url("../assets/NotoColorEmoji-flags.woff2") format("woff2");
+  /* using the unicode-range attribute to limit the reach of the Flag Emoji web font to only flags */
+  unicode-range: $emoji-flag-unicode-range;
+}
+
+/* svg based for firefox */
+@font-face {
+  font-family: ReplaceFlagEmojiSVG;
+  src: url("../assets/EmojiOneColor.woff2") format("woff2");
+  unicode-range: $emoji-flag-unicode-range;
+}
+
+.str-chat--windows-flags {
+  .str-chat__textarea__textarea,
+  .str-chat__message-text-inner *,
+  .str-chat__emoji-item--entity,
+  .emoji-mart-emoji-native * {
+    font-family: ReplaceFlagEmojiPNG, $second-font, sans-serif;
+    font-display: swap;
+  }
+}
+
+@-moz-document url-prefix() {
+  .str-chat--windows-flags {
+    .str-chat__textarea__textarea,
+    .str-chat__message-text-inner *,
+    .str-chat__emoji-item--entity,
+    .emoji-mart-emoji-native * {
+      font-family: ReplaceFlagEmojiSVG, $second-font, sans-serif;
+      font-display: swap;
+    }
+  }
+}
+
 .str-chat-channel-list {
   float: left;
 }