From d24998190e943b5342ee5b9d8d9c3906b35d1172 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 5 Apr 2023 23:04:24 +0200
Subject: [PATCH] Lexical: Fix EmojiNode, working emoji autocompletion with
 custom emoji preview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../features/compose/editor/nodes/emoji-node.tsx    | 11 -----------
 .../compose/editor/plugins/autosuggest-plugin.tsx   | 13 +++++++++++--
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/features/compose/editor/nodes/emoji-node.tsx b/app/soapbox/features/compose/editor/nodes/emoji-node.tsx
index bd093306c..b3a7116cf 100644
--- a/app/soapbox/features/compose/editor/nodes/emoji-node.tsx
+++ b/app/soapbox/features/compose/editor/nodes/emoji-node.tsx
@@ -33,14 +33,12 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
   }
 
   constructor(name: string, src: string, key?: NodeKey) {
-    console.log(name, src);
     super(key);
     this.__name = name;
     this.__src = src;
   }
 
   createDOM(config: EditorConfig): HTMLElement {
-    console.log('creating');
     const span = document.createElement('span');
     const theme = config.theme;
     const className = theme.emoji;
@@ -55,7 +53,6 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
   }
 
   exportDOM(): DOMExportOutput {
-    console.log('exporting');
     const element = document.createElement('img');
     element.setAttribute('src', this.__src);
     element.setAttribute('alt', this.__name);
@@ -64,7 +61,6 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
   }
 
   static importJSON(serializedNode: SerializedEmojiNode): EmojiNode {
-    console.log('importing json');
     const { name, src } =
       serializedNode;
     const node = $createEmojiNode(name, src);
@@ -72,12 +68,6 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
   }
 
   exportJSON(): SerializedEmojiNode {
-    console.log('exporting json', {
-      name: this.__name,
-      src: this.__src,
-      type: 'emoji',
-      version: 1,
-    });
     return {
       name: this.__name,
       src: this.__src,
@@ -95,7 +85,6 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
   }
 
   decorate(): JSX.Element {
-    console.log('decoratin', this);
     return (
       <Emoji src={this.__src} alt={this.__name} className='emojione h-4 w-4' />
     );
diff --git a/app/soapbox/features/compose/editor/plugins/autosuggest-plugin.tsx b/app/soapbox/features/compose/editor/plugins/autosuggest-plugin.tsx
index b039d941a..f5991b754 100644
--- a/app/soapbox/features/compose/editor/plugins/autosuggest-plugin.tsx
+++ b/app/soapbox/features/compose/editor/plugins/autosuggest-plugin.tsx
@@ -33,6 +33,7 @@ import { useAppDispatch, useCompose } from 'soapbox/hooks';
 import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
 
 import AutosuggestAccount from '../../components/autosuggest-account';
+import { $createEmojiNode } from '../nodes/emoji-node';
 
 import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
 
@@ -314,8 +315,16 @@ export function AutosuggestPlugin({
           if (isNativeEmoji(suggestion)) {
             node.spliceText(leadOffset - 1, matchingString.length, `${suggestion.native} `, true);
           } else {
-            // const completion = suggestion.colons;
-            // node.replace($createEmojiNode(completion, suggestion.imageUrl));
+            const completion = suggestion.colons;
+
+            let emojiText;
+
+            if (leadOffset === 1) emojiText = node;
+            else [, emojiText] = node.splitText(leadOffset - 1);
+
+            [emojiText] = emojiText.splitText(matchingString.length);
+
+            emojiText?.replace($createEmojiNode(completion, suggestion.imageUrl));
           }
         } else if ((suggestion as string)[0] === '#') {
           node.setTextContent(`${suggestion} `);