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
2023-10-26 09:09:27 +11:00 · 2023-10-26 09:09:27 +11:00 · f53bb28b66
commit f53bb28b66
parent 2957a45c4b
10 changed files with 78 additions and 41 deletions
--- a/src/app/organisms/room/MembersDrawer.tsx
+++ b/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">
--- a/src/app/organisms/room/RoomTimeline.tsx
+++ b/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]>({
--- a/src/app/organisms/room/message/AudioContent.tsx
+++ b/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);
--- a/src/app/organisms/settings/Settings.jsx
+++ b/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}
-              onToggle={() => setUseSystemEmoji(!useSystemEmoji)}
+              isActive={twitterEmoji}
+              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>
--- a/src/app/plugins/react-custom-html-parser.tsx
+++ b/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}>
-                  <img className={css.EmoticonImg} src={htmlSrc} data-mx-emoticon />
+                <span className={css.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 (
-        domNode instanceof DOMText &&
-        !(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'code') &&
-        !(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'a')
-      ) {
-        return <Linkify options={LINKIFY_OPTS}>{domNode.data}</Linkify>;
+      if (domNode instanceof DOMText) {
+        const linkify =
+          !(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'code') &&
+          !(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'a');
+        return emojifyAndLinkify(domNode.data, linkify);
      }
      return undefined;
    },
--- a/src/app/state/settings.ts
+++ b/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,
--- a/src/app/styles/CustomHtml.css.ts
+++ b/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,
    },
  ],
--- a/src/app/templates/client/Client.jsx
+++ b/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) {
-    document.documentElement.style.setProperty('--font-emoji', 'Twemoji_DISABLED');
-  } else {
+  if (twitterEmoji) {
    document.documentElement.style.setProperty('--font-emoji', 'Twemoji');
+  } else {
+    document.documentElement.style.setProperty('--font-emoji', 'Twemoji_DISABLED');
  }

  return null;
--- a/src/app/utils/regex.ts
+++ b/src/app/utils/regex.ts
--- a/src/index.scss
+++ b/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;
 }