FIX: Initial browse mode within sheets

webapp/src/components/WorksheetCanvas/worksheetCanvas.ts

@@ -1126,8 +1126,16 @@ export default class WorksheetCanvas {
       cellOutlineHandle.style.visibility = "hidden";
     }
 
-    editor.style.left = `${x + 3}px`;
-    editor.style.top = `${y + 3}px`;
+    if (this.workbookState.getEditingCell()?.sheet === selectedSheet) {
+      editor.style.left = `${x + 3}px`;
+      editor.style.top = `${y + 3}px`;
+    } else {
+      // If the editing cell is not in the same sheet as the selected sheet
+      // we take the editor out of view
+      editor.style.left = "-9999px";
+      editor.style.top = "-9999px";
+    }
+
     editor.style.width = `${width - 1}px`;
     editor.style.height = `${height - 1}px`;
 

webapp/src/components/editor/editor.tsx

@@ -118,7 +118,6 @@ const Editor = (options: EditorOptions) => {
           setTimeout(() => {
             const cell = workbookState.getEditingCell();
             if (cell) {
-              workbookState.clearEditingCell();
               model.setUserInput(
                 cell.sheet,
                 cell.row,
@@ -126,7 +125,9 @@ const Editor = (options: EditorOptions) => {
                 cell.text + (cell.referencedRange?.str || ""),
               );
               const sign = shiftKey ? -1 : 1;
+              model.setSelectedSheet(cell.sheet);
               model.setSelectedCell(cell.row + sign, cell.column);
+              workbookState.clearEditingCell();
             }
             onEditEnd();
           }, 0);
@@ -145,6 +146,7 @@ const Editor = (options: EditorOptions) => {
               cell.text + (cell.referencedRange?.str || ""),
             );
             const sign = shiftKey ? -1 : 1;
+            model.setSelectedSheet(cell.sheet);
             model.setSelectedCell(cell.row, cell.column + sign);
             if (textareaRef.current) {
               textareaRef.current.value = "";
@@ -158,6 +160,10 @@ const Editor = (options: EditorOptions) => {
         }
         case "Escape": {
           // quit editing without modifying the cell
+          const cell = workbookState.getEditingCell();
+          if (cell) {
+            model.setSelectedSheet(cell.sheet);
+          }
           workbookState.clearEditingCell();
           onEditEnd();
           return;

webapp/src/components/navigation/navigation.tsx

@@ -3,6 +3,7 @@ import { ChevronLeft, ChevronRight, Menu, Plus } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { StyledButton } from "../toolbar";
+import type { WorkbookState } from "../workbookState";
 import SheetListMenu from "./menus";
 import Sheet from "./sheet";
 import type { SheetOptions } from "./types";
@@ -10,6 +11,7 @@ import type { SheetOptions } from "./types";
 export interface NavigationProps {
   sheets: SheetOptions[];
   selectedIndex: number;
+  workbookState: WorkbookState;
   onSheetSelected: (index: number) => void;
   onAddBlankSheet: () => void;
   onSheetColorChanged: (hex: string) => void;
@@ -19,7 +21,7 @@ export interface NavigationProps {
 
 function Navigation(props: NavigationProps) {
   const { t } = useTranslation();
-  const { onSheetSelected, sheets, selectedIndex } = props;
+  const { workbookState, onSheetSelected, sheets, selectedIndex } = props;
   const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
   const open = Boolean(anchorEl);
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -63,6 +65,7 @@ function Navigation(props: NavigationProps) {
               onDeleted={(): void => {
                 props.onSheetDeleted();
               }}
+              workbookState={workbookState}
             />
           ))}
         </SheetInner>

webapp/src/components/navigation/sheet.tsx

@@ -2,7 +2,10 @@ import { Button, Menu, MenuItem, styled } from "@mui/material";
 import { ChevronDown } from "lucide-react";
 import { useRef, useState } from "react";
 import ColorPicker from "../colorPicker";
+import { isInReferenceMode } from "../editor/util";
+import type { WorkbookState } from "../workbookState";
 import { SheetRenameDialog } from "./menus";
+
 interface SheetProps {
   name: string;
   color: string;
@@ -11,9 +14,11 @@ interface SheetProps {
   onColorChanged: (hex: string) => void;
   onRenamed: (name: string) => void;
   onDeleted: () => void;
+  workbookState: WorkbookState;
 }
+
 function Sheet(props: SheetProps) {
-  const { name, color, selected, onSelected } = props;
+  const { name, color, selected, workbookState, onSelected } = props;
   const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
   const [colorPickerOpen, setColorPickerOpen] = useState(false);
   const colorButton = useRef(null);
@@ -35,8 +40,18 @@ function Sheet(props: SheetProps) {
     <>
       <Wrapper
         style={{ borderBottomColor: color, fontWeight: selected ? 600 : 400 }}
-        onClick={() => {
+        onClick={(event) => {
           onSelected();
+          event.stopPropagation();
+          event.preventDefault();
+        }}
+        onPointerDown={(event) => {
+          // If it is in browse mode stop he event
+          const cell = workbookState.getEditingCell();
+          if (cell && isInReferenceMode(cell.text, cell.cursorStart)) {
+            event.stopPropagation();
+            event.preventDefault();
+          }
         }}
         ref={colorButton}
       >

webapp/src/components/usePointer.ts

@@ -49,7 +49,7 @@ const usePointer = (options: PointerSettings): PointerEvents => {
       ) {
         return;
       }
-      const { canvasElement, worksheetCanvas } = options;
+      const { canvasElement, model, worksheetCanvas } = options;
       const canvas = canvasElement.current;
       const worksheet = worksheetCanvas.current;
       // Silence the linter
@@ -78,7 +78,14 @@ const usePointer = (options: PointerSettings): PointerEvents => {
         const range = editingCell.referencedRange.range;
         range.rowEnd = cell.row;
         range.columnEnd = cell.column;
-        editingCell.referencedRange.str = rangeToStr(range, 0);
+
+        const sheetNames = model.getWorksheetsProperties().map((s) => s.name);
+
+        editingCell.referencedRange.str = rangeToStr(
+          range,
+          editingCell.sheet,
+          sheetNames[range.sheet],
+        );
         workbookState.setEditingCell(editingCell);
         refresh();
       }
@@ -169,15 +176,22 @@ const usePointer = (options: PointerSettings): PointerEvents => {
           const text = editingCell.text;
           if (isInReferenceMode(text, editingCell.cursorEnd)) {
             const range = {
-              sheet: 0,
+              sheet: model.getSelectedSheet(),
               rowStart: cell.row,
               rowEnd: cell.row,
               columnStart: cell.column,
               columnEnd: cell.column,
             };
+            const sheetNames = model
+              .getWorksheetsProperties()
+              .map((s) => s.name);
             editingCell.referencedRange = {
               range,
-              str: rangeToStr(range, 0),
+              str: rangeToStr(
+                range,
+                editingCell.sheet,
+                sheetNames[range.sheet],
+              ),
             };
             workbookState.setEditingCell(editingCell);
             event.stopPropagation();

webapp/src/components/util.ts

@@ -50,9 +50,10 @@ export function rangeToStr(
     columnEnd: number;
   },
   referenceSheet: number,
+  referenceName: string,
 ): string {
   const { sheet, rowStart, rowEnd, columnStart, columnEnd } = range;
-  const sheetName = sheet === referenceSheet ? "" : "other!";
+  const sheetName = sheet === referenceSheet ? "" : `${referenceName}!`;
   if (rowStart === rowEnd && columnStart === columnEnd) {
     return `${sheetName}${columnNameFromNumber(columnStart)}${rowStart}`;
   }

webapp/src/components/workbook.tsx

@@ -385,6 +385,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
       <Navigation
         sheets={info}
         selectedIndex={model.getSelectedSheet()}
+        workbookState={workbookState}
         onSheetSelected={(sheet: number): void => {
           model.setSelectedSheet(sheet);
           setRedrawId((value) => value + 1);