Use a pill to highlight the keyword that triggered a notification

taffyko · taffyko · commit 06dca237ecb6 · 2024-09-23T00:48:35.000-07:00
diff --git a/res/css/views/elements/_Pill.pcss b/res/css/views/elements/_Pill.pcss
@@ -26,7 +26,8 @@ Please see LICENSE files in the repository root for full details.
     }
 
     &.mx_UserPill_me,
-    &.mx_AtRoomPill {
+    &.mx_AtRoomPill,
+    &.mx_KeywordPill {
         background-color: var(--cpd-color-bg-critical-primary) !important; /* To override .markdown-body */
     }
 
@@ -45,7 +46,8 @@ Please see LICENSE files in the repository root for full details.
     }
 
     /* We don't want to indicate clickability */
-    &.mx_AtRoomPill:hover {
+    &.mx_AtRoomPill:hover,
+    &.mx_KeywordPill:hover {
         background-color: var(--cpd-color-bg-critical-primary) !important; /* To override .markdown-body */
         cursor: unset;
     }
diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx
@@ -26,6 +26,7 @@ export enum PillType {
     AtRoomMention = "TYPE_AT_ROOM_MENTION", // '@room' mention
     EventInSameRoom = "TYPE_EVENT_IN_SAME_ROOM",
     EventInOtherRoom = "TYPE_EVENT_IN_OTHER_ROOM",
+    Keyword = "TYPE_KEYWORD", // Used to highlight keywords that triggered a notification rule
 }
 
 export const pillRoomNotifPos = (text: string | null): number => {
@@ -77,14 +78,32 @@ export interface PillProps {
     room?: Room;
     // Whether to include an avatar in the pill
     shouldShowPillAvatar?: boolean;
+    // Explicitly-provided text to display in the pill
+    text?: string;
 }
 
-export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room, shouldShowPillAvatar = true }) => {
-    const { event, member, onClick, resourceId, targetRoom, text, type } = usePermalink({
+export const Pill: React.FC<PillProps> = ({
+    type: propType,
+    url,
+    inMessage,
+    room,
+    shouldShowPillAvatar = true,
+    text: customPillText,
+}) => {
+    const {
+        event,
+        member,
+        onClick,
+        resourceId,
+        targetRoom,
+        text: linkText,
+        type,
+    } = usePermalink({
         room,
         type: propType,
         url,
     });
+    const text = customPillText ?? linkText;
 
     if (!type || !text) {
         return null;
@@ -97,6 +116,7 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
         mx_UserPill: type === PillType.UserMention,
         mx_UserPill_me: resourceId === MatrixClientPeg.safeGet().getUserId(),
         mx_EventPill: type === PillType.EventInOtherRoom || type === PillType.EventInSameRoom,
+        mx_KeywordPill: type === PillType.Keyword,
     });
 
     let avatar: ReactElement | null = null;
@@ -132,6 +152,8 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
         case PillType.UserMention:
             avatar = <PillMemberAvatar shouldShowPillAvatar={shouldShowPillAvatar} member={member} />;
             break;
+        case PillType.Keyword:
+            break;
         default:
             return null;
     }
diff --git a/src/components/views/messages/TextualBody.tsx b/src/components/views/messages/TextualBody.tsx
@@ -8,7 +8,8 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { createRef, SyntheticEvent, MouseEvent } from "react";
 import ReactDOM from "react-dom";
-import { MsgType } from "matrix-js-sdk/src/matrix";
+import { MsgType, PushRuleKind } from "matrix-js-sdk/src/matrix";
+import { globToRegexp } from "matrix-js-sdk/src/utils";
 
 import * as HtmlUtils from "../../../HtmlUtils";
 import { formatDate } from "../../../DateUtils";
@@ -39,6 +40,7 @@ import { getParentEventId } from "../../../utils/Reply";
 import { EditWysiwygComposer } from "../rooms/wysiwyg_composer";
 import { IEventTileOps } from "../rooms/EventTile";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { Pill, PillType } from "../elements/Pill";
 
 const MAX_HIGHLIGHT_LENGTH = 4096;
 
@@ -124,6 +126,16 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
                 }, 10);
             }
         }
+
+        // Highlight notification keywords using pills
+        const pushDetails = this.props.mxEvent.getPushDetails();
+        if (
+            pushDetails.rule?.enabled &&
+            pushDetails.rule.kind === PushRuleKind.ContentSpecific &&
+            pushDetails.rule.pattern
+        ) {
+            this.pillifyNotificationKeywords([content], this.regExpForKeywordPattern(pushDetails.rule.pattern));
+        }
     }
 
     private addCodeElement(pre: HTMLPreElement): void {
@@ -351,6 +363,55 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         }
     }
 
