From 4c6a9216f66ae9f57408548f7d2897cac9ef4198 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Mon, 30 Jan 2023 15:55:48 +0100
Subject: [PATCH] Composer: Fix extra `div>` text in message input (#2429)

---
 .../middle/composer/hooks/useMentionTooltip.ts      | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/middle/composer/hooks/useMentionTooltip.ts b/src/components/middle/composer/hooks/useMentionTooltip.ts
index 4996b0615..bd1af7e3e 100644
--- a/src/components/middle/composer/hooks/useMentionTooltip.ts
+++ b/src/components/middle/composer/hooks/useMentionTooltip.ts
@@ -122,11 +122,12 @@ export default function useMentionTooltip(
         >${getUserFirstOrLastName(user)}</a>`;
 
     const containerEl = document.querySelector<HTMLDivElement>(inputSelector)!;
+    const fixedHtmlBeforeSelection = cleanWebkitNewLines(htmlBeforeSelection);
 
-    const atIndex = htmlBeforeSelection.lastIndexOf('@');
+    const atIndex = fixedHtmlBeforeSelection.lastIndexOf('@');
     if (atIndex !== -1) {
-      const newHtml = `${htmlBeforeSelection.substr(0, atIndex)}${insertedHtml}&nbsp;`;
-      const htmlAfterSelection = containerEl.innerHTML.substring(htmlBeforeSelection.length);
+      const newHtml = `${fixedHtmlBeforeSelection.substr(0, atIndex)}${insertedHtml}&nbsp;`;
+      const htmlAfterSelection = cleanWebkitNewLines(containerEl.innerHTML).substring(fixedHtmlBeforeSelection.length);
       onUpdateHtml(`${newHtml}${htmlAfterSelection}`);
 
       requestAnimationFrame(() => {
@@ -151,6 +152,12 @@ function getUsernameFilter(html: string) {
   return username ? username[0].trim() : undefined;
 }
 
+// Webkit replaces the line break with the `<div><br /></div>` or `<div></div>` code.
+// It is necessary to clean the html to a single form before processing.
+function cleanWebkitNewLines(html: string) {
+  return html.replace(/<div>(<br>|<br\s?\/>)?<\/div>/gi, '<br>');
+}
+
 function canSuggestInlineBots(html: string) {
   return html.startsWith('@');
 }