Fix list delete forward

packages/common/src/queries/isSelectionAtBlockEnd.ts

@@ -5,8 +5,8 @@ import { isEnd } from './isEnd';
 /**
  * Is the selection focus at the end of its parent block.
  */
-export const isSelectionAtBlockEnd = (editor: TEditor) => {
+export const isSelectionAtBlockEnd = (editor: TEditor): boolean => {
   const path = getBlockAbove(editor)?.[1];
 
-  return path && isEnd(editor, editor.selection?.focus, path);
+  return !!path && isEnd(editor, editor.selection?.focus, path);
 };

packages/elements/list/src/getListDeleteForward.ts

@@ -0,0 +1,100 @@
+import {
+  deleteFragment,
+  getAbove,
+  getChildren,
+  getNode,
+  isLastChild,
+  isSelectionAtBlockEnd,
+} from '@udecode/plate-common';
+import {
+  getPlatePluginOptions,
+  SPEditor,
+  TDescendant,
+} from '@udecode/plate-core';
+import { Editor, Node, Path } from 'slate';
+import { getListItemEntry } from './queries';
+import {moveListItemsToList, removeFirstListItem, removeListItem} from './transforms';
+import { ELEMENT_LI, ELEMENT_UL } from './defaults';
+import { getLastChild } from '../../../common/src';
+
+export const getListDeleteForward = (
+  editor: SPEditor,
+  unit: 'character' | 'word' | 'line' | 'block'
+) => {
+  // at next child
+  const res = getListItemEntry(editor, {});
+  // next lic
+
+  let moved: boolean | undefined = false;
+  if (!isSelectionAtBlockEnd(editor) || !res) {
+    return moved;
+  }
+
+  Editor.withoutNormalizing(editor, () => {
+    let { list, listItem } = res;
+
+    const nestedListPath = Path.next([...listItem[1], 0]);
+    const nestedList = getNode<TDescendant>(editor, nestedListPath);
+    if (nestedList) {
+      list = [nestedList, nestedListPath];
+      listItem = getChildren([nestedList, nestedListPath])[0];
+    } else if (getLastChild(list)?.[1] === listItem[1]) {
+      return;
+    }
+
+    moved = removeFirstListItem(editor, {
+      list: list,
+      listItem: listItem,
+    });
+    if (moved) return;
+
+    moved = removeListItem(editor, {
+      list: list,
+      listItem: listItem,
+    });
+    if (moved) return;
+
+    deleteFragment(editor, { unit });
+
+    const li = getPlatePluginOptions(editor, ELEMENT_LI);
+    const lisWithSiblings = Array.from(
+      Editor.nodes(editor, {
+        at: listItem[1],
+        mode: 'lowest',
+        match: (node: TDescendant, path) => {
+          if (path.length === 0) {
+            return false;
+          }
+
+          const isNodeLi = node.type === li.type;
+          const isSiblingOfNodeLi =
+            (getNode(editor, Path.next(path)) as TDescendant)?.type === li.type;
+
+          return isNodeLi && isSiblingOfNodeLi;
+        },
+      })
+    );
+
+    const nextListItemPath = Path.next(lisWithSiblings[0][1]);
+    const nextListItem = getNode(editor, nextListItemPath) as TDescendant;
+    const nextList = getAbove<TDescendant>(editor, {
+      mode: 'lowest',
+      at: nextListItemPath,
+      match: {
+        type: getPlatePluginOptions(editor, ELEMENT_UL).type,
+      },
+    })!;
+
+    // If it's the first li, move the sublist to the parent list
+    moved = !!moveListItemsToList(editor, {
+      fromListItem: [nextListItem, nextListItemPath],
+      toList: list,
+      toListIndex: 1,
+    });
+    if (moved) return;
+
+    moved = true;
+  });
+
+  return moved;
+};

packages/elements/list/src/getListOnKeyDown.ts

@@ -22,7 +22,7 @@ export const getListOnKeyDown = (
 
     if (listSelected) {
       e.preventDefault();
-      moveListItems(editor, !e.shiftKey);
+      moveListItems(editor, { increase: !e.shiftKey });
       return;
     }
   }

packages/elements/list/src/transforms/indentListItems.ts

@@ -2,5 +2,5 @@ import { SPEditor } from '@udecode/plate-core';
 import { moveListItems } from './moveListItems';
 
 export const indentListItems = (editor: SPEditor) => {
-  moveListItems(editor, true);
+  moveListItems(editor, { increase: true });
 };

packages/elements/list/src/transforms/moveListItems.ts

@@ -5,11 +5,23 @@ import { ELEMENT_LIC } from '../defaults';
 import { isListNested } from '../queries/isListNested';
 import { moveListItemDown } from './moveListItemDown';
 import { moveListItemUp } from './moveListItemUp';
+import { EditorNodesOptions } from '@udecode/plate-common/src';
 
-export const moveListItems = (editor: SPEditor, increase = true) => {
+export type MoveListItemsOptions = {
+  increase?: boolean;
+  at?: EditorNodesOptions['at'];
+};
+
+export const moveListItems = (
+  editor: SPEditor,
+  {
+    increase = true,
+    at = editor.selection ?? undefined,
+  }: MoveListItemsOptions = {}
+) => {
   // Get the selected lic
   const [...lics] = getNodes(editor, {
-    at: editor.selection!,
+    at,
     match: {
       type: getPlatePluginType(editor, ELEMENT_LIC),
     },

packages/elements/list/src/transforms/unindentListItems.ts

@@ -1,6 +1,9 @@
 import { SPEditor } from '@udecode/plate-core';
-import { moveListItems } from './moveListItems';
+import { moveListItems, MoveListItemsOptions } from './moveListItems';
 
-export const unindentListItems = (editor: SPEditor) => {
-  moveListItems(editor, false);
-};
+export type UnindentListItemsOptions = Omit<MoveListItemsOptions, 'increase'>;
+
+export const unindentListItems = (
+  editor: SPEditor,
+  options: UnindentListItemsOptions = {}
+): void => moveListItems(editor, { ...options, increase: false });

packages/elements/list/src/withList.spec.tsx

@@ -31,6 +31,17 @@ const testDeleteBackward = (input: any, expected: any) => {
   expect(editor.children).toEqual(expected.children);
 };
 
+const testDeleteForward = (input: any, expected: any) => {
+  const editor = createEditorPlugins({
+    editor: input,
+    plugins: [createParagraphPlugin(), createListPlugin()],
+  });
+
+  editor.deleteForward('character');
+
+  expect(editor.children).toEqual(expected.children);
+};
+
 describe('withList', () => {
   describe('normalizeList', () => {
     describe('when there is no lic in li', () => {
@@ -303,4 +314,182 @@ describe('withList', () => {
       });
     });
   });
+
+  describe('when deleteForward at block end', () => {
+    it('should merge the next element when last child', () => {
+      const input = ((
+        <editor>
+          <hul>
+            <hli>
+              <hlic>
+                level 1<cursor />
+              </hlic>
+            </hli>
+          </hul>
+          <hul>
+            <hli>
+              <hlic>level 2</hlic>
+            </hli>
+          </hul>
+        </editor>
+      ) as any) as Editor;
+
+      const expected = ((
+        <editor>
+          <hul>
+            <hli>
+              <hlic>
+                level 1
+                <cursor />
+                level 2
+              </hlic>
+            </hli>
+          </hul>
+        </editor>
+      ) as any) as Editor;
+
+      testDeleteForward(input, expected);
+    });
+
+    it('should merge next sibling li', () => {
+      const input = ((
+        <editor>
+          <hul>
+            <hli>
+              <hlic>
+                level 1<cursor />
+              </hlic>
+            </hli>
+            <hli>
+              <hlic>level 2</hlic>
+            </hli>
+          </hul>
+        </editor>
+      ) as any) as Editor;
+
+      const expected = ((
+        <editor>
+          <hul>
+            <hli>
+              <hlic>
+                level 1
+                <cursor />
+                level 2
+              </hlic>
+            </hli>
+          </hul>
+        </editor>
+      ) as any) as Editor;
+
+      testDeleteForward(input, expected);
+    });
+
+    it('should merge next li and shift one level up', () => {
+      const input = ((
+        <editor>
+          <hul>
+            <hli>
+              <hlic>level 1</hlic>
+              <hul>
+                <hli>
+                  <hlic>
+                    level 2<cursor />
+                  </hlic>
+                </hli>
+              </hul>
+            </hli>
+            <hli>
+              <hlic>level 3</hlic>
+              <hul>
+                <hli>
+                  <hlic>level 4</hlic>
+                </hli>
+              </hul>
+            </hli>
+          </hul>
+        </editor>
+      ) as any) as Editor;
+
+      const expected = ((
+        <editor>
+          <hul>
+            <hli>
+              <hlic>level 1</hlic>
+              <hul>
+                <hli>
+                  <hlic>level 2level 3</hlic>
+                </hli>
+              </hul>
+            </hli>
+            <hli>
+              <hlic>level 4</hlic>
+            </hli>
+          </hul>
+        </editor>
+      ) as any) as Editor;
+
+      testDeleteForward(input, expected);
+    });
+
+    it('should shift all nested lists one level up', () => {
+      const input = ((
+        <editor>
+          <hul>
+            <hli>
+              <hlic>
+                level 1<cursor />
+              </hlic>
+              <hul>
+                <hli>
+                  <hlic>level 2</hlic>
+                  <hul>
+                    <hli>
+                      <hlic>level 3</hlic>
+                      <hul>
+                        <hli>
+                          <hlic>level 4</hlic>
+                        </hli>
+                      </hul>
+                    </hli>
+                    <hli>
+                      <hlic>level 5</hlic>
+                    </hli>
+                  </hul>
+                </hli>
+              </hul>
+            </hli>
+          </hul>
+        </editor>
+      ) as any) as Editor;
+
+      const expected = ((
+        <editor>
+          <hul>
+            <hli>
+              <hlic>
+                level 1
+                <cursor />
+                level 2
+              </hlic>
+              <hul>
+                <hli>
+                  <hlic>level 3</hlic>
+                  <hul>
+                    <hli>
+                      <hlic>level 4</hlic>
+                    </hli>
+                  </hul>
+                </hli>
+                <hli>
+                  <hlic>level 5</hlic>
+                </hli>
+              </hul>
+            </hli>
+          </hul>
+        </editor>
+      ) as any) as Editor;
+
+      testDeleteForward(input, expected);
+    });
+  });
 });