Fixed current format being lost on an inserted emoji

no issue - apply the current selection's format to the newly inserted emoji to avoid formatting ending and restarting around the emoji
TryGhost · Nov 1, 2023 · bb09e60 · bb09e60
1 parent 6686422
commit bb09e60
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/packages/koenig-lexical/src/plugins/EmojiPickerPlugin.jsx b/packages/koenig-lexical/src/plugins/EmojiPickerPlugin.jsx
@@ -78,10 +78,10 @@ export function EmojiPickerPlugin() {
             }
 
             const currentNode = selection.anchor.getNode();
-
             // need to replace the last text matching the :test: pattern with a single emoji
             const shortcodeLength = emoji.id.length + 1; // +1 for the end colon
-            currentNode.spliceText(selection.anchor.offset - shortcodeLength, shortcodeLength, emoji.skins[0].native, true);
+            const textNode = currentNode.spliceText(selection.anchor.offset - shortcodeLength, shortcodeLength, emoji.skins[0].native, true);
+            textNode.setFormat(selection.format);
         });
     }, [editor]);
 
@@ -118,7 +118,10 @@ export function EmojiPickerPlugin() {
                 nodeToRemove.remove();
             }
 
-            selection.insertNodes([$createTextNode(selectedOption.skins[0].native)]);
+            const emojiNode = $createTextNode(selectedOption.skins[0].native);
+            emojiNode.setFormat(selection.format);
+
+            selection.insertNodes([emojiNode]);
 
             closeMenu();
         });

diff --git a/packages/koenig-lexical/test/e2e/plugins/EmojiPickerPlugin.test.js b/packages/koenig-lexical/test/e2e/plugins/EmojiPickerPlugin.test.js
@@ -89,7 +89,7 @@ test.describe('Emoji Picker Plugin', async function () {
         await page.keyboard.press('Enter');
         await assertHTML(page, '<p dir="ltr"><span data-lexical-text="true">🌮</span></p>');
     });
-    
+
     test('can use the mouse to select an emoji', async function () {
         await focusEditor(page);
 
@@ -101,7 +101,7 @@ test.describe('Emoji Picker Plugin', async function () {
         await expect(page.getByTestId('emoji-menu')).not.toBeVisible();
         await assertHTML(page, '<p dir="ltr"><span data-lexical-text="true">🌮</span></p>');
     });
-    
+
     test('can use punctuation', async function () {
         await focusEditor(page);
 
@@ -124,6 +124,23 @@ test.describe('Emoji Picker Plugin', async function () {
         await assertHTML(page, '<p dir="ltr"><span data-lexical-text="true">🌮🌮s for all</span></p>');
     });
 
+    test('emojis retain text formatting on menu insert', async function () {
+        await focusEditor(page);
+        await page.keyboard.press('Control+Alt+H');
+        await page.keyboard.type('Test :heart', {delay: 10});
+        await page.keyboard.press('Enter');
+
+        await assertHTML(page, '<p dir="ltr"><mark data-lexical-text="true"><span>Test ❤️</span></mark></p>');
+    });
+
+    test('emojis retain text formatting on : completion', async function () {
+        await focusEditor(page);
+        await page.keyboard.press('Control+Alt+H');
+        await page.keyboard.type('Test :heart:', {delay: 10});
+
+        await assertHTML(page, '<p dir="ltr"><mark data-lexical-text="true"><span>Test ❤️</span></mark></p>');
+    });
+
     test(`can use emojis in nested editors`, async function () {
         await focusEditor(page);