Fix emoji and other related bugs (#1504)

* make system-emoji default & twitter emoji optional

* add mozilla twemoji-colr credit

* fix wrong audio duration

* set locales to empty in member count millify

* render system emoji as same size of custom emoji

src/app/organisms/room/MembersDrawer.tsx

@@ -271,7 +271,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
         <Box grow="Yes" alignItems="Center" gap="200">
           <Box grow="Yes" alignItems="Center" gap="200">
             <Text size="H5" truncate>
-              {`${millify(room.getJoinedMemberCount(), { precision: 1 })} Members`}
+              {`${millify(room.getJoinedMemberCount(), { precision: 1, locales: [] })} Members`}
             </Text>
           </Box>
           <Box shrink="No" alignItems="Center">

src/app/organisms/room/RoomTimeline.tsx

@@ -44,7 +44,6 @@ import {
   toRem,
 } from 'folds';
 import { isKeyHotkey } from 'is-hotkey';
-import Linkify from 'linkify-react';
 import {
   decryptFile,
   eventWithShortcode,
@@ -76,7 +75,10 @@ import {
   MessageBadEncryptedContent,
   MessageNotDecryptedContent,
 } from '../../components/message';
-import { LINKIFY_OPTS, getReactCustomHtmlParser } from '../../plugins/react-custom-html-parser';
+import {
+  emojifyAndLinkify,
+  getReactCustomHtmlParser,
+} from '../../plugins/react-custom-html-parser';
 import {
   canEditEvent,
   decryptAllTimelineEvent,
@@ -978,7 +980,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       if (customBody === '') <MessageEmptyContent />;
       return parse(sanitizeCustomHtml(customBody), htmlReactParserOptions);
     }
-    return <Linkify options={LINKIFY_OPTS}>{body}</Linkify>;
+    return emojifyAndLinkify(body, true);
   };
 
   const renderRoomMsgContent = useRoomMsgContentRenderer<[EventTimelineSet]>({

src/app/organisms/room/message/AudioContent.tsx

@@ -44,7 +44,8 @@ export const AudioContent = as<'div', AudioContentProps>(
     const audioRef = useRef<HTMLAudioElement | null>(null);
 
     const [currentTime, setCurrentTime] = useState(0);
-    const [duration, setDuration] = useState(info.duration ?? 0);
+    // duration in seconds. (NOTE: info.duration is in milliseconds)
+    const [duration, setDuration] = useState((info.duration ?? 0) / 1000);
 
     const getAudioRef = useCallback(() => audioRef.current, []);
     const { loading } = useMediaLoading(getAudioRef);

src/app/organisms/settings/Settings.jsx

@@ -54,7 +54,7 @@ function AppearanceSection() {
   const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline');
   const [messageLayout, setMessageLayout] = useSetting(settingsAtom, 'messageLayout');
   const [messageSpacing, setMessageSpacing] = useSetting(settingsAtom, 'messageSpacing');
-  const [useSystemEmoji, setUseSystemEmoji] = useSetting(settingsAtom, 'useSystemEmoji');
+  const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
   const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
   const [hideMembershipEvents, setHideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
   const [hideNickAvatarEvents, setHideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
@@ -96,14 +96,14 @@ function AppearanceSection() {
         )}
         />
         <SettingTile
-          title="Use System Emoji"
+          title="Use Twitter Emoji"
           options={(
             <Toggle
-              isActive={useSystemEmoji}
+              isActive={twitterEmoji}
-              onToggle={() => setUseSystemEmoji(!useSystemEmoji)}
+              onToggle={() => setTwitterEmoji(!twitterEmoji)}
             />
           )}
-          content={<Text variant="b3">Use system emoji instead of Twitter emojis.</Text>}
+          content={<Text variant="b3">Use Twitter emoji instead of system emoji.</Text>}
         />
       </div>
       <div className="settings-appearance__card">
@@ -339,6 +339,10 @@ function AboutSection() {
               {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
               <Text>The <a href="https://github.com/matrix-org/matrix-js-sdk" rel="noreferrer noopener" target="_blank">matrix-js-sdk</a> is © <a href="https://matrix.org/foundation" rel="noreferrer noopener" target="_blank">The Matrix.org Foundation C.I.C</a> used under the terms of <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="noreferrer noopener" target="_blank">Apache 2.0</a>.</Text>
             </li>
+            <li>
+              {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
+              <Text>The <a href="https://github.com/mozilla/twemoji-colr" target="_blank" rel="noreferrer noopener">twemoji-colr</a> font is © <a href="https://mozilla.org/" target="_blank" rel="noreferrer noopener">Mozilla Foundation</a> used under the terms of <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank" rel="noreferrer noopener">Apache 2.0</a>.</Text>
+            </li>
             <li>
               {/* eslint-disable-next-line react/jsx-one-expression-per-line */ }
               <Text>The <a href="https://twemoji.twitter.com" target="_blank" rel="noreferrer noopener">Twemoji</a> emoji art is © <a href="https://twemoji.twitter.com" target="_blank" rel="noreferrer noopener">Twitter, Inc and other contributors</a> used under the terms of <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noreferrer noopener">CC-BY 4.0</a>.</Text>

src/app/plugins/react-custom-html-parser.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/alt-text */
 import React, { ReactEventHandler, Suspense, lazy } from 'react';
-import {
+import parse, {
   Element,
   Text as DOMText,
   HTMLReactParserOptions,
@@ -16,9 +16,14 @@ import { ErrorBoundary } from 'react-error-boundary';
 import * as css from '../styles/CustomHtml.css';
 import { getMxIdLocalPart, getRoomWithCanonicalAlias } from '../utils/matrix';
 import { getMemberDisplayName } from '../utils/room';
+import { EMOJI_PATTERN, URL_NEG_LB } from '../utils/regex';
+import { sanitizeText } from '../utils/sanitize';
+import { getHexcodeForEmoji, getShortcodeFor } from './emoji';
 
 const ReactPrism = lazy(() => import('./react-prism/ReactPrism'));
 
+const EMOJI_REG = new RegExp(`${URL_NEG_LB}(${EMOJI_PATTERN})`, 'g');
+
 export const LINKIFY_OPTS: LinkifyOpts = {
   attributes: {
     target: '_blank',
@@ -27,6 +32,28 @@ export const LINKIFY_OPTS: LinkifyOpts = {
   validate: {
     url: (value) => /^(https|http|ftp|mailto|magnet)?:/.test(value),
   },
+  ignoreTags: ['span'],
+};
+
+const emojifyParserOptions: HTMLReactParserOptions = {
+  replace: (domNode) => {
+    if (domNode instanceof DOMText) {
+      return <Linkify options={LINKIFY_OPTS}>{domNode.data}</Linkify>;
+    }
+    return undefined;
+  },
+};
+
+export const emojifyAndLinkify = (unsafeText: string, linkify?: boolean) => {
+  const emojifyHtml = sanitizeText(unsafeText).replace(
+    EMOJI_REG,
+    (emoji) =>
+      `<span class="${css.EmoticonBase}"><span class="${css.Emoticon()}" title="${getShortcodeFor(
+        getHexcodeForEmoji(emoji)
+      )}">${emoji}</span></span>`
+  );
+
+  return <>{parse(emojifyHtml, linkify ? emojifyParserOptions : undefined)}</>;
 };
 
 export const getReactCustomHtmlParser = (
@@ -45,7 +72,7 @@ export const getReactCustomHtmlParser = (
 
         if (name === 'h1') {
           return (
-            <Text className={css.Heading} size="H2" {...props}>
+            <Text {...props} className={css.Heading} size="H2">
               {domToReact(children, opts)}
             </Text>
           );
@@ -53,7 +80,7 @@ export const getReactCustomHtmlParser = (
 
         if (name === 'h2') {
           return (
-            <Text className={css.Heading} size="H3" {...props}>
+            <Text {...props} className={css.Heading} size="H3">
               {domToReact(children, opts)}
             </Text>
           );
@@ -61,7 +88,7 @@ export const getReactCustomHtmlParser = (
 
         if (name === 'h3') {
           return (
-            <Text className={css.Heading} size="H4" {...props}>
+            <Text {...props} className={css.Heading} size="H4">
               {domToReact(children, opts)}
             </Text>
           );
@@ -69,7 +96,7 @@ export const getReactCustomHtmlParser = (
 
         if (name === 'h4') {
           return (
-            <Text className={css.Heading} size="H4" {...props}>
+            <Text {...props} className={css.Heading} size="H4">
               {domToReact(children, opts)}
             </Text>
           );
@@ -77,7 +104,7 @@ export const getReactCustomHtmlParser = (
 
         if (name === 'h5') {
           return (
-            <Text className={css.Heading} size="H5" {...props}>
+            <Text {...props} className={css.Heading} size="H5">
               {domToReact(children, opts)}
             </Text>
           );
@@ -85,7 +112,7 @@ export const getReactCustomHtmlParser = (
 
         if (name === 'h6') {
           return (
-            <Text className={css.Heading} size="H6" {...props}>
+            <Text {...props} className={css.Heading} size="H6">
               {domToReact(children, opts)}
             </Text>
           );
@@ -93,7 +120,7 @@ export const getReactCustomHtmlParser = (
 
         if (name === 'p') {
           return (
-            <Text className={classNames(css.Paragraph, css.MarginSpaced)} size="Inherit" {...props}>
+            <Text {...props} className={classNames(css.Paragraph, css.MarginSpaced)} size="Inherit">
               {domToReact(children, opts)}
             </Text>
           );
@@ -101,7 +128,7 @@ export const getReactCustomHtmlParser = (
 
         if (name === 'pre') {
           return (
-            <Text as="pre" className={css.CodeBlock} {...props}>
+            <Text {...props} as="pre" className={css.CodeBlock}>
               <Scroll
                 direction="Horizontal"
                 variant="Secondary"
@@ -117,7 +144,7 @@ export const getReactCustomHtmlParser = (
 
         if (name === 'blockquote') {
           return (
-            <Text size="Inherit" as="blockquote" className={css.BlockQuote} {...props}>
+            <Text {...props} size="Inherit" as="blockquote" className={css.BlockQuote}>
               {domToReact(children, opts)}
             </Text>
           );
@@ -125,14 +152,14 @@ export const getReactCustomHtmlParser = (
 
         if (name === 'ul') {
           return (
-            <ul className={css.List} {...props}>
+            <ul {...props} className={css.List}>
               {domToReact(children, opts)}
             </ul>
           );
         }
         if (name === 'ol') {
           return (
-            <ol className={css.List} {...props}>
+            <ol {...props} className={css.List}>
               {domToReact(children, opts)}
             </ol>
           );
@@ -240,29 +267,28 @@ export const getReactCustomHtmlParser = (
           if (htmlSrc && props.src.startsWith('mxc://') === false) {
             return (
               <a href={htmlSrc} target="_blank" rel="noreferrer noopener">
-                {props.alt && htmlSrc}
+                {props.alt || props.title || htmlSrc}
               </a>
             );
           }
           if (htmlSrc && 'data-mx-emoticon' in props) {
             return (
               <span className={css.EmoticonBase}>
-                <span className={css.Emoticon()} contentEditable={false}>
+                <span className={css.Emoticon()}>
-                  <img className={css.EmoticonImg} src={htmlSrc} data-mx-emoticon />
+                  <img {...props} className={css.EmoticonImg} src={htmlSrc} />
                 </span>
               </span>
             );
           }
-          if (htmlSrc) return <img className={css.Img} {...props} src={htmlSrc} />;
+          if (htmlSrc) return <img {...props} className={css.Img} src={htmlSrc} />;
         }
       }
 
-      if (
+      if (domNode instanceof DOMText) {
-        domNode instanceof DOMText &&
+        const linkify =
-        !(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'code') &&
+          !(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'code') &&
-        !(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'a')
+          !(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'a');
-      ) {
+        return emojifyAndLinkify(domNode.data, linkify);
-        return <Linkify options={LINKIFY_OPTS}>{domNode.data}</Linkify>;
       }
       return undefined;
     },

src/app/state/settings.ts

@@ -9,7 +9,7 @@ export interface Settings {
   useSystemTheme: boolean;
   isMarkdown: boolean;
   editorToolbar: boolean;
-  useSystemEmoji: boolean;
+  twitterEmoji: boolean;
 
   isPeopleDrawer: boolean;
   memberSortFilterIndex: number;
@@ -30,7 +30,7 @@ const defaultSettings: Settings = {
   useSystemTheme: true,
   isMarkdown: false,
   editorToolbar: false,
-  useSystemEmoji: false,
+  twitterEmoji: false,
 
   isPeopleDrawer: true,
   memberSortFilterIndex: 0,

src/app/styles/CustomHtml.css.ts

@@ -187,11 +187,11 @@ export const Emoticon = recipe({
 
       height: '1em',
       minWidth: '1em',
-      fontSize: '1.47em',
+      fontSize: '1.33em',
       lineHeight: '1em',
       verticalAlign: 'middle',
       position: 'relative',
-      top: '-0.32em',
+      top: '-0.35em',
       borderRadius: config.radii.R300,
     },
   ],

src/app/templates/client/Client.jsx

@@ -24,12 +24,12 @@ import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 
 function SystemEmojiFeature() {
-  const [systemEmoji] = useSetting(settingsAtom, 'useSystemEmoji');
+  const [twitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
 
-  if (systemEmoji) {
+  if (twitterEmoji) {
-    document.documentElement.style.setProperty('--font-emoji', 'Twemoji_DISABLED');
-  } else {
     document.documentElement.style.setProperty('--font-emoji', 'Twemoji');
+  } else {
+    document.documentElement.style.setProperty('--font-emoji', 'Twemoji_DISABLED');
   }
 
   return null;

src/index.scss

@@ -192,7 +192,7 @@
   --fluid-slide-down: cubic-bezier(0.02, 0.82, 0.4, 0.96);
   --fluid-slide-up: cubic-bezier(0.13, 0.56, 0.25, 0.99);
 
-  --font-emoji: 'Twemoji';
+  --font-emoji: 'Twemoji_DISABLED';
   --font-primary: 'InterVariable', var(--font-emoji), sans-serif;
   --font-secondary: 'InterVariable', var(--font-emoji), sans-serif;
 }