[lexical][lexical-list] Bug Fix: Style lost on list insertion from empty paragraph

packages/lexical-list/src/formatList.ts

@@ -154,9 +154,14 @@ function $createListOrMerge(node: ElementNode, listType: ListType): ListNode {
     return node;
   }
 
+  const selection = $getSelection();
+  const selectionStyle = $isRangeSelection(selection) ? selection.style : '';
+  const selectionFormat = $isRangeSelection(selection) ? selection.format : 0;
   const previousSibling = node.getPreviousSibling();
   const nextSibling = node.getNextSibling();
   const listItem = $createListItemNode();
+  listItem.setTextStyle(selectionStyle);
+  listItem.setTextFormat(selectionFormat);
   append(listItem, node.getChildren());
 
   let targetList;
@@ -183,6 +188,7 @@ function $createListOrMerge(node: ElementNode, listType: ListType): ListNode {
     node.replace(list);
     targetList = list;
   }
+
   // listItem needs to be attached to root prior to setting indent
   listItem.setFormat(node.getFormatType());
   listItem.setIndent(node.getIndent());

packages/lexical/src/LexicalEvents.ts

@@ -8,7 +8,6 @@
 
 import type {LexicalEditor} from './LexicalEditor';
 import type {NodeKey} from './LexicalNode';
