[FIX] composer: set cursor on prettified formula

Steps to reproduce:
- type a long formula, e.g. =SUM(11111111, 22222222, 33333333, 44444444, 55555555, 66666666, 77777777, 88888888)
- in the top bar composer, click somewhere that won't be on the first line
  when prettified (in the fours)

=> the cursor is badly positioned on the prettified formula

Task: 5095470

Author: LucasLefevre

src/components/composer/composer/abstract_composer_store.ts

@@ -103,7 +103,10 @@ export abstract class AbstractComposerStore extends SpreadsheetStore {
     });
   }
   protected abstract confirmEdition(content: string): void;
-  protected abstract getComposerContent(position: CellPosition): string;
+  protected abstract getComposerContent(
+    position: CellPosition,
+    selection?: ComposerSelection
+  ): { content: string; adjustedSelection?: ComposerSelection };
 
   abstract stopEdition(direction?: Direction): void;
 
@@ -150,12 +153,8 @@ export abstract class AbstractComposerStore extends SpreadsheetStore {
   }
 
   startEdition(text?: string, selection?: ComposerSelection) {
-    if (selection) {
-      const content = text || this.getComposerContent(this.getters.getActivePosition());
-      const validSelection = this.isSelectionValid(content.length, selection.start, selection.end);
-      if (!validSelection) {
-        return;
-      }
+    if (selection && text && !this.isSelectionValid(text.length, selection.start, selection.end)) {
+      return;
     }
     const { col, row } = this.getters.getActivePosition();
     this.model.dispatch("SELECT_FIGURE", { figureId: null });
@@ -220,7 +219,7 @@ export abstract class AbstractComposerStore extends SpreadsheetStore {
 
   get currentContent(): string {
     if (this.editionMode === "inactive") {
-      return this.getComposerContent(this.getters.getActivePosition());
+      return this.getComposerContent(this.getters.getActivePosition()).content;
     }
     return this._currentContent;
   }
@@ -447,8 +446,12 @@ export abstract class AbstractComposerStore extends SpreadsheetStore {
     this.sheetId = sheetId;
     this.row = row;
     this.editionMode = "editing";
-    this.initialContent = this.getComposerContent({ sheetId, col, row });
-    this.setContent(str || this.initialContent, selection);
+    const { content, adjustedSelection } = this.getComposerContent(
+      { sheetId, col, row },
+      selection
+    );
+    this.initialContent = content;
+    this.setContent(str || this.initialContent, adjustedSelection ?? selection);
     this.colorIndexByRange = {};
     const zone = positionToZone({ col: this.col, row: this.row });
     this.captureSelection(zone, col, row);

src/components/composer/composer/cell_composer_store.ts

@@ -29,7 +29,7 @@ import {
   RemoveColumnsRowsCommand,
   isMatrix,
 } from "../../../types";
-import { AbstractComposerStore } from "./abstract_composer_store";
+import { AbstractComposerStore, ComposerSelection } from "./abstract_composer_store";
 
 const CELL_DELETED_MESSAGE = _t("The cell you are trying to edit has been deleted.");
 
@@ -201,39 +201,66 @@ export class CellComposerStore extends AbstractComposerStore {
     this.setContent("");
   }
 
-  protected getComposerContent(position: CellPosition): string {
+  protected getComposerContent(
+    position: CellPosition,
+    selection?: ComposerSelection
+  ): { content: string; adjustedSelection?: ComposerSelection } {
     const locale = this.getters.getLocale();
     const cell = this.getters.getCell(position);
     if (cell?.isFormula) {
       const prettifiedContent = this.getPrettifiedFormula(cell);
-      return localizeFormula(prettifiedContent, locale);
+      // when a formula is prettified (multi lines, indented), adapt the cursor position
+      // to take into account line breaks and tabs
+      function adjustCursorIndex(targetIndex: number): number {
+        let adjustedIndex = 0;
+        let originalIndex = 0;
+        while (originalIndex < targetIndex) {
+          adjustedIndex++;
+          const char = prettifiedContent[adjustedIndex];
+          if (char !== "\n" && char !== "\t") {
+            originalIndex++;
+          }
+        }
+        return adjustedIndex;
+      }
+      let adjustedSelection = selection;
+      if (selection) {
+        adjustedSelection = {
+          start: adjustCursorIndex(selection.start),
+          end: adjustCursorIndex(selection.end),
+        };
+      }
+      return {
+        content: localizeFormula(prettifiedContent, locale),
+        adjustedSelection,
+      };
     }
     const spreader = this.model.getters.getArrayFormulaSpreadingOn(position);
     if (spreader) {
-      return "";
+      return { content: "" };
     }
     const { format, value, type, formattedValue } = this.getters.getEvaluatedCell(position);
     switch (type) {
       case CellValueType.empty:
-        return "";
+        return { content: "" };
       case CellValueType.text:
       case CellValueType.error:
-        return value;
+        return { content: value };
       case CellValueType.boolean:
-        return formattedValue;
+        return { content: formattedValue };
       case CellValueType.number:
         if (format && isDateTimeFormat(format)) {
           if (parseDateTime(formattedValue, locale) !== null) {
             // formatted string can be parsed again
-            return formattedValue;
+            return { content: formattedValue };
           }
           // display a simplified and parsable string otherwise
           const timeFormat = Number.isInteger(value)
             ? locale.dateFormat
             : getDateTimeFormat(locale);
-          return formatValue(value, { locale, format: timeFormat });
+          return { content: formatValue(value, { locale, format: timeFormat }) };
         }
-        return this.numberComposerContent(value, format, locale);
+        return { content: this.numberComposerContent(value, format, locale) };
     }
   }
 

src/components/composer/composer/composer.ts

@@ -26,6 +26,7 @@ import { TextValueProvider } from "../autocomplete_dropdown/autocomplete_dropdow
 import { ContentEditableHelper } from "../content_editable_helper";
 import { FunctionDescriptionProvider } from "../formula_assistant/formula_assistant";
 import { SpeechBubble } from "../speech_bubble/speech_bubble";
+import { ComposerSelection } from "./abstract_composer_store";
 import { CellComposerStore } from "./cell_composer_store";
 
 const functions = functionRegistry.content;
@@ -131,8 +132,8 @@ export interface CellComposerProps {
   inputStyle?: string;
   rect?: Rect;
   delimitation?: DOMDimension;
-  onComposerContentFocused: () => void;
-  onComposerCellFocused?: (content: String) => void;
+  onComposerContentFocused: (selection: ComposerSelection) => void;
+  onComposerCellFocused?: (content: string) => void;
   onInputContextMenu?: (event: MouseEvent) => void;
   isDefaultFocus?: boolean;
   composerStore: Store<CellComposerStore>;
@@ -600,11 +601,13 @@ export class Composer extends Component<CellComposerProps, SpreadsheetChildEnv>
       return;
     }
     const newSelection = this.contentHelper.getCurrentSelection();
-
     this.props.composerStore.stopComposerRangeSelection();
-    this.props.onComposerContentFocused();
+    const isCurrentlyInactive = this.props.composerStore.editionMode === "inactive";
+    this.props.onComposerContentFocused(newSelection);
+    if (!isCurrentlyInactive) {
+      this.props.composerStore.changeComposerCursorSelection(newSelection.start, newSelection.end);
+    }
 
-    this.props.composerStore.changeComposerCursorSelection(newSelection.start, newSelection.end);
     this.processTokenAtCursor();
   }
 

src/components/composer/grid_composer/grid_composer.ts

@@ -142,9 +142,10 @@ export class GridComposer extends Component<Props, SpreadsheetChildEnv> {
       },
       focus: this.focus,
       isDefaultFocus: true,
-      onComposerContentFocused: () =>
+      onComposerContentFocused: (selection) =>
         this.composerFocusStore.focusComposer(this.composerInterface, {
           focusMode: "contentFocus",
+          selection,
         }),
       onComposerCellFocused: (content: string) =>
         this.composerFocusStore.focusComposer(this.composerInterface, {

src/components/composer/standalone_composer/standalone_composer_store.ts

@@ -23,7 +23,7 @@ export interface StandaloneComposerArgs {
 export class StandaloneComposerStore extends AbstractComposerStore {
   constructor(get: Get, private args: () => StandaloneComposerArgs) {
     super(get);
-    this._currentContent = this.getComposerContent();
+    this._currentContent = this.getComposerContent().content;
   }
 
   protected getAutoCompleteProviders(): AutoCompleteProviderDefinition[] {
@@ -46,7 +46,7 @@ export class StandaloneComposerStore extends AbstractComposerStore {
     return res;
   }
 
-  protected getComposerContent(): string {
+  protected getComposerContent() {
     let content = this._currentContent;
     if (this.editionMode === "inactive") {
       // References in the content might not be linked to the current active sheet
@@ -63,8 +63,9 @@ export class StandaloneComposerStore extends AbstractComposerStore {
         })
         .join("");
     }
-
-    return localizeContent(content, this.getters.getLocale());
+    return {
+      content: localizeContent(content, this.getters.getLocale()),
+    };
   }
 
   stopEdition() {

src/components/small_bottom_bar/small_bottom_bar.ts

@@ -88,9 +88,10 @@ export class SmallBottomBar extends Component<Props, SpreadsheetChildEnv> {
       },
       focus: this.focus,
       composerStore: this.composerStore,
-      onComposerContentFocused: () =>
+      onComposerContentFocused: (selection) =>
         this.composerFocusStore.focusComposer(this.composerInterface, {
           focusMode: "contentFocus",
+          selection,
         }),
       isDefaultFocus: false,
       inputStyle: cssPropertiesToCss({

tests/test_helpers/helpers.ts

@@ -1071,9 +1071,9 @@ export class ComposerWrapper extends Component<ComposerWrapperProps, Spreadsheet
   get composerProps(): CellComposerProps {
     return {
       ...this.props.composerProps,
-      onComposerContentFocused: () => {
+      onComposerContentFocused: (selection) => {
         this.state.focusComposer = "contentFocus";
-        this.setEdition({});
+        this.setEdition({ selection });
       },
       focus: this.state.focusComposer,
       composerStore: this.composerStore,

tests/top_bar_component.test.ts

@@ -28,13 +28,15 @@ import {
   click,
   doubleClick,
   getElComputedStyle,
+  getTextNodes,
   simulateClick,
   triggerMouseEvent,
 } from "./test_helpers/dom_helper";
 import { getBorder, getCell, getStyle, getTable } from "./test_helpers/getters_helpers";
 import {
   addToRegistry,
   getFigureIds,
+  getInputSelection,
   getNode,
   mountComponent,
   mountSpreadsheet,
@@ -981,6 +983,34 @@ test("The composer helper should be closed on toggle topbar context menu", async
   expect(fixture.querySelectorAll(".o-composer-assistant")).toHaveLength(0);
 });
 
+test("prettified formula should have the cursor", async () => {
+  const { model } = await mountSpreadsheet();
+
+  // I'll set the cursor in between the fours
+  const firstPart = "=SUM(11111111, 22222222, 33333333, 4444";
+  const secondPart = "4444, 55555555, 66666666, 77777777, 88888888)";
+  setCellContent(model, "A1", firstPart + secondPart);
+  await nextTick();
+  const composerEl: HTMLElement = document.querySelector(".o-spreadsheet-topbar .o-composer")!;
+  composerEl.focus();
+  triggerMouseEvent(composerEl, "pointerdown");
+  const selection = document.getSelection()!;
+  const range = document.createRange();
+  selection.removeAllRanges();
+  selection.addRange(range);
+  const textNode = getTextNodes(composerEl)[0];
+  range.setStart(textNode, firstPart.length);
+  range.setEnd(textNode, firstPart.length);
+
+  await nextTick();
+  triggerMouseEvent(composerEl, "pointerup");
+  await nextTick();
+  triggerMouseEvent(composerEl, "click");
+  await nextTick();
+  expect(getInputSelection().anchorNodeText).toBe("44444444");
+  expect(getInputSelection().anchorOffset).toBe(4);
+});
+
 test("The menu items are orderer by their sequence", async () => {
   addToRegistry(topbarMenuRegistry, "test", {
     sequence: 1,