Don't consider textual characters to be emoji

src/HtmlUtils.tsx

@@ -20,7 +20,7 @@ limitations under the License.
 import React, { LegacyRef, ReactNode } from "react";
 import sanitizeHtml from "sanitize-html";
 import classNames from "classnames";
-import EMOJIBASE_REGEX from "emojibase-regex";
+import EMOJIBASE_REGEX from "emojibase-regex/emoji";
 import katex from "katex";
 import { decode } from "html-entities";
 import { IContent } from "matrix-js-sdk/src/matrix";
@@ -46,8 +46,8 @@ const SURROGATE_PAIR_PATTERN = /([\ud800-\udbff])([\udc00-\udfff])/;
 const SYMBOL_PATTERN = /([\u2100-\u2bff])/;
 
 // Regex pattern for non-emoji characters that can appear in an "all-emoji" message
-// (Zero-Width Joiner, Zero-Width Space, Emoji presentation character, other whitespace)
-const EMOJI_SEPARATOR_REGEX = /[\u200D\u200B\s]|\uFE0F/g;
+// (Zero-Width Space, other whitespace)
+const EMOJI_SEPARATOR_REGEX = /[\u200B\s]/g;
 
 const BIGEMOJI_REGEX = new RegExp(`^(${EMOJIBASE_REGEX.source})+$`, "i");
 

src/components/views/rooms/SendMessageComposer.tsx

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React, { createRef, KeyboardEvent, SyntheticEvent } from "react";
-import EMOJI_REGEX from "emojibase-regex";
+import EMOJI_REGEX from "emojibase-regex/emoji";
 import {
     IContent,
     MatrixEvent,

src/editor/parts.ts

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import EMOJIBASE_REGEX from "emojibase-regex";
+import EMOJIBASE_REGEX from "emojibase-regex/emoji";
 import { MatrixClient, RoomMember, Room } from "matrix-js-sdk/src/matrix";
 import GraphemeSplitter from "graphemer";
 

test/HtmlUtils-test.tsx

@@ -107,6 +107,12 @@ describe("bodyToHtml", () => {
         expect(html).toMatchInlineSnapshot(`"<span class="mx_EventTile_searchHighlight">test</span> foo &lt;b&gt;bar"`);
     });
 
+    it("generates big emoji for emoji made of multiple characters", () => {
+        const { asFragment } = render(bodyToHtml({ body: "👨‍👩‍👧‍👦 ↔️", msgtype: "m.text" }, [], {}) as ReactElement);
+
+        expect(asFragment()).toMatchSnapshot();
+    });
+
     it("should generate big emoji for an emoji-only reply to a message", () => {
         const { asFragment } = render(
             bodyToHtml(
@@ -132,6 +138,12 @@ describe("bodyToHtml", () => {
         expect(asFragment()).toMatchSnapshot();
     });
 
+    it("does not mistake characters in text presentation mode for emoji", () => {
+        const { asFragment } = render(bodyToHtml({ body: "↔", msgtype: "m.text" }, [], {}) as ReactElement);
+
+        expect(asFragment()).toMatchSnapshot();
+    });
+
     describe("feature_latex_maths", () => {
         beforeEach(() => {
             jest.spyOn(SettingsStore, "getValue").mockImplementation((feature) => feature === "feature_latex_maths");

test/__snapshots__/HtmlUtils-test.tsx.snap

@@ -1,5 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`bodyToHtml does not mistake characters in text presentation mode for emoji 1`] = `
+<DocumentFragment>
+  <span
+    class="mx_EventTile_body"
+    dir="auto"
+  >
+    ↔
+  </span>
+</DocumentFragment>
+`;
+
 exports[`bodyToHtml feature_latex_maths should not mangle code blocks 1`] = `"<p>hello</p><pre><code>$\\xi$</code></pre><p>world</p>"`;
 
 exports[`bodyToHtml feature_latex_maths should not mangle divs 1`] = `"<p>hello</p><div>world</div>"`;
@@ -8,6 +19,29 @@ exports[`bodyToHtml feature_latex_maths should render block katex 1`] = `"<p>hel
 
 exports[`bodyToHtml feature_latex_maths should render inline katex 1`] = `"hello <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>ξ</mi></mrow><annotation encoding="application/x-tex">\\xi</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.8889em;vertical-align:-0.1944em;"></span><span class="mord mathnormal" style="margin-right:0.04601em;">ξ</span></span></span></span> world"`;
 
+exports[`bodyToHtml generates big emoji for emoji made of multiple characters 1`] = `
+<DocumentFragment>
+  <span
+    class="mx_EventTile_body mx_EventTile_bigEmoji"
+    dir="auto"
+  >
+    <span
+      class="mx_Emoji"
+      title=":man-woman-girl-boy:"
+    >
+      👨‍👩‍👧‍👦
+    </span>
+
+    <span
+      class="mx_Emoji"
+      title=":left_right_arrow:"
+    >
+      ↔️
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`bodyToHtml should generate big emoji for an emoji-only reply to a message 1`] = `
 <DocumentFragment>
   <span