fix stripping nickname from replies and plain mentions

Author: dozro

src/app/components/editor/output.ts

@@ -17,6 +17,14 @@ export type OutputOptions = {
   allowTextFormatting?: boolean;
   allowInlineMarkdown?: boolean;
   allowBlockMarkdown?: boolean;
+  /**
+   * if true it will remove the nickname of the person from the message
+   */
+  stripNickname?: boolean;
+  /**
+   * a map of regex patterns to replace nicknames with, used when stripNickname is true
+   */
+  nickNameReplacement?: Map<RegExp, string>;
 };
 
 const textToCustomHtml = (node: Text, opts: OutputOptions): string => {
@@ -99,21 +107,34 @@ const ignoreHTMLParseInlineMD = (text: string): string =>
     (txt) => parseInlineMD(txt)
   ).join('');
 
+/**
+ * convert slate internal representation to a custom HTML string that can be sent to the server
+ * @param node slate node
+ * @param opts options for output
+ * @returns custom HTML string
+ */
 export const toMatrixCustomHTML = (
   node: Descendant | Descendant[],
   opts: OutputOptions
 ): string => {
   let markdownLines = '';
   const parseNode = (n: Descendant, index: number, targetNodes: Descendant[]) => {
     if (opts.allowBlockMarkdown && 'type' in n && n.type === BlockType.Paragraph) {
-      const line = toMatrixCustomHTML(n, {
+      let line = toMatrixCustomHTML(n, {
         ...opts,
         allowInlineMarkdown: false,
         allowBlockMarkdown: false,
       })
         .replace(/<br\/>$/, '\n')
         .replace(/^(\\*)&gt;/, '$1>');
 
+      // strip nicknames if needed
+      if (opts.stripNickname && opts.nickNameReplacement) {
+        opts.nickNameReplacement?.keys().forEach((key) => {
+          const replacement = opts.nickNameReplacement!.get(key) ?? '';
+          line = line.replaceAll(key, replacement);
+        });
+      }
       markdownLines += line;
       if (index === targetNodes.length - 1) {
         return parseBlockMD(markdownLines, ignoreHTMLParseInlineMD);
@@ -175,12 +196,37 @@ const elementToPlainText = (node: CustomElement, children: string): string => {
   }
 };
 
-export const toPlainText = (node: Descendant | Descendant[], isMarkdown: boolean): string => {
-  if (Array.isArray(node)) return node.map((n) => toPlainText(n, isMarkdown)).join('');
-  if (Text.isText(node))
+/**
+ * convert slate internal representation to a plain text string that can be sent to the server
+ * @param node the slate node
+ * @param isMarkdown set true if it's a markdown formatted text
+ * @param stripNickname whether to strip nicknames
+ * @param nickNameReplacement the nickname replacement
+ * @returns the plain text we want to send
+ */
+export const toPlainText = (
+  node: Descendant | Descendant[],
+  isMarkdown: boolean,
+  stripNickname = false,
+  nickNameReplacement?: Map<RegExp, string>
+): string => {
+  if (Array.isArray(node))
+    return node.map((n) => toPlainText(n, isMarkdown, stripNickname, nickNameReplacement)).join('');
+  if (Text.isText(node)) {
+    if (stripNickname && nickNameReplacement) {
+      let { text } = node;
+      nickNameReplacement?.keys().forEach((key) => {
+        const replacement = nickNameReplacement.get(key) ?? '';
+        text = text.replaceAll(key, replacement);
+      });
+      return isMarkdown
+        ? unescapeMarkdownBlockSequences(text, unescapeMarkdownInlineSequences)
+        : text;
+    }
     return isMarkdown
       ? unescapeMarkdownBlockSequences(node.text, unescapeMarkdownInlineSequences)
       : node.text;
+  }
 
   const children = node.children.map((n) => toPlainText(n, isMarkdown)).join('');
   return elementToPlainText(node, children);
@@ -208,10 +254,27 @@ export const trimCommand = (cmdName: string, str: string) => {
   return str.slice(match[0].length);
 };
 
+/**
+ * Type representing Mentions
+ */
 export type MentionsData = {
+  /**
+   * a boolean to denote if it's a room mention
+   */
   room: boolean;
+  /**
+   * a set of user ids that are mentioned in the message
+   */
   users: Set<string>;
 };
+
+/**
+ * get the mentions in a message
+ * @param mx the matrix client
+ * @param roomId the room id we will send the message in
+ * @param editor the slate editor
+ * @returns the mentions in a message {@link MentionsData}
+ */
 export const getMentions = (mx: MatrixClient, roomId: string, editor: Editor): MentionsData => {
   const mentionData: MentionsData = {
     room: false,

src/app/features/room/RoomInput.tsx

@@ -254,6 +254,10 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     const emojiBtnRef = useRef<HTMLButtonElement>(null);
     const micBtnRef = useRef<HTMLButtonElement>(null);
     const roomToParents = useAtomValue(roomToParentsAtom);
+    /**
+     * Nickname someone set for another user
+     * this nickname should be treated as private
+     */
     const nicknames = useAtomValue(nicknamesAtom);
 
     const powerLevels = usePowerLevelsContext();
@@ -372,6 +376,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     let replyBodyJSX: ReactNode = replyDraft ? trimReplyFromBody(replyDraft.body) : null;
 
     if (htmlBody) {
+      /**
+       * message with linebreaks, etc stripped
+       */
       const strippedHtml = trimReplyFromFormattedBody(htmlBody)
         .replaceAll(/<br\s*\/?>/gi, ' ')
         .replaceAll(/<\/p>\s*<p[^>]*>/gi, ' ')
@@ -574,12 +581,65 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       uploadBoardHandlers.current?.handleSend();
 
       const commandName = getBeginCommand(editor);
-      let plainText = toPlainText(editor.children, isMarkdown).trim();
+      /**
+       * a map of regex patterns to replace nicknames with,
+       * used when stripNickname is true in toMatrixCustomHTML
+       * during HTML generation for the message content.
+       * This is necessary because the HTML generation needs to know
+       * which nicknames to strip in order to generate the correct formatted_body,
+       * and the plain text generation needs to replace those same nicknames with
+       * the original user IDs so that the message content remains consistent and
+       * mentions are correctly processed by the server and clients.
+       */
+      const nicknameReplacement = new Map<RegExp, string>();
+      if (replyEvent) {
+        /**
+         * the id of the user being replied to,
+         * whose nickname (if any) should be stripped
+         * from the message content and replaced with their
+         * user ID for correct mention processing
+         */
+        const senderId = replyEvent.getSender();
+        if (senderId) {
+          const nick = nicknames[senderId];
+          if (typeof nick === 'string' && nick.length > 0) {
+            nicknameReplacement.set(
+              new RegExp(`@?${nick}`, 'g'),
+              room.getMember(senderId)?.rawDisplayName ?? senderId
+            );
+          }
+        }
+      }
+      /**
+       * any other users mentioned in the message being replied to,
+       * whose nicknames should also be stripped and replaced with user IDs
+       */
+      const mentions = getMentions(mx, roomId, editor);
+      if (mentions?.users) {
+        mentions.users.forEach((id) => {
+          const nick = nicknames[id];
+          if (typeof nick === 'string' && nick.length > 0) {
+            nicknameReplacement.set(
+              new RegExp(`@?${nick}`, 'g'),
+              room.getMember(id)?.rawDisplayName ?? id
+            );
+          }
+        });
+      }
+      /**
+       * the plain text we will send
+       */
+      let plainText = toPlainText(editor.children, isMarkdown, true, nicknameReplacement).trim();
+      /**
+       * the html we will send
+       */
       let customHtml = trimCustomHtml(
         toMatrixCustomHTML(editor.children, {
           allowTextFormatting: true,
           allowBlockMarkdown: isMarkdown,
           allowInlineMarkdown: isMarkdown,
+          stripNickname: true,
+          nickNameReplacement: nicknameReplacement,
         })
       );
       let msgType = MsgType.Text;
@@ -720,6 +780,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       }
     }, [
       editor,
+      replyEvent,
       isMarkdown,
       canSendReaction,
       mx,
@@ -729,6 +790,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       silentReply,
       scheduledTime,
       editingScheduledDelayId,
+      nicknames,
       handleQuickReact,
       commands,
       sendTypingStatus,