Preserve indent and format in $setBlocksType

facebook · Jan 29, 2025 · 9826108 · 9826108
1 parent f28c774
commit 9826108
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 18 deletions.
diff --git a/packages/lexical-selection/src/__tests__/unit/LexicalSelection.test.tsx b/packages/lexical-selection/src/__tests__/unit/LexicalSelection.test.tsx
@@ -3013,15 +3013,17 @@ describe('LexicalSelection tests', () => {
         const root = $getRoot();
         const ul1 = $createListNode('bullet');
         const text1 = $createTextNode('1');
-        const li1 = $createListItemNode().append(text1);
+        const li1 = $createListItemNode();
         const li1_wrapper = $createListItemNode();
         const ul2 = $createListNode('bullet');
         const text1_1 = $createTextNode('1.1');
-        const li1_1 = $createListItemNode().append(text1_1);
-        ul1.append(li1, li1_wrapper);
-        li1_wrapper.append(ul2);
-        ul2.append(li1_1);
-        root.append(ul1);
+        const li1_1 = $createListItemNode();
+        root.append(
+          ul1.append(
+            li1.append(text1),
+            li1_wrapper.append(ul2.append(li1_1.append(text1_1))),
+          ),
+        );
 
         const selection = $createRangeSelection();
         $setSelection(selection);
@@ -3045,7 +3047,7 @@ describe('LexicalSelection tests', () => {
       );
     });
 
-    test('Nested list with listItem twice indented from his father', async () => {
+    test('Nested list with listItem twice indented from its parent', async () => {
       const testEditor = createTestEditor();
       const element = document.createElement('div');
       testEditor.setRootElement(element);
@@ -3056,11 +3058,10 @@ describe('LexicalSelection tests', () => {
         const li1_wrapper = $createListItemNode();
         const ul2 = $createListNode('bullet');
         const text1_1 = $createTextNode('1.1');
-        const li1_1 = $createListItemNode().append(text1_1);
-        ul1.append(li1_wrapper);
-        li1_wrapper.append(ul2);
-        ul2.append(li1_1);
-        root.append(ul1);
+        const li1_1 = $createListItemNode();
+        root.append(
+          ul1.append(li1_wrapper.append(ul2.append(li1_1.append(text1_1)))),
+        );
 
         const selection = $createRangeSelection();
         $setSelection(selection);

diff --git a/packages/lexical-selection/src/index.ts b/packages/lexical-selection/src/index.ts
@@ -15,6 +15,7 @@ import {
   $trimTextContentFromAnchor,
 } from './lexical-node';
 import {
+  $copyBlockFormatIndent,
   $getSelectionStyleValueForProperty,
   $isParentElementRTL,
   $moveCaretSelection,
@@ -47,6 +48,7 @@ export {
 export const trimTextContentFromAnchor = $trimTextContentFromAnchor;
 
 export {
+  $copyBlockFormatIndent,
   $getSelectionStyleValueForProperty,
   $isParentElementRTL,
   $moveCaretSelection,

diff --git a/packages/lexical-selection/src/range-selection.ts b/packages/lexical-selection/src/range-selection.ts
@@ -37,14 +37,33 @@ import invariant from 'shared/invariant';
 
 import {getStyleObjectFromCSS} from './utils';
 
+export function $copyBlockFormatIndent(
+  srcNode: ElementNode,
+  destNode: ElementNode,
+): void {
+  const format = srcNode.getFormatType();
+  const indent = srcNode.getIndent();
+  if (format !== destNode.getFormatType()) {
+    destNode.setFormat(format);
+  }
+  if (indent !== destNode.getIndent()) {
+    destNode.setIndent(indent);
+  }
+}
+
 /**
  * Converts all nodes in the selection that are of one block type to another.
  * @param selection - The selected blocks to be converted.
- * @param createElement - The function that creates the node. eg. $createParagraphNode.
+ * @param $createElement - The function that creates the node. eg. $createParagraphNode.
+ * @param $afterCreateElement - The function that updates the new node based on the previous one ($copyBlockFormatIndent by default)
  */
-export function $setBlocksType(
+export function $setBlocksType<T extends ElementNode>(
   selection: BaseSelection | null,
-  createElement: () => ElementNode,
+  $createElement: () => T,
+  $afterCreateElement: (
+    prevNodeSrc: ElementNode,
+    newNodeDest: T,
+  ) => void = $copyBlockFormatIndent,
 ): void {
   if (selection === null) {
     return;
@@ -73,9 +92,10 @@ export function $setBlocksType(
       blockMap.set(node.getKey(), node);
     }
   }
-  for (const [key, node] of blockMap) {
-    const element = createElement();
-    node.replace(element, true);
+  for (const [key, prevNode] of blockMap) {
+    const element = $createElement();
+    $afterCreateElement(prevNode, element);
+    prevNode.replace(element, true);
     if (newSelection) {
       if (key === newSelection.anchor.key) {
         newSelection.anchor.key = element.getKey();