fix: allow select on table cells (#5565)

## 📝 Summary

<!--
Provide a concise summary of what this pull request is addressing.

If this PR fixes any issues, list them here by number (e.g., Fixes
#123).
-->


https://github.com/user-attachments/assets/92337c8d-1250-4bc1-92b4-e3291f3fae5b

## 🔍 Description of Changes

<!--
Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->

## 📋 Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] I have added tests for the changes made.
- [ ] I have run the code and verified that it works as expected.

## 📜 Reviewers

<!--
Tag potential reviewers from the community or maintainers who might be
interested in reviewing this pull request.

Your PR will be reviewed more quickly if you can figure out the right
person to tag with @

@mscolnick (General, AI)
@dmadisetti (Runtime, Caching, Fileformat, AST)
@manzt (Widgets, Dependency Management, LSP)
@Light2Dark (Tables, Plots, Layouts, SQL)
@akshayka (Public API, Dependencies, UX/Styling, Backend, Docs,
Integrations)
 -->

Author: Light2Dark

frontend/src/components/data-table/range-focus/__tests__/atoms.test.ts

@@ -1,7 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import type { Cell, Row, Table } from "@tanstack/react-table";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { visibleForTesting } from "../atoms";
 
 // Mock dependencies
@@ -406,6 +406,11 @@ describe("cell selection atoms", () => {
       vi.mocked(getCellValues).mockReturnValue("mocked cell values");
     });
 
+    afterEach(() => {
+      // Clear text selection
+      window.getSelection = vi.fn().mockReturnValue(null);
+    });
+
     it("should copy selected cells and call onCopyComplete", () => {
       const selectedCells = new Set(["row1_col1", "row1_col2"]);
       const onCopyComplete = vi.fn();
@@ -423,6 +428,29 @@ describe("cell selection atoms", () => {
       expect(onCopyComplete).toHaveBeenCalledWith();
       expect(state.copiedCells).toEqual(selectedCells);
     });
+
+    it("should not copy if there is text selection", () => {
+      const selectedCells = new Set(["row1_col1", "row1_col2"]);
+      const onCopyComplete = vi.fn();
+
+      // Set some selected cells first
+      actions.setSelectedCells(selectedCells);
+
+      // Set text selection
+      window.getSelection = vi.fn().mockReturnValue({
+        toString: vi.fn().mockReturnValue("some text"),
+      });
+
+      actions.handleCopy({
+        table: mockTable,
+        onCopyComplete,
+      });
+
+      expect(getCellValues).not.toHaveBeenCalled();
+      expect(copyToClipboard).not.toHaveBeenCalled();
+      expect(onCopyComplete).not.toHaveBeenCalled();
+      expect(state.copiedCells).toEqual(new Set());
+    });
   });
 
   describe("navigate", () => {

frontend/src/components/data-table/range-focus/atoms.ts

@@ -141,6 +141,11 @@ const {
       selectedCell,
     );
 
+    const isSelectingMultipleCells = cellsInRange.length > 1;
+    if (isSelectingMultipleCells) {
+      clearTextSelection();
+    }
+
     return {
       ...state,
       selectedCells: new Set(cellsInRange),
@@ -156,6 +161,12 @@ const {
       onCopyComplete: () => void;
     },
   ) => {
+    const selection = window.getSelection();
+    if (selection && selection.toString().length > 0) {
+      // Let browser handle the copy
+      return state;
+    }
+
     const text = getCellValues(table, state.selectedCells);
     copyToClipboard(text);
     onCopyComplete();
@@ -360,3 +371,10 @@ export const createCellStateAtom = (cellId: string) =>
       isCopied: copiedCells.has(cellId),
     };
   });
+
+// Clear browser text selection to prevent visual conflicts with cell selection indicator
+export const clearTextSelection = () => {
+  if (window.getSelection) {
+    window.getSelection()?.empty();
+  }
+};

frontend/src/components/data-table/renderers.tsx

@@ -101,7 +101,7 @@ export const DataTableBody = <TData,>({
           tabIndex={0}
           key={cell.id}
           className={cn(
-            "whitespace-pre truncate max-w-[300px] select-none outline-none",
+            "whitespace-pre truncate max-w-[300px] outline-none",
             cell.column.getColumnWrapping &&
               cell.column.getColumnWrapping() === "wrap" &&
               "whitespace-pre-wrap min-w-[200px]",