temp 3

Author: john-traas

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

@@ -1,14 +1,7 @@
 /* eslint-disable no-console */
 import { toggleMark, setBlockType, wrapIn, lift } from 'prosemirror-commands';
-import {
-    Schema,
-    MarkType,
-    NodeType,
-    Attrs,
-    Node,
-    Fragment,
-} from 'prosemirror-model';
-
+import { Schema, MarkType, NodeType, Attrs, Fragment } from 'prosemirror-model';
+import { wrapInList } from 'prosemirror-schema-list';
 import { findWrapping, liftTarget } from 'prosemirror-transform';
 import {
     Command,
@@ -340,40 +333,6 @@ const removeListNodes = (state, targetType, schema, dispatch) => {
     return changed;
 };
 
-const toggleList = (listType) => {
-    return (state, dispatch) => {
-        const { $from, $to } = state.selection;
-        const range = $from.blockRange($to);
-
-        if (!range) {
-            return false;
-        }
-
-        const wrapping = range && findWrapping(range, listType);
-
-        if (wrapping) {
-            // Wrap the selection in a list
-            if (dispatch) {
-                dispatch(state.tr.wrap(range, wrapping).scrollIntoView());
-            }
-
-            return true;
-        } else {
-            // Check if we are in a list item and lift out of the list
-            const liftRange = range && liftTarget(range);
-            if (liftRange !== null) {
-                if (dispatch) {
-                    dispatch(state.tr.lift(range, liftRange).scrollIntoView());
-                }
-
-                return true;
-            }
-
-            return false;
-        }
-    };
-};
-
 const isInListOfType = (state: EditorState, listType: NodeType): boolean => {
     const { $from } = state.selection;
     for (let depth = $from.depth; depth > 0; depth--) {
@@ -395,12 +354,10 @@ const LIST_TYPES = [
 type ListType = (typeof LIST_TYPES)[number];
 
 const getOtherListType = (schema: Schema, currentType: string): NodeType => {
-    // Validate current type is a valid list type
     if (!LIST_TYPES.includes(currentType as ListType)) {
         console.error(`Invalid list type: ${currentType}`);
     }
 
-    // Find the other list type
     const otherType = LIST_TYPES.find((type) => type !== currentType);
 
     if (!otherType || !schema.nodes[otherType]) {
@@ -410,13 +367,48 @@ const getOtherListType = (schema: Schema, currentType: string): NodeType => {
     return schema.nodes[otherType];
 };
 
+const fromOrderedToBulletList = (fromType: NodeType, toType: NodeType) => {
+    return (
+        fromType.name === EditorMenuTypes.OrderedList &&
+        toType.name === EditorMenuTypes.BulletList
+    );
+};
+
+const fromBulletToOrderedList = (fromType: NodeType, toType: NodeType) => {
+    return (
+        fromType.name === EditorMenuTypes.BulletList &&
+        toType.name === EditorMenuTypes.OrderedList
+    );
+};
+
+/**
+ * Returns the converted attributes for a list node when converting from one type to another.
+ *
+ * @param NodeType - fromType - The current list type.
+ * @param NodeType - toType - The target list type.
+ * @param Object - attrs - The current attributes.
+ * @returns Object - The updated attributes.
+ */
+const convertAttributes = (fromType, toType, attrs) => {
+    const newAttrs = { ...attrs };
+    if (fromOrderedToBulletList(fromType, toType)) {
+        // Bullet lists generally do not need an "order" attribute.
+        delete newAttrs.order;
+    } else if (fromBulletToOrderedList(fromType, toType)) {
+        // For ordered lists, set a default start if not present.
+        newAttrs.order = newAttrs.order || 1;
+    }
+
+    return newAttrs;
+};
+
 /**
  * Iterates through all list nodes (including nested ones) in the selection
  * and converts each node from one type to another.
  *
  * This helper also handles attribute conversion:
- * - When converting from an ordered list to a bullet list, attributes like `order` are removed.
- * - When converting from a bullet list to an ordered list, you can set a default start (e.g. 1).
+ * - When converting from an ordered list to a bullet list, attributes like "order" are removed.
+ * - When converting from a bullet list to an ordered list, a default start (1) is set if not present.
  *
  * @param EditorState - state - The current editor state.
  * @param NodeType - fromType - The list node type to convert from.
@@ -433,26 +425,11 @@ const convertAllListNodes = (state, fromType, toType, dispatch) => {
         state.selection.to,
         (node, pos) => {
             if (node.type === fromType) {
-                // Create new attributes by copying the current ones
-                const newAttrs = { ...node.attrs };
-
-                // Handle attribute differences:
-                if (
-                    fromType.name === 'ordered_list' &&
-                    toType.name === 'bullet_list'
-                ) {
-                    // Bullet lists generally do not need an "order" attribute
-                    delete newAttrs.order;
-                } else if (
-                    fromType.name === 'bullet_list' &&
-                    toType.name === 'ordered_list'
-                ) {
-                    // For ordered lists, set a default start if not present
-                    newAttrs.order = newAttrs.order || 1;
-                }
-                // You can add more attribute merging logic here if needed.
-
-                // Replace the current list node with one of the target type
+                const newAttrs = convertAttributes(
+                    fromType,
+                    toType,
+                    node.attrs,
+                );
                 const newNode = toType.create(
                     newAttrs,
                     node.content,
@@ -461,8 +438,7 @@ const convertAllListNodes = (state, fromType, toType, dispatch) => {
                 tr = tr.replaceWith(pos, pos + node.nodeSize, newNode);
                 converted = true;
 
-                // Skip the subtree to avoid reprocessing nested nodes already converted.
-                return false;
+                return false; // Skip the subtree.
             }
 
             return true;
@@ -476,26 +452,57 @@ const convertAllListNodes = (state, fromType, toType, dispatch) => {
     return converted;
 };
 
+/**
+ * Adjusts the current selection to include only fully selected blocks.
+ *
+ * @param EditorState - state - The current editor state.
+ * @returns Object - An object with properties "from" and "to" representing
+ *   the new selection boundaries.
+ */
+const adjustSelectionToFullBlocks = (state) => {
+    const { $from, $to } = state.selection;
+    // If the selection start is at the beginning of its block, keep it.
+    // Otherwise, move to the end of that block (i.e. skip the partial block).
+    const from = $from.pos === $from.start() ? $from.pos : $from.end();
+    // Similarly, if the selection end is at the end of its block, keep it.
+    // Otherwise, use the start of that block.
+    const to = $to.pos === $to.end() ? $to.pos : $to.start();
+
+    return { from: from, to: to };
+};
+
 export const createListCommand = (schema, listTypeName) => {
     const type = schema.nodes[listTypeName];
     if (!type) {
         throw new Error(`List type "${listTypeName}" not found in schema`);
     }
 
     const command = (state, dispatch) => {
-        // (a) If selection is already in the target list type, remove the list.
+        // If selection is already in the target list type, remove the list.
         if (isInListOfType(state, type)) {
             return removeListNodes(state, type, schema, dispatch);
         }
 
-        // (b) If the selection is in the "other" list type, convert it.
-        const otherType = getOtherListType(schema, listTypeName);
-        if (otherType && isInListOfType(state, otherType)) {
-            return convertAllListNodes(state, otherType, type, dispatch);
+        // If the selection is in another list type, convert it.
+        const isOtherListType = getOtherListType(schema, listTypeName);
+        if (isOtherListType && isInListOfType(state, isOtherListType)) {
+            return convertAllListNodes(state, isOtherListType, type, dispatch);
+        }
+
+        // Adjust the selection to include only fully selected blocks.
+        const { from, to } = adjustSelectionToFullBlocks(state);
+        if (from >= to) {
+            return false;
         }
 
-        // (c) Otherwise, wrap the selection in the target list type.
-        return toggleList(type)(state, dispatch);
+        // Create a new transaction with the adjusted selection.
+        const adjustedTr = state.tr.setSelection(
+            new TextSelection(state.doc.resolve(from), state.doc.resolve(to)),
+        );
+        // Apply the transaction to get a new state.
+        const newState = state.apply(adjustedTr);
+
+        return wrapInList(type)(newState, dispatch);
     };
 
     command.active = (state) => {