temp(key handling with lists)

Author: john-traas

src/components/text-editor/list-functionality-development-log.md

@@ -81,8 +81,80 @@ The implementation will proceed in the following phases:
 - [x] No regression in current list functionality has been introduced
 - [x] Implementation follows the core principles established in implementation plan
 
-### [Date 2]
-*To be filled in as work progresses*
+### [March 26, 2024]
+
+**Fixed List Command Handling and Tests**
+
+- Improved tests for the `list-key-handler.ts` plugin
+  - Fixed test setup to properly use mock DOM environment
+  - Enhanced test cases for Tab and Shift+Tab operations
+  - Improved verification of list structure changes
+
+**Fixed List Command Toggle Behavior**
+
+- Fixed a critical bug in `handleListWithSelection` function in `menu-commands.ts`
+  - Corrected the handling of toggling between different list types (bullet/ordered)
+  - Fixed the issue with toggling list off back to paragraphs
+  - Removed unnecessary attempt to sink list items before checking list type
+
+**Implementation Details**
+- Modified the handling in `handleListWithSelection` to:
+  1. First check if we're already in the target list type, and if so, toggle it off
+  2. Next check if we're in a different list type, and if so, convert between types
+  3. Finally, wrap content in a list if not already in a list
+
+**Verification Checklist**
+- [x] All existing tests now pass after changes
+- [x] No regression in current list functionality has been introduced
+- [x] All tests for list key handling now pass successfully
+- [x] Tests correctly verify list indentation and outdentation behavior
+
+**Next Steps**
+- Implement Enter key handling for proper list item splitting
+- Implement Backspace key handling for joining list items
+- Add comprehensive tests for keyboard interaction in real usage scenarios
+
+### [March 27, 2024]
+
+**Implemented Enhanced Enter Key Behavior for Lists**
+
+- Enhanced the list key handler plugin with improved Enter key behavior:
+  - Splitting list items when Enter is pressed within content
+  - Exiting a list when Enter is pressed in an empty list item
+- Added comprehensive tests for Enter key functionality:
+  - Tests for splitting list items at various positions
+  - Tests for exiting lists when in an empty list item
+- Added the `isEmptyListItem` utility function for detecting empty list items
+
+**Implemented Backspace Key Behavior for Lists**
+
+- Added Backspace key handling to the list key handler plugin:
+  - Joining with previous list item when Backspace is pressed at start of list item
+  - Lifting list item out of the list when Backspace is pressed at start of first item
+  - Preserving regular Backspace behavior elsewhere
+- Added new utility function `isAtStartOfListItem` to detect when cursor is at list item start
+- Added comprehensive tests for Backspace key functionality:
+  - Tests for joining with previous list items
+  - Tests for lifting list items out of lists
+  - Tests for default behavior when not at start of list item
+
+**Implementation Details**
+- Used ProseMirror's built-in commands for optimal functionality:
+  - `splitListItem` for Enter key handling
+  - `joinBackward` and `liftListItem` for Backspace key handling through `chainCommands`
+- Ensured special key combinations (like Shift+Enter) are preserved
+- Added robust testing for edge cases and normal usage patterns
+
+**Verification Checklist**
+- [x] All existing tests continue to pass after changes
+- [x] No regression in current list functionality has been introduced
+- [x] Each key handler properly prevents default browser behavior only when needed
+- [x] All utility functions are properly tested with both positive and negative cases
+
+**Next Steps**
+- Update the prosemirror-adapter to properly register the enhanced list key handler
+- Add Markdown-style list creation with input rules (Phase 2)
+- Implement automatic list continuation when pressing Enter at end of list items (Phase 2)
 
 ### [Date 3]
 *To be filled in as work progresses* 

src/components/text-editor/list-functionality-implementation-plan.md

@@ -24,6 +24,30 @@ In implementing new list features, we must adhere to the following principles:
    - After each change, ensure regression tests pass before proceeding
    - Document any unexpected behaviors or edge cases discovered
 
