Fix emoji margin on macOS

src/components/chat/input.ts

@@ -74,6 +74,8 @@ import debounce from '../../helpers/schedulers/debounce';
 import noop from '../../helpers/noop';
 import { putPreloader } from '../misc';
 import SetTransition from '../singleTransition';
+import replaceContent from '../../helpers/dom/replaceContent';
+import PeerTitle from '../peerTitle';
 
 const RECORD_MIN_TIME = 500;
 const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.';
@@ -108,11 +110,9 @@ export default class ChatInput {
   private sendMenu: SendMenu;
 
   private replyElements: {
-    container?: HTMLElement,
+    container: HTMLElement,
-    cancelBtn?: HTMLButtonElement,
+    cancelBtn: HTMLButtonElement
-    titleEl?: HTMLElement,
+  } = {} as any;
-    subtitleEl?: HTMLElement
-  } = {};
 
   private willSendWebPage: any = null;
   private forwardingMids: number[] = [];
@@ -292,12 +292,7 @@ export default class ChatInput {
 
     this.replyElements.cancelBtn = ButtonIcon('close reply-cancel');
 
-    const dac = new DivAndCaption('reply');
+    this.replyElements.container.append(this.replyElements.cancelBtn);
-
-    this.replyElements.titleEl = dac.title;
-    this.replyElements.subtitleEl = dac.subtitle;
-
-    this.replyElements.container.append(this.replyElements.cancelBtn, dac.container);
 
     this.newMessageWrapper = document.createElement('div');
     this.newMessageWrapper.classList.add('new-message-wrapper');
@@ -1691,9 +1686,8 @@ export default class ChatInput {
       // ! костыль
       const replyFragment = this.appMessagesManager.wrapMessageForReply(message, undefined, [message.mid]);
       this.setTopInfo('edit', f, 'Editing', undefined, input, message);
-      const subtitleEl = this.replyElements.container.querySelector('.reply-subtitle');
+      const subtitleEl = this.replyElements.container.querySelector('.reply-subtitle') as HTMLElement;
-      subtitleEl.textContent = '';
+      replaceContent(subtitleEl, replyFragment);
-      subtitleEl.append(replyFragment);
 
       this.editMsgId = mid;
       input = undefined;
@@ -1736,9 +1730,8 @@ export default class ChatInput {
         this.setTopInfo('forward', f, title);
 
         // ! костыль
-        const subtitleEl = this.replyElements.container.querySelector('.reply-subtitle');
+        const subtitleEl = this.replyElements.container.querySelector('.reply-subtitle') as HTMLElement;
-        subtitleEl.textContent = '';
+        replaceContent(subtitleEl, replyFragment);
-        subtitleEl.append(replyFragment);
       } else {
         this.setTopInfo('forward', f, title, mids.length + ' ' + (mids.length > 1 ? 'forwarded messages' : 'forwarded message'));
       }
@@ -1753,7 +1746,11 @@ export default class ChatInput {
   public initMessageReply(mid: number) {
     const message = this.chat.getMessage(mid);
     const f = () => {
-      this.setTopInfo('reply', f, this.appPeersManager.getPeerTitle(message.fromId, true), message.message, undefined, message);
+      const peerTitleEl = new PeerTitle({
+        peerId: message.fromId,
+        dialog: false
+      }).element;
+      this.setTopInfo('reply', f, peerTitleEl, message.message, undefined, message);
       this.replyToMsgId = mid;
     };
     f();
@@ -1795,18 +1792,25 @@ export default class ChatInput {
     });
   }
 
-  public setTopInfo(type: ChatInputHelperType, callerFunc: () => void, title = '', subtitle = '', input?: string, message?: any) {
+  public setTopInfo(type: ChatInputHelperType, 
+    callerFunc: () => void, 
+    title: HTMLElement | string = '', 
+    subtitle: HTMLElement | string = '', 
+    input?: string, 
+    message?: any) {
     if(type !== 'webpage') {
       this.clearHelper(type);
       this.helperType = type;
       this.helperFunc = callerFunc;
     }
 
-    if(this.replyElements.container.lastElementChild.tagName === 'DIV') {
+    const replyParent = this.replyElements.container;
-      this.replyElements.container.lastElementChild.remove();
+    if(replyParent.lastElementChild.tagName === 'DIV') {
-      this.replyElements.container.append(wrapReply(title, subtitle, message));
+      replyParent.lastElementChild.remove();
     }
 
+    replyParent.append(wrapReply(title, subtitle, message));
+
     this.chat.container.classList.add('is-helper-active');
     /* const scroll = appImManager.scrollable;
     if(scroll.isScrolledDown && !scroll.scrollLocked && !appImManager.messagesQueuePromise && !appImManager.setPeerPromise) {

src/components/chat/replyContainer.ts

@@ -41,7 +41,7 @@ export function wrapReplyDivAndCaption(options: {
 
   let media = message && message.media;
   let setMedia = false, isRound = false;
-  const mediaChildren = mediaEl ? Array.from(mediaEl.children) : [];
+  const mediaChildren = mediaEl ? Array.from(mediaEl.children).slice() : [];
   let middleware: () => boolean;
   if(media && mediaEl) {
     subtitleEl.textContent = '';

src/lib/richtextprocessor.ts

@@ -542,9 +542,10 @@ namespace RichTextProcessor {
             // } else {
               insertPart(entity, `<img src="assets/img/emoji/${entity.unicode}.png" alt="`, `" class="emoji">`);
             // }
-          }/*  else if(options.mustWrapEmoji) {
+          //} else if(options.mustWrapEmoji) {
+          } else if(!options.wrappingDraft) {
             insertPart(entity, '<span class="emoji">', '</span>');
-          } */
+          }
           /* if(!emojiSupported) {
             insertPart(entity, `<img src="assets/img/emoji/${entity.unicode}.png" alt="`, `" class="emoji">`);
           } */

src/scss/partials/_chat.scss

@@ -925,9 +925,14 @@ $chat-helper-size: 36px;
 			&-title {
 				margin-top: -1px;
 				margin-bottom: 1px;
+
 			}
 		}
 
+		.peer-title {
+			font-weight: 500;
+		}
+
 		/* span.emoji {
 			font-size: .8rem;
 		} */

src/scss/partials/_chatlist.scss

@@ -329,12 +329,12 @@ ul.chatlist {
       margin-top: -3px;
     }
 
-    span.emoji {
+    /* span.emoji {
       font-size: 1.2rem;
       margin: 0 .125rem;
       overflow: visible;
       //margin-top: -1.5px;
-    }
+    } */
   }
 
   .user-title, .user-last-message {