diff --git a/web/markdown/markdown-chat-mention.react.js b/web/markdown/markdown-chat-mention.react.js
--- a/web/markdown/markdown-chat-mention.react.js
+++ b/web/markdown/markdown-chat-mention.react.js
@@ -22,7 +22,7 @@
}
return (
-
+
{text}
);
diff --git a/web/markdown/markdown-user-mention.react.js b/web/markdown/markdown-user-mention.react.js
new file mode 100644
--- /dev/null
+++ b/web/markdown/markdown-user-mention.react.js
@@ -0,0 +1,25 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './markdown.css';
+import { usePushUserProfileModal } from '../modals/user-profile/user-profile-utils.js';
+
+type MarkdownChatMentionProps = {
+ +text: string,
+ +userID: string,
+};
+
+function MarkdownUserMention(props: MarkdownChatMentionProps): React.Node {
+ const { text, userID } = props;
+
+ const pushUserProfileModal = usePushUserProfileModal(userID);
+
+ return (
+
+ {text}
+
+ );
+}
+
+export default MarkdownUserMention;
diff --git a/web/markdown/markdown.css b/web/markdown/markdown.css
--- a/web/markdown/markdown.css
+++ b/web/markdown/markdown.css
@@ -70,12 +70,12 @@
div.markdown a {
text-decoration: underline;
}
-div.markdown a.chatMention {
+div.markdown a.mention {
text-decoration: none;
color: inherit;
font-weight: bold;
}
-div.lightBackground a.chatMention {
+div.lightBackground a.mention {
color: black;
}
div.lightBackground a {
@@ -96,7 +96,7 @@
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
span.spoiler:not(.revealSpoilerAnimation) a,
-span.spoiler:not(.revealSpoilerAnimation) a.chatMention {
+span.spoiler:not(.revealSpoilerAnimation) a.mention {
pointer-events: none;
color: var(--spoiler-text-color);
}
diff --git a/web/markdown/rules.react.js b/web/markdown/rules.react.js
--- a/web/markdown/rules.react.js
+++ b/web/markdown/rules.react.js
@@ -14,6 +14,7 @@
import MarkdownChatMention from './markdown-chat-mention.react.js';
import MarkdownSpoiler from './markdown-spoiler.react.js';
+import MarkdownUserMention from './markdown-user-mention.react.js';
export type MarkdownRules = {
+simpleMarkdownRules: SharedMarkdown.ParserRules,
@@ -192,15 +193,20 @@
userMention: {
...SimpleMarkdown.defaultRules.strong,
match: SharedMarkdown.matchUserMentions(membersMap),
- parse: (capture: SharedMarkdown.Capture) => ({
- content: capture[0],
- }),
+ parse: (capture: SharedMarkdown.Capture) =>
+ SharedMarkdown.parseUserMentions(membersMap, capture),
// eslint-disable-next-line react/display-name
react: (
node: SharedMarkdown.SingleASTNode,
output: SharedMarkdown.Output,
state: SharedMarkdown.State,
- ) => {node.content},
+ ) => (
+
+ ),
},
chatMention: {
...SimpleMarkdown.defaultRules.strong,