Fix emoji margin on non-Safari browsers on macOS

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();

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} {

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;