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

package/dist/o-spreadsheet.esm.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
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -6074,18 +6074,9 @@ function drawDecoratedText(context, text, position, underline = false, strikethr
  * 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));
         }
@@ -9288,6 +9279,49 @@ function getDefinedAxis(definition) {
     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) {
@@ -9374,6 +9408,12 @@ function interpolateData(config, values, labels, newLabels) {
             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);
@@ -9436,10 +9476,12 @@ const chartShowValuesPlugin = {
                 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;
@@ -20170,7 +20212,7 @@ class ContentEditableHelper {
             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);
         }
     }
     /**
@@ -20668,7 +20710,7 @@ class Composer extends Component {
         "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"),
@@ -20787,6 +20829,11 @@ class Composer extends Component {
         this.props.composerStore.cycleReferences();
         this.processContent();
     }
+    toggleEditionMode(ev) {
+        ev.stopPropagation();
+        this.props.composerStore.toggleEditionMode();
+        this.processContent();
+    }
     processNumpadDecimal(ev) {
         ev.stopPropagation();
         ev.preventDefault();
@@ -21012,7 +21059,13 @@ class Composer extends Component {
                     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;
@@ -28038,9 +28091,9 @@ function truncateLabel(label) {
 /**
  * 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
@@ -28087,8 +28140,10 @@ function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale, tr
                         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;
                     },
                 },
@@ -28097,7 +28152,7 @@ function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale, tr
     };
     return {
         type: chart.type,
-        options,
+        options: chartOptions,
         data: {
             labels: truncateLabels ? labels.map(truncateLabel) : labels,
             datasets: [],
@@ -28156,7 +28211,8 @@ function getChartLabelValues(getters, dataSets, labelRange) {
  * 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));
@@ -28410,12 +28466,16 @@ function createBarChartRuntime(chart, getters) {
     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 = {
@@ -28436,51 +28496,27 @@ function createBarChartRuntime(chart, getters) {
     };
     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) {
@@ -28498,9 +28534,8 @@ function createBarChartRuntime(chart, getters) {
             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;
@@ -28516,7 +28551,7 @@ function createBarChartRuntime(chart, getters) {
          */
         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,
@@ -28806,8 +28841,10 @@ function createLineOrScatterChartRuntime(chart, getters) {
     }
     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 = {
@@ -28837,52 +28874,18 @@ function createLineOrScatterChartRuntime(chart, getters) {
             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] &&
@@ -28909,7 +28912,7 @@ function createLineOrScatterChartRuntime(chart, getters) {
                 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})`
@@ -28919,7 +28922,6 @@ function createLineOrScatterChartRuntime(chart, getters) {
     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();
@@ -28960,9 +28962,7 @@ function createLineOrScatterChartRuntime(chart, getters) {
             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;
@@ -28979,7 +28979,7 @@ function createLineOrScatterChartRuntime(chart, getters) {
          * 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,
@@ -29001,10 +29001,6 @@ function createLineOrScatterChartRuntime(chart, getters) {
     return {
         chartJsConfig: config,
         background: chart.background || BACKGROUND_CHART_COLOR,
-        dataSetsValues,
-        labelValues,
-        dataSetFormat,
-        labelFormat,
     };
 }
 
@@ -29137,10 +29133,8 @@ class ComboChart extends AbstractChart {
     }
 }
 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;
@@ -29154,9 +29148,9 @@ function createComboChartRuntime(chart, getters) {
     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 },
     };
@@ -29173,52 +29167,17 @@ function createComboChartRuntime(chart, getters) {
             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;
@@ -29847,7 +29806,7 @@ function createPieChartRuntime(chart, getters) {
         ({ 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));
@@ -30002,7 +29961,7 @@ function createPyramidChartRuntime(chart, getters) {
         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 };
 }
 
@@ -30393,7 +30352,8 @@ function createWaterfallChartRuntime(chart, getters) {
     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, {
@@ -38120,6 +38080,7 @@ class AbstractComposerStore extends SpreadsheetStore {
         "stopComposerRangeSelection",
         "cancelEdition",
         "cycleReferences",
+        "toggleEditionMode",
         "changeComposerCursorSelection",
         "replaceComposerCursorSelection",
     ];
@@ -38275,6 +38236,42 @@ class AbstractComposerStore extends SpreadsheetStore {
         }
         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;
     }
@@ -38313,12 +38310,7 @@ class AbstractComposerStore extends SpreadsheetStore {
         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") {
@@ -50001,12 +49993,10 @@ class BasePlugin {
  */
 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
@@ -54504,6 +54494,7 @@ class SheetPlugin extends CorePlugin {
     }
 }
 
+let nextTableId = 1;
 class TablePlugin extends CorePlugin {
     static getters = ["getCoreTable", "getCoreTables", "getCoreTableMatchingTopLeft"];
     tables = {};
@@ -54571,7 +54562,7 @@ class TablePlugin extends CorePlugin {
                 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)
@@ -54724,7 +54715,7 @@ class TablePlugin extends CorePlugin {
             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));
             }
         }
@@ -54789,7 +54780,7 @@ class TablePlugin extends CorePlugin {
                     ? 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));
             }
         }
@@ -54890,7 +54881,7 @@ class TablePlugin extends CorePlugin {
         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));
                 }
@@ -54906,7 +54897,7 @@ class TablePlugin extends CorePlugin {
     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";
@@ -71755,7 +71746,6 @@ class Model extends EventBus {
             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
@@ -71903,7 +71893,6 @@ class Model extends EventBus {
             range: this.range,
             dispatch: this.dispatchFromCorePlugin,
             canDispatch: this.canDispatch,
-            uuidGenerator: this.uuidGenerator,
             custom: this.config.custom,
             external: this.config.external,
         };
@@ -72354,6 +72343,6 @@ const constants = {
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, 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";