From 733c0e4762092ec57aa160460e6eb901d3db602f Mon Sep 17 00:00:00 2001
From: morethanwords <thanwords24@gmail.com>
Date: Tue, 14 Sep 2021 09:36:04 +0400
Subject: [PATCH] Fix emoji margin on non-Safari browsers on macOS

---
 src/components/emoticonsDropdown/tabs/emoji.ts |  2 +-
 src/lib/richtextprocessor.ts                   |  8 +++++---
 src/scss/style.scss                            | 13 +++++++++++++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/emoticonsDropdown/tabs/emoji.ts b/src/components/emoticonsDropdown/tabs/emoji.ts
index 7ded0cab..a38b62a9 100644
--- a/src/components/emoticonsDropdown/tabs/emoji.ts
+++ b/src/components/emoticonsDropdown/tabs/emoji.ts
@@ -292,7 +292,7 @@ export default class EmojiTab implements EmoticonsTab {
     const messageInput = appImManager.chat.input.messageInput;
     let inputHTML = messageInput.innerHTML;
 
-    const html = RichTextProcessor.wrapEmojiText(emoji);
+    const html = RichTextProcessor.wrapEmojiText(emoji, true);
     let inserted = false;
     if(window.getSelection) {
       const savedRange = isTouchSupported ? undefined : emoticonsDropdown.getSavedRange();
diff --git a/src/lib/richtextprocessor.ts b/src/lib/richtextprocessor.ts
index 90923b94..c5b1d612 100644
--- a/src/lib/richtextprocessor.ts
+++ b/src/lib/richtextprocessor.ts
@@ -446,7 +446,7 @@ namespace RichTextProcessor {
     noLinks: true,
     noLinebreaks: true,
     noCommands: true,
-    wrappingDraft: true,
+    wrappingDraft: boolean,
     //mustWrapEmoji: boolean,
     fromBot: boolean,
     noTextFormat: true,
@@ -581,6 +581,8 @@ namespace RichTextProcessor {
           //} else if(options.mustWrapEmoji) {
           } else if(!options.wrappingDraft) {
             insertPart(entity, '<span class="emoji">', '</span>');
+          } else if(!isSafari) {
+            insertPart(entity, '<span class="emoji" contenteditable="false">', '</span>');
           }
           /* if(!emojiSupported) {
             insertPart(entity, `<img src="assets/img/emoji/${entity.unicode}.png" alt="`, `" class="emoji">`);
@@ -825,11 +827,11 @@ namespace RichTextProcessor {
     return arr.join('');
   }
 
-  export function wrapEmojiText(text: string) {
+  export function wrapEmojiText(text: string, isDraft = false) {
     if(!text) return '';
   
     let entities = parseEntities(text).filter(e => e._ === 'messageEntityEmoji');
-    return wrapRichText(text, {entities});
+    return wrapRichText(text, {entities, wrappingDraft: isDraft});
   }
 
   export function wrapUrl(url: string, unsafe?: number | boolean): {url: string, onclick: string} {
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 78cef0c7..34e641c7 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -839,6 +839,19 @@ span.emoji {
   line-height: 1 !important;
 }
 
+// non-Retina device
+@media
+not screen and (-webkit-min-device-pixel-ratio: 2),
+not screen and (   min--moz-device-pixel-ratio: 2),
+not screen and (     -o-min-device-pixel-ratio: 2/1),
+not screen and (        min-device-pixel-ratio: 2),
+not screen and (                min-resolution: 192dpi),
+not screen and (                min-resolution: 2dppx) {
+  span.emoji {
+    margin-right: 5px;
+  }
+}
+
 img.emoji {
   width: 18px;
   height: 18px;