Fix Safari emoji contenteditable

src/components/inputField.ts

@@ -1,4 +1,4 @@
-import { getRichValue, isInputEmpty } from "../helpers/dom";
+import { getRichValue } from "../helpers/dom";
 import { checkRTL } from "../helpers/string";
 import RichTextProcessor from "../lib/richtextprocessor";
 
@@ -18,6 +18,9 @@ let init = () => {
     let entities = RichTextProcessor.parseEntities(text);
     //console.log('messageInput paste', text, entities);
     entities = entities.filter(e => e._ == 'messageEntityEmoji' || e._ == 'messageEntityLinebreak');
+    if(RichTextProcessor.emojiSupported) { // * fix safari emoji
+      entities = entities.filter(e => e._ != 'messageEntityEmoji');
+    }
     //text = RichTextProcessor.wrapEmojiText(text);
     text = RichTextProcessor.wrapRichText(text, {entities, noLinks: true});
 
@@ -63,15 +66,18 @@ const InputField = (options: {
 
     const input = div.firstElementChild as HTMLElement;
     const observer = new MutationObserver((mutationsList, observer) => {
-      const isEmpty = isInputEmpty(input);
+      //const isEmpty = isInputEmpty(input);
       //console.log('input', isEmpty);
 
+      //const char = [...getRichValue(input)][0];
       const char = input.innerText[0];
       let direction = 'ltr';
       if(char && checkRTL(char)) {
         direction = 'rtl';
       }
 
+      //console.log('RTL', direction, char);
+
       input.style.direction = direction;
 
       if(processInput) {

src/helpers/string.ts

@@ -84,3 +84,5 @@ export const checkRTL = (s: string) => {
 
   return rtlDirCheck.test(s);
 };
+
+//(window as any).checkRTL = checkRTL;

src/lib/richtextprocessor.ts

@@ -519,8 +519,8 @@ namespace RichTextProcessor {
           break;
 
         case 'messageEntityEmoji':
-          html.push(emojiSupported ? // ! contenteditable="false" нужен для поля ввода, иначе там будет меняться шрифт в Safari
-            `<span contenteditable="false" class="emoji">${encodeEntities(entityText)}</span>` : 
+          html.push(emojiSupported ? // ! contenteditable="false" нужен для поля ввода, иначе там будет меняться шрифт в Safari, или же рендерить смайлик напрямую, без контейнера
+            `<span class="emoji">${encodeEntities(entityText)}</span>` : 
             `<img src="assets/img/emoji/${entity.unicode}.png" alt="${encodeEntities(entityText)}" class="emoji">`);
           break;
 
@@ -723,8 +723,13 @@ namespace RichTextProcessor {
   export function wrapDraftText(text: string, options: Partial<{
     entities: MessageEntity[]
   }> = {}) {
+    let entities = options.entities.slice();
+    if(emojiSupported) { // * fix safari emoji
+      entities = entities.filter(e => e._ != 'messageEntityEmoji');
+    }
+
     return wrapRichText(text, {
-      ...options, 
+      entities, 
       noLinks: true,
       noEmphasis: true,
       passEntities: {