Add ability to indent/un-indent multiple list items

udecode · Jun 30, 2022 · 48af095 · 48af095
1 parent ebe0ab6
commit 48af095
Show file tree

Hide file tree

Showing 2 changed files with 168 additions and 1 deletion.
diff --git 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
@@ -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);
+});