fix: rich text editor v2 [WPB-12089] (#18528)

* fix: mentions tag wrapping * fix: adjust white-space and line-height in message list styles * fix: edit view message styles while rich text is turned off * chore: bring back list line heigt * fix: ensure unique mentions in edited message plugin * fix: add column gap to input bar layout
wireapp · Dec 18, 2024 · 4cdae2b · 4cdae2b
1 parent ce3e833
commit 4cdae2b
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/src/script/components/RichTextEditor/plugins/EditedMessagePlugin/EditedMessagePlugin.tsx b/src/script/components/RichTextEditor/plugins/EditedMessagePlugin/EditedMessagePlugin.tsx
@@ -51,7 +51,7 @@ export function EditedMessagePlugin({message}: Props): null {
 
           const mentionNodes = getMentionNodesFromMessage(message);
 
-          const allowedMentions = mentionNodes.map(node => node.getTextContent());
+          const allowedMentions = [...new Set(mentionNodes.map(node => node.getTextContent()))];
 
           const wrappedWithTags = wrapMentionsWithTags(messageContent, allowedMentions);
 

diff --git a/...s/RichTextEditor/plugins/EditedMessagePlugin/wrapMentionsWithTags/wrapMentionsWithTags.ts b/...s/RichTextEditor/plugins/EditedMessagePlugin/wrapMentionsWithTags/wrapMentionsWithTags.ts
@@ -27,7 +27,8 @@ export const wrapMentionsWithTags = (text: string, allMentions: string[]): strin
     return text;
   }
 
-  const mentionRegex = new RegExp(`(${allMentions.join('|')})`, 'g');
-
-  return text.replace(mentionRegex, '<mention>$1</mention>');
+  return allMentions.reduce(
+    (updatedText, mention) => updatedText.split(mention).join(`<mention>${mention}</mention>`),
+    text,
+  );
 };
diff --git a/src/style/content/conversation/input-bar.less b/src/style/content/conversation/input-bar.less
@@ -408,10 +408,11 @@
 
   display: grid;
   padding-left: var(--input-bar-avatar-spacing);
+  column-gap: 8px;
   grid-template-areas:
     'avatar input input'
     'avatar buttons buttons';
-  grid-template-columns: calc(var(--input-bar-avatar-size) + var(--input-bar-avatar-spacing)) 1fr 1fr;
+  grid-template-columns: calc(var(--input-bar-avatar-size) + var(--input-bar-avatar-spacing)) 1fr min-content;
   row-gap: 8px;
 
   @media (min-width: 900px) {

diff --git a/src/style/content/conversation/message-list.less b/src/style/content/conversation/message-list.less
@@ -313,7 +313,7 @@
     display: inline;
     min-width: 0;
     line-height: var(--line-height-lg);
-    white-space: pre-wrap;
+    white-space: normal;
     word-wrap: break-word;
 
     li {