From 1439fe852f3abb0f0cfa999b66c00ee34fcd95d0 Mon Sep 17 00:00:00 2001
From: Adrian Busse <adrian.busse@contracthero.com>
Date: Mon, 22 Jul 2024 11:05:05 +0100
Subject: [PATCH] Add test for selection style updates on text nodes with mode

---
 .../unit/LexicalSelectionHelpers.test.ts      | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/packages/lexical-selection/src/__tests__/unit/LexicalSelectionHelpers.test.ts b/packages/lexical-selection/src/__tests__/unit/LexicalSelectionHelpers.test.ts
index 3d151f31b7d8..01390ed7180b 100644
--- a/packages/lexical-selection/src/__tests__/unit/LexicalSelectionHelpers.test.ts
+++ b/packages/lexical-selection/src/__tests__/unit/LexicalSelectionHelpers.test.ts
@@ -30,6 +30,7 @@ import {
   LexicalNode,
   ParagraphNode,
   RangeSelection,
+  TextModeType,
   TextNode,
 } from 'lexical';
 import {
@@ -3077,6 +3078,52 @@ describe('$patchStyleText', () => {
     });
   });
 
+  test.each<TextModeType>(['token', 'segmented'])(
+    'can update style of text node that is in %s mode',
+    async (mode) => {
+      const editor = createTestEditor();
+
+      const element = document.createElement('div');
+      editor.setRootElement(element);
+
+      await editor.update(() => {
+        const root = $getRoot();
+
+        const paragraph = $createParagraphNode();
+        root.append(paragraph);
+
+        const text = $createTextNode('first').setFormat('bold');
+        paragraph.append(text);
+
+        const textInMode = $createTextNode('second').setMode(mode);
+        paragraph.append(textInMode);
+
+        $setAnchorPoint({
+          key: text.getKey(),
+          offset: 'fir'.length,
+          type: 'text',
+        });
+
+        $setFocusPoint({
+          key: textInMode.getKey(),
+          offset: 'sec'.length,
+          type: 'text',
+        });
+
+        const selection = $getSelection();
+        $patchStyleText(selection!, {'font-size': '15px'});
+      });
+
+      expect(element.innerHTML).toBe(
+        '<p dir="ltr">' +
+          '<strong data-lexical-text="true">fir</strong>' +
+          '<strong style="font-size: 15px;" data-lexical-text="true">st</strong>' +
+          '<span style="font-size: 15px;" data-lexical-text="true">second</span>' +
+          '</p>',
+      );
+    },
+  );
+
   test('preserve backward selection when changing style of 2 different text nodes', async () => {
     const editor = createTestEditor();