[lexical] [lexical-selection] Preserve paragraph styles between lines

packages/lexical-devtools-core/src/generateContent.ts

@@ -284,7 +284,9 @@ function printNode(
     return `ids: [ ${node.getIDs().join(', ')} ]`;
   } else if ($isParagraphNode(node)) {
     const formatText = printTextFormatProperties(node);
-    return formatText !== '' ? `{ ${formatText} }` : '';
+    let paragraphData = formatText !== '' ? `{ ${formatText} }` : '';
+    paragraphData += node.__style ? `(${node.__style})` : '';
+    return paragraphData;
   } else {
     return '';
   }

packages/lexical-playground/__tests__/e2e/Selection.spec.mjs

@@ -773,6 +773,51 @@ test.describe.parallel('Selection', () => {
     );
   });
 
+  test('Can persist the text style (color) from the paragraph', async ({
+    page,
+    isPlainText,
+  }) => {
+    test.skip(isPlainText);
+    await focusEditor(page);
+    await click(page, '.color-picker');
+    await click(page, '.color-picker-basic-color > button');
+    await click(page, '.PlaygroundEditorTheme__paragraph');
+    await page.keyboard.type('Line1');
+    await page.keyboard.press('Enter');
+    await page.keyboard.press('Enter');
+    await page.keyboard.press('Enter');
+    await page.keyboard.type('Line2');
+    await page.keyboard.press('ArrowUp');
+    await page.keyboard.type('Line3');
+    await assertHTML(
+      page,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span style="color: rgb(208, 2, 27)" data-lexical-text="true">
+            Line1
+          </span>
+        </p>
+        <p class="PlaygroundEditorTheme__paragraph"><br /></p>
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span style="color: rgb(208, 2, 27)" data-lexical-text="true">
+            Line3
+          </span>
+        </p>
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span style="color: rgb(208, 2, 27)" data-lexical-text="true">
+            Line2
+          </span>
+        </p>
+      `,
+    );
+  });
+
   test('shift+arrowdown into a table selects the whole table', async ({
     page,
     isPlainText,

packages/lexical-table/src/__tests__/unit/LexicalTableSelection.test.tsx

@@ -134,6 +134,7 @@ describe('table selection', () => {
       __parent: null,
       __prev: null,
       __size: 1,
+      __style: '',
       __type: 'root',
     });
     expect(parsedParagraph).toEqual({
@@ -147,7 +148,9 @@ describe('table selection', () => {
       __parent: 'root',
       __prev: null,
       __size: 1,
+      __style: '',
       __textFormat: 0,
+      __textStyle: '',
       __type: 'paragraph',
     });
     expect(parsedText).toEqual({

packages/lexical/src/LexicalEvents.ts

@@ -348,15 +348,16 @@ function onSelectionChange(
             selection.style = anchorNode.getStyle();
           } else if (anchor.type === 'element' && !isRootTextContentEmpty) {
             const lastNode = anchor.getNode();
+            selection.style = '';
             if (
               lastNode instanceof ParagraphNode &&
               lastNode.getChildrenSize() === 0
             ) {
               selection.format = lastNode.getTextFormat();
+              selection.style = lastNode.getTextStyle();
             } else {
               selection.format = 0;
             }
-            selection.style = '';
           }
         }
       } else {

packages/lexical/src/LexicalReconciler.ts

@@ -51,6 +51,7 @@ type IntentionallyMarkedAsDirtyElement = boolean;
 let subTreeTextContent = '';
 let subTreeDirectionedTextContent = '';
 let subTreeTextFormat: number | null = null;
+let subTreeTextStyle: string = '';
 let editorTextContent = '';
 let activeEditorConfig: EditorConfig;
 let activeEditor: LexicalEditor;
@@ -288,8 +289,13 @@ function $createChildren(
   for (; startIndex <= endIndex; ++startIndex) {
     $createNode(children[startIndex], dom, insertDOM);
     const node = activeNextNodeMap.get(children[startIndex]);
-    if (node !== null && subTreeTextFormat === null && $isTextNode(node)) {
-      subTreeTextFormat = node.getFormat();
+    if (node !== null && $isTextNode(node)) {
+      if (subTreeTextFormat === null) {
+        subTreeTextFormat = node.getFormat();
+      }
+      if (subTreeTextStyle === '') {
+        subTreeTextStyle = node.getStyle();
+      }
     }
   }
   if ($textContentRequiresDoubleLinebreakAtEnd(element)) {
@@ -356,6 +362,18 @@ function reconcileParagraphFormat(element: ElementNode): void {
     !activeEditorStateReadOnly
   ) {
     element.setTextFormat(subTreeTextFormat);
+    element.setTextStyle(subTreeTextStyle);
+  }
+}
+
+function reconcileParagraphStyle(element: ElementNode): void {
+  if (
+    $isParagraphNode(element) &&
+    subTreeTextStyle !== '' &&
+    subTreeTextStyle !== element.__textStyle &&
+    !activeEditorStateReadOnly
+  ) {
+    element.setTextStyle(subTreeTextStyle);
   }
 }
 
@@ -440,11 +458,12 @@ function $reconcileChildrenWithDirection(
   const previousSubTreeDirectionTextContent = subTreeDirectionedTextContent;
   subTreeDirectionedTextContent = '';
   subTreeTextFormat = null;
+  subTreeTextStyle = '';
   $reconcileChildren(prevElement, nextElement, dom);
   reconcileBlockDirection(nextElement, dom);
   reconcileParagraphFormat(nextElement);
+  reconcileParagraphStyle(nextElement);
   subTreeDirectionedTextContent = previousSubTreeDirectionTextContent;
-  subTreeTextFormat = null;
 }
 
 function createChildrenArray(
@@ -486,8 +505,13 @@ function $reconcileChildren(
       destroyNode(prevFirstChildKey, null);
     }
     const nextChildNode = activeNextNodeMap.get(nextFrstChildKey);
-    if (subTreeTextFormat === null && $isTextNode(nextChildNode)) {
-      subTreeTextFormat = nextChildNode.getFormat();
+    if ($isTextNode(nextChildNode)) {
+      if (subTreeTextFormat === null) {
+        subTreeTextFormat = nextChildNode.getFormat();
+      }
+      if (subTreeTextStyle === '') {
+        subTreeTextStyle = nextChildNode.getStyle();
+      }
     }
   } else {
     const prevChildren = createChildrenArray(prevElement, activePrevNodeMap);
@@ -777,8 +801,13 @@ function $reconcileNodeChildren(
     }
 
     const node = activeNextNodeMap.get(nextKey);
-    if (node !== null && subTreeTextFormat === null && $isTextNode(node)) {
-      subTreeTextFormat = node.getFormat();
+    if (node !== null && $isTextNode(node)) {
+      if (subTreeTextFormat === null) {
+        subTreeTextFormat = node.getFormat();
+      }
+      if (subTreeTextStyle === '') {
+        subTreeTextStyle = node.getStyle();
+      }
     }
   }
 

packages/lexical/src/LexicalUtils.ts

@@ -1751,12 +1751,14 @@ export function $cloneWithProperties<T extends LexicalNode>(latestNode: T): T {
   if ($isElementNode(latestNode) && $isElementNode(mutableNode)) {
     if ($isParagraphNode(latestNode) && $isParagraphNode(mutableNode)) {
       mutableNode.__textFormat = latestNode.__textFormat;
+      mutableNode.__textStyle = latestNode.__textStyle;
     }
     mutableNode.__first = latestNode.__first;
     mutableNode.__last = latestNode.__last;
     mutableNode.__size = latestNode.__size;
     mutableNode.__indent = latestNode.__indent;
     mutableNode.__format = latestNode.__format;
+    mutableNode.__style = latestNode.__style;
     mutableNode.__dir = latestNode.__dir;
   } else if ($isTextNode(latestNode) && $isTextNode(mutableNode)) {
     mutableNode.__format = latestNode.__format;

packages/lexical/src/__tests__/unit/LexicalEditor.test.tsx

@@ -1022,7 +1022,7 @@ describe('LexicalEditor tests', () => {
       editable ? 'editable' : 'non-editable'
     })`, async () => {
       const JSON_EDITOR_STATE =
-        '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"123","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
+        '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"123","type":"text","version":1}],"direction":null,"format":"","indent":0,"type":"paragraph","version":1,"textStyle":""}],"direction":null,"format":"","indent":0,"type":"root","version":1}}';
       init();
       const contentEditable = editor.getRootElement();
       editor.setEditable(editable);
@@ -1188,6 +1188,7 @@ describe('LexicalEditor tests', () => {
           __parent: null,
           __prev: null,
           __size: 1,
+          __style: '',
           __type: 'root',
         });
         expect(paragraph).toEqual({
@@ -1201,7 +1202,9 @@ describe('LexicalEditor tests', () => {
           __parent: 'root',
           __prev: null,
           __size: 0,
+          __style: '',
           __textFormat: 0,
+          __textStyle: '',
           __type: 'paragraph',
         });
       });
@@ -1272,6 +1275,7 @@ describe('LexicalEditor tests', () => {
           __parent: null,
           __prev: null,
           __size: 1,
+          __style: '',
           __type: 'root',
         });
         expect(parsedParagraph).toEqual({
@@ -1285,7 +1289,9 @@ describe('LexicalEditor tests', () => {
           __parent: 'root',
           __prev: null,
           __size: 1,
+          __style: '',
           __textFormat: 0,
+          __textStyle: '',
           __type: 'paragraph',
         });
         expect(parsedText).toEqual({
@@ -1351,6 +1357,7 @@ describe('LexicalEditor tests', () => {
           __parent: null,
           __prev: null,
           __size: 1,
+          __style: '',
           __type: 'root',
         });
         expect(parsedParagraph).toEqual({
@@ -1364,7 +1371,9 @@ describe('LexicalEditor tests', () => {
           __parent: 'root',
           __prev: null,
           __size: 1,
+          __style: '',
           __textFormat: 0,
+          __textStyle: '',
           __type: 'paragraph',
         });
         expect(parsedText).toEqual({

packages/lexical/src/__tests__/unit/LexicalEditorState.test.ts

@@ -62,6 +62,7 @@ describe('LexicalEditorState tests', () => {
         __parent: null,
         __prev: null,
         __size: 1,
+        __style: '',
         __type: 'root',
       });
       expect(paragraph).toEqual({
@@ -75,7 +76,9 @@ describe('LexicalEditorState tests', () => {
         __parent: 'root',
         __prev: null,
         __size: 1,
+        __style: '',
         __textFormat: 0,
+        __textStyle: '',
         __type: 'paragraph',
       });
       expect(text).toEqual({
@@ -110,7 +113,7 @@ describe('LexicalEditorState tests', () => {
       });
 
       expect(JSON.stringify(editor.getEditorState().toJSON())).toEqual(
-        `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Hello world","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1,"textFormat":0}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}`,
+        `{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Hello world","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}`,
       );
     });
 
@@ -145,6 +148,7 @@ describe('LexicalEditorState tests', () => {
               __parent: null,
               __prev: null,
               __size: 0,
+              __style: '',
               __type: 'root',
             },
           ],