From 48af095058bcf122f0460493072a1f9c18441cf6 Mon Sep 17 00:00:00 2001
From: Zaki <zakishaheen@users.noreply.github.com>
Date: Wed, 29 Jun 2022 17:35:22 -0700
Subject: [PATCH] Add ability to indent/un-indent multiple list items

---
 packages/nodes/list/src/onKeyDownList.ts      |   1 -
 .../nodes/list/src/onkeyDownList.spec.tsx     | 168 ++++++++++++++++++
 2 files changed, 168 insertions(+), 1 deletion(-)
 create mode 100644 packages/nodes/list/src/onkeyDownList.spec.tsx

diff --git a/packages/nodes/list/src/onKeyDownList.ts b/packages/nodes/list/src/onKeyDownList.ts
index d4e8bed8ab..ab3a72b4af 100644
--- a/packages/nodes/list/src/onKeyDownList.ts
+++ b/packages/nodes/list/src/onKeyDownList.ts
@@ -23,7 +23,6 @@ export const onKeyDownList = <
   if (editor.selection && (isTab || isUntab)) {
     const listSelected = getAboveNode(editor, {
       at: editor.selection,
-      match: { type },
     });
 
     if (listSelected) {
diff --git a/packages/nodes/list/src/onkeyDownList.spec.tsx b/packages/nodes/list/src/onkeyDownList.spec.tsx
new file mode 100644
index 0000000000..15f8da671b
--- /dev/null
+++ b/packages/nodes/list/src/onkeyDownList.spec.tsx
@@ -0,0 +1,168 @@
+/** @jsx jsx */
+
+import { getPlugin, HotkeyPlugin, Hotkeys } from '@udecode/plate-core';
+import { createListPlugin } from '@udecode/plate-list';
+import { jsx } from '@udecode/plate-test-utils';
+import { createPlateUIEditor } from '@udecode/plate-ui/src/utils/createPlateUIEditor';
+import * as isHotkey from 'is-hotkey';
+import { onKeyDownList } from './onKeyDownList';
+
+jsx;
+
+it('should indent single list item', () => {
+  const input = (
+    <editor>
+      <hul>
+        <hli>
+          <hlic>some text</hlic>
+        </hli>
+        <hli>
+          <hlic>
+            <cursor />
+            some text
+          </hlic>
+        </hli>
+      </hul>
+    </editor>
+  ) as any;
+
+  const output = (
+    <editor>
+      <hul>
+        <hli>
+          <hlic>some text</hlic>
+          <hul>
+            <hli>
+              <hlic>
+                <cursor />
+                some text
+              </hlic>
+            </hli>
+          </hul>
+        </hli>
+      </hul>
+    </editor>
+  ) as any;
+
+  const event = new KeyboardEvent('keydown', { key: 'Tab' }) as any;
+  const editor = createPlateUIEditor({
+    editor: input,
+    plugins: [createListPlugin()],
+  });
+
+  onKeyDownList(editor, getPlugin<HotkeyPlugin>(editor, 'ul'))(event as any);
+  expect(editor.children).toEqual(output.children);
+});
+
+it('should indent multiple list items', () => {
+  const input = (
+    <editor>
+      <hul>
+        <hli>
+          <hlic>first element</hlic>
+        </hli>
+        <hli>
+          <hlic>
+            <focus />
+            second element
+          </hlic>
+        </hli>
+        <hli>
+          <hlic>
+            third element <anchor />
+          </hlic>
+        </hli>
+      </hul>
+    </editor>
+  ) as any;
+
+  const output = (
+    <editor>
+      <hul>
+        <hli>
+          <hlic>first element</hlic>
+          <hul>
+            <hli>
+              <hlic>
+                <focus />
+                second element
+              </hlic>
+            </hli>
+            <hli>
+              <hlic>
+                third element <anchor />
+              </hlic>
+            </hli>
+          </hul>
+        </hli>
+      </hul>
+    </editor>
+  ) as any;
+
+  const event = new KeyboardEvent('keydown', { key: 'Tab' }) as any;
+  const editor = createPlateUIEditor({
+    editor: input,
+    plugins: [createListPlugin()],
+  });
+
+  onKeyDownList(editor, getPlugin<HotkeyPlugin>(editor, 'ul'))(event as any);
+  expect(editor.children).toEqual(output.children);
+});
+
+it('should un-indent multiple list items', () => {
+  const input = (
+    <editor>
+      <hul>
+        <hli>
+          <hlic>first element</hlic>
+          <hul>
+            <hli>
+              <hlic>
+                <focus />
+                second element
+              </hlic>
+            </hli>
+            <hli>
+              <hlic>
+                third element <anchor />
+              </hlic>
+            </hli>
+          </hul>
+        </hli>
+      </hul>
+    </editor>
+  ) as any;
+
+  const output = (
+    <editor>
+      <hul>
+        <hli>
+          <hlic>first element</hlic>
+        </hli>
+        <hli>
+          <hlic>
+            <focus />
+            second element
+          </hlic>
+        </hli>
+        <hli>
+          <hlic>
+            third element <anchor />
+          </hlic>
+        </hli>
+      </hul>
+    </editor>
+  ) as any;
+
+  const event = new KeyboardEvent('keydown', {
+    shiftKey: true,
+    key: 'Tab',
+  }) as any;
+  const editor = createPlateUIEditor({
+    editor: input,
+    plugins: [createListPlugin()],
+  });
+
+  onKeyDownList(editor, getPlugin<HotkeyPlugin>(editor, 'ul'))(event as any);
+  expect(editor.children).toEqual(output.children);
+});