[lexical][lexical-selection] Bug Fix: Respect mode when patching text style

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();
 

packages/lexical-selection/src/lexical-node.ts

@@ -14,6 +14,7 @@ import {
   $isRangeSelection,
   $isRootNode,
   $isTextNode,
+  $isTokenOrSegmented,
   BaseSelection,
   LexicalEditor,
   LexicalNode,
@@ -342,8 +343,11 @@ export function $patchStyleText(
         return;
       }
 
-      // The entire node is selected, so just format it
-      if (startOffset === 0 && endOffset === firstNodeTextLength) {
+      // The entire node is selected or a token/segment, so just format it
+      if (
+        $isTokenOrSegmented(firstNode) ||
+        (startOffset === 0 && endOffset === firstNodeTextLength)
+      ) {
         $patchStyle(firstNode, patch);
         firstNode.select(startOffset, endOffset);
       } else {
@@ -361,8 +365,8 @@ export function $patchStyleText(
       startOffset < firstNode.getTextContentSize() &&
       firstNode.canHaveFormat()
     ) {
-      if (startOffset !== 0) {
-        // the entire first node isn't selected, so split it
+      if (startOffset !== 0 && !$isTokenOrSegmented(firstNode)) {
+        // the entire first node isn't selected and it isn't a token or segmented, so split it
         firstNode = firstNode.splitText(startOffset)[1];
         startOffset = 0;
         if (isBefore) {
@@ -387,8 +391,8 @@ export function $patchStyleText(
         endOffset = lastNodeTextLength;
       }
 
-      // if the entire last node isn't selected, split it
-      if (endOffset !== lastNodeTextLength) {
+      // if the entire last node isn't selected and it isn't a token or segmented, split it
+      if (endOffset !== lastNodeTextLength && !$isTokenOrSegmented(lastNode)) {
         [lastNode] = lastNode.splitText(endOffset);
       }
 

packages/lexical/src/index.ts

@@ -170,6 +170,7 @@ export {
   $isInlineElementOrDecoratorNode,
   $isLeafNode,
   $isRootOrShadowRoot,
+  $isTokenOrSegmented,
   $nodesOfType,
   $selectAll,
   $setCompositionKey,