-import type {ElementNode} from './nodes/LexicalElementNode';
 import type {TextNode} from './nodes/LexicalTextNode';
 
 import {
@@ -59,7 +58,6 @@ import {
   KEY_TAB_COMMAND,
   MOVE_TO_END,
   MOVE_TO_START,
-  ParagraphNode,
   PASTE_COMMAND,
   REDO_COMMAND,
   REMOVE_TEXT_COMMAND,
@@ -130,6 +128,7 @@ import {
   isUnderline,
   isUndo,
 } from './LexicalUtils';
+import {ElementNode} from './nodes/LexicalElementNode';
 
 type RootElementRemoveHandles = Array<() => void>;
 type RootElementEvents = Array<
@@ -351,7 +350,7 @@ function onSelectionChange(
             const lastNode = anchor.getNode();
             selection.style = '';
             if (
-              lastNode instanceof ParagraphNode &&
+              lastNode instanceof ElementNode &&
               lastNode.getChildrenSize() === 0
             ) {
               selection.format = lastNode.getTextFormat();

packages/lexical/src/nodes/LexicalElementNode.ts

@@ -17,7 +17,12 @@ import type {
   PointType,
   RangeSelection,
 } from '../LexicalSelection';
-import type {KlassConstructor, LexicalEditor, Spread} from 'lexical';
+import type {
+  KlassConstructor,
+  LexicalEditor,
+  Spread,
+  TextFormatType,
+} from 'lexical';
 
 import {IS_IOS, IS_SAFARI} from 'shared/environment';
 import invariant from 'shared/invariant';
@@ -27,6 +32,7 @@ import {
   DOUBLE_LINE_BREAK,
   ELEMENT_FORMAT_TO_TYPE,
   ELEMENT_TYPE_TO_FORMAT,
+  TEXT_TYPE_TO_FORMAT,
 } from '../LexicalConstants';
 import {LexicalNode} from '../LexicalNode';
 import {
@@ -51,6 +57,8 @@ export type SerializedElementNode<
     direction: 'ltr' | 'rtl' | null;
     format: ElementFormatType;
     indent: number;
+    textStyle: string;
+    textFormat: number;
   },
   SerializedLexicalNode
 >;
@@ -307,6 +315,10 @@ export class ElementNode extends LexicalNode {
   __indent: number;
   /** @internal */
   __dir: 'ltr' | 'rtl' | null;
+  /** @internal */
+  __textStyle: string;
+  /** @internal */
+  __textFormat: number;
 
   constructor(key?: NodeKey) {
     super(key);
@@ -317,6 +329,8 @@ export class ElementNode extends LexicalNode {
     this.__style = '';
     this.__indent = 0;
     this.__dir = null;
+    this.__textStyle = '';
+    this.__textFormat = 0;
   }
 
   afterCloneFrom(prevNode: this) {
@@ -328,6 +342,8 @@ export class ElementNode extends LexicalNode {
     this.__format = prevNode.__format;
     this.__style = prevNode.__style;
     this.__dir = prevNode.__dir;
+    this.__textStyle = prevNode.__textStyle;
+    this.__textFormat = prevNode.__textFormat;
   }
 
   getFormat(): number {
@@ -342,6 +358,14 @@ export class ElementNode extends LexicalNode {
     const self = this.getLatest();
     return self.__style;
   }
+  getTextStyle(): string {
+    const self = this.getLatest();
+    return self.__textStyle;
+  }
+  getTextFormat(): number {
+    const self = this.getLatest();
+    return self.__textFormat;
+  }
   getIndent(): number {
     const self = this.getLatest();
     return self.__indent;
@@ -614,6 +638,21 @@ export class ElementNode extends LexicalNode {
     self.__style = style || '';
     return this;
   }
+  setTextStyle(style: string): this {
+    const self = this.getWritable();
+    self.__textStyle = style || '';
+    return this;
+  }
+  setTextFormat(format: number): this {
+    const self = this.getWritable();
+    self.__textFormat = format;
+    return this;
+  }
+
+  hasTextFormat(type: TextFormatType): boolean {
+    const formatFlag = TEXT_TYPE_TO_FORMAT[type];
+    return (this.getTextFormat() & formatFlag) !== 0;
+  }
   setIndent(indentLevel: number): this {
     const self = this.getWritable();
     self.__indent = indentLevel;
@@ -792,6 +831,8 @@ export class ElementNode extends LexicalNode {
       direction: this.getDirection(),
       format: this.getFormatType(),
       indent: this.getIndent(),
+      textFormat: this.getTextFormat(),
+      textStyle: this.getTextStyle(),
       type: 'element',
       version: 1,
     };

packages/lexical/src/nodes/LexicalParagraphNode.ts

@@ -10,7 +10,6 @@ import type {
   EditorConfig,
   KlassConstructor,
   LexicalEditor,
-  Spread,
 } from '../LexicalEditor';
 import type {
   DOMConversionMap,
@@ -25,7 +24,6 @@ import type {
 } from './LexicalElementNode';
 import type {RangeSelection} from 'lexical';
 
-import {TEXT_TYPE_TO_FORMAT} from '../LexicalConstants';
 import {
   $applyNodeReplacement,
   getCachedClassNameArray,
@@ -36,47 +34,20 @@ import {
 import {ElementNode} from './LexicalElementNode';
 import {$isTextNode, TextFormatType} from './LexicalTextNode';
 
-export type SerializedParagraphNode = Spread<
-  {
-    textFormat: number;
-    textStyle: string;
-  },
-  SerializedElementNode
->;
+export type SerializedParagraphNode = SerializedElementNode;
 
 /** @noInheritDoc */
 export class ParagraphNode extends ElementNode {
   ['constructor']!: KlassConstructor<typeof ParagraphNode>;
-  /** @internal */
-  __textFormat: number;
-  __textStyle: string;
 
   constructor(key?: NodeKey) {
     super(key);
-    this.__textFormat = 0;
-    this.__textStyle = '';
   }
 
   static getType(): string {
     return 'paragraph';
   }
 
-  getTextFormat(): number {
-    const self = this.getLatest();
-    return self.__textFormat;
-  }
-
-  setTextFormat(type: number): this {
-    const self = this.getWritable();
-    self.__textFormat = type;
-    return self;
-  }
-
-  hasTextFormat(type: TextFormatType): boolean {
-    const formatFlag = TEXT_TYPE_TO_FORMAT[type];
-    return (this.getTextFormat() & formatFlag) !== 0;
-  }
-
   /**
    * Returns the format flags applied to the node as a 32-bit integer.
    *
@@ -88,25 +59,12 @@ export class ParagraphNode extends ElementNode {
     return toggleTextFormatType(format, type, alignWithFormat);
   }
 
-  getTextStyle(): string {
-    const self = this.getLatest();
-    return self.__textStyle;
-  }
-
-  setTextStyle(style: string): this {
-    const self = this.getWritable();
-    self.__textStyle = style;
-    return self;
-  }
-
   static clone(node: ParagraphNode): ParagraphNode {
     return new ParagraphNode(node.__key);
   }
 
   afterCloneFrom(prevNode: this) {
     super.afterCloneFrom(prevNode);
-    this.__textFormat = prevNode.__textFormat;
-    this.__textStyle = prevNode.__textStyle;
   }
 
   // View
@@ -171,8 +129,6 @@ export class ParagraphNode extends ElementNode {
   exportJSON(): SerializedParagraphNode {
     return {
       ...super.exportJSON(),
-      textFormat: this.getTextFormat(),
-      textStyle: this.getTextStyle(),
       type: 'paragraph',
       version: 1,
     };

packages/lexical/src/nodes/LexicalRootNode.ts

@@ -111,6 +111,8 @@ export class RootNode extends ElementNode {
       direction: this.getDirection(),
       format: this.getFormatType(),
       indent: this.getIndent(),
+      textFormat: 0,
+      textStyle: '',
       type: 'root',
       version: 1,
     };