Lexical: Improved list tab handling, Improved test utils

ssddanbrown · ssddanbrown · commit ace8af077dfa · 2024-12-17T14:44:10.000Z
- Made tab work on empty list items
- Improved select preservation on single list item tab
- Altered test context creation for more standard testing
diff --git a/resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts b/resources/js/wysiwyg/lexical/core/__tests__/utils/index.ts
@@ -472,16 +472,34 @@ export function createTestHeadlessEditor(
   });
 }
 
-export function createTestContext(env: TestEnv): EditorUiContext {
+export function createTestContext(): EditorUiContext {
+
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+
+  const scrollWrap = document.createElement('div');
+  const editorDOM = document.createElement('div');
+  editorDOM.setAttribute('contenteditable', 'true');
+
+  scrollWrap.append(editorDOM);
+  container.append(scrollWrap);
+
+  const editor = createTestEditor({
+    namespace: 'testing',
+    theme: {},
+  });
+
+  editor.setRootElement(editorDOM);
+
   const context = {
-    containerDOM: document.createElement('div'),
-    editor: env.editor,
-    editorDOM: document.createElement('div'),
+    containerDOM: container,
+    editor: editor,
+    editorDOM: editorDOM,
     error(text: string | Error): void {
     },
     manager: new EditorUIManager(),
     options: {},
-    scrollDOM: document.createElement('div'),
+    scrollDOM: scrollWrap,
     translate(text: string): string {
       return "";
     }
@@ -492,6 +510,10 @@ export function createTestContext(env: TestEnv): EditorUiContext {
   return context;
 }
 
+export function destroyFromContext(context: EditorUiContext) {
+  context.containerDOM.remove();
+}
+
 export function $assertRangeSelection(selection: unknown): RangeSelection {
   if (!$isRangeSelection(selection)) {
     throw new Error(`Expected RangeSelection, got ${selection}`);
diff --git a/resources/js/wysiwyg/services/__tests__/keyboard-handling.test.ts b/resources/js/wysiwyg/services/__tests__/keyboard-handling.test.ts
@@ -1,95 +1,135 @@
 import {
-    createTestContext,
+    createTestContext, destroyFromContext,
     dispatchKeydownEventForNode,
     dispatchKeydownEventForSelectedNode,
-    initializeUnitTest
 } from "lexical/__tests__/utils";
 import {
     $createParagraphNode, $createTextNode,
-    $getRoot, LexicalNode,
-    ParagraphNode,
+    $getRoot, $getSelection, LexicalEditor, LexicalNode,
+    ParagraphNode, TextNode,
 } from "lexical";
 import {$createDetailsNode, DetailsNode} from "@lexical/rich-text/LexicalDetailsNode";
 import {registerKeyboardHandling} from "../keyboard-handling";
 import {registerRichText} from "@lexical/rich-text";
+import {EditorUiContext} from "../../ui/framework/core";
+import {$createListItemNode, $createListNode, ListItemNode, ListNode} from "@lexical/list";
 
 describe('Keyboard-handling service tests', () => {
-    initializeUnitTest((testEnv) => {
 
-        test('Details: down key on last lines creates new sibling node', () => {
-            const {editor} = testEnv;
+    let context!: EditorUiContext;
+    let editor!: LexicalEditor;
 
-            registerRichText(editor);
-            registerKeyboardHandling(createTestContext(testEnv));
+    beforeEach(() => {
+        context = createTestContext();
+        editor = context.editor;
+        registerRichText(editor);
+        registerKeyboardHandling(context);
+    });
 
-            let lastRootChild!: LexicalNode|null;
-            let detailsPara!: ParagraphNode;
+    afterEach(() => {
+        destroyFromContext(context);
+    });
 
-            editor.updateAndCommit(() => {
-                const root = $getRoot()
-                const details = $createDetailsNode();
-                detailsPara = $createParagraphNode();
-                details.append(detailsPara);
-                $getRoot().append(details);
-                detailsPara.select();
+    test('Details: down key on last lines creates new sibling node', () => {
+        let lastRootChild!: LexicalNode|null;
+        let detailsPara!: ParagraphNode;
 
-                lastRootChild = root.getLastChild();
-            });
+        editor.updateAndCommit(() => {
+            const root = $getRoot()
+            const details = $createDetailsNode();
+            detailsPara = $createParagraphNode();
+            details.append(detailsPara);
+            $getRoot().append(details);
+            detailsPara.select();
 
-            expect(lastRootChild).toBeInstanceOf(DetailsNode);
+            lastRootChild = root.getLastChild();
+        });
 
-            dispatchKeydownEventForNode(detailsPara, editor, 'ArrowDown');
-            editor.commitUpdates();
+        expect(lastRootChild).toBeInstanceOf(DetailsNode);
 
-            editor.getEditorState().read(() => {
-                lastRootChild = $getRoot().getLastChild();
-            });
+        dispatchKeydownEventForNode(detailsPara, editor, 'ArrowDown');
+        editor.commitUpdates();
 
-            expect(lastRootChild).toBeInstanceOf(ParagraphNode);
+        editor.getEditorState().read(() => {
+            lastRootChild = $getRoot().getLastChild();
         });
 
-        test('Details: enter on last empy block creates new sibling node', () => {
-            const {editor} = testEnv;
+        expect(lastRootChild).toBeInstanceOf(ParagraphNode);
+    });
+
+    test('Details: enter on last empty block creates new sibling node', () => {
+        registerRichText(editor);
+
+        let lastRootChild!: LexicalNode|null;
+        let detailsPara!: ParagraphNode;
 
-            registerRichText(editor);
-            registerKeyboardHandling(createTestContext(testEnv));
+        editor.updateAndCommit(() => {
+            const root = $getRoot()
+            const details = $createDetailsNode();
+            const text = $createTextNode('Hello!');
+            detailsPara = $createParagraphNode();
+            detailsPara.append(text);
+            details.append(detailsPara);
+            $getRoot().append(details);
+            text.selectEnd();
 
-            let lastRootChild!: LexicalNode|null;
-            let detailsPara!: ParagraphNode;
+            lastRootChild = root.getLastChild();
+        });
+
+        expect(lastRootChild).toBeInstanceOf(DetailsNode);
+
+        dispatchKeydownEventForNode(detailsPara, editor, 'Enter');
+        editor.commitUpdates();
 
-            editor.updateAndCommit(() => {
-                const root = $getRoot()
-                const details = $createDetailsNode();
-                const text = $createTextNode('Hello!');
-                detailsPara = $createParagraphNode();
-                detailsPara.append(text);
-                details.append(detailsPara);
-                $getRoot().append(details);
-                text.selectEnd();
+        dispatchKeydownEventForSelectedNode(editor, 'Enter');
+        editor.commitUpdates();
 
-                lastRootChild = root.getLastChild();
-            });
+        let detailsChildren!: LexicalNode[];
+        let lastDetailsText!: string;
 
-            expect(lastRootChild).toBeInstanceOf(DetailsNode);
+        editor.getEditorState().read(() => {
+            detailsChildren = (lastRootChild as DetailsNode).getChildren();
+            lastRootChild = $getRoot().getLastChild();
+            lastDetailsText = detailsChildren[0].getTextContent();
+        });
 
-            dispatchKeydownEventForNode(detailsPara, editor, 'Enter');
-            editor.commitUpdates();
+        expect(lastRootChild).toBeInstanceOf(ParagraphNode);
+        expect(detailsChildren).toHaveLength(1);
+        expect(lastDetailsText).toBe('Hello!');
+    });
 
-            dispatchKeydownEventForSelectedNode(editor, 'Enter');
-            editor.commitUpdates();
+    test('Lists: tab on empty list item insets item', () => {
 
-            let detailsChildren!: LexicalNode[];
-            let lastDetailsText!: string;
+        let list!: ListNode;
+        let listItemB!: ListItemNode;
 
-            editor.getEditorState().read(() => {
-                detailsChildren = (lastRootChild as DetailsNode).getChildren();
-                lastRootChild = $getRoot().getLastChild();
-                lastDetailsText = detailsChildren[0].getTextContent();
-            });
+        editor.updateAndCommit(() => {
+            const root = $getRoot();
+            list = $createListNode('bullet');
+            const listItemA = $createListItemNode();
+            listItemA.append($createTextNode('Hello!'));
+            listItemB = $createListItemNode();
+            list.append(listItemA, listItemB);
+            root.append(list);
+            listItemB.selectStart();
+        });
 
-            expect(lastRootChild).toBeInstanceOf(ParagraphNode);
-            expect(detailsChildren).toHaveLength(1);
-            expect(lastDetailsText).toBe('Hello!');
+        dispatchKeydownEventForNode(listItemB, editor, 'Tab');
+        editor.commitUpdates();
+
+        editor.getEditorState().read(() => {
+            const list = $getRoot().getChildren()[0] as ListNode;
+            const listChild = list.getChildren()[0] as ListItemNode;
+            const children = listChild.getChildren();
+            expect(children).toHaveLength(2);
+            expect(children[0]).toBeInstanceOf(TextNode);
+            expect(children[0].getTextContent()).toBe('Hello!');
+            expect(children[1]).toBeInstanceOf(ListNode);
+
+            const innerList = children[1] as ListNode;
+            const selectedNode = $getSelection()?.getNodes()[0];
+            expect(selectedNode).toBeInstanceOf(ListItemNode);
+            expect(selectedNode?.getKey()).toBe(innerList.getChildren()[0].getKey());
         });
     });
 });
diff --git a/resources/js/wysiwyg/services/keyboard-handling.ts b/resources/js/wysiwyg/services/keyboard-handling.ts
@@ -151,6 +151,15 @@ function getDetailsScenario(editor: LexicalEditor): {
     }
 }
 
+function $isSingleListItem(nodes: LexicalNode[]): boolean {
+    if (nodes.length !== 1) {
+        return false;
+    }
+
+    const node = nodes[0];
+    return $isListItemNode(node) || $isListItemNode(node.getParent());
+}
+
 /**
  * Inset the nodes within selection when a range of nodes is selected
  * or if a list node is selected.
@@ -159,7 +168,7 @@ function handleInsetOnTab(editor: LexicalEditor, event: KeyboardEvent|null): boo
     const change = event?.shiftKey ? -40 : 40;
     const selection = $getSelection();
     const nodes = selection?.getNodes() || [];
-    if (nodes.length > 1 || (nodes.length === 1 && $isListItemNode(nodes[0].getParent()))) {
+    if (nodes.length > 1 || $isSingleListItem(nodes)) {
         editor.update(() => {
             $setInsetForSelection(editor, change);
         });
diff --git a/resources/js/wysiwyg/utils/lists.ts b/resources/js/wysiwyg/utils/lists.ts
@@ -1,4 +1,4 @@
-import {$getSelection, BaseSelection, LexicalEditor} from "lexical";
+import {$createTextNode, $getSelection, BaseSelection, LexicalEditor, TextNode} from "lexical";
 import {$getBlockElementNodesInSelection, $selectNodes, $toggleSelection} from "./selection";
 import {nodeHasInset} from "./nodes";
 import {$createListItemNode, $createListNode, $isListItemNode, $isListNode, ListItemNode} from "@lexical/list";
@@ -93,6 +93,7 @@ function $reduceDedupeListItems(listItems: (ListItemNode|null)[]): ListItemNode[
 
 export function $setInsetForSelection(editor: LexicalEditor, change: number): void {
     const selection = $getSelection();
+    const selectionBounds = selection?.getStartEndPoints();
     const listItemsInSelection = getListItemsForSelection(selection);
     const isListSelection = listItemsInSelection.length > 0 && !listItemsInSelection.includes(null);
 
@@ -110,7 +111,19 @@ export function $setInsetForSelection(editor: LexicalEditor, change: number): vo
             alteredListItems.reverse();
         }
 
-        $selectNodes(alteredListItems);
+        if (alteredListItems.length === 1 && selectionBounds) {
+            // Retain selection range if moving just one item
+            const listItem = alteredListItems[0] as ListItemNode;
+            let child = listItem.getChildren()[0] as TextNode;
+            if (!child) {
+                child = $createTextNode('');
+                listItem.append(child);
+            }
+            child.select(selectionBounds[0].offset, selectionBounds[1].offset);
+        } else {
+            $selectNodes(alteredListItems);
+        }
+
         return;
     }
 
