From fc4c529e8ee9a8bb997b02e7e698cc2d6bac5afe Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Mon, 27 Jun 2022 22:02:42 +0200
Subject: [PATCH] Text Formatter: Fix unexpected appearance and emoji wrapping
 (#1911)

---
 src/components/middle/composer/MessageInput.tsx  | 11 ++++++++---
 src/components/middle/composer/TextFormatter.tsx |  3 +--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/middle/composer/MessageInput.tsx b/src/components/middle/composer/MessageInput.tsx
index 209ce90d6..70ee1f7bb 100644
--- a/src/components/middle/composer/MessageInput.tsx
+++ b/src/components/middle/composer/MessageInput.tsx
@@ -204,9 +204,14 @@ const MessageInput: FC<OwnProps & StateProps> = ({
     openTextFormatter();
   }
 
+  function processSelectionWithTimeout() {
+    // Small delay to allow browser properly recalculate selection
+    setTimeout(processSelection, 1);
+  }
+
   function handleMouseDown(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
     if (e.button !== 2) {
-      e.target.addEventListener('mouseup', processSelection, { once: true });
+      e.target.addEventListener('mouseup', processSelectionWithTimeout, { once: true });
       return;
     }
 
@@ -261,7 +266,7 @@ const MessageInput: FC<OwnProps & StateProps> = ({
       e.preventDefault();
       editLastMessage();
     } else {
-      e.target.addEventListener('keyup', processSelection, { once: true });
+      e.target.addEventListener('keyup', processSelectionWithTimeout, { once: true });
     }
   }
 
@@ -383,7 +388,7 @@ const MessageInput: FC<OwnProps & StateProps> = ({
         onKeyDown={handleKeyDown}
         onMouseDown={handleMouseDown}
         onContextMenu={IS_ANDROID ? stopEvent : undefined}
-        onTouchCancel={IS_ANDROID ? processSelection : undefined}
+        onTouchCancel={IS_ANDROID ? processSelectionWithTimeout : undefined}
         aria-label={placeholder}
       />
       <div ref={cloneRef} className={buildClassName(className, 'clone')} dir="auto" />
diff --git a/src/components/middle/composer/TextFormatter.tsx b/src/components/middle/composer/TextFormatter.tsx
index 483405517..67bde1936 100644
--- a/src/components/middle/composer/TextFormatter.tsx
+++ b/src/components/middle/composer/TextFormatter.tsx
@@ -133,8 +133,7 @@ const TextFormatter: FC<OwnProps> = ({
     if (!selectedRange) {
       return undefined;
     }
-    fragmentEl.innerText = selectedRange.toString();
-
+    fragmentEl.replaceChildren(selectedRange.cloneContents());
     return fragmentEl.innerHTML;
   }, [selectedRange]);