make mentions clickable in messages

cinnyapp · Oct 4, 2023 · 6a70df1 · 6a70df1
1 parent c90e60b
commit 6a70df1
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 11 deletions.
diff --git a/src/app/organisms/room/RoomTimeline.tsx b/src/app/organisms/room/RoomTimeline.tsx
@@ -51,6 +51,9 @@ import {
   eventWithShortcode,
   factoryEventSentBy,
   getMxIdLocalPart,
+  isRoomAlias,
+  isRoomId,
+  isUserId,
   matrixEventByRecency,
 } from '../../utils/matrix';
 import { sanitizeCustomHtml } from '../../utils/sanitize';
@@ -84,7 +87,7 @@ import {
 } from '../../utils/room';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
-import { openProfileViewer } from '../../../client/action/navigation';
+import { openJoinAlias, openProfileViewer, selectRoom } from '../../../client/action/navigation';
 import { useForceUpdate } from '../../hooks/useForceUpdate';
 import { parseGeoUri, scaleYDimension } from '../../utils/common';
 import { useMatrixEventRenderer } from '../../hooks/useMatrixEventRenderer';
@@ -503,7 +506,31 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const [, forceUpdate] = useForceUpdate();
 
   const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
-    () => getReactCustomHtmlParser(mx, room),
+    () =>
+      getReactCustomHtmlParser(mx, room, {
+        handleSpoilerClick: (evt) => {
+          const target = evt.currentTarget;
+          if (target.getAttribute('aria-pressed') === 'true') {
+            evt.stopPropagation();
+            target.setAttribute('aria-pressed', 'false');
+            target.style.cursor = 'initial';
+          }
+        },
+        handleMentionClick: (evt) => {
+          const target = evt.currentTarget;
+          const mentionId = target.getAttribute('data-mention-id');
+          if (typeof mentionId !== 'string') return;
+          if (isUserId(mentionId)) {
+            openProfileViewer(mentionId, room.roomId);
+            return;
+          }
+          if (isRoomId(mentionId) && mx.getRoom(mentionId)) {
+            selectRoom(mentionId);
+            return;
+          }
+          openJoinAlias(mentionId);
+        },
+      }),
     [mx, room]
   );
   const parseMemberEvent = useMemberEventParser();

diff --git a/src/app/plugins/react-custom-html-parser.tsx b/src/app/plugins/react-custom-html-parser.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/alt-text */
-import React, { Suspense, lazy } from 'react';
+import React, { ReactEventHandler, Suspense, lazy } from 'react';
 import {
   Element,
   Text as DOMText,
@@ -29,7 +29,14 @@ export const LINKIFY_OPTS: LinkifyOpts = {
   },
 };
 
-export const getReactCustomHtmlParser = (mx: MatrixClient, room: Room): HTMLReactParserOptions => {
+export const getReactCustomHtmlParser = (
+  mx: MatrixClient,
+  room: Room,
+  params: {
+    handleSpoilerClick?: ReactEventHandler<HTMLElement>;
+    handleMentionClick?: ReactEventHandler<HTMLElement>;
+  }
+): HTMLReactParserOptions => {
   const opts: HTMLReactParserOptions = {
     replace: (domNode) => {
       if (domNode instanceof Element && 'name' in domNode) {
@@ -179,11 +186,17 @@ export const getReactCustomHtmlParser = (mx: MatrixClient, room: Room): HTMLReac
                 mentionName && (mentionName.startsWith('#') ? mentionName : `#${mentionName}`);
               return (
                 <span
+                  {...props}
                   className={css.Mention({
                     highlight: room.roomId === (mentionRoom?.roomId ?? mentionId),
                   })}
-                  data-mx-pill={mentionId}
-                  {...props}
+                  data-mention-id={mentionRoom?.roomId ?? mentionId}
+                  data-mention-href={props.href}
+                  role="button"
+                  tabIndex={params.handleMentionClick ? 0 : -1}
+                  onKeyDown={params.handleMentionClick}
+                  onClick={params.handleMentionClick}
+                  style={{ cursor: 'pointer' }}
                 >
                   {mentionDisplayName ?? mentionId}
                 </span>
@@ -192,11 +205,15 @@ export const getReactCustomHtmlParser = (mx: MatrixClient, room: Room): HTMLReac
             if (mentionPrefix === '@')
               return (
                 <span
-                  className={css.Mention({
-                    highlight: mx.getUserId() === mentionId,
-                  })}
-                  data-mx-pill={mentionId}
                   {...props}
+                  className={css.Mention({ highlight: mx.getUserId() === mentionId })}
+                  data-mention-id={mentionId}
+                  data-mention-href={props.href}
+                  role="button"
+                  tabIndex={params.handleMentionClick ? 0 : -1}
+                  onKeyDown={params.handleMentionClick}
+                  onClick={params.handleMentionClick}
+                  style={{ cursor: 'pointer' }}
                 >
                   {`@${getMemberDisplayName(room, mentionId) ?? getMxIdLocalPart(mentionId)}`}
                 </span>
@@ -206,7 +223,16 @@ export const getReactCustomHtmlParser = (mx: MatrixClient, room: Room): HTMLReac
 
         if (name === 'span' && 'data-mx-spoiler' in props) {
           return (
-            <span className={css.Spoiler()} {...props}>
+            <span
+              {...props}
+              role="button"
+              tabIndex={params.handleSpoilerClick ? 0 : -1}
+              onKeyDown={params.handleSpoilerClick}
+              onClick={params.handleSpoilerClick}
+              className={css.Spoiler()}
+              aria-pressed
+              style={{ cursor: 'pointer' }}
+            >
               {domToReact(children, opts)}
             </span>
           );

diff --git a/src/app/styles/CustomHtml.css.ts b/src/app/styles/CustomHtml.css.ts
@@ -63,6 +63,11 @@ export const Spoiler = recipe({
       padding: `0 ${config.space.S100}`,
       backgroundColor: color.SurfaceVariant.ContainerActive,
       borderRadius: config.radii.R300,
+      selectors: {
+        '&[aria-pressed=true]': {
+          color: 'transparent',
+        },
+      },
     },
   ],
   variants: {

diff --git a/src/app/utils/matrix.ts b/src/app/utils/matrix.ts
@@ -24,6 +24,10 @@ export const getMxIdLocalPart = (userId: string): string | undefined => matchMxI
 
 export const isUserId = (id: string): boolean => validMxId(id) && id.startsWith('@');
 
+export const isRoomId = (id: string): boolean => validMxId(id) && id.startsWith('!');
+
+export const isRoomAlias = (id: string): boolean => validMxId(id) && id.startsWith('#');
+
 export const getRoomWithCanonicalAlias = (mx: MatrixClient, alias: string): Room | undefined =>
   mx.getRooms()?.find((room) => room.getCanonicalAlias() === alias);