+    /**
+     * Marks the text that activated a push-notification keyword pattern.
+     */
+    private pillifyNotificationKeywords(nodes: ArrayLike<Element>, exp: RegExp): void {
+        let node: Node | null = nodes[0];
+        while (node) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.nodeValue;
+                if (!text) {
+                    node = node.nextSibling;
+                    continue;
+                }
+                const match = text.match(exp);
+                if (!match || match.length < 3) {
+                    node = node.nextSibling;
+                    continue;
+                }
+                const keywordText = match[2];
+                const idx = match.index! + match[1].length;
+                const before = text.substring(0, idx);
+                const after = text.substring(idx + keywordText.length);
+
+                const container = document.createElement("span");
+                const newContent = (
+                    <>
+                        {before}
+                        <Pill text={keywordText} type={PillType.Keyword}>
+                            {keywordText}
+                        </Pill>
+                        {after}
+                    </>
+                );
+                ReactDOM.render(newContent, container);
+
+                node.parentNode?.replaceChild(container, node);
+            } else if (node.childNodes && node.childNodes.length) {
+                this.pillifyNotificationKeywords(node.childNodes as NodeListOf<Element>, exp);
+            }
+
+            node = node.nextSibling;
+        }
+    }
+
+    private regExpForKeywordPattern(pattern: string): RegExp {
+        // Reflects the push notification pattern-matching implementation at
+        // https://github.com/matrix-org/matrix-js-sdk/blob/dbd7d26968b94700827bac525c39afff2c198e61/src/pushprocessor.ts#L570
+        return new RegExp("(^|\\W)(" + globToRegexp(pattern) + ")(\\W|$)", "i");
+    }
+
     private findLinks(nodes: ArrayLike<Element>): string[] {
         let links: string[] = [];
 
diff --git a/test/components/views/messages/TextualBody-test.tsx b/test/components/views/messages/TextualBody-test.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { MatrixClient, MatrixEvent } from "matrix-js-sdk/src/matrix";
+import { MatrixClient, MatrixEvent, PushRuleKind } from "matrix-js-sdk/src/matrix";
 import { mocked, MockedObject } from "jest-mock";
 import { render } from "@testing-library/react";
 
@@ -228,6 +228,23 @@ describe("<TextualBody />", () => {
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML.replace(defaultEvent.getId(), "%event_id%")).toMatchSnapshot();
         });
+
+        it("should pillify a keyword responsible for triggering a notification", () => {
+            const ev = mkRoomTextMessage("foo bar baz");
+            ev.setPushDetails(undefined, {
+                actions: [],
+                pattern: "bar",
+                rule_id: "bar",
+                default: false,
+                enabled: true,
+                kind: PushRuleKind.ContentSpecific,
+            });
+            const { container } = getComponent({ mxEvent: ev });
+            const content = container.querySelector(".mx_EventTile_body");
+            expect(content.innerHTML).toMatchInlineSnapshot(
+                `"<span>foo <bdi><span tabindex="0"><span class="mx_Pill mx_KeywordPill"><span class="mx_Pill_text">bar</span></span></span></bdi> baz</span>"`,
+            );
+        });
     });
 
     describe("renders formatted m.text correctly", () => {

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,8 @@ Please see LICENSE files in the repository root for full details.`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`&.mx_UserPill_me,`
`29`		`- &.mx_AtRoomPill {`
	`29`	`+ &.mx_AtRoomPill,`
	`30`	`+ &.mx_KeywordPill {`
`30`	`31`	`background-color: var(--cpd-color-bg-critical-primary) !important; /* To override .markdown-body */`
`31`	`32`	`}`
`32`	`33`
`@@ -45,7 +46,8 @@ Please see LICENSE files in the repository root for full details.`
`45`	`46`	`}`
`46`	`47`
`47`	`48`	`/* We don't want to indicate clickability */`
`48`		`- &.mx_AtRoomPill:hover {`
	`49`	`+ &.mx_AtRoomPill:hover,`
	`50`	`+ &.mx_KeywordPill:hover {`
`49`	`51`	`background-color: var(--cpd-color-bg-critical-primary) !important; /* To override .markdown-body */`
`50`	`52`	`cursor: unset;`
`51`	`53`	`}`