[FR-161] Support everyone and here mentions

src/Message/style/message.ts

@@ -63,7 +63,7 @@ export const Message = styled.withConfig({
     },
 
     variants: {
-      mentioned: {
+      isMentioned: {
         true: {
           backgroundColor: theme.colors.mentioned,
 

src/Message/variants/NormalMessage.tsx

@@ -190,18 +190,25 @@ function NormalMessage(props: MessageProps) {
     const userMentionedOverride = props.overrides?.userMentioned ?? false;
     if (userMentionedOverride) return true;
 
+    if (props.message.mention_everyone) return true;
+
     const user = currentUser();
 
     if (!user) return false;
 
     return (
       props.message.mentions.find(({ id }) => id === user.id) !== undefined
     );
-  }, [currentUser, props.message.mentions, props.overrides?.userMentioned]);
+  }, [
+    currentUser,
+    props.message.mentions,
+    props.overrides?.userMentioned,
+    props.message.mention_everyone,
+  ]);
 
   if (props.isFirstMessage)
     return (
-      <Styles.Message mentioned={isUserMentioned}>
+      <Styles.Message isMentioned={isUserMentioned}>
         {shouldShowReply && (
           <ReplyInfo
             channelId={props.message.channel_id}
@@ -232,7 +239,7 @@ function NormalMessage(props: MessageProps) {
     );
 
   return (
-    <Styles.Message mentioned={isUserMentioned}>
+    <Styles.Message isMentioned={isUserMentioned}>
       <Tooltip
         placement="top"
         overlay={Moment(props.message.timestamp).format("LLLL")}

src/markdown/render/ast/index.tsx

@@ -4,7 +4,12 @@ import { defaultRules, inlineRegex } from "simple-markdown";
 import { customEmoji } from "./customEmoji";
 import Emoji from "../../../Emoji";
 import React, { Fragment } from "react";
-import { channelMention, roleMention, userMention } from "../elements/mentions";
+import {
+  channelMention,
+  roleMention,
+  userMention,
+  everyoneOrHereMention,
+} from "../elements/mentions";
 
 const baseRules = {
   newline: defaultRules.newline,
@@ -66,6 +71,7 @@ const baseRules = {
   mention: userMention,
   channelMention,
   roleMention,
+  everyoneOrHereMention,
 
   s: {
     order: defaultRules.u.order,

src/markdown/render/elements/mentions/everyoneOrHereMention.tsx

@@ -0,0 +1,24 @@
+import SimpleMarkdown from "simple-markdown";
+import * as React from "react";
+import * as Styles from "./style";
+
+interface Props {
+  group: "everyone" | "here";
+}
+
+function EveryoneOrHereMention({ group }: Props) {
+  return (
+    <Styles.Mention canBeClicked={false}>
+      <Styles.MentionIcon>@</Styles.MentionIcon>
+      {group}
+    </Styles.Mention>
+  );
+}
+export const everyoneOrHereMention = {
+  order: SimpleMarkdown.defaultRules.text.order,
+  match: (source: string) => /^@(everyone|here)/.exec(source),
+  parse: ([, group]) => ({ group }),
+  react: ({ group }, recurseParse, state) => (
+    <EveryoneOrHereMention group={group} key={state.key} />
+  ),
+};

src/markdown/render/elements/mentions/index.tsx

@@ -1,3 +1,4 @@
 export * from "./userMention";
 export * from "./channelMention";
 export * from "./roleMention";
+export * from "./everyoneOrHereMention";

src/markdown/render/index.tsx

@@ -164,7 +164,14 @@ const parse = parserFor(rulesWithoutMaskedLinks);
 export const parseAllowLinks = parserFor(createRules(baseRules));
 export const parseEmbedTitle = parserFor(
   R.omit(
-    ["codeBlock", "br", "mention", "channelMention", "roleMention"],
+    [
+      "codeBlock",
+      "br",
+      "mention",
+      "channelMention",
+      "roleMention",
+      "everyoneOrHereMention",
+    ],
     rulesWithoutMaskedLinks
   )
 );

src/stories/Normal.stories.tsx

@@ -232,6 +232,31 @@ Mentions.args = {
   ],
 };
 
+export const MentionsEveryone: StoryFn<typeof MessageGroup> = Template.bind({});
+MentionsEveryone.args = {
+  messages: [
+    {
+      id: "1101622366137749574",
+      type: 0,
+      content: "HEY @everyone, fear not, for I am @here",
+      channel_id: "697138785317814292",
+      author: testUser,
+      attachments: [],
+      embeds: [],
+      mentions: [],
+      mention_roles: [],
+      pinned: false,
+      mention_everyone: true,
+      tts: false,
+      timestamp: "2023-04-28T21:33:59.241000+00:00",
+      edited_timestamp: "2023-05-04T16:50:42.356000+00:00",
+      flags: 1,
+      components: [],
+      reactions: [],
+    },
+  ],
+};
+
 export const CodeBlock: StoryFn<typeof MessageGroup> = Template.bind({});
 CodeBlock.args = {
   messages: [