@odoo/o-spreadsheet 18.0.1 → 18.1.0-alpha.1

package/dist/o-spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.0.1
- * @date 2024-10-14T07:54:24.768Z
- * @hash 1771f68
+ * @version 18.1.0-alpha.1
+ * @date 2024-10-14T07:53:17.717Z
+ * @hash e9ce3aa
  */
 
 (function (exports, owl) {
@@ -6075,18 +6075,9 @@
    * https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
    * */
   class UuidGenerator {
-      isFastIdStrategy = false;
-      fastIdStart = 0;
-      setIsFastStrategy(isFast) {
-          this.isFastIdStrategy = isFast;
-      }
       uuidv4() {
-          if (this.isFastIdStrategy) {
-              this.fastIdStart++;
-              return String(this.fastIdStart);
-              //@ts-ignore
-          }
-          else if (window.crypto && window.crypto.getRandomValues) {
+          //@ts-ignore
+          if (window.crypto && window.crypto.getRandomValues) {
               //@ts-ignore
               return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16));
           }
@@ -9289,6 +9280,49 @@ stores.inject(MyMetaStore, storeInstance);
       useLeftAxis ||= !useRightAxis;
       return { useLeftAxis, useRightAxis };
   }
+  function getChartAxis(definition, position, type, options) {
+      const { useLeftAxis, useRightAxis } = getDefinedAxis(definition);
+      if ((position === "left" && !useLeftAxis) || (position === "right" && !useRightAxis)) {
+          return undefined;
+      }
+      const fontColor = chartFontColor(definition.background);
+      let design;
+      if (position === "bottom") {
+          design = definition.axesDesign?.x;
+      }
+      else if (position === "left") {
+          design = definition.axesDesign?.y;
+      }
+      else {
+          design = definition.axesDesign?.y1;
+      }
+      if (type === "values") {
+          const displayGridLines = position === "left" || (position === "right" && !useLeftAxis);
+          return {
+              position: position,
+              title: getChartAxisTitleRuntime(design),
+              grid: {
+                  display: displayGridLines,
+              },
+              beginAtZero: true,
+              stacked: options?.stacked,
+              ticks: {
+                  color: fontColor,
+                  callback: formatTickValue(options),
+              },
+          };
+      }
+      else {
+          return {
+              ticks: {
+                  padding: 5,
+                  color: fontColor,
+              },
+              stacked: options?.stacked,
+              title: getChartAxisTitleRuntime(design),
+          };
+      }
+  }
   function computeChartPadding({ displayTitle, displayLegend, }) {
       let top = 25;
       if (displayTitle) {
@@ -9375,6 +9409,12 @@ stores.inject(MyMetaStore, storeInstance);
               return [];
       }
   }
+  function formatChartDatasetValue(axisFormats, locale) {
+      return (value, axisId) => {
+          const format = axisId ? axisFormats?.[axisId] : undefined;
+          return formatTickValue({ format, locale })(value);
+      };
+  }
   function formatTickValue(localeFormat) {
       return (value) => {
           value = Number(value);
@@ -9437,10 +9477,12 @@ stores.inject(MyMetaStore, storeInstance);
                   case "bar":
                   case "line": {
                       const yOffset = dataset.type === "bar" && !options.horizontal ? 0 : 3;
+                      const horizontalChart = dataset.type === "bar" && options.horizontal;
+                      const axisId = horizontalChart ? dataset.xAxisID : dataset.yAxisID;
                       for (let i = 0; i < dataset._parsed.length; i++) {
                           const point = dataset.data[i];
                           const value = options.horizontal ? dataset._parsed[i].x : dataset._parsed[i].y;
-                          const displayedValue = options.callback(value - 0);
+                          const displayedValue = options.callback(value - 0, axisId);
                           let xPosition = 0, yPosition = 0;
                           if (options.horizontal) {
                               yPosition = point.y;
@@ -20171,7 +20213,7 @@ stores.inject(MyMetaStore, storeInstance);
               let startNode = this.findChildAtCharacterIndex(start);
               let endNode = this.findChildAtCharacterIndex(end);
               range.setStart(startNode.node, startNode.offset);
-              selection.extend(endNode.node, endNode.offset);
+              range.setEnd(endNode.node, endNode.offset);
           }
       }
       /**
@@ -20669,7 +20711,7 @@ stores.inject(MyMetaStore, storeInstance);
           "Alt+Enter": this.processNewLineEvent,
           "Ctrl+Enter": this.processNewLineEvent,
           Escape: this.processEscapeKey,
-          F2: () => console.warn("Not implemented"),
+          F2: (ev) => this.toggleEditionMode(ev),
           F4: (ev) => this.processF4Key(ev),
           Tab: (ev) => this.processTabKey(ev, "right"),
           "Shift+Tab": (ev) => this.processTabKey(ev, "left"),
@@ -20788,6 +20830,11 @@ stores.inject(MyMetaStore, storeInstance);
           this.props.composerStore.cycleReferences();
           this.processContent();
       }
+      toggleEditionMode(ev) {
+          ev.stopPropagation();
+          this.props.composerStore.toggleEditionMode();
+          this.processContent();
+      }
       processNumpadDecimal(ev) {
           ev.stopPropagation();
           ev.preventDefault();
@@ -21013,7 +21060,13 @@ stores.inject(MyMetaStore, storeInstance);
                       break;
                   case "REFERENCE":
                       const { xc, sheetName } = splitReference(token.value);
-                      result.push({ value: token.value, color: this.rangeColor(xc, sheetName) || "#000" });
+                      result.push({
+                          value: token.value,
+                          color: this.rangeColor(xc, sheetName) || "#000",
+                          class: tokenAtCursor === token && this.props.composerStore.editionMode === "selecting"
+                              ? "text-decoration-underline"
+                              : undefined,
+                      });
                       break;
                   case "SYMBOL":
                       const value = token.value;
@@ -28039,9 +28092,9 @@ stores.inject(MyMetaStore, storeInstance);
   /**
    * Get a default chart js configuration
    */
-  function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale, truncateLabels = true, horizontalChart, }) {
+  function getDefaultChartJsRuntime(chart, labels, fontColor, { axisFormats, locale, truncateLabels = true, horizontalChart }) {
       const chartTitle = chart.title.text ? chart.title : { ...chart.title, content: "" };
-      const options = {
+      const chartOptions = {
           // https://www.chartjs.org/docs/latest/general/responsive.html
           responsive: true, // will resize when its container is resized
           maintainAspectRatio: false, // doesn't maintain the aspect ration (width/height =2 by default) so the user has the choice of the exact layout
@@ -28088,8 +28141,10 @@ stores.inject(MyMetaStore, storeInstance);
                           if (!yLabel) {
                               yLabel = tooltipItem.parsed;
                           }
-                          const toolTipFormat = !format && Math.abs(yLabel) >= 1000 ? "#,##" : format;
-                          const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
+                          const axisId = horizontalChart
+                              ? tooltipItem.dataset.xAxisID
+                              : tooltipItem.dataset.yAxisID;
+                          const yLabelStr = formatChartDatasetValue(axisFormats, locale)(yLabel, axisId);
                           return xLabel ? `${xLabel}: ${yLabelStr}` : yLabelStr;
                       },
                   },
@@ -28098,7 +28153,7 @@ stores.inject(MyMetaStore, storeInstance);
       };
       return {
           type: chart.type,
-          options,
+          options: chartOptions,
           data: {
               labels: truncateLabels ? labels.map(truncateLabel) : labels,
               datasets: [],
@@ -28157,7 +28212,8 @@ stores.inject(MyMetaStore, storeInstance);
    * Get the format to apply to the the dataset values. This format is defined as the first format
    * found in the dataset ranges that isn't a date format.
    */
-  function getChartDatasetFormat(getters, dataSets) {
+  function getChartDatasetFormat(getters, allDataSets, axis) {
+      const dataSets = allDataSets.filter((ds) => (axis === "right") === !!ds.rightYAxis);
       for (const ds of dataSets) {
           const formatsInDataset = getters.getRangeFormats(ds.dataRange);
           const format = formatsInDataset.find((f) => f !== undefined && !isDateTimeFormat(f));
@@ -28411,12 +28467,16 @@ stores.inject(MyMetaStore, storeInstance);
       if (chart.aggregated) {
           ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
       }
-      const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
+      const leftAxisFormat = getChartDatasetFormat(getters, chart.dataSets, "left");
+      const rightAxisFormat = getChartDatasetFormat(getters, chart.dataSets, "right");
       const locale = getters.getLocale();
-      const localeFormat = { format: dataSetFormat, locale };
       const fontColor = chartFontColor(chart.background);
+      const axisFormats = chart.horizontal
+          ? { x: leftAxisFormat || rightAxisFormat }
+          : { y: leftAxisFormat, y1: rightAxisFormat };
       const config = getDefaultChartJsRuntime(chart, labels, fontColor, {
-          ...localeFormat,
+          locale,
+          axisFormats,
           horizontalChart: chart.horizontal,
       });
       const legend = {
@@ -28437,51 +28497,27 @@ stores.inject(MyMetaStore, storeInstance);
       };
       config.options.indexAxis = chart.horizontal ? "y" : "x";
       config.options.scales = {};
-      const labelsAxis = { ticks: { padding: 5, color: fontColor } };
-      const valuesAxis = {
-          beginAtZero: true, // the origin of the y axis is always zero
-          ticks: {
-              color: fontColor,
-              callback: formatTickValue(localeFormat),
-          },
-      };
-      const xAxis = chart.horizontal ? valuesAxis : labelsAxis;
-      const yAxis = chart.horizontal ? labelsAxis : valuesAxis;
-      const { useLeftAxis, useRightAxis } = getDefinedAxis(chart.getDefinition());
-      config.options.scales.x = { ...xAxis, title: getChartAxisTitleRuntime(chart.axesDesign?.x) };
-      if (useLeftAxis) {
-          config.options.scales.y = {
-              ...yAxis,
-              position: "left",
-              title: getChartAxisTitleRuntime(chart.axesDesign?.y),
-          };
-      }
-      if (useRightAxis) {
-          config.options.scales.y1 = {
-              ...yAxis,
-              position: "right",
-              title: getChartAxisTitleRuntime(chart.axesDesign?.y1),
-          };
+      const definition = chart.getDefinition();
+      const options = { stacked: chart.stacked, locale };
+      if (chart.horizontal) {
+          const format = leftAxisFormat || rightAxisFormat;
+          config.options.scales.x = getChartAxis(definition, "bottom", "values", { ...options, format });
+          config.options.scales.y = getChartAxis(definition, "left", "labels", options);
       }
-      if (chart.stacked) {
-          // @ts-ignore chart.js type is broken
-          config.options.scales.x.stacked = true;
-          if (useLeftAxis) {
-              // @ts-ignore chart.js type is broken
-              config.options.scales.y.stacked = true;
-          }
-          if (useRightAxis) {
-              // @ts-ignore chart.js type is broken
-              config.options.scales.y1.stacked = true;
-          }
+      else {
+          config.options.scales.x = getChartAxis(definition, "bottom", "labels", options);
+          const leftAxisOptions = { ...options, format: leftAxisFormat };
+          config.options.scales.y = getChartAxis(definition, "left", "values", leftAxisOptions);
+          const rightAxisOptions = { ...options, format: rightAxisFormat };
+          config.options.scales.y1 = getChartAxis(definition, "right", "values", rightAxisOptions);
       }
+      config.options.scales = removeFalsyAttributes(config.options.scales);
       config.options.plugins.chartShowValuesPlugin = {
           showValues: chart.showValues,
           background: chart.background,
           horizontal: chart.horizontal,
-          callback: formatTickValue(localeFormat),
+          callback: formatChartDatasetValue(axisFormats, locale),
       };
-      const definition = chart.getDefinition();
       const colors = getChartColorsGenerator(definition, dataSetsValues.length);
       const trendDatasets = [];
       for (const index in dataSetsValues) {
@@ -28499,9 +28535,8 @@ stores.inject(MyMetaStore, storeInstance);
               const label = definition.dataSets[index].label;
               dataset.label = label;
           }
-          if (definition.dataSets?.[index]?.yAxisId && !chart.horizontal) {
-              dataset["yAxisID"] = definition.dataSets[index].yAxisId;
-          }
+          dataset.yAxisID = chart.horizontal ? "y" : definition.dataSets[index].yAxisId || "y";
+          dataset.xAxisID = "x";
           const trend = definition.dataSets?.[index].trend;
           if (!trend?.display || chart.horizontal) {
               continue;
@@ -28517,7 +28552,7 @@ stores.inject(MyMetaStore, storeInstance);
            */
           const maxLength = Math.max(...trendDatasets.map((trendDataset) => trendDataset.data.length));
           config.options.scales[TREND_LINE_XAXIS_ID] = {
-              ...xAxis,
+              ...config.options.scales.x,
               labels: Array(maxLength).fill(""),
               offset: false,
               display: false,
@@ -28807,8 +28842,10 @@ stores.inject(MyMetaStore, storeInstance);
       }
       const locale = getters.getLocale();
       const truncateLabels = axisType === "category";
-      const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
-      const options = { format: dataSetFormat, locale, truncateLabels };
+      const leftAxisFormat = getChartDatasetFormat(getters, chart.dataSets, "left");
+      const rightAxisFormat = getChartDatasetFormat(getters, chart.dataSets, "right");
+      const axisFormats = { y: leftAxisFormat, y1: rightAxisFormat };
+      const options = { locale, truncateLabels, axisFormats };
       const fontColor = chartFontColor(chart.background);
       const config = getDefaultChartJsRuntime(chart, labels, fontColor, options);
       const legend = {
@@ -28838,52 +28875,18 @@ stores.inject(MyMetaStore, storeInstance);
               displayLegend: chart.legendPosition === "top",
           }),
       };
-      const xAxis = {
-          ticks: {
-              padding: 5,
-              color: fontColor,
-          },
-          title: getChartAxisTitleRuntime(chart.axesDesign?.x),
-      };
+      const definition = chart.getDefinition();
+      const stacked = "stacked" in chart && chart.stacked;
       config.options.scales = {
-          x: xAxis,
+          x: getChartAxis(definition, "bottom", "labels", { locale }),
+          y: getChartAxis(definition, "left", "values", { locale, stacked, format: leftAxisFormat }),
+          y1: getChartAxis(definition, "right", "values", { locale, stacked, format: rightAxisFormat }),
       };
-      const yAxis = {
-          beginAtZero: true, // the origin of the y axis is always zero
-          ticks: {
-              color: fontColor,
-              callback: formatTickValue(options),
-          },
-      };
-      const { useLeftAxis, useRightAxis } = getDefinedAxis(chart.getDefinition());
-      if (useLeftAxis) {
-          config.options.scales.y = {
-              ...yAxis,
-              position: "left",
-              title: getChartAxisTitleRuntime(chart.axesDesign?.y),
-          };
-      }
-      if (useRightAxis) {
-          config.options.scales.y1 = {
-              ...yAxis,
-              position: "right",
-              title: getChartAxisTitleRuntime(chart.axesDesign?.y1),
-          };
-      }
-      if ("stacked" in chart && chart.stacked) {
-          if (useLeftAxis) {
-              // @ts-ignore chart.js type is broken
-              config.options.scales.y.stacked = true;
-          }
-          if (useRightAxis) {
-              // @ts-ignore chart.js type is broken
-              config.options.scales.y1.stacked = true;
-          }
-      }
+      config.options.scales = removeFalsyAttributes(config.options.scales);
       config.options.plugins.chartShowValuesPlugin = {
           showValues: chart.showValues,
           background: chart.background,
-          callback: formatTickValue(options),
+          callback: formatChartDatasetValue(axisFormats, locale),
       };
       if (chart.dataSetsHaveTitle &&
           dataSetsValues[0] &&
@@ -28910,7 +28913,7 @@ stores.inject(MyMetaStore, storeInstance);
                   label = toNumber(label, locale);
               }
               const formattedX = formatValue(label, { locale, format: labelFormat });
-              const formattedY = formatValue(dataSetPoint, { locale, format: dataSetFormat });
+              const formattedY = formatValue(dataSetPoint, { locale, format: leftAxisFormat });
               const dataSetTitle = tooltipItem.dataset.label;
               return formattedX
                   ? `${dataSetTitle}: (${formattedX}, ${formattedY})`
@@ -28920,7 +28923,6 @@ stores.inject(MyMetaStore, storeInstance);
       const areaChart = "fillArea" in chart ? chart.fillArea : false;
       const stackedChart = "stacked" in chart ? chart.stacked : false;
       const cumulative = "cumulative" in chart ? chart.cumulative : false;
-      const definition = chart.getDefinition();
       const colors = getChartColorsGenerator(definition, dataSetsValues.length);
       for (let [index, { label, data }] of dataSetsValues.entries()) {
           const color = colors.next();
@@ -28961,9 +28963,7 @@ stores.inject(MyMetaStore, storeInstance);
               const label = definition.dataSets[index].label;
               dataset.label = label;
           }
-          if (definition.dataSets?.[index]?.yAxisId) {
-              dataset["yAxisID"] = definition.dataSets[index].yAxisId;
-          }
+          dataset["yAxisID"] = definition.dataSets[index].yAxisId || "y";
           const trend = definition.dataSets?.[index].trend;
           if (!trend?.display) {
               continue;
@@ -28980,7 +28980,7 @@ stores.inject(MyMetaStore, storeInstance);
            * set so that the second axis points match the classical x axis
            */
           config.options.scales[TREND_LINE_XAXIS_ID] = {
-              ...xAxis,
+              ...config.options.scales.x,
               type: "category",
               labels: range(0, maxLength).map((x) => x.toString()),
               offset: false,
@@ -29002,10 +29002,6 @@ stores.inject(MyMetaStore, storeInstance);
       return {
           chartJsConfig: config,
           background: chart.background || BACKGROUND_CHART_COLOR,
-          dataSetsValues,
-          labelValues,
-          dataSetFormat,
-          labelFormat,
       };
   }
 
@@ -29138,10 +29134,8 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
   function createComboChartRuntime(chart, getters) {
-      const mainDataSetFormat = chart.dataSets.length
-          ? getChartDatasetFormat(getters, [chart.dataSets[0]])
-          : undefined;
-      const lineDataSetsFormat = getChartDatasetFormat(getters, chart.dataSets.slice(1));
+      const mainDataSetFormat = getChartDatasetFormat(getters, chart.dataSets, "left");
+      const lineDataSetsFormat = getChartDatasetFormat(getters, chart.dataSets, "right");
       const locale = getters.getLocale();
       const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
       let labels = labelValues.formattedValues;
@@ -29155,9 +29149,9 @@ stores.inject(MyMetaStore, storeInstance);
       if (chart.aggregated) {
           ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
       }
-      const localeFormat = { format: mainDataSetFormat, locale };
       const fontColor = chartFontColor(chart.background);
-      const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
+      const axisFormats = { y: mainDataSetFormat, y1: lineDataSetsFormat };
+      const config = getDefaultChartJsRuntime(chart, labels, fontColor, { locale, axisFormats });
       const legend = {
           labels: { color: fontColor },
       };
@@ -29174,52 +29168,17 @@ stores.inject(MyMetaStore, storeInstance);
               displayLegend: chart.legendPosition === "top",
           }),
       };
+      const definition = chart.getDefinition();
       config.options.scales = {
-          x: {
-              ticks: {
-                  padding: 5,
-                  color: fontColor,
-              },
-              title: getChartAxisTitleRuntime(chart.axesDesign?.x),
-          },
-      };
-      const leftVerticalAxis = {
-          beginAtZero: true, // the origin of the y axis is always zero
-          ticks: {
-              color: fontColor,
-              callback: formatTickValue({ format: mainDataSetFormat, locale }),
-          },
+          x: getChartAxis(definition, "bottom", "labels", { locale }),
+          y: getChartAxis(definition, "left", "values", { locale, format: mainDataSetFormat }),
+          y1: getChartAxis(definition, "right", "values", { locale, format: lineDataSetsFormat }),
       };
-      const rightVerticalAxis = {
-          beginAtZero: true, // the origin of the y axis is always zero
-          ticks: {
-              color: fontColor,
-              callback: formatTickValue({ format: lineDataSetsFormat, locale }),
-          },
-      };
-      const definition = chart.getDefinition();
-      const { useLeftAxis, useRightAxis } = getDefinedAxis(definition);
-      if (useLeftAxis) {
-          config.options.scales.y = {
-              ...leftVerticalAxis,
-              position: "left",
-              title: getChartAxisTitleRuntime(chart.axesDesign?.y),
-          };
-      }
-      if (useRightAxis) {
-          config.options.scales.y1 = {
-              ...rightVerticalAxis,
-              position: "right",
-              grid: {
-                  display: false,
-              },
-              title: getChartAxisTitleRuntime(chart.axesDesign?.y1),
-          };
-      }
+      config.options.scales = removeFalsyAttributes(config.options.scales);
       config.options.plugins.chartShowValuesPlugin = {
           showValues: chart.showValues,
           background: chart.background,
-          callback: formatTickValue({ format: mainDataSetFormat, locale }),
+          callback: formatChartDatasetValue(axisFormats, locale),
       };
       const colors = getChartColorsGenerator(definition, dataSetsValues.length);
       let maxLength = 0;
@@ -29848,7 +29807,7 @@ stores.inject(MyMetaStore, storeInstance);
           ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
       }
       ({ dataSetsValues, labels } = filterNegativeValues(labels, dataSetsValues));
-      const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
+      const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets, "left");
       const locale = getters.getLocale();
       const config = getPieConfiguration(chart, labels, { format: dataSetFormat, locale });
       const dataSetsLength = Math.max(0, ...dataSetsValues.map((ds) => ds?.data?.length ?? 0));
@@ -30003,7 +29962,7 @@ stores.inject(MyMetaStore, storeInstance);
           return tooltipLabelCallback(tooltipItem);
       };
       const callback = config.options.plugins.chartShowValuesPlugin.callback;
-      config.options.plugins.chartShowValuesPlugin.callback = (x) => callback(Math.abs(x));
+      config.options.plugins.chartShowValuesPlugin.callback = (x, axisId) => callback(Math.abs(x), axisId);
       return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
   }
 
@@ -30394,7 +30353,8 @@ stores.inject(MyMetaStore, storeInstance);
       if (chart.showSubTotals) {
           labels.push(_t("Subtotal"));
       }
-      const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
+      const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets, "left") ||
+          getChartDatasetFormat(getters, chart.dataSets, "right");
       const locale = getters.getLocale();
       const dataSeriesLabels = dataSetsValues.map((dataSet) => dataSet.label);
       const config = getWaterfallConfiguration(chart, labels, dataSeriesLabels, {
@@ -38121,6 +38081,7 @@ stores.inject(MyMetaStore, storeInstance);
           "stopComposerRangeSelection",
           "cancelEdition",
           "cycleReferences",
+          "toggleEditionMode",
           "changeComposerCursorSelection",
           "replaceComposerCursorSelection",
       ];
@@ -38276,6 +38237,42 @@ stores.inject(MyMetaStore, storeInstance);
           }
           this.setCurrentContent(updated.content, updated.selection);
       }
+      toggleEditionMode() {
+          if (this.editionMode === "inactive")
+              return;
+          const start = Math.min(this.selectionStart, this.selectionEnd);
+          const end = Math.max(this.selectionStart, this.selectionEnd);
+          const refToken = [...this.currentTokens]
+              .reverse()
+              .find((tk) => tk.end >= start && end >= tk.start && tk.type === "REFERENCE");
+          if (this.editionMode === "editing" && refToken) {
+              const currentSheetId = this.getters.getActiveSheetId();
+              const { sheetName, xc } = splitReference(refToken.value);
+              const sheetId = this.getters.getSheetIdByName(sheetName);
+              if (sheetId && sheetId !== currentSheetId) {
+                  this.model.dispatch("ACTIVATE_SHEET", { sheetIdFrom: currentSheetId, sheetIdTo: sheetId });
+              }
+              // move cursor to the right part of the token
+              this.selectionStart = this.selectionEnd = refToken.end;
+              const zone = this.getters.getRangeFromSheetXC(this.sheetId, xc).zone;
+              this.captureSelection(zone);
+              this.editionMode = "selecting";
+          }
+          else {
+              this.editionMode = "editing";
+          }
+      }
+      captureSelection(zone, col, row) {
+          this.model.selection.capture(this, {
+              cell: { col: col || zone.left, row: row || zone.right },
+              zone,
+          }, {
+              handleEvent: this.handleEvent.bind(this),
+              release: () => {
+                  this._stopEdition();
+              },
+          });
+      }
       isSelectionValid(length, start, end) {
           return start >= 0 && start <= length && end >= 0 && end <= length;
       }
@@ -38314,12 +38311,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.setContent(str || this.initialContent, selection);
           this.colorIndexByRange = {};
           const zone = positionToZone({ col: this.col, row: this.row });
-          this.model.selection.capture(this, { cell: { col: this.col, row: this.row }, zone }, {
-              handleEvent: this.handleEvent.bind(this),
-              release: () => {
-                  this._stopEdition();
-              },
-          });
+          this.captureSelection(zone, col, row);
       }
       _stopEdition() {
           if (this.editionMode !== "inactive") {
@@ -50002,12 +49994,10 @@ stores.inject(MyMetaStore, storeInstance);
    */
   class CorePlugin extends BasePlugin {
       getters;
-      uuidGenerator;
-      constructor({ getters, stateObserver, range, dispatch, canDispatch, uuidGenerator, }) {
+      constructor({ getters, stateObserver, range, dispatch, canDispatch }) {
           super(stateObserver, dispatch, canDispatch);
           range.addRangeProvider(this.adaptRanges.bind(this));
           this.getters = getters;
-          this.uuidGenerator = uuidGenerator;
       }
       // ---------------------------------------------------------------------------
       // Import/Export
@@ -54505,6 +54495,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  let nextTableId = 1;
   class TablePlugin extends CorePlugin {
       static getters = ["getCoreTable", "getCoreTables", "getCoreTableMatchingTopLeft"];
       tables = {};
@@ -54572,7 +54563,7 @@ stores.inject(MyMetaStore, storeInstance);
                   const union = this.getters.getRangesUnion(ranges);
                   const mergesInTarget = this.getters.getMergesInZone(cmd.sheetId, union.zone);
                   this.dispatch("REMOVE_MERGE", { sheetId: cmd.sheetId, target: mergesInTarget });
-                  const id = this.uuidGenerator.uuidv4();
+                  const id = `${nextTableId++}`;
                   const config = cmd.config || DEFAULT_TABLE_CONFIG;
                   const newTable = cmd.tableType === "dynamic"
                       ? this.createDynamicTable(id, union, config)
@@ -54725,7 +54716,7 @@ stores.inject(MyMetaStore, storeInstance);
               filters = [];
               for (const i of range(zone.left, zone.right + 1)) {
                   const filterZone = { ...zone, left: i, right: i };
-                  const uid = this.uuidGenerator.uuidv4();
+                  const uid = `${nextTableId++}`;
                   filters.push(this.createFilterFromZone(uid, tableRange.sheetId, filterZone, config));
               }
           }
@@ -54790,7 +54781,7 @@ stores.inject(MyMetaStore, storeInstance);
                       ? table.filters.find((f) => f.col === i)
                       : undefined;
                   const filterZone = { ...tableZone, left: i, right: i };
-                  const filterId = oldFilter?.id || this.uuidGenerator.uuidv4();
+                  const filterId = oldFilter?.id || `${nextTableId++}`;
                   filters.push(this.createFilterFromZone(filterId, tableRange.sheetId, filterZone, config));
               }
           }
@@ -54891,7 +54882,7 @@ stores.inject(MyMetaStore, storeInstance);
           if (filters.length < zoneToDimension(tableZone).numberOfCols) {
               for (let col = tableZone.left; col <= tableZone.right; col++) {
                   if (!filters.find((filter) => filter.col === col)) {
-                      const uid = this.uuidGenerator.uuidv4();
+                      const uid = `${nextTableId++}`;
                       const filterZone = { ...tableZone, left: col, right: col };
                       filters.push(this.createFilterFromZone(uid, sheetId, filterZone, table.config));
                   }
@@ -54907,7 +54898,7 @@ stores.inject(MyMetaStore, storeInstance);
       import(data) {
           for (const sheet of data.sheets) {
               for (const tableData of sheet.tables || []) {
-                  const uuid = this.uuidGenerator.uuidv4();
+                  const uuid = `${nextTableId++}`;
                   const tableConfig = tableData.config || DEFAULT_TABLE_CONFIG;
                   const range = this.getters.getRangeFromSheetXC(sheet.id, tableData.range);
                   const tableType = tableData.type || "static";
@@ -71756,7 +71747,6 @@ stores.inject(MyMetaStore, storeInstance);
               this.handlers.push(plugin);
               this.uiHandlers.push(plugin);
           }
-          this.uuidGenerator.setIsFastStrategy(false);
           // starting plugins
           this.dispatch("START");
           // Model should be the last permanent subscriber in the list since he should render
@@ -71904,7 +71894,6 @@ stores.inject(MyMetaStore, storeInstance);
               range: this.range,
               dispatch: this.dispatchFromCorePlugin,
               canDispatch: this.canDispatch,
-              uuidGenerator: this.uuidGenerator,
               custom: this.config.custom,
               external: this.config.external,
           };
@@ -72398,9 +72387,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "18.0.1";
-  __info__.date = "2024-10-14T07:54:24.768Z";
-  __info__.hash = "1771f68";
+  __info__.version = "18.1.0-alpha.1";
+  __info__.date = "2024-10-14T07:53:17.717Z";
+  __info__.hash = "e9ce3aa";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);