enhancement: don't auto scroll when sending cell to top/bottom from menu (#5544)

Author: akshayka

frontend/src/components/editor/actions/useCellActionButton.tsx

@@ -357,13 +357,17 @@ export function useCellActionButtons({ cell }: Props) {
         icon: <ChevronsUpIcon size={13} strokeWidth={1.5} />,
         label: "Send to top",
         hotkey: "cell.sendToTop",
-        handle: () => sendToTop({ cellId }),
+        // When using the cell menu, likely the user doesn't want to scroll
+        // and instead just wants to get the cell out of the way
+        handle: () => sendToTop({ cellId, scroll: false }),
       },
       {
         icon: <ChevronsDownIcon size={13} strokeWidth={1.5} />,
         label: "Send to bottom",
         hotkey: "cell.sendToBottom",
-        handle: () => sendToBottom({ cellId }),
+        // When using the cell menu, likely the user doesn't want to scroll
+        // and instead just wants to get the cell out of the way
+        handle: () => sendToBottom({ cellId, scroll: false }),
       },
       {
         icon: <Columns2Icon size={13} strokeWidth={1.5} />,

frontend/src/core/cells/cells.ts

@@ -450,13 +450,13 @@ const {
     scrollToBottom();
     return state;
   },
-  sendToTop: (state, action: { cellId: CellId }) => {
+  sendToTop: (state, action: { cellId: CellId; scroll?: boolean }) => {
     const column = state.cellIds.findWithId(action.cellId);
     if (column.length === 0) {
       return state;
     }
 
-    const { cellId } = action;
+    const { cellId, scroll = true } = action;
     const cellIndex = column.indexOfOrThrow(cellId);
     if (cellIndex === 0) {
       return state;
@@ -465,16 +465,16 @@ const {
     return {
       ...state,
       cellIds: state.cellIds.moveWithinColumn(column.id, cellIndex, 0),
-      scrollKey: cellId,
+      scrollKey: scroll ? cellId : null,
     };
   },
-  sendToBottom: (state, action: { cellId: CellId }) => {
+  sendToBottom: (state, action: { cellId: CellId; scroll?: boolean }) => {
     const column = state.cellIds.findWithId(action.cellId);
     if (column.length === 0) {
       return state;
     }
 
-    const { cellId } = action;
+    const { cellId, scroll = true } = action;
     const cellIndex = column.indexOfOrThrow(cellId);
     const newIndex = column.length - 1;
 
@@ -485,7 +485,7 @@ const {
     return {
       ...state,
       cellIds: state.cellIds.moveWithinColumn(column.id, cellIndex, newIndex),
-      scrollKey: cellId,
+      scrollKey: scroll ? cellId : null,
     };
   },
   addColumn: (state, action: { columnId: CellColumnId }) => {