+## Implementation Plan
+
+The implementation will proceed in the following phases:
+
+### Phase 1: Key Navigation and Manipulation
+
+- [x] Implement Tab/Shift+Tab for indenting/outdenting list items
+- [x] Enhance Enter behavior within lists for proper splitting
+- [x] Improve Backspace behavior at the start of list items for joining
+- [x] Add keyboard shortcuts for bullet and ordered lists
+
+### Phase 2: Automatic List Creation
+
+- [ ] Implement Markdown-style list creation with input rules
+- [ ] Add continue list behavior when pressing Enter at the end of a list item
+- [ ] Support for converting existing text to lists with shortcuts
+
+### Phase 3: List Attributes and Advanced Features
+
+- [ ] Add support for list item numbering options
+- [ ] Implement custom list markers
+- [ ] Enhance nested list styling and behavior
+- [ ] Add ARIA attributes for accessibility
+
 ## Phase 1: Key Navigation and Manipulation
 
 ### 1. Tab/Shift+Tab for Indenting/Outdenting List Items
@@ -146,51 +170,4 @@ In implementing new list features, we must adhere to the following principles:
    - Update the keymap in `MenuCommandFactory.buildKeymap()`
 
 2. **Implementation Details:**
-   ```typescript
-   // In MenuCommandFactory.buildKeymap()
-   buildKeymap() {
-     return {
-       // Existing shortcuts...
-       'Mod-B': this.getCommand(EditorMenuTypes.Bold),
-       'Mod-I': this.getCommand(EditorMenuTypes.Italic),
-       
-       // New list shortcuts
-       'Mod-Shift-8': this.getCommand(EditorMenuTypes.BulletList),
-       'Mod-Shift-9': this.getCommand(EditorMenuTypes.OrderedList),
-       
-       // Rest of existing shortcuts...
-     };
-   }
    ```
-
-3. **Integration:**
-   - Ensure shortcuts work with existing command structure
-   - Add appropriate tests for shortcut functionality
-
-## Phase 1 Integration Plan
-
-1. **New Files to Create:**
-   - `src/components/text-editor/prosemirror-adapter/plugins/list-key-handler.ts` - Key handler plugin for list-specific keys
-   - `src/components/text-editor/prosemirror-adapter/menu/menu-command-utils/list-item-utils.ts` - Utilities for list item operations
-
-2. **Files to Modify:**
-   - `src/components/text-editor/prosemirror-adapter/menu/menu-commands.ts` - Update keyboard shortcuts
-   - `src/components/text-editor/prosemirror-adapter/prosemirror-adapter.ts` - Register the new key handler plugin
-
-3. **Testing Strategy:**
-   - Create comprehensive tests for each key operation
-   - Test edge cases (empty lists, nested lists, etc.)
-   - Ensure existing functionality isn't broken
-
-4. **Expected Challenges:**
-   - Handling cursor position after operations
-   - Managing selection across list boundaries
-   - Ensuring proper nesting of lists
-
-## Next Steps After Phase 1
-
-Once Phase 1 is complete, we'll proceed to:
-
-1. Implement Markdown-style list creation (Phase 2)
-2. Add automatic list continuation (Phase 2)
-3. Enhance list attributes and styling (Phase 3) 

src/components/text-editor/prosemirror-adapter/menu/menu-commands.ts

@@ -278,17 +278,15 @@ const handleListWithSelection = (
 
     // If an ancestor of type list_item is found, attempt to sink that list_item.
     if (ancestorDepth !== null) {
-        if (sinkListItem(listItemType)(state, dispatch)) {
-            return true;
+        // If we're already in this list type, toggle it off (remove the list)
+        if (isInListOfType(state, type)) {
+            return removeListNodes(state, type, schema, dispatch);
         }
-    }
-
-    if (isInListOfType(state, type)) {
-        return removeListNodes(state, type, schema, dispatch);
-    }
 
-    if (otherType && isInListOfType(state, otherType)) {
-        return convertAllListNodes(state, otherType, type, dispatch);
+        // If we're in a different list type, convert from one to the other
+        if (otherType && isInListOfType(state, otherType)) {
+            return convertAllListNodes(state, otherType, type, dispatch);
+        }
     }
 
     const modifiedTr = state.tr.setSelection(new TextSelection($from, $to));

src/components/text-editor/prosemirror-adapter/menu/menu-list-commands.spec.ts

@@ -1,8 +1,8 @@
 /* eslint-disable camelcase */
 import { Schema } from 'prosemirror-model';
 import { EditorState, TextSelection } from 'prosemirror-state';
-import { createListCommand } from '../menu-commands';
-import { EditorMenuTypes } from '../types';
+import { createListCommand } from './menu-commands';
+import { EditorMenuTypes } from './types';
 
 describe('List Commands', () => {
     let schema: Schema;