@odoo/o-spreadsheet 18.2.0-alpha.6 → 18.2.0-alpha.7

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.2.0-alpha.6
- * @date 2025-02-05T06:50:47.008Z
- * @hash dae9ab2
+ * @version 18.2.0-alpha.7
+ * @date 2025-02-10T09:01:19.353Z
+ * @hash 0432f17
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -769,9 +769,16 @@ function deepEqualsArray(arr1, arr2) {
     }
     return true;
 }
-/** Check if the given array contains all the values of the other array. */
+/**
+ * Check if the given array contains all the values of the other array.
+ * It makes the assumption that both array do not contain duplicates.
+ */
 function includesAll(arr, values) {
-    return values.every((value) => arr.includes(value));
+    if (arr.length < values.length) {
+        return false;
+    }
+    const set = new Set(arr);
+    return values.every((value) => set.has(value));
 }
 /**
  * Return an object with all the keys in the object that have a falsy value removed.
@@ -3645,10 +3652,8 @@ var CommandResult;
     CommandResult["GaugeRangeMinNaN"] = "GaugeRangeMinNaN";
     CommandResult["EmptyGaugeRangeMax"] = "EmptyGaugeRangeMax";
     CommandResult["GaugeRangeMaxNaN"] = "GaugeRangeMaxNaN";
-    CommandResult["GaugeRangeMinBiggerThanRangeMax"] = "GaugeRangeMinBiggerThanRangeMax";
     CommandResult["GaugeLowerInflectionPointNaN"] = "GaugeLowerInflectionPointNaN";
     CommandResult["GaugeUpperInflectionPointNaN"] = "GaugeUpperInflectionPointNaN";
-    CommandResult["GaugeLowerBiggerThanUpper"] = "GaugeLowerBiggerThanUpper";
     CommandResult["InvalidAutofillSelection"] = "InvalidAutofillSelection";
     CommandResult["MinBiggerThanMax"] = "MinBiggerThanMax";
     CommandResult["LowerBiggerThanUpper"] = "LowerBiggerThanUpper";
@@ -27948,7 +27953,6 @@ const ChartTerms = {
         ["GaugeRangeMinNaN" /* CommandResult.GaugeRangeMinNaN */]: _t("The minimum range limit value must be a number"),
         ["EmptyGaugeRangeMax" /* CommandResult.EmptyGaugeRangeMax */]: _t("A maximum range limit value is needed"),
         ["GaugeRangeMaxNaN" /* CommandResult.GaugeRangeMaxNaN */]: _t("The maximum range limit value must be a number"),
-        ["GaugeRangeMinBiggerThanRangeMax" /* CommandResult.GaugeRangeMinBiggerThanRangeMax */]: _t("Minimum range limit must be smaller than maximum range limit"),
         ["GaugeLowerInflectionPointNaN" /* CommandResult.GaugeLowerInflectionPointNaN */]: _t("The lower inflection point value must be a number"),
         ["GaugeUpperInflectionPointNaN" /* CommandResult.GaugeUpperInflectionPointNaN */]: _t("The upper inflection point value must be a number"),
     },
@@ -29770,6 +29774,8 @@ function getGeoChartTooltip(definition, args) {
     const { locale, axisFormats } = args;
     const format = axisFormats?.y || axisFormats?.y1;
     return {
+        enabled: false,
+        external: customTooltipHandler,
         filter: function (tooltipItem) {
             return tooltipItem.raw.value !== undefined;
         },
@@ -30223,14 +30229,6 @@ function checkInflectionPointsValue(check, batchValidations) {
         return "Success" /* CommandResult.Success */;
     });
 }
-function checkRangeMinBiggerThanRangeMax(definition) {
-    if (definition.sectionRule) {
-        if (Number(definition.sectionRule.rangeMin) >= Number(definition.sectionRule.rangeMax)) {
-            return "GaugeRangeMinBiggerThanRangeMax" /* CommandResult.GaugeRangeMinBiggerThanRangeMax */;
-        }
-    }
-    return "Success" /* CommandResult.Success */;
-}
 function checkEmpty(value, valueName) {
     if (value === "") {
         switch (valueName) {
@@ -30242,7 +30240,10 @@ function checkEmpty(value, valueName) {
     }
     return "Success" /* CommandResult.Success */;
 }
-function checkNaN(value, valueName) {
+function checkValueIsNumberOrFormula(value, valueName) {
+    if (value.startsWith("=")) {
+        return "Success" /* CommandResult.Success */;
+    }
     if (isNaN(value)) {
         switch (valueName) {
             case "rangeMin":
@@ -30269,7 +30270,7 @@ class GaugeChart extends AbstractChart {
         this.background = definition.background;
     }
     static validateChartDefinition(validator, definition) {
-        return validator.checkValidations(definition, isDataRangeValid, validator.chainValidations(checkRangeLimits(checkEmpty, validator.batchValidations), checkRangeLimits(checkNaN, validator.batchValidations), checkRangeMinBiggerThanRangeMax), validator.chainValidations(checkInflectionPointsValue(checkNaN, validator.batchValidations)));
+        return validator.checkValidations(definition, isDataRangeValid, validator.chainValidations(checkRangeLimits(checkEmpty, validator.batchValidations), checkRangeLimits(checkValueIsNumberOrFormula, validator.batchValidations)), validator.chainValidations(checkInflectionPointsValue(checkValueIsNumberOrFormula, validator.batchValidations)));
     }
     static transformDefinition(definition, executed) {
         let dataRangeZone;
@@ -30310,20 +30311,24 @@ class GaugeChart extends AbstractChart {
     }
     duplicateInDuplicatedSheet(newSheetId) {
         const dataRange = duplicateLabelRangeInDuplicatedSheet(this.sheetId, newSheetId, this.dataRange);
-        const definition = this.getDefinitionWithSpecificRanges(dataRange, newSheetId);
+        const adaptFormula = (formula) => this.getters.copyFormulaStringForSheet(this.sheetId, newSheetId, formula, "moveReference");
+        const sectionRule = adaptSectionRuleFormulas(this.sectionRule, adaptFormula);
+        const definition = this.getDefinitionWithSpecificRanges(dataRange, sectionRule, newSheetId);
         return new GaugeChart(definition, newSheetId, this.getters);
     }
     copyInSheetId(sheetId) {
-        const definition = this.getDefinitionWithSpecificRanges(this.dataRange, sheetId);
+        const adaptFormula = (formula) => this.getters.copyFormulaStringForSheet(this.sheetId, sheetId, formula, "keepSameReference");
+        const sectionRule = adaptSectionRuleFormulas(this.sectionRule, adaptFormula);
+        const definition = this.getDefinitionWithSpecificRanges(this.dataRange, sectionRule, sheetId);
         return new GaugeChart(definition, sheetId, this.getters);
     }
     getDefinition() {
-        return this.getDefinitionWithSpecificRanges(this.dataRange);
+        return this.getDefinitionWithSpecificRanges(this.dataRange, this.sectionRule);
     }
-    getDefinitionWithSpecificRanges(dataRange, targetSheetId) {
+    getDefinitionWithSpecificRanges(dataRange, sectionRule, targetSheetId) {
         return {
             background: this.background,
-            sectionRule: this.sectionRule,
+            sectionRule: sectionRule,
             title: this.title,
             type: "gauge",
             dataRange: dataRange
@@ -30344,11 +30349,10 @@ class GaugeChart extends AbstractChart {
         };
     }
     updateRanges(applyChange) {
-        const range = adaptChartRange(this.dataRange, applyChange);
-        if (this.dataRange === range) {
-            return this;
-        }
-        const definition = this.getDefinitionWithSpecificRanges(range);
+        const dataRange = adaptChartRange(this.dataRange, applyChange);
+        const adaptFormula = (formula) => this.getters.adaptFormulaStringDependencies(this.sheetId, formula, applyChange);
+        const sectionRule = adaptSectionRuleFormulas(this.sectionRule, adaptFormula);
+        const definition = this.getDefinitionWithSpecificRanges(dataRange, sectionRule);
         return new GaugeChart(definition, this.sheetId, this.getters);
     }
 }
@@ -30371,12 +30375,18 @@ function createGaugeChartRuntime(chart, getters) {
             format = cell.format;
         }
     }
-    const minValue = Number(chart.sectionRule.rangeMin);
-    const maxValue = Number(chart.sectionRule.rangeMax);
+    let minValue = getFormulaNumberValue(chart.sheetId, chart.sectionRule.rangeMin, getters);
+    let maxValue = getFormulaNumberValue(chart.sheetId, chart.sectionRule.rangeMax, getters);
+    if (minValue === undefined || maxValue === undefined) {
+        return getInvalidGaugeRuntime(chart, getters);
+    }
+    if (maxValue < minValue) {
+        [minValue, maxValue] = [maxValue, minValue];
+    }
     const lowerPoint = chart.sectionRule.lowerInflectionPoint;
     const upperPoint = chart.sectionRule.upperInflectionPoint;
-    const lowerPointValue = getSectionThresholdValue(lowerPoint, minValue, maxValue);
-    const upperPointValue = getSectionThresholdValue(upperPoint, minValue, maxValue);
+    const lowerPointValue = getSectionThresholdValue(chart.sheetId, chart.sectionRule.lowerInflectionPoint, minValue, maxValue, getters);
+    const upperPointValue = getSectionThresholdValue(chart.sheetId, chart.sectionRule.upperInflectionPoint, minValue, maxValue, getters);
     const inflectionValues = [];
     const colors = [];
     if (lowerPointValue !== undefined) {
@@ -30424,16 +30434,46 @@ function createGaugeChartRuntime(chart, getters) {
         colors,
     };
 }
-function getSectionThresholdValue(threshold, minValue, maxValue) {
-    if (threshold.value === "" || isNaN(Number(threshold.value))) {
+function getSectionThresholdValue(sheetId, threshold, minValue, maxValue, getters) {
+    const numberValue = getFormulaNumberValue(sheetId, threshold.value, getters);
+    if (numberValue === undefined) {
         return undefined;
     }
-    const numberValue = Number(threshold.value);
     const value = threshold.type === "number"
         ? numberValue
         : minValue + ((maxValue - minValue) * numberValue) / 100;
     return clip(value, minValue, maxValue);
 }
+function getFormulaNumberValue(sheetId, formula, getters) {
+    const value = getters.evaluateFormula(sheetId, formula);
+    return isMatrix(value) ? undefined : tryToNumber(value, getters.getLocale());
+}
+function getInvalidGaugeRuntime(chart, getters) {
+    return {
+        background: getters.getStyleOfSingleCellChart(chart.background, chart.dataRange).background,
+        title: chart.title ?? { text: "" },
+        minValue: { value: 0, label: "" },
+        maxValue: { value: 100, label: "" },
+        gaugeValue: { value: 0, label: CellErrorType.GenericError },
+        inflectionValues: [],
+        colors: [],
+    };
+}
+function adaptSectionRuleFormulas(sectionRule, adaptCallback) {
+    return {
+        ...sectionRule,
+        rangeMin: adaptCallback(sectionRule.rangeMin),
+        rangeMax: adaptCallback(sectionRule.rangeMax),
+        lowerInflectionPoint: {
+            ...sectionRule.lowerInflectionPoint,
+            value: adaptCallback(sectionRule.lowerInflectionPoint.value),
+        },
+        upperInflectionPoint: {
+            ...sectionRule.upperInflectionPoint,
+            value: adaptCallback(sectionRule.upperInflectionPoint.value),
+        },
+    };
+}
 
 class GeoChart extends AbstractChart {
     dataSets;
@@ -37321,8 +37361,8 @@ function useDragAndDropListItems() {
         document.body.style.cursor = "move";
         state.draggedItemId = args.draggedItemId;
         const container = direction === "horizontal"
-            ? new HorizontalContainer(args.containerEl)
-            : new VerticalContainer(args.containerEl);
+            ? new HorizontalContainer(args.scrollableContainerEl)
+            : new VerticalContainer(args.scrollableContainerEl);
         dndHelper = new DOMDndHelper({
             ...args,
             container,
@@ -37333,8 +37373,8 @@ function useDragAndDropListItems() {
         const stopListening = startDnd(dndHelper.onMouseMove.bind(dndHelper), dndHelper.onMouseUp.bind(dndHelper));
         cleanupFns.push(stopListening);
         const onScroll = dndHelper.onScroll.bind(dndHelper);
-        args.containerEl.addEventListener("scroll", onScroll);
-        cleanupFns.push(() => args.containerEl.removeEventListener("scroll", onScroll));
+        args.scrollableContainerEl.addEventListener("scroll", onScroll);
+        cleanupFns.push(() => args.scrollableContainerEl.removeEventListener("scroll", onScroll));
         cleanupFns.push(dndHelper.destroy.bind(dndHelper));
     };
     onWillUnmount(() => {
@@ -38045,7 +38085,7 @@ class SelectionInput extends Component {
             draggedItemId: rangeId.toString(),
             initialMousePosition: event.clientY,
             items: draggableItems,
-            containerEl: this.selectionRef.el,
+            scrollableContainerEl: this.selectionRef.el,
             onDragEnd: (dimensionName, finalIndex) => {
                 const originalIndex = draggableIds.findIndex((id) => id === rangeId);
                 if (originalIndex === finalIndex) {
@@ -39614,1897 +39654,1954 @@ class GaugeChartConfigPanel extends Component {
     }
 }
 
-css /* scss */ `
-  .o-gauge-color-set {
-    table {
-      table-layout: fixed;
-      margin-top: 2%;
-      display: table;
-      text-align: left;
-      font-size: 12px;
-      line-height: 18px;
-      width: 100%;
-      font-size: 12px;
+class DOMFocusableElementStore {
+    mutators = ["setFocusableElement"];
+    focusableElement = undefined;
+    setFocusableElement(element) {
+        this.focusableElement = element;
     }
+}
 
-    td {
-      box-sizing: border-box;
-      height: 30px;
-      padding: 6px 0;
-    }
-    th.o-gauge-color-set-colorPicker {
-      width: 8%;
-    }
-    th.o-gauge-color-set-text {
-      width: 25%;
-    }
-    th.o-gauge-color-set-operator {
-      width: 10%;
-    }
-    th.o-gauge-color-set-value {
-      width: 22%;
-    }
-    th.o-gauge-color-set-type {
-      width: 30%;
+css /* scss */ `
+  .o-autocomplete-dropdown {
+    pointer-events: auto;
+    cursor: pointer;
+    background-color: #fff;
+    max-width: 400px;
+    z-index: 1;
+
+    .o-autocomplete-value-focus {
+      background-color: #f2f2f2;
     }
-    input,
-    select {
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
+
+    & > div {
+      padding: 1px 5px 5px 5px;
+      .o-autocomplete-description {
+        padding-left: 5px;
+        font-size: 11px;
+      }
     }
   }
 `;
-class GaugeChartDesignPanel extends Component {
-    static template = "o-spreadsheet-GaugeChartDesignPanel";
-    static components = {
-        SidePanelCollapsible,
-        Section,
-        RoundColorPicker,
-        GeneralDesignEditor,
-        ChartErrorSection,
-    };
+class TextValueProvider extends Component {
+    static template = "o-spreadsheet-TextValueProvider";
     static props = {
-        figureId: String,
-        definition: Object,
-        updateChart: Function,
-        canUpdateChart: { type: Function, optional: true },
+        proposals: Array,
+        selectedIndex: { type: Number, optional: true },
+        onValueSelected: Function,
+        onValueHovered: Function,
     };
-    state;
+    autoCompleteListRef = useRef("autoCompleteList");
     setup() {
-        this.state = useState({
-            sectionRuleDispatchResult: undefined,
-            sectionRule: deepCopy(this.props.definition.sectionRule),
-        });
+        useEffect(() => {
+            const selectedIndex = this.props.selectedIndex;
+            if (selectedIndex === undefined) {
+                return;
+            }
+            const selectedElement = this.autoCompleteListRef.el?.children[selectedIndex];
+            selectedElement?.scrollIntoView?.({ block: "nearest" });
+        }, () => [this.props.selectedIndex, this.autoCompleteListRef.el]);
     }
-    get designErrorMessages() {
-        const cancelledReasons = [...(this.state.sectionRuleDispatchResult?.reasons || [])];
-        return cancelledReasons.map((error) => ChartTerms.Errors[error] || ChartTerms.Errors.Unexpected);
+}
+
+class AutoCompleteStore extends SpreadsheetStore {
+    mutators = ["useProvider", "moveSelection", "hide", "selectIndex"];
+    selectedIndex = undefined;
+    provider;
+    get selectedProposal() {
+        if (this.selectedIndex === undefined || this.provider === undefined) {
+            return undefined;
+        }
+        return this.provider.proposals[this.selectedIndex];
     }
-    isRangeMinInvalid() {
-        return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("EmptyGaugeRangeMin" /* CommandResult.EmptyGaugeRangeMin */) ||
-            this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeRangeMinNaN" /* CommandResult.GaugeRangeMinNaN */) ||
-            this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeRangeMinBiggerThanRangeMax" /* CommandResult.GaugeRangeMinBiggerThanRangeMax */));
+    useProvider(provider) {
+        this.provider = provider;
+        this.selectedIndex = provider.autoSelectFirstProposal ? 0 : undefined;
     }
-    isRangeMaxInvalid() {
-        return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("EmptyGaugeRangeMax" /* CommandResult.EmptyGaugeRangeMax */) ||
-            this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeRangeMaxNaN" /* CommandResult.GaugeRangeMaxNaN */) ||
-            this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeRangeMinBiggerThanRangeMax" /* CommandResult.GaugeRangeMinBiggerThanRangeMax */));
+    hide() {
+        this.provider = undefined;
+        this.selectedIndex = undefined;
     }
-    // ---------------------------------------------------------------------------
-    // COLOR_SECTION_TEMPLATE
-    // ---------------------------------------------------------------------------
-    get isLowerInflectionPointInvalid() {
-        return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeLowerInflectionPointNaN" /* CommandResult.GaugeLowerInflectionPointNaN */) ||
-            this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeLowerBiggerThanUpper" /* CommandResult.GaugeLowerBiggerThanUpper */));
+    selectIndex(index) {
+        this.selectedIndex = index;
     }
-    get isUpperInflectionPointInvalid() {
-        return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeUpperInflectionPointNaN" /* CommandResult.GaugeUpperInflectionPointNaN */) ||
-            this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeLowerBiggerThanUpper" /* CommandResult.GaugeLowerBiggerThanUpper */));
+    moveSelection(direction) {
+        if (!this.provider) {
+            return;
+        }
+        if (this.selectedIndex === undefined) {
+            this.selectedIndex = 0;
+            return;
+        }
+        if (direction === "previous") {
+            this.selectedIndex--;
+            if (this.selectedIndex < 0) {
+                this.selectedIndex = this.provider.proposals.length - 1;
+            }
+        }
+        else {
+            this.selectedIndex = (this.selectedIndex + 1) % this.provider.proposals.length;
+        }
     }
-    updateSectionColor(target, color) {
-        const sectionRule = deepCopy(this.state.sectionRule);
-        sectionRule.colors[target] = color;
-        this.updateSectionRule(sectionRule);
+}
+
+class ContentEditableHelper {
+    // todo make el private and expose dedicated methods
+    el;
+    constructor(el) {
+        this.el = el;
     }
-    updateSectionRule(sectionRule) {
-        this.state.sectionRuleDispatchResult = this.props.updateChart(this.props.figureId, {
-            sectionRule,
-        });
-        if (this.state.sectionRuleDispatchResult.isSuccessful) {
-            this.state.sectionRule = deepCopy(sectionRule);
+    updateEl(el) {
+        this.el = el;
+    }
+    /**
+     * select the text at position start to end, no matter the children
+     */
+    selectRange(start, end) {
+        let selection = window.getSelection();
+        const { start: currentStart, end: currentEnd } = this.getCurrentSelection();
+        if (currentStart === start && currentEnd === end) {
+            return;
+        }
+        if (selection.rangeCount === 0) {
+            const range = document.createRange();
+            selection.addRange(range);
+        }
+        const currentRange = selection.getRangeAt(0);
+        let range;
+        if (this.el.contains(currentRange.startContainer)) {
+            range = currentRange;
+        }
+        else {
+            range = document.createRange();
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+        if (start === end && start === 0) {
+            range.setStart(this.el, 0);
+            range.setEnd(this.el, 0);
+        }
+        else {
+            const textLength = this.getText().length;
+            if (start < 0 || end > textLength) {
+                console.warn(`wrong selection asked start ${start}, end ${end}, text content length ${textLength}`);
+                if (start < 0)
+                    start = 0;
+                if (end > textLength)
+                    end = textLength;
+                if (start > textLength)
+                    start = textLength;
+            }
+            let startNode = this.findChildAtCharacterIndex(start);
+            let endNode = this.findChildAtCharacterIndex(end);
+            range.setStart(startNode.node, startNode.offset);
+            range.setEnd(endNode.node, endNode.offset);
         }
     }
-    canUpdateSectionRule(sectionRule) {
-        this.state.sectionRuleDispatchResult = this.props.canUpdateChart(this.props.figureId, {
-            sectionRule,
-        });
+    /**
+     * finds the dom element that contains the character at `offset`
+     */
+    findChildAtCharacterIndex(offset) {
+        let it = iterateChildren(this.el);
+        let current, previous;
+        let usedCharacters = offset;
+        let isFirstParagraph = true;
+        do {
+            current = it.next();
+            if (!current.done && !current.value.hasChildNodes()) {
+                if (current.value.textContent && current.value.textContent.length < usedCharacters) {
+                    usedCharacters -= current.value.textContent.length;
+                }
+                else if (current.value.textContent &&
+                    current.value.textContent.length >= usedCharacters) {
+                    it.return(current.value);
+                }
+                previous = current.value;
+            }
+            // One new paragraph = one new line character, except for the first paragraph
+            if (!current.done && current.value.nodeName === "P") {
+                if (isFirstParagraph) {
+                    isFirstParagraph = false;
+                }
+                else {
+                    usedCharacters--;
+                }
+            }
+        } while (!current.done && usedCharacters);
+        if (current.value) {
+            return { node: current.value, offset: usedCharacters };
+        }
+        return { node: previous, offset: usedCharacters };
     }
-}
-
-class GeoChartRegionSelectSection extends Component {
-    static template = "o-spreadsheet-GeoChartRegionSelectSection";
-    static components = { Section };
-    static props = {
-        figureId: String,
-        definition: Object,
-        updateChart: Function,
-    };
-    updateSelectedRegion(ev) {
-        const value = ev.target.value;
-        this.props.updateChart(this.props.figureId, { region: value });
+    /**
+     * Sets (or Replaces all) the text inside the root element in the form of distinctive paragraphs and
+     * span for each element provided in `contents`.
+     *
+     * The function will apply the diff between the current content and the new content to avoid the systematic
+     * destruction of DOM elements which interferes with IME[1]
+     *
+     * Each line of text will be encapsulated in a paragraph element.
+     * Each span will have its own fontcolor and specific class if provided in the HtmlContent object.
+     *
+     * [1] https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor
+     */
+    setText(contents) {
+        if (contents.length === 0) {
+            this.removeAll();
+            return;
+        }
+        const childElements = Array.from(this.el.childNodes);
+        const contentLength = contents.length;
+        for (let i = 0; i < contentLength; i++) {
+            const line = contents[i];
+            const childElement = childElements[i];
+            let newChild = false;
+            let p;
+            if (childElement && childElement.nodeName === "P") {
+                p = childElement;
+            }
+            else {
+                newChild = true;
+                p = document.createElement("p");
+            }
+            const lineLength = line.length;
+            const existingChildren = Array.from(p.childNodes);
+            for (let j = 0; j < lineLength; j++) {
+                const content = line[j];
+                const child = existingChildren[j];
+                // child nodes can be multiple types of nodes: Span, Text, Div, etc...
+                // We can only modify a node in place if it has the same type as the content
+                // that we would insert, which are spans.
+                // Otherwise, it means that the node has been input by the user, through the keyboard or a copy/paste
+                // @ts-ignore (somehow required because jest does not like child.tagName despite the prior check)
+                const childIsSpan = child && "tagName" in child && child.tagName === "SPAN";
+                if (childIsSpan && compareContentToSpanElement(content, child)) {
+                    continue;
+                }
+                // this is an empty line in the content
+                if (!content.value && !content.class) {
+                    if (child)
+                        p.removeChild(child);
+                    continue;
+                }
+                const span = document.createElement("span");
+                span.innerText = content.value;
+                span.style.color = content.color || "";
+                if (content.class) {
+                    span.classList.add(content.class);
+                }
+                if (child) {
+                    p.replaceChild(span, child);
+                }
+                else {
+                    p.appendChild(span);
+                }
+            }
+            if (existingChildren.length > lineLength) {
+                for (let i = lineLength; i < existingChildren.length; i++) {
+                    p.removeChild(existingChildren[i]);
+                }
+            }
+            // Empty line
+            if (!p.hasChildNodes()) {
+                const span = document.createElement("span");
+                span.appendChild(document.createElement("br"));
+                p.appendChild(span);
+            }
+            // replace p if necessary
+            if (newChild) {
+                if (childElement) {
+                    this.el.replaceChild(p, childElement);
+                }
+                else {
+                    this.el.appendChild(p);
+                }
+            }
+        }
+        if (childElements.length > contentLength) {
+            for (let i = contentLength; i < childElements.length; i++) {
+                this.el.removeChild(childElements[i]);
+            }
+        }
     }
-    get availableRegions() {
-        return this.env.model.getters.getGeoChartAvailableRegions();
+    scrollSelectionIntoView() {
+        const focusedNode = document.getSelection()?.focusNode;
+        if (!focusedNode || !this.el.contains(focusedNode))
+            return;
+        const element = focusedNode instanceof HTMLElement ? focusedNode : focusedNode.parentElement;
+        element?.scrollIntoView?.({ block: "nearest" });
     }
-    get selectedRegion() {
-        return this.props.definition.region || this.availableRegions[0]?.id;
+    /**
+     * remove the current selection of the user
+     * */
+    removeSelection() {
+        let selection = window.getSelection();
+        selection.removeAllRanges();
     }
-}
-
-class GeoChartConfigPanel extends GenericChartConfigPanel {
-    static template = "o-spreadsheet-GeoChartConfigPanel";
-    static components = { ...GenericChartConfigPanel.components, GeoChartRegionSelectSection };
-    get dataRanges() {
-        return this.getDataSeriesRanges().slice(0, 1);
+    removeAll() {
+        if (this.el) {
+            while (this.el.firstChild) {
+                this.el.removeChild(this.el.firstChild);
+            }
+        }
     }
-    onDataSeriesConfirmed() {
-        this.dataSets = spreadRange(this.env.model.getters, this.dataSets).slice(0, 1);
-        this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
-            dataSets: this.dataSets,
-        });
+    /**
+     * finds the indexes of the current selection.
+     * */
+    getCurrentSelection() {
+        return getCurrentSelection(this.el);
     }
-    getLabelRangeOptions() {
-        return [
-            {
-                name: "dataSetsHaveTitle",
-                label: this.dataSetsHaveTitleLabel,
-                value: this.props.definition.dataSetsHaveTitle,
-                onChange: this.onUpdateDataSetsHaveTitle.bind(this),
-            },
-        ];
+    getText() {
+        let text = "";
+        let it = iterateChildren(this.el);
+        let current = it.next();
+        let isFirstParagraph = true;
+        while (!current.done) {
+            if (!current.value.hasChildNodes()) {
+                text += current.value.textContent;
+            }
+            if (current.value.nodeName === "P" ||
+                (current.value.nodeName === "DIV" && current.value !== this.el) // On paste, the HTML may contain <div> instead of <p>
+            ) {
+                if (isFirstParagraph) {
+                    isFirstParagraph = false;
+                }
+                else {
+                    text += NEWLINE;
+                }
+            }
+            current = it.next();
+        }
+        return text;
     }
 }
+function compareContentToSpanElement(content, node) {
+    const contentColor = content.color ? toHex(content.color) : "";
+    const nodeColor = node.style?.color ? toHex(node.style.color) : "";
+    const sameColor = contentColor === nodeColor;
+    const sameClass = deepEquals([content.class], [...node.classList]);
+    const sameContent = node.innerText === content.value;
+    return sameColor && sameClass && sameContent;
+}
 
-const DEFAULT_CUSTOM_COLOR_SCALE = {
-    minColor: "#FFF5EB",
-    midColor: "#FD8D3C",
-    maxColor: "#7F2704",
-};
-class GeoChartDesignPanel extends ChartWithAxisDesignPanel {
-    static template = "o-spreadsheet-GeoChartDesignPanel";
-    static components = { ...ChartWithAxisDesignPanel.components, RoundColorPicker };
-    colorScalesChoices = ChartTerms.GeoChart.ColorScales;
-    updateColorScaleType(ev) {
-        const value = ev.target.value;
-        value === "custom"
-            ? this.updateColorScale(DEFAULT_CUSTOM_COLOR_SCALE)
-            : this.updateColorScale(value);
+// -----------------------------------------------------------------------------
+// Formula Assistant component
+// -----------------------------------------------------------------------------
+css /* scss */ `
+  .o-formula-assistant {
+    background: #ffffff;
+    .o-formula-assistant-head {
+      background-color: #f2f2f2;
+      padding: 10px;
     }
-    updateColorScale(colorScale) {
-        this.props.updateChart(this.props.figureId, { colorScale });
+    .collapsed {
+      transform: rotate(180deg);
     }
-    updateMissingValueColor(color) {
-        this.props.updateChart(this.props.figureId, { missingValueColor: color });
+    .o-formula-assistant-core {
+      border-bottom: 1px solid gray;
     }
-    updateLegendPosition(ev) {
-        const value = ev.target.value;
-        this.props.updateChart(this.props.figureId, { legendPosition: value });
+    .o-formula-assistant-arg-description {
+      font-size: 85%;
     }
-    get selectedColorScale() {
-        return typeof this.props.definition.colorScale === "object"
-            ? "custom"
-            : this.props.definition.colorScale || "oranges";
+    .o-formula-assistant-focus {
+      div:first-child,
+      span {
+        color: ${COMPOSER_ASSISTANT_COLOR};
+        text-shadow: 0px 0px 1px ${COMPOSER_ASSISTANT_COLOR};
+      }
+      div:last-child {
+        color: black;
+      }
     }
-    get selectedMissingValueColor() {
-        return this.props.definition.missingValueColor || "#ffffff";
+    .o-formula-assistant-gray {
+      color: gray;
     }
-    get customColorScale() {
-        if (typeof this.props.definition.colorScale === "object") {
-            return this.props.definition.colorScale;
-        }
-        return undefined;
+  }
+`;
+class FunctionDescriptionProvider extends Component {
+    static template = "o-spreadsheet-FunctionDescriptionProvider";
+    static props = {
+        functionName: String,
+        functionDescription: Object,
+        argToFocus: Number,
+    };
+    getContext() {
+        return this.props;
     }
-    getCustomColorScaleColor(color) {
-        return this.customColorScale?.[color] ?? "";
-    }
-    setCustomColorScaleColor(colorType, color) {
-        if (!color && colorType !== "midColor") {
-            color = "#fff";
-        }
-        const customColorScale = this.customColorScale;
-        if (!customColorScale) {
-            return;
-        }
-        this.updateColorScale({ ...customColorScale, [colorType]: color });
+    get formulaArgSeparator() {
+        return this.env.model.getters.getLocale().formulaArgSeparator + " ";
     }
 }
 
-class LineConfigPanel extends GenericChartConfigPanel {
-    static template = "o-spreadsheet-LineConfigPanel";
-    get canTreatLabelsAsText() {
-        const chart = this.env.model.getters.getChart(this.props.figureId);
-        if (chart && chart instanceof LineChart) {
-            return canChartParseLabels(chart.labelRange, this.env.model.getters);
-        }
-        return false;
-    }
-    get stackedLabel() {
-        const definition = this.props.definition;
-        return definition.fillArea
-            ? this.chartTerms.StackedAreaChart
-            : this.chartTerms.StackedLineChart;
-    }
-    getLabelRangeOptions() {
-        const options = super.getLabelRangeOptions();
-        if (this.canTreatLabelsAsText) {
-            options.push({
-                name: "labelsAsText",
-                value: this.props.definition.labelsAsText,
-                label: this.chartTerms.TreatLabelsAsText,
-                onChange: this.onUpdateLabelsAsText.bind(this),
-            });
-        }
-        return options;
-    }
-    onUpdateLabelsAsText(labelsAsText) {
-        this.props.updateChart(this.props.figureId, {
-            labelsAsText,
-        });
-    }
-    onUpdateStacked(stacked) {
-        this.props.updateChart(this.props.figureId, {
-            stacked,
-        });
-    }
-    onUpdateCumulative(cumulative) {
-        this.props.updateChart(this.props.figureId, {
-            cumulative,
-        });
-    }
-}
+const functions = functionRegistry.content;
+const ASSISTANT_WIDTH = 300;
+const CLOSE_ICON_RADIUS = 9;
+const selectionIndicatorClass = "selector-flag";
+const backgroundClass = "background-flag";
+const selectionIndicatorColor = "#a9a9a9";
+const selectionIndicator = "␣";
+css /* scss */ `
+  .o-composer-container {
+    .o-composer {
+      overflow-y: auto;
+      overflow-x: hidden;
+      word-break: break-all;
+      padding-right: 2px;
 
-class PieChartDesignPanel extends Component {
-    static template = "o-spreadsheet-PieChartDesignPanel";
-    static components = {
-        GeneralDesignEditor,
-        Section,
-        Checkbox,
-        ChartLegend,
-    };
-    static props = {
-        figureId: String,
-        definition: Object,
-        updateChart: Function,
-        canUpdateChart: { type: Function, optional: true },
-    };
-}
+      box-sizing: border-box;
 
-class RadarChartDesignPanel extends Component {
-    static template = "o-spreadsheet-RadarChartDesignPanel";
-    static components = {
-        GeneralDesignEditor,
-        SeriesDesignEditor,
-        Section,
-        Checkbox,
-        ChartLegend,
-    };
-    static props = {
-        figureId: String,
-        definition: Object,
-        canUpdateChart: Function,
-        updateChart: Function,
-    };
-}
+      caret-color: black;
+      padding-left: 3px;
+      padding-right: 3px;
+      outline: none;
 
-class ScatterConfigPanel extends GenericChartConfigPanel {
-    static template = "o-spreadsheet-ScatterConfigPanel";
-    get canTreatLabelsAsText() {
-        const chart = this.env.model.getters.getChart(this.props.figureId);
-        if (chart && chart instanceof ScatterChart) {
-            return canChartParseLabels(chart.labelRange, this.env.model.getters);
-        }
-        return false;
-    }
-    onUpdateLabelsAsText(labelsAsText) {
-        this.props.updateChart(this.props.figureId, {
-            labelsAsText,
-        });
-    }
-    getLabelRangeOptions() {
-        const options = super.getLabelRangeOptions();
-        if (this.canTreatLabelsAsText) {
-            options.push({
-                name: "labelsAsText",
-                value: this.props.definition.labelsAsText,
-                label: this.chartTerms.TreatLabelsAsText,
-                onChange: this.onUpdateLabelsAsText.bind(this),
-            });
-        }
-        return options;
-    }
-}
+      p {
+        margin-bottom: 0px;
 
-class ScorecardChartConfigPanel extends Component {
-    static template = "o-spreadsheet-ScorecardChartConfigPanel";
-    static components = { SelectionInput, ChartErrorSection, Section };
-    static props = {
-        figureId: String,
-        definition: Object,
-        updateChart: Function,
-        canUpdateChart: Function,
-    };
-    state = useState({
-        keyValueDispatchResult: undefined,
-        baselineDispatchResult: undefined,
-    });
-    keyValue = this.props.definition.keyValue;
-    baseline = this.props.definition.baseline;
-    get errorMessages() {
-        const cancelledReasons = [
-            ...(this.state.keyValueDispatchResult?.reasons || []),
-            ...(this.state.baselineDispatchResult?.reasons || []),
-        ];
-        return cancelledReasons.map((error) => ChartTerms.Errors[error] || ChartTerms.Errors.Unexpected);
-    }
-    get isKeyValueInvalid() {
-        return !!this.state.keyValueDispatchResult?.isCancelledBecause("InvalidScorecardKeyValue" /* CommandResult.InvalidScorecardKeyValue */);
-    }
-    get isBaselineInvalid() {
-        return !!this.state.keyValueDispatchResult?.isCancelledBecause("InvalidScorecardBaseline" /* CommandResult.InvalidScorecardBaseline */);
-    }
-    onKeyValueRangeChanged(ranges) {
-        this.keyValue = ranges[0];
-        this.state.keyValueDispatchResult = this.props.canUpdateChart(this.props.figureId, {
-            keyValue: this.keyValue,
-        });
-    }
-    updateKeyValueRange() {
-        this.state.keyValueDispatchResult = this.props.updateChart(this.props.figureId, {
-            keyValue: this.keyValue,
-        });
-    }
-    getKeyValueRange() {
-        return this.keyValue || "";
-    }
-    onBaselineRangeChanged(ranges) {
-        this.baseline = ranges[0];
-        this.state.baselineDispatchResult = this.props.canUpdateChart(this.props.figureId, {
-            baseline: this.baseline,
-        });
-    }
-    updateBaselineRange() {
-        this.state.baselineDispatchResult = this.props.updateChart(this.props.figureId, {
-            baseline: this.baseline,
-        });
-    }
-    getBaselineRange() {
-        return this.baseline || "";
-    }
-    updateBaselineMode(ev) {
-        this.props.updateChart(this.props.figureId, { baselineMode: ev.target.value });
-    }
-}
+        span {
+          white-space: pre-wrap;
 
-class ScorecardChartDesignPanel extends Component {
-    static template = "o-spreadsheet-ScorecardChartDesignPanel";
-    static components = {
-        GeneralDesignEditor,
-        RoundColorPicker,
-        SidePanelCollapsible,
-        Section,
-        Checkbox,
-    };
-    static props = {
-        figureId: String,
-        definition: Object,
-        updateChart: Function,
-        canUpdateChart: { type: Function, optional: true },
-    };
-    get colorsSectionTitle() {
-        return this.props.definition.baselineMode === "progress"
-            ? _t("Progress bar colors")
-            : _t("Baseline colors");
-    }
-    get humanizeNumbersLabel() {
-        return _t("Humanize numbers");
-    }
-    get defaultScorecardTitleFontSize() {
-        return SCORECARD_CHART_TITLE_FONT_SIZE;
-    }
-    updateHumanizeNumbers(humanize) {
-        this.props.updateChart(this.props.figureId, { humanize });
-    }
-    translate(term) {
-        return _t(term);
-    }
-    updateBaselineDescr(ev) {
-        this.props.updateChart(this.props.figureId, { baselineDescr: ev.target.value });
-    }
-    setColor(color, colorPickerId) {
-        switch (colorPickerId) {
-            case "backgroundColor":
-                this.props.updateChart(this.props.figureId, { background: color });
-                break;
-            case "baselineColorDown":
-                this.props.updateChart(this.props.figureId, { baselineColorDown: color });
-                break;
-            case "baselineColorUp":
-                this.props.updateChart(this.props.figureId, { baselineColorUp: color });
-                break;
-        }
-    }
-}
+          &.${selectionIndicatorClass}:after {
+            content: "${selectionIndicator}";
+            color: ${selectionIndicatorColor};
+          }
 
-class WaterfallChartDesignPanel extends Component {
-    static template = "o-spreadsheet-WaterfallChartDesignPanel";
-    static components = {
-        GeneralDesignEditor,
-        Checkbox,
-        SidePanelCollapsible,
-        Section,
-        RoundColorPicker,
-        AxisDesignEditor,
-        RadioSelection,
-        ChartLegend,
-    };
-    static props = {
-        figureId: String,
-        definition: Object,
-        updateChart: Function,
-        canUpdateChart: { type: Function, optional: true },
-    };
-    axisChoices = CHART_AXIS_CHOICES;
-    onUpdateShowSubTotals(showSubTotals) {
-        this.props.updateChart(this.props.figureId, { showSubTotals });
-    }
-    onUpdateShowConnectorLines(showConnectorLines) {
-        this.props.updateChart(this.props.figureId, { showConnectorLines });
-    }
-    onUpdateFirstValueAsSubtotal(firstValueAsSubtotal) {
-        this.props.updateChart(this.props.figureId, { firstValueAsSubtotal });
-    }
-    updateColor(colorName, color) {
-        this.props.updateChart(this.props.figureId, { [colorName]: color });
-    }
-    get axesList() {
-        return [
-            { id: "x", name: _t("Horizontal axis") },
-            { id: "y", name: _t("Vertical axis") },
-        ];
-    }
-    get positiveValuesColor() {
-        return (this.props.definition.positiveValuesColor ||
-            CHART_WATERFALL_POSITIVE_COLOR);
-    }
-    get negativeValuesColor() {
-        return (this.props.definition.negativeValuesColor ||
-            CHART_WATERFALL_NEGATIVE_COLOR);
+          &.${backgroundClass} {
+            border-radius: 5px;
+            background-color: lightgray;
+            padding: 0px 1.5px 1.5px 1.5px;
+          }
+        }
+      }
     }
-    get subTotalValuesColor() {
-        return (this.props.definition.subTotalValuesColor ||
-            CHART_WATERFALL_SUBTOTAL_COLOR);
+    .o-composer[placeholder]:empty:not(:focus):not(.active)::before {
+      content: attr(placeholder);
+      color: #bdbdbd;
+      position: relative;
+      top: 0%;
+      pointer-events: none;
     }
-    updateVerticalAxisPosition(value) {
-        this.props.updateChart(this.props.figureId, {
-            verticalAxisPosition: value,
-        });
+
+    .fa-stack {
+      /* reset stack size which is doubled by default */
+      width: ${CLOSE_ICON_RADIUS * 2}px;
+      height: ${CLOSE_ICON_RADIUS * 2}px;
+      line-height: ${CLOSE_ICON_RADIUS * 2}px;
     }
-}
 
-const chartSidePanelComponentRegistry = new Registry();
-chartSidePanelComponentRegistry
-    .add("line", {
-    configuration: LineConfigPanel,
-    design: ChartWithAxisDesignPanel,
-})
-    .add("scatter", {
-    configuration: ScatterConfigPanel,
-    design: ChartWithAxisDesignPanel,
-})
-    .add("bar", {
-    configuration: BarConfigPanel,
-    design: ChartWithAxisDesignPanel,
-})
-    .add("combo", {
-    configuration: GenericChartConfigPanel,
-    design: ComboChartDesignPanel,
-})
-    .add("pie", {
-    configuration: GenericChartConfigPanel,
-    design: PieChartDesignPanel,
-})
-    .add("gauge", {
-    configuration: GaugeChartConfigPanel,
-    design: GaugeChartDesignPanel,
-})
-    .add("scorecard", {
-    configuration: ScorecardChartConfigPanel,
-    design: ScorecardChartDesignPanel,
-})
-    .add("waterfall", {
-    configuration: GenericChartConfigPanel,
-    design: WaterfallChartDesignPanel,
-})
-    .add("pyramid", {
-    configuration: GenericChartConfigPanel,
-    design: ChartWithAxisDesignPanel,
-})
-    .add("radar", {
-    configuration: GenericChartConfigPanel,
-    design: RadarChartDesignPanel,
-})
-    .add("geo", {
-    configuration: GeoChartConfigPanel,
-    design: GeoChartDesignPanel,
-});
+    .force-open-assistant {
+      left: -1px;
+      top: -1px;
 
-css /* scss */ `
-  .o-section .o-input.o-type-selector {
-    height: 30px;
-    padding-left: 35px;
-    padding-top: 5px;
-  }
-  .o-type-selector-preview {
-    left: 5px;
-    top: 3px;
-    .o-chart-preview {
-      width: 24px;
-      height: 24px;
+      .fa-question-circle {
+        color: ${PRIMARY_BUTTON_BG};
+      }
     }
-  }
 
-  .o-popover .o-chart-select-popover {
-    box-sizing: border-box;
-    background: #fff;
-    .o-chart-type-item {
-      cursor: pointer;
-      padding: 3px 6px;
-      margin: 1px 2px;
-      &.selected,
-      &:hover {
-        border: 1px solid ${ACTION_COLOR};
-        background: ${BADGE_SELECTED_COLOR};
-        padding: 2px 5px;
-      }
-      .o-chart-preview {
-        width: 48px;
-        height: 48px;
+    .o-composer-assistant {
+      position: absolute;
+      margin: 1px 4px;
+
+      .o-semi-bold {
+        /* FIXME: to remove in favor of Bootstrap
+        * 'fw-semibold' when we upgrade to Bootstrap 5.2
+        */
+        font-weight: 600 !important;
       }
     }
   }
 `;
-class ChartTypePicker extends Component {
-    static template = "o-spreadsheet-ChartTypePicker";
-    static components = { Section, Popover };
-    static props = { figureId: String, chartPanelStore: Object };
-    categories = chartCategories;
-    chartTypeByCategories = {};
-    popoverRef = useRef("popoverRef");
-    selectRef = useRef("selectRef");
-    state = useState({ popoverProps: undefined, popoverStyle: "" });
-    setup() {
-        useExternalListener(window, "pointerdown", this.onExternalClick, { capture: true });
-        for (const subtypeProperties of chartSubtypeRegistry.getAll()) {
-            if (this.chartTypeByCategories[subtypeProperties.category]) {
-                this.chartTypeByCategories[subtypeProperties.category].push(subtypeProperties);
+class Composer extends Component {
+    static template = "o-spreadsheet-Composer";
+    static props = {
+        focus: {
+            validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value),
+        },
+        inputStyle: { type: String, optional: true },
+        rect: { type: Object, optional: true },
+        delimitation: { type: Object, optional: true },
+        onComposerCellFocused: { type: Function, optional: true },
+        onComposerContentFocused: Function,
+        isDefaultFocus: { type: Boolean, optional: true },
+        onInputContextMenu: { type: Function, optional: true },
+        composerStore: Object,
+        placeholder: { type: String, optional: true },
+    };
+    static components = { TextValueProvider, FunctionDescriptionProvider };
+    static defaultProps = {
+        inputStyle: "",
+        isDefaultFocus: false,
+    };
+    DOMFocusableElementStore;
+    composerRef = useRef("o_composer");
+    contentHelper = new ContentEditableHelper(this.composerRef.el);
+    composerState = useState({
+        positionStart: 0,
+        positionEnd: 0,
+    });
+    autoCompleteState;
+    functionDescriptionState = useState({
+        showDescription: false,
+        functionName: "",
+        functionDescription: {},
+        argToFocus: 0,
+    });
+    assistant = useState({
+        forcedClosed: false,
+    });
+    compositionActive = false;
+    spreadsheetRect = useSpreadsheetRect();
+    get assistantStyle() {
+        const composerRect = this.composerRef.el.getBoundingClientRect();
+        const assistantStyle = {};
+        assistantStyle["min-width"] = `${this.props.rect?.width || ASSISTANT_WIDTH}px`;
+        const proposals = this.autoCompleteState.provider?.proposals;
+        const proposalsHaveDescription = proposals?.some((proposal) => proposal.description);
+        if (this.functionDescriptionState.showDescription || proposalsHaveDescription) {
+            assistantStyle.width = `${ASSISTANT_WIDTH}px`;
+        }
+        if (this.props.delimitation && this.props.rect) {
+            const { x: cellX, y: cellY, height: cellHeight } = this.props.rect;
+            const remainingHeight = this.props.delimitation.height - (cellY + cellHeight);
+            assistantStyle["max-height"] = `${remainingHeight}px`;
+            if (cellY > remainingHeight) {
+                const availableSpaceAbove = cellY;
+                assistantStyle["max-height"] = `${availableSpaceAbove - CLOSE_ICON_RADIUS}px`;
+                // render top
+                // We compensate 2 px of margin on the assistant style + 1px for design reasons
+                assistantStyle.top = `-3px`;
+                assistantStyle.transform = `translate(0, -100%)`;
             }
-            else {
-                this.chartTypeByCategories[subtypeProperties.category] = [subtypeProperties];
+            if (cellX + ASSISTANT_WIDTH > this.props.delimitation.width) {
+                // render left
+                assistantStyle.right = `0px`;
             }
         }
-    }
-    onExternalClick(ev) {
-        if (isChildEvent(this.popoverRef.el?.parentElement, ev) ||
-            isChildEvent(this.selectRef.el, ev)) {
-            return;
+        else {
+            assistantStyle["max-height"] = `${this.spreadsheetRect.height - composerRect.bottom}px`;
+            if (composerRect.left + ASSISTANT_WIDTH + SCROLLBAR_WIDTH + CLOSE_ICON_RADIUS >
+                this.spreadsheetRect.width) {
+                assistantStyle.right = `${CLOSE_ICON_RADIUS}px`;
+            }
         }
-        this.closePopover();
-    }
-    onTypeChange(type) {
-        this.props.chartPanelStore.changeChartType(this.props.figureId, type);
-        this.closePopover();
-    }
-    getChartDefinition(figureId) {
-        return this.env.model.getters.getChartDefinition(figureId);
+        return cssPropertiesToCss(assistantStyle);
     }
-    getSelectedChartSubtypeProperties() {
-        const definition = this.getChartDefinition(this.props.figureId);
-        const matchedChart = chartSubtypeRegistry
-            .getAll()
-            .find((c) => c.matcher?.(definition) || false);
-        return matchedChart || chartSubtypeRegistry.get(definition.type);
+    // we can't allow input events to be triggered while we remove and add back the content of the composer in processContent
+    shouldProcessInputEvents = false;
+    tokens = [];
+    keyMapping = {
+        Enter: (ev) => this.processEnterKey(ev, "down"),
+        "Shift+Enter": (ev) => this.processEnterKey(ev, "up"),
+        "Alt+Enter": this.processNewLineEvent,
+        "Ctrl+Enter": this.processNewLineEvent,
+        Escape: this.processEscapeKey,
+        F2: (ev) => this.toggleEditionMode(ev),
+        F4: (ev) => this.processF4Key(ev),
+        Tab: (ev) => this.processTabKey(ev, "right"),
+        "Shift+Tab": (ev) => this.processTabKey(ev, "left"),
+    };
+    keyCodeMapping = {
+        NumpadDecimal: this.processNumpadDecimal,
+    };
+    setup() {
+        this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
+        this.autoCompleteState = useLocalStore(AutoCompleteStore);
+        onMounted(() => {
+            const el = this.composerRef.el;
+            if (this.props.isDefaultFocus) {
+                this.DOMFocusableElementStore.setFocusableElement(el);
+            }
+            this.contentHelper.updateEl(el);
+        });
+        this.env.model.selection.observe(this, {
+            handleEvent: () => this.autoCompleteState.hide(),
+        });
+        onWillUnmount(() => {
+            this.env.model.selection.detachObserver(this);
+        });
+        useEffect(() => {
+            this.processContent();
+            if (document.activeElement === this.contentHelper.el &&
+                this.props.composerStore.editionMode === "inactive" &&
+                !this.props.isDefaultFocus) {
+                this.DOMFocusableElementStore.focusableElement?.focus();
+            }
+        });
+        useEffect(() => {
+            this.processTokenAtCursor();
+        }, () => [this.props.composerStore.editionMode !== "inactive"]);
     }
-    onPointerDown(ev) {
-        if (this.state.popoverProps) {
-            this.closePopover();
+    // ---------------------------------------------------------------------------
+    // Handlers
+    // ---------------------------------------------------------------------------
+    processArrowKeys(ev) {
+        const tokenAtCursor = this.props.composerStore.tokenAtCursor;
+        if ((this.props.composerStore.isSelectingRange ||
+            this.props.composerStore.editionMode === "inactive") &&
+            !(["ArrowUp", "ArrowDown"].includes(ev.key) &&
+                this.autoCompleteState.provider &&
+                tokenAtCursor?.type !== "REFERENCE")) {
+            this.functionDescriptionState.showDescription = false;
+            this.autoCompleteState.hide();
+            // Prevent the default content editable behavior which moves the cursor
+            ev.preventDefault();
+            ev.stopPropagation();
+            updateSelectionWithArrowKeys(ev, this.env.model.selection);
             return;
         }
-        const target = ev.currentTarget;
-        const { bottom, right, width } = target.getBoundingClientRect();
-        this.state.popoverProps = {
-            anchorRect: { x: right, y: bottom, width: 0, height: 0 },
-            positioning: "TopRight",
-            verticalOffset: 0,
-        };
-        this.state.popoverStyle = cssPropertiesToCss({ width: `${width}px` });
-    }
-    closePopover() {
-        this.state.popoverProps = undefined;
+        const content = this.props.composerStore.currentContent;
+        if (this.props.focus === "cellFocus" &&
+            !this.autoCompleteState.provider &&
+            !content.startsWith("=")) {
+            this.props.composerStore.stopEdition();
+            return;
+        }
+        // All arrow keys are processed: up and down should move autocomplete, left
+        // and right should move the cursor.
+        ev.stopPropagation();
+        this.handleArrowKeysForAutocomplete(ev);
     }
-}
-
-class MainChartPanelStore extends SpreadsheetStore {
-    mutators = ["activatePanel", "changeChartType"];
-    panel = "configuration";
-    creationContexts = {};
-    activatePanel(panel) {
-        this.panel = panel;
+    handleArrowKeysForAutocomplete(ev) {
+        // only for arrow up and down
+        if (["ArrowUp", "ArrowDown"].includes(ev.key) && this.autoCompleteState.provider) {
+            ev.preventDefault();
+            this.autoCompleteState.moveSelection(ev.key === "ArrowDown" ? "next" : "previous");
+        }
     }
-    changeChartType(figureId, newDisplayType) {
-        const currentCreationContext = this.getters.getContextCreationChart(figureId);
-        const savedCreationContext = this.creationContexts[figureId] || {};
-        let newRanges = currentCreationContext?.range;
-        if (newRanges?.every((range, i) => deepEquals(range, savedCreationContext.range?.[i]))) {
-            newRanges = Object.assign([], savedCreationContext.range, currentCreationContext?.range);
+    processTabKey(ev, direction) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (this.props.composerStore.editionMode !== "inactive") {
+            const state = this.autoCompleteState;
+            if (state.provider && state.selectedIndex !== undefined) {
+                const autoCompleteValue = state.provider.proposals[state.selectedIndex]?.text;
+                if (autoCompleteValue) {
+                    this.autoComplete(autoCompleteValue);
+                    return;
+                }
+            }
+            this.props.composerStore.stopEdition(direction);
         }
-        this.creationContexts[figureId] = {
-            ...savedCreationContext,
-            ...currentCreationContext,
-            range: newRanges,
-        };
-        const sheetId = this.getters.getFigureSheetId(figureId);
-        if (!sheetId) {
-            return;
+    }
+    processEnterKey(ev, direction) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const state = this.autoCompleteState;
+        if (state.provider && state.selectedIndex !== undefined) {
+            const autoCompleteValue = state.provider.proposals[state.selectedIndex]?.text;
+            if (autoCompleteValue) {
+                this.autoComplete(autoCompleteValue);
+                return;
+            }
         }
-        const definition = this.getChartDefinitionFromContextCreation(figureId, newDisplayType);
-        this.model.dispatch("UPDATE_CHART", {
-            definition,
-            id: figureId,
-            sheetId,
+        this.props.composerStore.stopEdition(direction);
+    }
+    processNewLineEvent(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        const content = this.contentHelper.getText();
+        const selection = this.contentHelper.getCurrentSelection();
+        const start = Math.min(selection.start, selection.end);
+        const end = Math.max(selection.start, selection.end);
+        this.props.composerStore.stopComposerRangeSelection();
+        this.props.composerStore.setCurrentContent(content.slice(0, start) + NEWLINE + content.slice(end), {
+            start: start + 1,
+            end: start + 1,
         });
+        this.processContent();
     }
-    getChartDefinitionFromContextCreation(figureId, newDisplayType) {
-        const newChartInfo = chartSubtypeRegistry.get(newDisplayType);
-        const ChartClass = chartRegistry.get(newChartInfo.chartType);
-        return {
-            ...ChartClass.getChartDefinitionFromContextCreation(this.creationContexts[figureId]),
-            ...newChartInfo.subtypeDefinition,
-        };
+    processEscapeKey(ev) {
+        this.props.composerStore.cancelEdition();
+        ev.stopPropagation();
+        ev.preventDefault();
     }
-}
-
-css /* scss */ `
-  .o-chart {
-    .o-panel {
-      display: flex;
-      .o-panel-element {
-        flex: 1 0 auto;
-        padding: 8px 0px;
-        text-align: center;
-        cursor: pointer;
-        border-right: 1px solid ${GRAY_300};
-
-        &.inactive {
-          color: ${TEXT_BODY};
-          background-color: ${GRAY_100};
-          border-bottom: 1px solid ${GRAY_300};
-        }
-
-        &:not(.inactive) {
-          color: ${TEXT_HEADING};
-          border-bottom: 1px solid #fff;
-        }
-
-        .fa {
-          margin-right: 4px;
-        }
-      }
-      .o-panel-element:last-child {
-        border-right: none;
-      }
+    processF4Key(ev) {
+        ev.stopPropagation();
+        this.props.composerStore.cycleReferences();
+        this.processContent();
     }
-  }
-`;
-class ChartPanel extends Component {
-    static template = "o-spreadsheet-ChartPanel";
-    static components = { Section, ChartTypePicker };
-    static props = { onCloseSidePanel: Function, figureId: String };
-    store;
-    get figureId() {
-        return this.props.figureId;
+    toggleEditionMode(ev) {
+        ev.stopPropagation();
+        this.props.composerStore.toggleEditionMode();
+        this.processContent();
     }
-    setup() {
-        this.store = useLocalStore(MainChartPanelStore);
+    processNumpadDecimal(ev) {
+        ev.stopPropagation();
+        ev.preventDefault();
+        const locale = this.env.model.getters.getLocale();
+        const selection = this.contentHelper.getCurrentSelection();
+        const currentContent = this.props.composerStore.currentContent;
+        const content = currentContent.slice(0, selection.start) +
+            locale.decimalSeparator +
+            currentContent.slice(selection.end);
+        // Update composer even by hand rather than dispatching an InputEvent because untrusted inputs
+        // events aren't handled natively by contentEditable
+        this.props.composerStore.setCurrentContent(content, {
+            start: selection.start + 1,
+            end: selection.start + 1,
+        });
+        // We need to do the process content here in case there is no render between the keyDown and the
+        // keyUp event
+        this.processContent();
     }
-    updateChart(figureId, updateDefinition) {
-        if (figureId !== this.figureId) {
+    onCompositionStart() {
+        this.compositionActive = true;
+    }
+    onCompositionEnd() {
+        this.compositionActive = false;
+    }
+    onKeydown(ev) {
+        if (this.props.composerStore.editionMode === "inactive") {
             return;
         }
-        const definition = {
-            ...this.getChartDefinition(this.figureId),
-            ...updateDefinition,
-        };
-        return this.env.model.dispatch("UPDATE_CHART", {
-            definition,
-            id: figureId,
-            sheetId: this.env.model.getters.getFigureSheetId(figureId),
-        });
+        if (ev.key.startsWith("Arrow")) {
+            this.processArrowKeys(ev);
+            return;
+        }
+        let handler = this.keyMapping[keyboardEventToShortcutString(ev)] ||
+            this.keyCodeMapping[keyboardEventToShortcutString(ev, "code")];
+        if (handler) {
+            handler.call(this, ev);
+        }
+        else {
+            ev.stopPropagation();
+        }
     }
-    canUpdateChart(figureId, updateDefinition) {
-        if (figureId !== this.figureId || !this.env.model.getters.isChartDefined(figureId)) {
-            return;
+    onPaste(ev) {
+        if (this.props.composerStore.editionMode !== "inactive") {
+            // let the browser clipboard work
+            ev.stopPropagation();
+        }
+        else {
+            // the user meant to paste in the sheet, not open the composer with the pasted content
+            // While we're not editing, we still have the focus and should therefore prevent
+            // the native "paste" to occur.
+            ev.preventDefault();
         }
-        const definition = {
-            ...this.getChartDefinition(this.figureId),
-            ...updateDefinition,
-        };
-        return this.env.model.canDispatch("UPDATE_CHART", {
-            definition,
-            id: figureId,
-            sheetId: this.env.model.getters.getFigureSheetId(figureId),
-        });
     }
-    onTypeChange(type) {
-        if (!this.figureId) {
+    /*
+     * Triggered automatically by the content-editable between the keydown and key up
+     * */
+    onInput(ev) {
+        if (!this.shouldProcessInputEvents) {
             return;
         }
-        this.store.changeChartType(this.figureId, type);
-    }
-    get chartPanel() {
-        if (!this.figureId) {
-            throw new Error("Chart not defined.");
+        ev.stopPropagation();
+        let content;
+        if (this.props.composerStore.editionMode === "inactive") {
+            content = ev.data || "";
         }
-        const type = this.env.model.getters.getChartType(this.figureId);
-        if (!type) {
-            throw new Error("Chart not defined.");
+        else {
+            content = this.contentHelper.getText();
         }
-        const chartPanel = chartSidePanelComponentRegistry.get(type);
-        if (!chartPanel) {
-            throw new Error(`Component is not defined for type ${type}`);
+        if (this.props.focus === "inactive") {
+            return this.props.onComposerCellFocused?.(content);
         }
-        return chartPanel;
-    }
-    getChartDefinition(figureId) {
-        return this.env.model.getters.getChartDefinition(figureId);
-    }
-}
-
-class DOMFocusableElementStore {
-    mutators = ["setFocusableElement"];
-    focusableElement = undefined;
-    setFocusableElement(element) {
-        this.focusableElement = element;
-    }
-}
-
-css /* scss */ `
-  .o-autocomplete-dropdown {
-    pointer-events: auto;
-    cursor: pointer;
-    background-color: #fff;
-    max-width: 400px;
-    z-index: 1;
-
-    .o-autocomplete-value-focus {
-      background-color: #f2f2f2;
-    }
-
-    & > div {
-      padding: 1px 5px 5px 5px;
-      .o-autocomplete-description {
-        padding-left: 5px;
-        font-size: 11px;
-      }
+        let selection = this.contentHelper.getCurrentSelection();
+        this.props.composerStore.stopComposerRangeSelection();
+        this.props.composerStore.setCurrentContent(content, selection);
+        this.processTokenAtCursor();
     }
-  }
-`;
-class TextValueProvider extends Component {
-    static template = "o-spreadsheet-TextValueProvider";
-    static props = {
-        proposals: Array,
-        selectedIndex: { type: Number, optional: true },
-        onValueSelected: Function,
-        onValueHovered: Function,
-    };
-    autoCompleteListRef = useRef("autoCompleteList");
-    setup() {
-        useEffect(() => {
-            const selectedIndex = this.props.selectedIndex;
-            if (selectedIndex === undefined) {
+    onKeyup(ev) {
+        if (this.contentHelper.el === document.activeElement) {
+            if (this.autoCompleteState.provider && ["ArrowUp", "ArrowDown"].includes(ev.key)) {
                 return;
             }
-            const selectedElement = this.autoCompleteListRef.el?.children[selectedIndex];
-            selectedElement?.scrollIntoView?.({ block: "nearest" });
-        }, () => [this.props.selectedIndex, this.autoCompleteListRef.el]);
-    }
-}
-
-class AutoCompleteStore extends SpreadsheetStore {
-    mutators = ["useProvider", "moveSelection", "hide", "selectIndex"];
-    selectedIndex = undefined;
-    provider;
-    get selectedProposal() {
-        if (this.selectedIndex === undefined || this.provider === undefined) {
-            return undefined;
+            if (this.props.composerStore.isSelectingRange && ev.key?.startsWith("Arrow")) {
+                return;
+            }
+            const { start: oldStart, end: oldEnd } = this.props.composerStore.composerSelection;
+            const { start, end } = this.contentHelper.getCurrentSelection();
+            if (start !== oldStart || end !== oldEnd) {
+                this.props.composerStore.changeComposerCursorSelection(start, end);
+            }
+            this.processTokenAtCursor();
         }
-        return this.provider.proposals[this.selectedIndex];
-    }
-    useProvider(provider) {
-        this.provider = provider;
-        this.selectedIndex = provider.autoSelectFirstProposal ? 0 : undefined;
-    }
-    hide() {
-        this.provider = undefined;
-        this.selectedIndex = undefined;
-    }
-    selectIndex(index) {
-        this.selectedIndex = index;
     }
-    moveSelection(direction) {
-        if (!this.provider) {
+    onBlur(ev) {
+        if (this.props.composerStore.editionMode === "inactive") {
             return;
         }
-        if (this.selectedIndex === undefined) {
-            this.selectedIndex = 0;
+        const target = ev.relatedTarget;
+        if (!target || !(target instanceof HTMLElement)) {
+            this.props.composerStore.stopEdition();
             return;
         }
-        if (direction === "previous") {
-            this.selectedIndex--;
-            if (this.selectedIndex < 0) {
-                this.selectedIndex = this.provider.proposals.length - 1;
-            }
+        if (target.attributes.getNamedItem("composerFocusableElement")) {
+            this.contentHelper.el.focus();
+            return;
         }
-        else {
-            this.selectedIndex = (this.selectedIndex + 1) % this.provider.proposals.length;
+        if (target.classList.contains("o-composer")) {
+            return;
         }
+        this.props.composerStore.stopEdition();
     }
-}
-
-class ContentEditableHelper {
-    // todo make el private and expose dedicated methods
-    el;
-    constructor(el) {
-        this.el = el;
-    }
-    updateEl(el) {
-        this.el = el;
+    updateAutoCompleteIndex(index) {
+        this.autoCompleteState.selectIndex(clip(0, index, 10));
     }
     /**
-     * select the text at position start to end, no matter the children
+     * This is required to ensure the content helper selection is
+     * properly updated on "onclick" events. Depending on the browser,
+     * the callback onClick from the composer will be executed before
+     * the selection was updated in the dom, which means we capture an
+     * wrong selection which is then forced upon the content helper on
+     * processContent.
      */
-    selectRange(start, end) {
-        let selection = window.getSelection();
-        const { start: currentStart, end: currentEnd } = this.getCurrentSelection();
-        if (currentStart === start && currentEnd === end) {
+    onMousedown(ev) {
+        if (ev.button > 0) {
+            // not main button, probably a context menu
             return;
         }
-        if (selection.rangeCount === 0) {
-            const range = document.createRange();
-            selection.addRange(range);
+        this.contentHelper.removeSelection();
+    }
+    onClick() {
+        if (this.env.model.getters.isReadonly()) {
+            return;
         }
-        const currentRange = selection.getRangeAt(0);
-        let range;
-        if (this.el.contains(currentRange.startContainer)) {
-            range = currentRange;
+        const newSelection = this.contentHelper.getCurrentSelection();
+        this.props.composerStore.stopComposerRangeSelection();
+        this.props.onComposerContentFocused();
+        this.props.composerStore.changeComposerCursorSelection(newSelection.start, newSelection.end);
+        this.processTokenAtCursor();
+    }
+    onDblClick() {
+        if (this.env.model.getters.isReadonly()) {
+            return;
         }
-        else {
-            range = document.createRange();
-            selection.removeAllRanges();
-            selection.addRange(range);
+        const composerContent = this.props.composerStore.currentContent;
+        const isValidFormula = composerContent.startsWith("=");
+        if (isValidFormula) {
+            const tokens = this.props.composerStore.currentTokens;
+            const currentSelection = this.contentHelper.getCurrentSelection();
+            if (currentSelection.start === currentSelection.end)
+                return;
+            const currentSelectedText = composerContent.substring(currentSelection.start, currentSelection.end);
+            const token = tokens.filter((token) => token.value.includes(currentSelectedText) &&
+                token.start <= currentSelection.start &&
+                token.end >= currentSelection.end)[0];
+            if (!token) {
+                return;
+            }
+            if (token.type === "REFERENCE") {
+                this.props.composerStore.changeComposerCursorSelection(token.start, token.end);
+            }
         }
-        if (start === end && start === 0) {
-            range.setStart(this.el, 0);
-            range.setEnd(this.el, 0);
+    }
+    onContextMenu(ev) {
+        if (this.props.composerStore.editionMode === "inactive") {
+            this.props.onInputContextMenu?.(ev);
         }
-        else {
-            const textLength = this.getText().length;
-            if (start < 0 || end > textLength) {
-                console.warn(`wrong selection asked start ${start}, end ${end}, text content length ${textLength}`);
-                if (start < 0)
-                    start = 0;
-                if (end > textLength)
-                    end = textLength;
-                if (start > textLength)
-                    start = textLength;
+    }
+    closeAssistant() {
+        this.assistant.forcedClosed = true;
+    }
+    openAssistant() {
+        this.assistant.forcedClosed = false;
+    }
+    // ---------------------------------------------------------------------------
+    // Private
+    // ---------------------------------------------------------------------------
+    processContent() {
+        if (this.compositionActive) {
+            return;
+        }
+        this.shouldProcessInputEvents = false;
+        if (this.props.focus !== "inactive" && document.activeElement !== this.contentHelper.el) {
+            this.contentHelper.el.focus();
+        }
+        const content = this.getContentLines();
+        this.contentHelper.setText(content);
+        if (content.length !== 0 && content.length[0] !== 0) {
+            if (this.props.focus !== "inactive") {
+                // Put the cursor back where it was before the rendering
+                const { start, end } = this.props.composerStore.composerSelection;
+                this.contentHelper.selectRange(start, end);
             }
-            let startNode = this.findChildAtCharacterIndex(start);
-            let endNode = this.findChildAtCharacterIndex(end);
-            range.setStart(startNode.node, startNode.offset);
-            range.setEnd(endNode.node, endNode.offset);
+            this.contentHelper.scrollSelectionIntoView();
         }
+        this.shouldProcessInputEvents = true;
     }
     /**
-     * finds the dom element that contains the character at `offset`
+     * Get the HTML content corresponding to the current composer token, divided by lines.
      */
-    findChildAtCharacterIndex(offset) {
-        let it = iterateChildren(this.el);
-        let current, previous;
-        let usedCharacters = offset;
-        let isFirstParagraph = true;
-        do {
-            current = it.next();
-            if (!current.done && !current.value.hasChildNodes()) {
-                if (current.value.textContent && current.value.textContent.length < usedCharacters) {
-                    usedCharacters -= current.value.textContent.length;
-                }
-                else if (current.value.textContent &&
-                    current.value.textContent.length >= usedCharacters) {
-                    it.return(current.value);
-                }
-                previous = current.value;
+    getContentLines() {
+        let value = this.props.composerStore.currentContent;
+        const isValidFormula = value.startsWith("=");
+        if (value === "") {
+            return [];
+        }
+        else if (isValidFormula && this.props.focus !== "inactive") {
+            return this.splitHtmlContentIntoLines(this.getHtmlContentFromTokens());
+        }
+        return this.splitHtmlContentIntoLines([{ value }]);
+    }
+    getHtmlContentFromTokens() {
+        const tokens = this.props.composerStore.currentTokens;
+        const result = [];
+        const { end, start } = this.props.composerStore.composerSelection;
+        for (const token of tokens) {
+            let color = token.color || DEFAULT_TOKEN_COLOR;
+            if (token.isBlurred) {
+                color = setColorAlpha(color, 0.5);
             }
-            // One new paragraph = one new line character, except for the first paragraph
-            if (!current.done && current.value.nodeName === "P") {
-                if (isFirstParagraph) {
-                    isFirstParagraph = false;
-                }
-                else {
-                    usedCharacters--;
-                }
+            result.push({ value: token.value, color });
+            if (token.type === "REFERENCE" &&
+                this.props.composerStore.tokenAtCursor === token &&
+                this.props.composerStore.editionMode === "selecting") {
+                result[result.length - 1].class = "text-decoration-underline";
+            }
+            if (end === start && token.isParenthesisLinkedToCursor) {
+                result[result.length - 1].class = backgroundClass;
+            }
+            if (this.props.composerStore.showSelectionIndicator && end === start && end === token.end) {
+                result[result.length - 1].class = selectionIndicatorClass;
             }
-        } while (!current.done && usedCharacters);
-        if (current.value) {
-            return { node: current.value, offset: usedCharacters };
         }
-        return { node: previous, offset: usedCharacters };
+        return result;
     }
     /**
-     * Sets (or Replaces all) the text inside the root element in the form of distinctive paragraphs and
-     * span for each element provided in `contents`.
-     *
-     * The function will apply the diff between the current content and the new content to avoid the systematic
-     * destruction of DOM elements which interferes with IME[1]
-     *
-     * Each line of text will be encapsulated in a paragraph element.
-     * Each span will have its own fontcolor and specific class if provided in the HtmlContent object.
-     *
-     * [1] https://developer.mozilla.org/en-US/docs/Glossary/Input_method_editor
+     * Split an array of HTMLContents into lines. Each NEWLINE character encountered will create a new
+     * line. Contents can be split into multiple parts if they contain multiple NEWLINE characters.
      */
-    setText(contents) {
-        if (contents.length === 0) {
-            this.removeAll();
-            return;
-        }
-        const childElements = Array.from(this.el.childNodes);
-        const contentLength = contents.length;
-        for (let i = 0; i < contentLength; i++) {
-            const line = contents[i];
-            const childElement = childElements[i];
-            let newChild = false;
-            let p;
-            if (childElement && childElement.nodeName === "P") {
-                p = childElement;
-            }
-            else {
-                newChild = true;
-                p = document.createElement("p");
-            }
-            const lineLength = line.length;
-            const existingChildren = Array.from(p.childNodes);
-            for (let j = 0; j < lineLength; j++) {
-                const content = line[j];
-                const child = existingChildren[j];
-                // child nodes can be multiple types of nodes: Span, Text, Div, etc...
-                // We can only modify a node in place if it has the same type as the content
-                // that we would insert, which are spans.
-                // Otherwise, it means that the node has been input by the user, through the keyboard or a copy/paste
-                // @ts-ignore (somehow required because jest does not like child.tagName despite the prior check)
-                const childIsSpan = child && "tagName" in child && child.tagName === "SPAN";
-                if (childIsSpan && compareContentToSpanElement(content, child)) {
-                    continue;
-                }
-                // this is an empty line in the content
-                if (!content.value && !content.class) {
-                    if (child)
-                        p.removeChild(child);
-                    continue;
-                }
-                const span = document.createElement("span");
-                span.innerText = content.value;
-                span.style.color = content.color || "";
-                if (content.class) {
-                    span.classList.add(content.class);
-                }
-                if (child) {
-                    p.replaceChild(span, child);
-                }
-                else {
-                    p.appendChild(span);
+    splitHtmlContentIntoLines(contents) {
+        const contentSplitInLines = [];
+        let currentLine = [];
+        for (const content of contents) {
+            if (content.value.includes(NEWLINE)) {
+                const lines = content.value.split(NEWLINE);
+                const lastLine = lines.pop();
+                for (const line of lines) {
+                    currentLine.push({ color: content.color, value: line }); // don't copy class, only last line should keep it
+                    contentSplitInLines.push(currentLine);
+                    currentLine = [];
                 }
+                currentLine.push({ ...content, value: lastLine });
             }
-            if (existingChildren.length > lineLength) {
-                for (let i = lineLength; i < existingChildren.length; i++) {
-                    p.removeChild(existingChildren[i]);
-                }
+            else {
+                currentLine.push(content);
             }
-            // Empty line
-            if (!p.hasChildNodes()) {
-                const span = document.createElement("span");
-                span.appendChild(document.createElement("br"));
-                p.appendChild(span);
+        }
+        if (currentLine.length) {
+            contentSplitInLines.push(currentLine);
+        }
+        // Remove useless empty contents
+        const filteredLines = [];
+        for (const line of contentSplitInLines) {
+            if (line.every(this.isContentEmpty)) {
+                filteredLines.push([line[0]]);
             }
-            // replace p if necessary
-            if (newChild) {
-                if (childElement) {
-                    this.el.replaceChild(p, childElement);
-                }
-                else {
-                    this.el.appendChild(p);
-                }
+            else {
+                filteredLines.push(line.filter((content) => !this.isContentEmpty(content)));
             }
         }
-        if (childElements.length > contentLength) {
-            for (let i = contentLength; i < childElements.length; i++) {
-                this.el.removeChild(childElements[i]);
+        return filteredLines;
+    }
+    isContentEmpty(content) {
+        return !(content.value || content.class);
+    }
+    /**
+     * Compute the state of the composer from the tokenAtCursor.
+     * If the token is a function or symbol (that isn't a cell/range reference) we have to initialize
+     * the autocomplete engine otherwise we initialize the formula assistant.
+     */
+    processTokenAtCursor() {
+        let content = this.props.composerStore.currentContent;
+        if (this.autoCompleteState.provider) {
+            this.autoCompleteState.hide();
+        }
+        this.functionDescriptionState.showDescription = false;
+        const autoCompleteProvider = this.props.composerStore.autocompleteProvider;
+        if (autoCompleteProvider) {
+            this.autoCompleteState.useProvider(autoCompleteProvider);
+        }
+        const token = this.props.composerStore.tokenAtCursor;
+        if (content.startsWith("=") && token && token.type !== "SYMBOL") {
+            const tokenContext = token.functionContext;
+            const parentFunction = tokenContext?.parent.toUpperCase();
+            if (tokenContext &&
+                parentFunction &&
+                parentFunction in functions &&
+                token.type !== "UNKNOWN") {
+                // initialize Formula Assistant
+                const description = functions[parentFunction];
+                const argPosition = tokenContext.argPosition;
+                this.functionDescriptionState.functionName = parentFunction;
+                this.functionDescriptionState.functionDescription = description;
+                this.functionDescriptionState.argToFocus = description.getArgToFocus(argPosition + 1) - 1;
+                this.functionDescriptionState.showDescription = true;
             }
         }
     }
-    scrollSelectionIntoView() {
-        const focusedNode = document.getSelection()?.focusNode;
-        if (!focusedNode || !this.el.contains(focusedNode))
+    autoComplete(value) {
+        if (!value || this.assistant.forcedClosed) {
             return;
-        const element = focusedNode instanceof HTMLElement ? focusedNode : focusedNode.parentElement;
-        element?.scrollIntoView?.({ block: "nearest" });
+        }
+        this.autoCompleteState.provider?.selectProposal(value);
+        this.processTokenAtCursor();
     }
-    /**
-     * remove the current selection of the user
-     * */
-    removeSelection() {
-        let selection = window.getSelection();
-        selection.removeAllRanges();
+}
+
+class StandaloneComposerStore extends AbstractComposerStore {
+    args;
+    constructor(get, args) {
+        super(get);
+        this.args = args;
+        this._currentContent = this.getComposerContent();
     }
-    removeAll() {
-        if (this.el) {
-            while (this.el.firstChild) {
-                this.el.removeChild(this.el.firstChild);
-            }
+    getAutoCompleteProviders() {
+        const providersDefinitions = super.getAutoCompleteProviders();
+        const contextualAutocomplete = this.args().contextualAutocomplete;
+        if (contextualAutocomplete) {
+            providersDefinitions.push(contextualAutocomplete);
         }
+        return providersDefinitions;
     }
     /**
-     * finds the indexes of the current selection.
+     * Replace the current reference selected by the new one.
      * */
-    getCurrentSelection() {
-        return getCurrentSelection(this.el);
+    getZoneReference(zone) {
+        const res = super.getZoneReference(zone);
+        if (this.args().defaultStatic) {
+            return setXcToFixedReferenceType(res, "colrow");
+        }
+        return res;
     }
-    getText() {
-        let text = "";
-        let it = iterateChildren(this.el);
-        let current = it.next();
-        let isFirstParagraph = true;
-        while (!current.done) {
-            if (!current.value.hasChildNodes()) {
-                text += current.value.textContent;
-            }
-            if (current.value.nodeName === "P" ||
-                (current.value.nodeName === "DIV" && current.value !== this.el) // On paste, the HTML may contain <div> instead of <p>
-            ) {
-                if (isFirstParagraph) {
-                    isFirstParagraph = false;
-                }
-                else {
-                    text += NEWLINE;
+    getComposerContent() {
+        if (this.editionMode === "inactive") {
+            // References in the content might not be linked to the current active sheet
+            // We here force the sheet name prefix for all references that are not in
+            // the current active sheet
+            const defaultRangeSheetId = this.args().defaultRangeSheetId;
+            return rangeTokenize(this.args().content)
+                .map((token) => {
+                if (token.type === "REFERENCE") {
+                    const range = this.getters.getRangeFromSheetXC(defaultRangeSheetId, token.value);
+                    return this.getters.getRangeString(range, this.getters.getActiveSheetId());
                 }
+                return token.value;
+            })
+                .join("");
+        }
+        return this._currentContent;
+    }
+    stopEdition() {
+        this._stopEdition();
+    }
+    confirmEdition(content) {
+        this.args().onConfirm(content);
+    }
+    getTokenColor(token) {
+        if (token.type === "SYMBOL") {
+            const matchedColor = this.args().getContextualColoredSymbolToken?.(token);
+            if (matchedColor) {
+                return matchedColor;
             }
-            current = it.next();
         }
-        return text;
+        return super.getTokenColor(token);
     }
 }
-function compareContentToSpanElement(content, node) {
-    const contentColor = content.color ? toHex(content.color) : "";
-    const nodeColor = node.style?.color ? toHex(node.style.color) : "";
-    const sameColor = contentColor === nodeColor;
-    const sameClass = deepEquals([content.class], [...node.classList]);
-    const sameContent = node.innerText === content.value;
-    return sameColor && sameClass && sameContent;
-}
 
-// -----------------------------------------------------------------------------
-// Formula Assistant component
-// -----------------------------------------------------------------------------
 css /* scss */ `
-  .o-formula-assistant {
-    background: #ffffff;
-    .o-formula-assistant-head {
-      background-color: #f2f2f2;
-      padding: 10px;
-    }
-    .collapsed {
-      transform: rotate(180deg);
-    }
-    .o-formula-assistant-core {
-      border-bottom: 1px solid gray;
-    }
-    .o-formula-assistant-arg-description {
-      font-size: 85%;
-    }
-    .o-formula-assistant-focus {
-      div:first-child,
-      span {
-        color: ${COMPOSER_ASSISTANT_COLOR};
-        text-shadow: 0px 0px 1px ${COMPOSER_ASSISTANT_COLOR};
+  .o-spreadsheet {
+    .o-standalone-composer {
+      min-height: 24px;
+      box-sizing: border-box;
+
+      border-bottom: 1px solid;
+      border-color: ${GRAY_300};
+
+      &.active {
+        border-color: ${ACTION_COLOR};
       }
-      div:last-child {
-        color: black;
+
+      &.o-invalid {
+        border-bottom: 2px solid red;
+      }
+
+      /* As the standalone composer is potentially very small (eg. in a side panel), we remove the scrollbar display */
+      scrollbar-width: none; /* Firefox */
+      &::-webkit-scrollbar {
+        display: none;
       }
-    }
-    .o-formula-assistant-gray {
-      color: gray;
     }
   }
 `;
-class FunctionDescriptionProvider extends Component {
-    static template = "o-spreadsheet-FunctionDescriptionProvider";
+class StandaloneComposer extends Component {
+    static template = "o-spreadsheet-StandaloneComposer";
     static props = {
-        functionName: String,
-        functionDescription: Object,
-        argToFocus: Number,
+        composerContent: { type: String, optional: true },
+        defaultRangeSheetId: { type: String, optional: true },
+        defaultStatic: { type: Boolean, optional: true },
+        onConfirm: Function,
+        contextualAutocomplete: { type: Object, optional: true },
+        placeholder: { type: String, optional: true },
+        title: { type: String, optional: true },
+        class: { type: String, optional: true },
+        invalid: { type: Boolean, optional: true },
+        getContextualColoredSymbolToken: { type: Function, optional: true },
     };
-    getContext() {
-        return this.props;
+    static components = { Composer };
+    static defaultProps = {
+        composerContent: "",
+        defaultStatic: false,
+    };
+    composerFocusStore;
+    standaloneComposerStore;
+    composerInterface;
+    spreadsheetRect = useSpreadsheetRect();
+    setup() {
+        this.composerFocusStore = useStore(ComposerFocusStore);
+        const standaloneComposerStore = useLocalStore(StandaloneComposerStore, () => ({
+            onConfirm: this.props.onConfirm,
+            content: this.props.composerContent,
+            defaultStatic: this.props.defaultStatic ?? false,
+            contextualAutocomplete: this.props.contextualAutocomplete,
+            defaultRangeSheetId: this.props.defaultRangeSheetId,
+            getContextualColoredSymbolToken: this.props.getContextualColoredSymbolToken,
+        }));
+        this.standaloneComposerStore = standaloneComposerStore;
+        this.composerInterface = {
+            id: "standaloneComposer",
+            get editionMode() {
+                return standaloneComposerStore.editionMode;
+            },
+            startEdition: this.standaloneComposerStore.startEdition,
+            setCurrentContent: this.standaloneComposerStore.setCurrentContent,
+            stopEdition: this.standaloneComposerStore.stopEdition,
+        };
     }
-    get formulaArgSeparator() {
-        return this.env.model.getters.getLocale().formulaArgSeparator + " ";
+    get focus() {
+        return this.composerFocusStore.activeComposer === this.composerInterface
+            ? this.composerFocusStore.focusMode
+            : "inactive";
+    }
+    get composerStyle() {
+        return this.props.invalid
+            ? cssPropertiesToCss({ padding: "1px 0px 0px 0px" })
+            : cssPropertiesToCss({ padding: "1px 0px" });
+    }
+    get containerClass() {
+        const classes = [
+            this.focus === "inactive" ? "" : "active",
+            this.props.invalid ? "o-invalid" : "",
+            this.props.class || "",
+        ];
+        return classes.join(" ");
+    }
+    onFocus(selection) {
+        this.composerFocusStore.focusComposer(this.composerInterface, { selection });
     }
 }
 
-const functions = functionRegistry.content;
-const ASSISTANT_WIDTH = 300;
-const CLOSE_ICON_RADIUS = 9;
-const selectionIndicatorClass = "selector-flag";
-const backgroundClass = "background-flag";
-const selectionIndicatorColor = "#a9a9a9";
-const selectionIndicator = "␣";
 css /* scss */ `
-  .o-composer-container {
-    .o-composer {
-      overflow-y: auto;
-      overflow-x: hidden;
-      word-break: break-all;
-      padding-right: 2px;
+  .o-gauge-color-set {
+    table {
+      table-layout: fixed;
+      margin-top: 2%;
+      display: table;
+      text-align: left;
+      font-size: 12px;
+      line-height: 18px;
+      width: 100%;
+      font-size: 12px;
+    }
 
+    td {
       box-sizing: border-box;
-
-      caret-color: black;
-      padding-left: 3px;
-      padding-right: 3px;
-      outline: none;
-
-      p {
-        margin-bottom: 0px;
-
-        span {
-          white-space: pre-wrap;
-
-          &.${selectionIndicatorClass}:after {
-            content: "${selectionIndicator}";
-            color: ${selectionIndicatorColor};
-          }
-
-          &.${backgroundClass} {
-            border-radius: 5px;
-            background-color: lightgray;
-            padding: 0px 1.5px 1.5px 1.5px;
-          }
-        }
-      }
+      height: 30px;
+      padding: 6px 0;
     }
-    .o-composer[placeholder]:empty:not(:focus):not(.active)::before {
-      content: attr(placeholder);
-      color: #bdbdbd;
-      position: relative;
-      top: 0%;
-      pointer-events: none;
+    th.o-gauge-color-set-colorPicker {
+      width: 8%;
     }
-
-    .fa-stack {
-      /* reset stack size which is doubled by default */
-      width: ${CLOSE_ICON_RADIUS * 2}px;
-      height: ${CLOSE_ICON_RADIUS * 2}px;
-      line-height: ${CLOSE_ICON_RADIUS * 2}px;
+    th.o-gauge-color-set-text {
+      width: 25%;
     }
-
-    .force-open-assistant {
-      left: -1px;
-      top: -1px;
-
-      .fa-question-circle {
-        color: ${PRIMARY_BUTTON_BG};
-      }
+    th.o-gauge-color-set-operator {
+      width: 10%;
     }
-
-    .o-composer-assistant {
-      position: absolute;
-      margin: 1px 4px;
-
-      .o-semi-bold {
-        /* FIXME: to remove in favor of Bootstrap
-        * 'fw-semibold' when we upgrade to Bootstrap 5.2
-        */
-        font-weight: 600 !important;
-      }
+    th.o-gauge-color-set-value {
+      width: 22%;
+    }
+    th.o-gauge-color-set-type {
+      width: 30%;
+    }
+    input,
+    select {
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
     }
   }
 `;
-class Composer extends Component {
-    static template = "o-spreadsheet-Composer";
+class GaugeChartDesignPanel extends Component {
+    static template = "o-spreadsheet-GaugeChartDesignPanel";
+    static components = {
+        SidePanelCollapsible,
+        Section,
+        RoundColorPicker,
+        GeneralDesignEditor,
+        ChartErrorSection,
+        StandaloneComposer,
+    };
     static props = {
-        focus: {
-            validate: (value) => ["inactive", "cellFocus", "contentFocus"].includes(value),
-        },
-        inputStyle: { type: String, optional: true },
-        rect: { type: Object, optional: true },
-        delimitation: { type: Object, optional: true },
-        onComposerCellFocused: { type: Function, optional: true },
-        onComposerContentFocused: Function,
-        isDefaultFocus: { type: Boolean, optional: true },
-        onInputContextMenu: { type: Function, optional: true },
-        composerStore: Object,
-        placeholder: { type: String, optional: true },
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: { type: Function, optional: true },
     };
-    static components = { TextValueProvider, FunctionDescriptionProvider };
-    static defaultProps = {
-        inputStyle: "",
-        isDefaultFocus: false,
+    state;
+    setup() {
+        this.state = useState({
+            sectionRuleCancelledReasons: this.checkSectionRuleFormulasAreValid(this.props.definition.sectionRule),
+            sectionRule: deepCopy(this.props.definition.sectionRule),
+        });
+    }
+    get designErrorMessages() {
+        const cancelledReasons = [...(this.state.sectionRuleCancelledReasons || [])];
+        return cancelledReasons.map((error) => ChartTerms.Errors[error] || ChartTerms.Errors.Unexpected);
+    }
+    get isRangeMinInvalid() {
+        return !!(this.state.sectionRuleCancelledReasons?.includes("EmptyGaugeRangeMin" /* CommandResult.EmptyGaugeRangeMin */) ||
+            this.state.sectionRuleCancelledReasons?.includes("GaugeRangeMinNaN" /* CommandResult.GaugeRangeMinNaN */));
+    }
+    get isRangeMaxInvalid() {
+        return !!(this.state.sectionRuleCancelledReasons?.includes("EmptyGaugeRangeMax" /* CommandResult.EmptyGaugeRangeMax */) ||
+            this.state.sectionRuleCancelledReasons?.includes("GaugeRangeMaxNaN" /* CommandResult.GaugeRangeMaxNaN */));
+    }
+    // ---------------------------------------------------------------------------
+    // COLOR_SECTION_TEMPLATE
+    // ---------------------------------------------------------------------------
+    get isLowerInflectionPointInvalid() {
+        return !!this.state.sectionRuleCancelledReasons?.includes("GaugeLowerInflectionPointNaN" /* CommandResult.GaugeLowerInflectionPointNaN */);
+    }
+    get isUpperInflectionPointInvalid() {
+        return !!this.state.sectionRuleCancelledReasons?.includes("GaugeUpperInflectionPointNaN" /* CommandResult.GaugeUpperInflectionPointNaN */);
+    }
+    updateSectionColor(target, color) {
+        const sectionRule = deepCopy(this.state.sectionRule);
+        sectionRule.colors[target] = color;
+        this.updateSectionRule(sectionRule);
+    }
+    updateSectionRule(sectionRule) {
+        this.state.sectionRuleCancelledReasons = [];
+        this.state.sectionRuleCancelledReasons.push(...this.checkSectionRuleFormulasAreValid(this.state.sectionRule));
+        const dispatchResult = this.props.updateChart(this.props.figureId, {
+            sectionRule,
+        });
+        if (dispatchResult.isSuccessful) {
+            this.state.sectionRule = deepCopy(sectionRule);
+        }
+        else {
+            this.state.sectionRuleCancelledReasons.push(...dispatchResult.reasons);
+        }
+    }
+    onConfirmGaugeRange(editedRange, content) {
+        this.state.sectionRule = { ...this.state.sectionRule, [editedRange]: content };
+        this.updateSectionRule(this.state.sectionRule);
+    }
+    getGaugeInflectionComposerProps(sectionType) {
+        const inflectionPointName = sectionType === "lowerColor" ? "lowerInflectionPoint" : "upperInflectionPoint";
+        const inflectionPoint = this.state.sectionRule[inflectionPointName];
+        return {
+            onConfirm: (str) => {
+                this.state.sectionRule = {
+                    ...this.state.sectionRule,
+                    [inflectionPointName]: { ...inflectionPoint, value: str },
+                };
+                this.updateSectionRule(this.state.sectionRule);
+            },
+            composerContent: inflectionPoint.value,
+            invalid: sectionType === "lowerColor"
+                ? this.isLowerInflectionPointInvalid
+                : this.isUpperInflectionPointInvalid,
+            defaultRangeSheetId: this.sheetId,
+            class: inflectionPointName,
+            placeholder: _t("Value"),
+            title: _t("Value or formula"),
+        };
+    }
+    checkSectionRuleFormulasAreValid(sectionRule) {
+        const reasons = [];
+        if (!this.valueIsValidNumber(sectionRule.rangeMin)) {
+            reasons.push("GaugeRangeMinNaN" /* CommandResult.GaugeRangeMinNaN */);
+        }
+        if (!this.valueIsValidNumber(sectionRule.rangeMax)) {
+            reasons.push("GaugeRangeMaxNaN" /* CommandResult.GaugeRangeMaxNaN */);
+        }
+        if (!this.valueIsValidNumber(sectionRule.lowerInflectionPoint.value)) {
+            reasons.push("GaugeLowerInflectionPointNaN" /* CommandResult.GaugeLowerInflectionPointNaN */);
+        }
+        if (!this.valueIsValidNumber(sectionRule.upperInflectionPoint.value)) {
+            reasons.push("GaugeUpperInflectionPointNaN" /* CommandResult.GaugeUpperInflectionPointNaN */);
+        }
+        return reasons;
+    }
+    valueIsValidNumber(value) {
+        const locale = this.env.model.getters.getLocale();
+        if (!value.startsWith("=")) {
+            return tryToNumber(value, locale) !== undefined;
+        }
+        const evaluatedValue = this.env.model.getters.evaluateFormula(this.sheetId, value);
+        if (isMatrix(evaluatedValue)) {
+            return false;
+        }
+        return tryToNumber(evaluatedValue, locale) !== undefined;
+    }
+    get sheetId() {
+        const chart = this.env.model.getters.getChart(this.props.figureId);
+        if (!chart) {
+            throw new Error("Chart not found with id " + this.props.figureId);
+        }
+        return chart.sheetId;
+    }
+}
+
+class GeoChartRegionSelectSection extends Component {
+    static template = "o-spreadsheet-GeoChartRegionSelectSection";
+    static components = { Section };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
     };
-    DOMFocusableElementStore;
-    composerRef = useRef("o_composer");
-    contentHelper = new ContentEditableHelper(this.composerRef.el);
-    composerState = useState({
-        positionStart: 0,
-        positionEnd: 0,
-    });
-    autoCompleteState;
-    functionDescriptionState = useState({
-        showDescription: false,
-        functionName: "",
-        functionDescription: {},
-        argToFocus: 0,
-    });
-    assistant = useState({
-        forcedClosed: false,
-    });
-    compositionActive = false;
-    spreadsheetRect = useSpreadsheetRect();
-    get assistantStyle() {
-        const composerRect = this.composerRef.el.getBoundingClientRect();
-        const assistantStyle = {};
-        assistantStyle["min-width"] = `${this.props.rect?.width || ASSISTANT_WIDTH}px`;
-        const proposals = this.autoCompleteState.provider?.proposals;
-        const proposalsHaveDescription = proposals?.some((proposal) => proposal.description);
-        if (this.functionDescriptionState.showDescription || proposalsHaveDescription) {
-            assistantStyle.width = `${ASSISTANT_WIDTH}px`;
+    updateSelectedRegion(ev) {
+        const value = ev.target.value;
+        this.props.updateChart(this.props.figureId, { region: value });
+    }
+    get availableRegions() {
+        return this.env.model.getters.getGeoChartAvailableRegions();
+    }
+    get selectedRegion() {
+        return this.props.definition.region || this.availableRegions[0]?.id;
+    }
+}
+
+class GeoChartConfigPanel extends GenericChartConfigPanel {
+    static template = "o-spreadsheet-GeoChartConfigPanel";
+    static components = { ...GenericChartConfigPanel.components, GeoChartRegionSelectSection };
+    get dataRanges() {
+        return this.getDataSeriesRanges().slice(0, 1);
+    }
+    onDataSeriesConfirmed() {
+        this.dataSets = spreadRange(this.env.model.getters, this.dataSets).slice(0, 1);
+        this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
+            dataSets: this.dataSets,
+        });
+    }
+    getLabelRangeOptions() {
+        return [
+            {
+                name: "dataSetsHaveTitle",
+                label: this.dataSetsHaveTitleLabel,
+                value: this.props.definition.dataSetsHaveTitle,
+                onChange: this.onUpdateDataSetsHaveTitle.bind(this),
+            },
+        ];
+    }
+}
+
+const DEFAULT_CUSTOM_COLOR_SCALE = {
+    minColor: "#FFF5EB",
+    midColor: "#FD8D3C",
+    maxColor: "#7F2704",
+};
+class GeoChartDesignPanel extends ChartWithAxisDesignPanel {
+    static template = "o-spreadsheet-GeoChartDesignPanel";
+    static components = { ...ChartWithAxisDesignPanel.components, RoundColorPicker };
+    colorScalesChoices = ChartTerms.GeoChart.ColorScales;
+    updateColorScaleType(ev) {
+        const value = ev.target.value;
+        value === "custom"
+            ? this.updateColorScale(DEFAULT_CUSTOM_COLOR_SCALE)
+            : this.updateColorScale(value);
+    }
+    updateColorScale(colorScale) {
+        this.props.updateChart(this.props.figureId, { colorScale });
+    }
+    updateMissingValueColor(color) {
+        this.props.updateChart(this.props.figureId, { missingValueColor: color });
+    }
+    updateLegendPosition(ev) {
+        const value = ev.target.value;
+        this.props.updateChart(this.props.figureId, { legendPosition: value });
+    }
+    get selectedColorScale() {
+        return typeof this.props.definition.colorScale === "object"
+            ? "custom"
+            : this.props.definition.colorScale || "oranges";
+    }
+    get selectedMissingValueColor() {
+        return this.props.definition.missingValueColor || "#ffffff";
+    }
+    get customColorScale() {
+        if (typeof this.props.definition.colorScale === "object") {
+            return this.props.definition.colorScale;
         }
-        if (this.props.delimitation && this.props.rect) {
-            const { x: cellX, y: cellY, height: cellHeight } = this.props.rect;
-            const remainingHeight = this.props.delimitation.height - (cellY + cellHeight);
-            assistantStyle["max-height"] = `${remainingHeight}px`;
-            if (cellY > remainingHeight) {
-                const availableSpaceAbove = cellY;
-                assistantStyle["max-height"] = `${availableSpaceAbove - CLOSE_ICON_RADIUS}px`;
-                // render top
-                // We compensate 2 px of margin on the assistant style + 1px for design reasons
-                assistantStyle.top = `-3px`;
-                assistantStyle.transform = `translate(0, -100%)`;
-            }
-            if (cellX + ASSISTANT_WIDTH > this.props.delimitation.width) {
-                // render left
-                assistantStyle.right = `0px`;
-            }
+        return undefined;
+    }
+    getCustomColorScaleColor(color) {
+        return this.customColorScale?.[color] ?? "";
+    }
+    setCustomColorScaleColor(colorType, color) {
+        if (!color && colorType !== "midColor") {
+            color = "#fff";
+        }
+        const customColorScale = this.customColorScale;
+        if (!customColorScale) {
+            return;
+        }
+        this.updateColorScale({ ...customColorScale, [colorType]: color });
+    }
+}
+
+class LineConfigPanel extends GenericChartConfigPanel {
+    static template = "o-spreadsheet-LineConfigPanel";
+    get canTreatLabelsAsText() {
+        const chart = this.env.model.getters.getChart(this.props.figureId);
+        if (chart && chart instanceof LineChart) {
+            return canChartParseLabels(chart.labelRange, this.env.model.getters);
         }
-        else {
-            assistantStyle["max-height"] = `${this.spreadsheetRect.height - composerRect.bottom}px`;
-            if (composerRect.left + ASSISTANT_WIDTH + SCROLLBAR_WIDTH + CLOSE_ICON_RADIUS >
-                this.spreadsheetRect.width) {
-                assistantStyle.right = `${CLOSE_ICON_RADIUS}px`;
-            }
+        return false;
+    }
+    get stackedLabel() {
+        const definition = this.props.definition;
+        return definition.fillArea
+            ? this.chartTerms.StackedAreaChart
+            : this.chartTerms.StackedLineChart;
+    }
+    getLabelRangeOptions() {
+        const options = super.getLabelRangeOptions();
+        if (this.canTreatLabelsAsText) {
+            options.push({
+                name: "labelsAsText",
+                value: this.props.definition.labelsAsText,
+                label: this.chartTerms.TreatLabelsAsText,
+                onChange: this.onUpdateLabelsAsText.bind(this),
+            });
         }
-        return cssPropertiesToCss(assistantStyle);
+        return options;
     }
-    // we can't allow input events to be triggered while we remove and add back the content of the composer in processContent
-    shouldProcessInputEvents = false;
-    tokens = [];
-    keyMapping = {
-        Enter: (ev) => this.processEnterKey(ev, "down"),
-        "Shift+Enter": (ev) => this.processEnterKey(ev, "up"),
-        "Alt+Enter": this.processNewLineEvent,
-        "Ctrl+Enter": this.processNewLineEvent,
-        Escape: this.processEscapeKey,
-        F2: (ev) => this.toggleEditionMode(ev),
-        F4: (ev) => this.processF4Key(ev),
-        Tab: (ev) => this.processTabKey(ev, "right"),
-        "Shift+Tab": (ev) => this.processTabKey(ev, "left"),
-    };
-    keyCodeMapping = {
-        NumpadDecimal: this.processNumpadDecimal,
-    };
-    setup() {
-        this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
-        this.autoCompleteState = useLocalStore(AutoCompleteStore);
-        onMounted(() => {
-            const el = this.composerRef.el;
-            if (this.props.isDefaultFocus) {
-                this.DOMFocusableElementStore.setFocusableElement(el);
-            }
-            this.contentHelper.updateEl(el);
-        });
-        this.env.model.selection.observe(this, {
-            handleEvent: () => this.autoCompleteState.hide(),
+    onUpdateLabelsAsText(labelsAsText) {
+        this.props.updateChart(this.props.figureId, {
+            labelsAsText,
         });
-        onWillUnmount(() => {
-            this.env.model.selection.detachObserver(this);
+    }
+    onUpdateStacked(stacked) {
+        this.props.updateChart(this.props.figureId, {
+            stacked,
         });
-        useEffect(() => {
-            this.processContent();
-            if (document.activeElement === this.contentHelper.el &&
-                this.props.composerStore.editionMode === "inactive" &&
-                !this.props.isDefaultFocus) {
-                this.DOMFocusableElementStore.focusableElement?.focus();
-            }
+    }
+    onUpdateCumulative(cumulative) {
+        this.props.updateChart(this.props.figureId, {
+            cumulative,
         });
-        useEffect(() => {
-            this.processTokenAtCursor();
-        }, () => [this.props.composerStore.editionMode !== "inactive"]);
     }
-    // ---------------------------------------------------------------------------
-    // Handlers
-    // ---------------------------------------------------------------------------
-    processArrowKeys(ev) {
-        const tokenAtCursor = this.props.composerStore.tokenAtCursor;
-        if ((this.props.composerStore.isSelectingRange ||
-            this.props.composerStore.editionMode === "inactive") &&
-            !(["ArrowUp", "ArrowDown"].includes(ev.key) &&
-                this.autoCompleteState.provider &&
-                tokenAtCursor?.type !== "REFERENCE")) {
-            this.functionDescriptionState.showDescription = false;
-            this.autoCompleteState.hide();
-            // Prevent the default content editable behavior which moves the cursor
-            ev.preventDefault();
-            ev.stopPropagation();
-            updateSelectionWithArrowKeys(ev, this.env.model.selection);
-            return;
-        }
-        const content = this.props.composerStore.currentContent;
-        if (this.props.focus === "cellFocus" &&
-            !this.autoCompleteState.provider &&
-            !content.startsWith("=")) {
-            this.props.composerStore.stopEdition();
-            return;
+}
+
+class PieChartDesignPanel extends Component {
+    static template = "o-spreadsheet-PieChartDesignPanel";
+    static components = {
+        GeneralDesignEditor,
+        Section,
+        Checkbox,
+        ChartLegend,
+    };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: { type: Function, optional: true },
+    };
+}
+
+class RadarChartDesignPanel extends Component {
+    static template = "o-spreadsheet-RadarChartDesignPanel";
+    static components = {
+        GeneralDesignEditor,
+        SeriesDesignEditor,
+        Section,
+        Checkbox,
+        ChartLegend,
+    };
+    static props = {
+        figureId: String,
+        definition: Object,
+        canUpdateChart: Function,
+        updateChart: Function,
+    };
+}
+
+class ScatterConfigPanel extends GenericChartConfigPanel {
+    static template = "o-spreadsheet-ScatterConfigPanel";
+    get canTreatLabelsAsText() {
+        const chart = this.env.model.getters.getChart(this.props.figureId);
+        if (chart && chart instanceof ScatterChart) {
+            return canChartParseLabels(chart.labelRange, this.env.model.getters);
         }
-        // All arrow keys are processed: up and down should move autocomplete, left
-        // and right should move the cursor.
-        ev.stopPropagation();
-        this.handleArrowKeysForAutocomplete(ev);
+        return false;
     }
-    handleArrowKeysForAutocomplete(ev) {
-        // only for arrow up and down
-        if (["ArrowUp", "ArrowDown"].includes(ev.key) && this.autoCompleteState.provider) {
-            ev.preventDefault();
-            this.autoCompleteState.moveSelection(ev.key === "ArrowDown" ? "next" : "previous");
-        }
+    onUpdateLabelsAsText(labelsAsText) {
+        this.props.updateChart(this.props.figureId, {
+            labelsAsText,
+        });
     }
-    processTabKey(ev, direction) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        if (this.props.composerStore.editionMode !== "inactive") {
-            const state = this.autoCompleteState;
-            if (state.provider && state.selectedIndex !== undefined) {
-                const autoCompleteValue = state.provider.proposals[state.selectedIndex]?.text;
-                if (autoCompleteValue) {
-                    this.autoComplete(autoCompleteValue);
-                    return;
-                }
-            }
-            this.props.composerStore.stopEdition(direction);
+    getLabelRangeOptions() {
+        const options = super.getLabelRangeOptions();
+        if (this.canTreatLabelsAsText) {
+            options.push({
+                name: "labelsAsText",
+                value: this.props.definition.labelsAsText,
+                label: this.chartTerms.TreatLabelsAsText,
+                onChange: this.onUpdateLabelsAsText.bind(this),
+            });
         }
+        return options;
     }
-    processEnterKey(ev, direction) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        const state = this.autoCompleteState;
-        if (state.provider && state.selectedIndex !== undefined) {
-            const autoCompleteValue = state.provider.proposals[state.selectedIndex]?.text;
-            if (autoCompleteValue) {
-                this.autoComplete(autoCompleteValue);
-                return;
-            }
-        }
-        this.props.composerStore.stopEdition(direction);
+}
+
+class ScorecardChartConfigPanel extends Component {
+    static template = "o-spreadsheet-ScorecardChartConfigPanel";
+    static components = { SelectionInput, ChartErrorSection, Section };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: Function,
+    };
+    state = useState({
+        keyValueDispatchResult: undefined,
+        baselineDispatchResult: undefined,
+    });
+    keyValue = this.props.definition.keyValue;
+    baseline = this.props.definition.baseline;
+    get errorMessages() {
+        const cancelledReasons = [
+            ...(this.state.keyValueDispatchResult?.reasons || []),
+            ...(this.state.baselineDispatchResult?.reasons || []),
+        ];
+        return cancelledReasons.map((error) => ChartTerms.Errors[error] || ChartTerms.Errors.Unexpected);
     }
-    processNewLineEvent(ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        const content = this.contentHelper.getText();
-        const selection = this.contentHelper.getCurrentSelection();
-        const start = Math.min(selection.start, selection.end);
-        const end = Math.max(selection.start, selection.end);
-        this.props.composerStore.stopComposerRangeSelection();
-        this.props.composerStore.setCurrentContent(content.slice(0, start) + NEWLINE + content.slice(end), {
-            start: start + 1,
-            end: start + 1,
+    get isKeyValueInvalid() {
+        return !!this.state.keyValueDispatchResult?.isCancelledBecause("InvalidScorecardKeyValue" /* CommandResult.InvalidScorecardKeyValue */);
+    }
+    get isBaselineInvalid() {
+        return !!this.state.keyValueDispatchResult?.isCancelledBecause("InvalidScorecardBaseline" /* CommandResult.InvalidScorecardBaseline */);
+    }
+    onKeyValueRangeChanged(ranges) {
+        this.keyValue = ranges[0];
+        this.state.keyValueDispatchResult = this.props.canUpdateChart(this.props.figureId, {
+            keyValue: this.keyValue,
         });
-        this.processContent();
     }
-    processEscapeKey(ev) {
-        this.props.composerStore.cancelEdition();
-        ev.stopPropagation();
-        ev.preventDefault();
+    updateKeyValueRange() {
+        this.state.keyValueDispatchResult = this.props.updateChart(this.props.figureId, {
+            keyValue: this.keyValue,
+        });
     }
-    processF4Key(ev) {
-        ev.stopPropagation();
-        this.props.composerStore.cycleReferences();
-        this.processContent();
+    getKeyValueRange() {
+        return this.keyValue || "";
     }
-    toggleEditionMode(ev) {
-        ev.stopPropagation();
-        this.props.composerStore.toggleEditionMode();
-        this.processContent();
+    onBaselineRangeChanged(ranges) {
+        this.baseline = ranges[0];
+        this.state.baselineDispatchResult = this.props.canUpdateChart(this.props.figureId, {
+            baseline: this.baseline,
+        });
     }
-    processNumpadDecimal(ev) {
-        ev.stopPropagation();
-        ev.preventDefault();
-        const locale = this.env.model.getters.getLocale();
-        const selection = this.contentHelper.getCurrentSelection();
-        const currentContent = this.props.composerStore.currentContent;
-        const content = currentContent.slice(0, selection.start) +
-            locale.decimalSeparator +
-            currentContent.slice(selection.end);
-        // Update composer even by hand rather than dispatching an InputEvent because untrusted inputs
-        // events aren't handled natively by contentEditable
-        this.props.composerStore.setCurrentContent(content, {
-            start: selection.start + 1,
-            end: selection.start + 1,
+    updateBaselineRange() {
+        this.state.baselineDispatchResult = this.props.updateChart(this.props.figureId, {
+            baseline: this.baseline,
         });
-        // We need to do the process content here in case there is no render between the keyDown and the
-        // keyUp event
-        this.processContent();
     }
-    onCompositionStart() {
-        this.compositionActive = true;
+    getBaselineRange() {
+        return this.baseline || "";
     }
-    onCompositionEnd() {
-        this.compositionActive = false;
+    updateBaselineMode(ev) {
+        this.props.updateChart(this.props.figureId, { baselineMode: ev.target.value });
     }
-    onKeydown(ev) {
-        if (this.props.composerStore.editionMode === "inactive") {
-            return;
-        }
-        if (ev.key.startsWith("Arrow")) {
-            this.processArrowKeys(ev);
-            return;
-        }
-        let handler = this.keyMapping[keyboardEventToShortcutString(ev)] ||
-            this.keyCodeMapping[keyboardEventToShortcutString(ev, "code")];
-        if (handler) {
-            handler.call(this, ev);
-        }
-        else {
-            ev.stopPropagation();
-        }
+}
+
+class ScorecardChartDesignPanel extends Component {
+    static template = "o-spreadsheet-ScorecardChartDesignPanel";
+    static components = {
+        GeneralDesignEditor,
+        RoundColorPicker,
+        SidePanelCollapsible,
+        Section,
+        Checkbox,
+    };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: { type: Function, optional: true },
+    };
+    get colorsSectionTitle() {
+        return this.props.definition.baselineMode === "progress"
+            ? _t("Progress bar colors")
+            : _t("Baseline colors");
     }
-    onPaste(ev) {
-        if (this.props.composerStore.editionMode !== "inactive") {
-            // let the browser clipboard work
-            ev.stopPropagation();
-        }
-        else {
-            // the user meant to paste in the sheet, not open the composer with the pasted content
-            // While we're not editing, we still have the focus and should therefore prevent
-            // the native "paste" to occur.
-            ev.preventDefault();
-        }
+    get humanizeNumbersLabel() {
+        return _t("Humanize numbers");
     }
-    /*
-     * Triggered automatically by the content-editable between the keydown and key up
-     * */
-    onInput(ev) {
-        if (!this.shouldProcessInputEvents) {
-            return;
-        }
-        ev.stopPropagation();
-        let content;
-        if (this.props.composerStore.editionMode === "inactive") {
-            content = ev.data || "";
-        }
-        else {
-            content = this.contentHelper.getText();
-        }
-        if (this.props.focus === "inactive") {
-            return this.props.onComposerCellFocused?.(content);
-        }
-        let selection = this.contentHelper.getCurrentSelection();
-        this.props.composerStore.stopComposerRangeSelection();
-        this.props.composerStore.setCurrentContent(content, selection);
-        this.processTokenAtCursor();
+    get defaultScorecardTitleFontSize() {
+        return SCORECARD_CHART_TITLE_FONT_SIZE;
     }
-    onKeyup(ev) {
-        if (this.contentHelper.el === document.activeElement) {
-            if (this.autoCompleteState.provider && ["ArrowUp", "ArrowDown"].includes(ev.key)) {
-                return;
-            }
-            if (this.props.composerStore.isSelectingRange && ev.key?.startsWith("Arrow")) {
-                return;
-            }
-            const { start: oldStart, end: oldEnd } = this.props.composerStore.composerSelection;
-            const { start, end } = this.contentHelper.getCurrentSelection();
-            if (start !== oldStart || end !== oldEnd) {
-                this.props.composerStore.changeComposerCursorSelection(start, end);
-            }
-            this.processTokenAtCursor();
-        }
+    updateHumanizeNumbers(humanize) {
+        this.props.updateChart(this.props.figureId, { humanize });
     }
-    onBlur(ev) {
-        if (this.props.composerStore.editionMode === "inactive") {
-            return;
-        }
-        const target = ev.relatedTarget;
-        if (!target || !(target instanceof HTMLElement)) {
-            this.props.composerStore.stopEdition();
-            return;
-        }
-        if (target.attributes.getNamedItem("composerFocusableElement")) {
-            this.contentHelper.el.focus();
-            return;
-        }
-        if (target.classList.contains("o-composer")) {
-            return;
-        }
-        this.props.composerStore.stopEdition();
+    translate(term) {
+        return _t(term);
     }
-    updateAutoCompleteIndex(index) {
-        this.autoCompleteState.selectIndex(clip(0, index, 10));
+    updateBaselineDescr(ev) {
+        this.props.updateChart(this.props.figureId, { baselineDescr: ev.target.value });
     }
-    /**
-     * This is required to ensure the content helper selection is
-     * properly updated on "onclick" events. Depending on the browser,
-     * the callback onClick from the composer will be executed before
-     * the selection was updated in the dom, which means we capture an
-     * wrong selection which is then forced upon the content helper on
-     * processContent.
-     */
-    onMousedown(ev) {
-        if (ev.button > 0) {
-            // not main button, probably a context menu
-            return;
+    setColor(color, colorPickerId) {
+        switch (colorPickerId) {
+            case "backgroundColor":
+                this.props.updateChart(this.props.figureId, { background: color });
+                break;
+            case "baselineColorDown":
+                this.props.updateChart(this.props.figureId, { baselineColorDown: color });
+                break;
+            case "baselineColorUp":
+                this.props.updateChart(this.props.figureId, { baselineColorUp: color });
+                break;
         }
-        this.contentHelper.removeSelection();
     }
-    onClick() {
-        if (this.env.model.getters.isReadonly()) {
-            return;
-        }
-        const newSelection = this.contentHelper.getCurrentSelection();
-        this.props.composerStore.stopComposerRangeSelection();
-        this.props.onComposerContentFocused();
-        this.props.composerStore.changeComposerCursorSelection(newSelection.start, newSelection.end);
-        this.processTokenAtCursor();
+}
+
+class WaterfallChartDesignPanel extends Component {
+    static template = "o-spreadsheet-WaterfallChartDesignPanel";
+    static components = {
+        GeneralDesignEditor,
+        Checkbox,
+        SidePanelCollapsible,
+        Section,
+        RoundColorPicker,
+        AxisDesignEditor,
+        RadioSelection,
+        ChartLegend,
+    };
+    static props = {
+        figureId: String,
+        definition: Object,
+        updateChart: Function,
+        canUpdateChart: { type: Function, optional: true },
+    };
+    axisChoices = CHART_AXIS_CHOICES;
+    onUpdateShowSubTotals(showSubTotals) {
+        this.props.updateChart(this.props.figureId, { showSubTotals });
     }
-    onDblClick() {
-        if (this.env.model.getters.isReadonly()) {
-            return;
-        }
-        const composerContent = this.props.composerStore.currentContent;
-        const isValidFormula = composerContent.startsWith("=");
-        if (isValidFormula) {
-            const tokens = this.props.composerStore.currentTokens;
-            const currentSelection = this.contentHelper.getCurrentSelection();
-            if (currentSelection.start === currentSelection.end)
-                return;
-            const currentSelectedText = composerContent.substring(currentSelection.start, currentSelection.end);
-            const token = tokens.filter((token) => token.value.includes(currentSelectedText) &&
-                token.start <= currentSelection.start &&
-                token.end >= currentSelection.end)[0];
-            if (!token) {
-                return;
-            }
-            if (token.type === "REFERENCE") {
-                this.props.composerStore.changeComposerCursorSelection(token.start, token.end);
-            }
-        }
+    onUpdateShowConnectorLines(showConnectorLines) {
+        this.props.updateChart(this.props.figureId, { showConnectorLines });
     }
-    onContextMenu(ev) {
-        if (this.props.composerStore.editionMode === "inactive") {
-            this.props.onInputContextMenu?.(ev);
-        }
+    onUpdateFirstValueAsSubtotal(firstValueAsSubtotal) {
+        this.props.updateChart(this.props.figureId, { firstValueAsSubtotal });
     }
-    closeAssistant() {
-        this.assistant.forcedClosed = true;
+    updateColor(colorName, color) {
+        this.props.updateChart(this.props.figureId, { [colorName]: color });
     }
-    openAssistant() {
-        this.assistant.forcedClosed = false;
+    get axesList() {
+        return [
+            { id: "x", name: _t("Horizontal axis") },
+            { id: "y", name: _t("Vertical axis") },
+        ];
+    }
+    get positiveValuesColor() {
+        return (this.props.definition.positiveValuesColor ||
+            CHART_WATERFALL_POSITIVE_COLOR);
+    }
+    get negativeValuesColor() {
+        return (this.props.definition.negativeValuesColor ||
+            CHART_WATERFALL_NEGATIVE_COLOR);
+    }
+    get subTotalValuesColor() {
+        return (this.props.definition.subTotalValuesColor ||
+            CHART_WATERFALL_SUBTOTAL_COLOR);
     }
-    // ---------------------------------------------------------------------------
-    // Private
-    // ---------------------------------------------------------------------------
-    processContent() {
-        if (this.compositionActive) {
-            return;
-        }
-        this.shouldProcessInputEvents = false;
-        if (this.props.focus !== "inactive" && document.activeElement !== this.contentHelper.el) {
-            this.contentHelper.el.focus();
-        }
-        const content = this.getContentLines();
-        this.contentHelper.setText(content);
-        if (content.length !== 0 && content.length[0] !== 0) {
-            if (this.props.focus !== "inactive") {
-                // Put the cursor back where it was before the rendering
-                const { start, end } = this.props.composerStore.composerSelection;
-                this.contentHelper.selectRange(start, end);
-            }
-            this.contentHelper.scrollSelectionIntoView();
-        }
-        this.shouldProcessInputEvents = true;
+    updateVerticalAxisPosition(value) {
+        this.props.updateChart(this.props.figureId, {
+            verticalAxisPosition: value,
+        });
     }
-    /**
-     * Get the HTML content corresponding to the current composer token, divided by lines.
-     */
-    getContentLines() {
-        let value = this.props.composerStore.currentContent;
-        const isValidFormula = value.startsWith("=");
-        if (value === "") {
-            return [];
-        }
-        else if (isValidFormula && this.props.focus !== "inactive") {
-            return this.splitHtmlContentIntoLines(this.getHtmlContentFromTokens());
-        }
-        return this.splitHtmlContentIntoLines([{ value }]);
+}
+
+const chartSidePanelComponentRegistry = new Registry();
+chartSidePanelComponentRegistry
+    .add("line", {
+    configuration: LineConfigPanel,
+    design: ChartWithAxisDesignPanel,
+})
+    .add("scatter", {
+    configuration: ScatterConfigPanel,
+    design: ChartWithAxisDesignPanel,
+})
+    .add("bar", {
+    configuration: BarConfigPanel,
+    design: ChartWithAxisDesignPanel,
+})
+    .add("combo", {
+    configuration: GenericChartConfigPanel,
+    design: ComboChartDesignPanel,
+})
+    .add("pie", {
+    configuration: GenericChartConfigPanel,
+    design: PieChartDesignPanel,
+})
+    .add("gauge", {
+    configuration: GaugeChartConfigPanel,
+    design: GaugeChartDesignPanel,
+})
+    .add("scorecard", {
+    configuration: ScorecardChartConfigPanel,
+    design: ScorecardChartDesignPanel,
+})
+    .add("waterfall", {
+    configuration: GenericChartConfigPanel,
+    design: WaterfallChartDesignPanel,
+})
+    .add("pyramid", {
+    configuration: GenericChartConfigPanel,
+    design: ChartWithAxisDesignPanel,
+})
+    .add("radar", {
+    configuration: GenericChartConfigPanel,
+    design: RadarChartDesignPanel,
+})
+    .add("geo", {
+    configuration: GeoChartConfigPanel,
+    design: GeoChartDesignPanel,
+});
+
+css /* scss */ `
+  .o-section .o-input.o-type-selector {
+    height: 30px;
+    padding-left: 35px;
+    padding-top: 5px;
+  }
+  .o-type-selector-preview {
+    left: 5px;
+    top: 3px;
+    .o-chart-preview {
+      width: 24px;
+      height: 24px;
     }
-    getHtmlContentFromTokens() {
-        const tokens = this.props.composerStore.currentTokens;
-        const result = [];
-        const { end, start } = this.props.composerStore.composerSelection;
-        for (const token of tokens) {
-            let color = token.color || DEFAULT_TOKEN_COLOR;
-            if (token.isBlurred) {
-                color = setColorAlpha(color, 0.5);
-            }
-            result.push({ value: token.value, color });
-            if (token.type === "REFERENCE" &&
-                this.props.composerStore.tokenAtCursor === token &&
-                this.props.composerStore.editionMode === "selecting") {
-                result[result.length - 1].class = "text-decoration-underline";
-            }
-            if (end === start && token.isParenthesisLinkedToCursor) {
-                result[result.length - 1].class = backgroundClass;
-            }
-            if (this.props.composerStore.showSelectionIndicator && end === start && end === token.end) {
-                result[result.length - 1].class = selectionIndicatorClass;
-            }
-        }
-        return result;
+  }
+
+  .o-popover .o-chart-select-popover {
+    box-sizing: border-box;
+    background: #fff;
+    .o-chart-type-item {
+      cursor: pointer;
+      padding: 3px 6px;
+      margin: 1px 2px;
+      &.selected,
+      &:hover {
+        border: 1px solid ${ACTION_COLOR};
+        background: ${BADGE_SELECTED_COLOR};
+        padding: 2px 5px;
+      }
+      .o-chart-preview {
+        width: 48px;
+        height: 48px;
+      }
     }
-    /**
-     * Split an array of HTMLContents into lines. Each NEWLINE character encountered will create a new
-     * line. Contents can be split into multiple parts if they contain multiple NEWLINE characters.
-     */
-    splitHtmlContentIntoLines(contents) {
-        const contentSplitInLines = [];
-        let currentLine = [];
-        for (const content of contents) {
-            if (content.value.includes(NEWLINE)) {
-                const lines = content.value.split(NEWLINE);
-                const lastLine = lines.pop();
-                for (const line of lines) {
-                    currentLine.push({ color: content.color, value: line }); // don't copy class, only last line should keep it
-                    contentSplitInLines.push(currentLine);
-                    currentLine = [];
-                }
-                currentLine.push({ ...content, value: lastLine });
+  }
+`;
+class ChartTypePicker extends Component {
+    static template = "o-spreadsheet-ChartTypePicker";
+    static components = { Section, Popover };
+    static props = { figureId: String, chartPanelStore: Object };
+    categories = chartCategories;
+    chartTypeByCategories = {};
+    popoverRef = useRef("popoverRef");
+    selectRef = useRef("selectRef");
+    state = useState({ popoverProps: undefined, popoverStyle: "" });
+    setup() {
+        useExternalListener(window, "pointerdown", this.onExternalClick, { capture: true });
+        for (const subtypeProperties of chartSubtypeRegistry.getAll()) {
+            if (this.chartTypeByCategories[subtypeProperties.category]) {
+                this.chartTypeByCategories[subtypeProperties.category].push(subtypeProperties);
             }
             else {
-                currentLine.push(content);
+                this.chartTypeByCategories[subtypeProperties.category] = [subtypeProperties];
             }
         }
-        if (currentLine.length) {
-            contentSplitInLines.push(currentLine);
-        }
-        // Remove useless empty contents
-        const filteredLines = [];
-        for (const line of contentSplitInLines) {
-            if (line.every(this.isContentEmpty)) {
-                filteredLines.push([line[0]]);
-            }
-            else {
-                filteredLines.push(line.filter((content) => !this.isContentEmpty(content)));
-            }
+    }
+    onExternalClick(ev) {
+        if (isChildEvent(this.popoverRef.el?.parentElement, ev) ||
+            isChildEvent(this.selectRef.el, ev)) {
+            return;
         }
-        return filteredLines;
+        this.closePopover();
     }
-    isContentEmpty(content) {
-        return !(content.value || content.class);
+    onTypeChange(type) {
+        this.props.chartPanelStore.changeChartType(this.props.figureId, type);
+        this.closePopover();
     }
-    /**
-     * Compute the state of the composer from the tokenAtCursor.
-     * If the token is a function or symbol (that isn't a cell/range reference) we have to initialize
-     * the autocomplete engine otherwise we initialize the formula assistant.
-     */
-    processTokenAtCursor() {
-        let content = this.props.composerStore.currentContent;
-        if (this.autoCompleteState.provider) {
-            this.autoCompleteState.hide();
-        }
-        this.functionDescriptionState.showDescription = false;
-        const autoCompleteProvider = this.props.composerStore.autocompleteProvider;
-        if (autoCompleteProvider) {
-            this.autoCompleteState.useProvider(autoCompleteProvider);
-        }
-        const token = this.props.composerStore.tokenAtCursor;
-        if (content.startsWith("=") && token && token.type !== "SYMBOL") {
-            const tokenContext = token.functionContext;
-            const parentFunction = tokenContext?.parent.toUpperCase();
-            if (tokenContext &&
-                parentFunction &&
-                parentFunction in functions &&
-                token.type !== "UNKNOWN") {
-                // initialize Formula Assistant
-                const description = functions[parentFunction];
-                const argPosition = tokenContext.argPosition;
-                this.functionDescriptionState.functionName = parentFunction;
-                this.functionDescriptionState.functionDescription = description;
-                this.functionDescriptionState.argToFocus = description.getArgToFocus(argPosition + 1) - 1;
-                this.functionDescriptionState.showDescription = true;
-            }
-        }
+    getChartDefinition(figureId) {
+        return this.env.model.getters.getChartDefinition(figureId);
     }
-    autoComplete(value) {
-        if (!value || this.assistant.forcedClosed) {
+    getSelectedChartSubtypeProperties() {
+        const definition = this.getChartDefinition(this.props.figureId);
+        const matchedChart = chartSubtypeRegistry
+            .getAll()
+            .find((c) => c.matcher?.(definition) || false);
+        return matchedChart || chartSubtypeRegistry.get(definition.type);
+    }
+    onPointerDown(ev) {
+        if (this.state.popoverProps) {
+            this.closePopover();
             return;
         }
-        this.autoCompleteState.provider?.selectProposal(value);
-        this.processTokenAtCursor();
+        const target = ev.currentTarget;
+        const { bottom, right, width } = target.getBoundingClientRect();
+        this.state.popoverProps = {
+            anchorRect: { x: right, y: bottom, width: 0, height: 0 },
+            positioning: "TopRight",
+            verticalOffset: 0,
+        };
+        this.state.popoverStyle = cssPropertiesToCss({ width: `${width}px` });
+    }
+    closePopover() {
+        this.state.popoverProps = undefined;
     }
 }
 
-class StandaloneComposerStore extends AbstractComposerStore {
-    args;
-    constructor(get, args) {
-        super(get);
-        this.args = args;
-        this._currentContent = this.getComposerContent();
-    }
-    getAutoCompleteProviders() {
-        const providersDefinitions = super.getAutoCompleteProviders();
-        const contextualAutocomplete = this.args().contextualAutocomplete;
-        if (contextualAutocomplete) {
-            providersDefinitions.push(contextualAutocomplete);
-        }
-        return providersDefinitions;
+class MainChartPanelStore extends SpreadsheetStore {
+    mutators = ["activatePanel", "changeChartType"];
+    panel = "configuration";
+    creationContexts = {};
+    activatePanel(panel) {
+        this.panel = panel;
     }
-    /**
-     * Replace the current reference selected by the new one.
-     * */
-    getZoneReference(zone) {
-        const res = super.getZoneReference(zone);
-        if (this.args().defaultStatic) {
-            return setXcToFixedReferenceType(res, "colrow");
+    changeChartType(figureId, newDisplayType) {
+        const currentCreationContext = this.getters.getContextCreationChart(figureId);
+        const savedCreationContext = this.creationContexts[figureId] || {};
+        let newRanges = currentCreationContext?.range;
+        if (newRanges?.every((range, i) => deepEquals(range, savedCreationContext.range?.[i]))) {
+            newRanges = Object.assign([], savedCreationContext.range, currentCreationContext?.range);
         }
-        return res;
-    }
-    getComposerContent() {
-        if (this.editionMode === "inactive") {
-            // References in the content might not be linked to the current active sheet
-            // We here force the sheet name prefix for all references that are not in
-            // the current active sheet
-            const defaultRangeSheetId = this.args().defaultRangeSheetId;
-            return rangeTokenize(this.args().content)
-                .map((token) => {
-                if (token.type === "REFERENCE") {
-                    const range = this.getters.getRangeFromSheetXC(defaultRangeSheetId, token.value);
-                    return this.getters.getRangeString(range, this.getters.getActiveSheetId());
-                }
-                return token.value;
-            })
-                .join("");
+        this.creationContexts[figureId] = {
+            ...savedCreationContext,
+            ...currentCreationContext,
+            range: newRanges,
+        };
+        const sheetId = this.getters.getFigureSheetId(figureId);
+        if (!sheetId) {
+            return;
         }
-        return this._currentContent;
-    }
-    stopEdition() {
-        this._stopEdition();
-    }
-    confirmEdition(content) {
-        this.args().onConfirm(content);
+        const definition = this.getChartDefinitionFromContextCreation(figureId, newDisplayType);
+        this.model.dispatch("UPDATE_CHART", {
+            definition,
+            id: figureId,
+            sheetId,
+        });
     }
-    getTokenColor(token) {
-        if (token.type === "SYMBOL") {
-            const matchedColor = this.args().getContextualColoredSymbolToken?.(token);
-            if (matchedColor) {
-                return matchedColor;
-            }
-        }
-        return super.getTokenColor(token);
+    getChartDefinitionFromContextCreation(figureId, newDisplayType) {
+        const newChartInfo = chartSubtypeRegistry.get(newDisplayType);
+        const ChartClass = chartRegistry.get(newChartInfo.chartType);
+        return {
+            ...ChartClass.getChartDefinitionFromContextCreation(this.creationContexts[figureId]),
+            ...newChartInfo.subtypeDefinition,
+        };
     }
 }
 
 css /* scss */ `
-  .o-spreadsheet {
-    .o-standalone-composer {
-      min-height: 24px;
-      box-sizing: border-box;
+  .o-chart {
+    .o-panel {
+      display: flex;
+      .o-panel-element {
+        flex: 1 0 auto;
+        padding: 8px 0px;
+        text-align: center;
+        cursor: pointer;
+        border-right: 1px solid ${GRAY_300};
 
-      border-bottom: 1px solid;
-      border-color: ${GRAY_300};
+        &.inactive {
+          color: ${TEXT_BODY};
+          background-color: ${GRAY_100};
+          border-bottom: 1px solid ${GRAY_300};
+        }
 
-      &.active {
-        border-color: ${ACTION_COLOR};
-      }
+        &:not(.inactive) {
+          color: ${TEXT_HEADING};
+          border-bottom: 1px solid #fff;
+        }
 
-      &.o-invalid {
-        border-bottom: 2px solid red;
+        .fa {
+          margin-right: 4px;
+        }
       }
-
-      /* As the standalone composer is potentially very small (eg. in a side panel), we remove the scrollbar display */
-      scrollbar-width: none; /* Firefox */
-      &::-webkit-scrollbar {
-        display: none;
+      .o-panel-element:last-child {
+        border-right: none;
       }
     }
   }
 `;
-class StandaloneComposer extends Component {
-    static template = "o-spreadsheet-StandaloneComposer";
-    static props = {
-        composerContent: { type: String, optional: true },
-        defaultRangeSheetId: { type: String, optional: true },
-        defaultStatic: { type: Boolean, optional: true },
-        onConfirm: Function,
-        contextualAutocomplete: { type: Object, optional: true },
-        placeholder: { type: String, optional: true },
-        class: { type: String, optional: true },
-        invalid: { type: Boolean, optional: true },
-        getContextualColoredSymbolToken: { type: Function, optional: true },
-    };
-    static components = { Composer };
-    static defaultProps = {
-        composerContent: "",
-        defaultStatic: false,
-    };
-    composerFocusStore;
-    standaloneComposerStore;
-    composerInterface;
-    spreadsheetRect = useSpreadsheetRect();
+class ChartPanel extends Component {
+    static template = "o-spreadsheet-ChartPanel";
+    static components = { Section, ChartTypePicker };
+    static props = { onCloseSidePanel: Function, figureId: String };
+    store;
+    get figureId() {
+        return this.props.figureId;
+    }
     setup() {
-        this.composerFocusStore = useStore(ComposerFocusStore);
-        const standaloneComposerStore = useLocalStore(StandaloneComposerStore, () => ({
-            onConfirm: this.props.onConfirm,
-            content: this.props.composerContent,
-            defaultStatic: this.props.defaultStatic ?? false,
-            contextualAutocomplete: this.props.contextualAutocomplete,
-            defaultRangeSheetId: this.props.defaultRangeSheetId,
-            getContextualColoredSymbolToken: this.props.getContextualColoredSymbolToken,
-        }));
-        this.standaloneComposerStore = standaloneComposerStore;
-        this.composerInterface = {
-            id: "standaloneComposer",
-            get editionMode() {
-                return standaloneComposerStore.editionMode;
-            },
-            startEdition: this.standaloneComposerStore.startEdition,
-            setCurrentContent: this.standaloneComposerStore.setCurrentContent,
-            stopEdition: this.standaloneComposerStore.stopEdition,
+        this.store = useLocalStore(MainChartPanelStore);
+    }
+    updateChart(figureId, updateDefinition) {
+        if (figureId !== this.figureId) {
+            return;
+        }
+        const definition = {
+            ...this.getChartDefinition(this.figureId),
+            ...updateDefinition,
         };
+        return this.env.model.dispatch("UPDATE_CHART", {
+            definition,
+            id: figureId,
+            sheetId: this.env.model.getters.getFigureSheetId(figureId),
+        });
     }
-    get focus() {
-        return this.composerFocusStore.activeComposer === this.composerInterface
-            ? this.composerFocusStore.focusMode
-            : "inactive";
+    canUpdateChart(figureId, updateDefinition) {
+        if (figureId !== this.figureId || !this.env.model.getters.isChartDefined(figureId)) {
+            return;
+        }
+        const definition = {
+            ...this.getChartDefinition(this.figureId),
+            ...updateDefinition,
+        };
+        return this.env.model.canDispatch("UPDATE_CHART", {
+            definition,
+            id: figureId,
+            sheetId: this.env.model.getters.getFigureSheetId(figureId),
+        });
     }
-    get composerStyle() {
-        return this.props.invalid
-            ? cssPropertiesToCss({ padding: "1px 0px 0px 0px" })
-            : cssPropertiesToCss({ padding: "1px 0px" });
+    onTypeChange(type) {
+        if (!this.figureId) {
+            return;
+        }
+        this.store.changeChartType(this.figureId, type);
     }
-    get containerClass() {
-        const classes = [
-            this.focus === "inactive" ? "" : "active",
-            this.props.invalid ? "o-invalid" : "",
-            this.props.class || "",
-        ];
-        return classes.join(" ");
+    get chartPanel() {
+        if (!this.figureId) {
+            throw new Error("Chart not defined.");
+        }
+        const type = this.env.model.getters.getChartType(this.figureId);
+        if (!type) {
+            throw new Error("Chart not defined.");
+        }
+        const chartPanel = chartSidePanelComponentRegistry.get(type);
+        if (!chartPanel) {
+            throw new Error(`Component is not defined for type ${type}`);
+        }
+        return chartPanel;
     }
-    onFocus(selection) {
-        this.composerFocusStore.focusComposer(this.composerInterface, { selection });
+    getChartDefinition(figureId) {
+        return this.env.model.getters.getChartDefinition(figureId);
     }
 }
 
@@ -41764,7 +41861,7 @@ class ConditionalFormatPreviewList extends Component {
             draggedItemId: cf.id,
             initialMousePosition: event.clientY,
             items: items,
-            containerEl: this.cfListRef.el,
+            scrollableContainerEl: this.cfListRef.el,
             onDragEnd: (cfId, finalIndex) => this.onDragEnd(cfId, finalIndex),
         });
     }
@@ -44949,6 +45046,7 @@ class PivotLayoutConfigurator extends Component {
         unusedGranularities: Object,
         dateGranularities: Array,
         datetimeGranularities: Array,
+        getScrollableContainerEl: { type: Function, optional: true },
         pivotId: String,
     };
     dimensionsRef = useRef("pivot-dimensions");
@@ -44982,7 +45080,7 @@ class PivotLayoutConfigurator extends Component {
             draggedItemId: dimension.nameWithGranularity,
             initialMousePosition: event.clientY,
             items: draggableItems,
-            containerEl: this.dimensionsRef.el,
+            scrollableContainerEl: this.props.getScrollableContainerEl?.() || this.dimensionsRef.el,
             onDragEnd: (dimensionName, finalIndex) => {
                 const originalIndex = draggableIds.findIndex((id) => id === dimensionName);
                 if (originalIndex === finalIndex) {
@@ -45031,7 +45129,7 @@ class PivotLayoutConfigurator extends Component {
             draggedItemId: measure.id,
             initialMousePosition: event.clientY,
             items: draggableItems,
-            containerEl: this.dimensionsRef.el,
+            scrollableContainerEl: this.props.getScrollableContainerEl?.() || this.dimensionsRef.el,
             onDragEnd: (measureName, finalIndex) => {
                 const originalIndex = draggableIds.findIndex((id) => id === measureName);
                 if (originalIndex === finalIndex) {
@@ -45664,7 +45762,7 @@ class SpreadsheetPivotTable {
     rowTreeToRows(tree, parentRow) {
         return tree.flatMap((node) => {
             const row = {
-                indent: parentRow ? parentRow.indent + 1 : 0,
+                indent: parentRow ? parentRow.indent + 1 : 1,
                 fields: [...(parentRow?.fields || []), node.field],
                 values: [...(parentRow?.values || []), node.value],
             };
@@ -45720,7 +45818,7 @@ function dataEntriesToRows(dataEntries, index, rows, fields, values) {
         pivotTableRows.push({
             fields: _fields,
             values: _values,
-            indent: index,
+            indent: index + 1,
         });
         const record = groups[value];
         if (record) {
@@ -46716,6 +46814,7 @@ class PivotSpreadsheetSidePanel extends Component {
     };
     store;
     state;
+    pivotSidePanelRef = useRef("pivotSidePanel");
     setup() {
         this.store = useLocalStore(PivotSidePanelStore, this.props.pivotId);
         this.state = useState({
@@ -46744,6 +46843,9 @@ class PivotSpreadsheetSidePanel extends Component {
     get definition() {
         return this.store.definition;
     }
+    getScrollableContainerEl() {
+        return this.pivotSidePanelRef.el;
+    }
     onSelectionChanged(ranges) {
         this.state.rangeHasChanged = true;
         this.state.range = ranges[0];
@@ -55922,6 +56024,8 @@ class RangeAdapter {
         this.getters = getters;
     }
     static getters = [
+        "adaptFormulaStringDependencies",
+        "copyFormulaStringForSheet",
         "extendRange",
         "getRangeString",
         "getRangeFromSheetXC",
@@ -56314,6 +56418,38 @@ class RangeAdapter {
         const unionOfZones = unionUnboundedZones(...zones);
         return this.getRangeFromZone(ranges[0].sheetId, unionOfZones);
     }
+    adaptFormulaStringDependencies(sheetId, formula, applyChange) {
+        if (!formula.startsWith("=")) {
+            return formula;
+        }
+        const compiledFormula = compile(formula);
+        const updatedDependencies = compiledFormula.dependencies.map((dep) => {
+            const range = this.getters.getRangeFromSheetXC(sheetId, dep);
+            const changedRange = applyChange(range);
+            return changedRange.changeType === "NONE" ? range : changedRange.range;
+        });
+        return this.getters.getFormulaString(sheetId, compiledFormula.tokens, updatedDependencies);
+    }
+    /**
+     * Copy a formula string to another sheet.
+     *
+     * @param mode
+     * `keepSameReference` will make the formula reference the exact same ranges,
+     * `moveReference` will change all the references to `sheetIdFrom` into references to `sheetIdTo`.
+     */
+    copyFormulaStringForSheet(sheetIdFrom, sheetIdTo, formula, mode) {
+        if (!formula.startsWith("=")) {
+            return formula;
+        }
+        const compiledFormula = compile(formula);
+        const updatedDependencies = compiledFormula.dependencies.map((dep) => {
+            const range = this.getters.getRangeFromSheetXC(sheetIdFrom, dep);
+            return mode === "keepSameReference"
+                ? range
+                : duplicateRangeInDuplicatedSheet(sheetIdFrom, sheetIdTo, range);
+        });
+        return this.getters.getFormulaString(sheetIdTo, compiledFormula.tokens, updatedDependencies);
+    }
     // ---------------------------------------------------------------------------
     // Private
     // ---------------------------------------------------------------------------
@@ -69211,7 +69347,7 @@ class BottomBar extends Component {
             draggedItemId: sheetId,
             initialMousePosition: event.clientX,
             items: sheets,
-            containerEl: this.sheetListRef.el,
+            scrollableContainerEl: this.sheetListRef.el,
             onDragEnd: (sheetId, finalIndex) => this.onDragEnd(sheetId, finalIndex),
         });
     }
@@ -69266,7 +69402,7 @@ class ClickableCellsStore extends SpreadsheetStore {
             this._registryItems = markRaw(clickableCellRegistry.getAll().sort((a, b) => a.sequence - b.sequence));
         }
     }
-    getClickableAction(position) {
+    getClickableItem(position) {
         const { sheetId, col, row } = position;
         const clickableCells = this._clickableCells;
         const xc = toXC(col, row);
@@ -69274,33 +69410,37 @@ class ClickableCellsStore extends SpreadsheetStore {
             clickableCells[sheetId] = {};
         }
         if (!(xc in clickableCells[sheetId])) {
-            clickableCells[sheetId][xc] = this.findClickableAction(position);
+            const clickableCell = this.findClickableItem(position);
+            if (clickableCell) {
+                clickableCells[sheetId][xc] = clickableCell;
+            }
         }
         return clickableCells[sheetId][xc];
     }
-    findClickableAction(position) {
+    findClickableItem(position) {
         const getters = this.getters;
         for (const item of this._registryItems) {
             if (item.condition(position, getters)) {
-                return item.execute;
+                return item;
             }
         }
-        return false;
+        return undefined;
     }
     get clickableCells() {
         const cells = [];
         const getters = this.getters;
         const sheetId = getters.getActiveSheetId();
         for (const position of this.getters.getVisibleCellPositions()) {
-            const action = this.getClickableAction(position);
-            if (!action) {
+            const item = this.getClickableItem(position);
+            if (!item) {
                 continue;
             }
             const zone = getters.expandZone(sheetId, positionToZone(position));
             cells.push({
                 coordinates: getters.getVisibleRect(zone),
                 position,
-                action,
+                action: item.execute,
+                title: item.title || "",
             });
         }
         return cells;
@@ -74676,6 +74816,9 @@ class Model extends EventBus {
         this.coreGetters.extendRange = this.range.extendRange.bind(this.range);
         this.coreGetters.getRangesUnion = this.range.getRangesUnion.bind(this.range);
         this.coreGetters.removeRangesSheetPrefix = this.range.removeRangesSheetPrefix.bind(this.range);
+        this.coreGetters.adaptFormulaStringDependencies =
+            this.range.adaptFormulaStringDependencies.bind(this.range);
+        this.coreGetters.copyFormulaStringForSheet = this.range.copyFormulaStringForSheet.bind(this.range);
         this.getters = {
             isReadonly: () => this.config.mode === "readonly" || this.config.mode === "dashboard",
             isDashboard: () => this.config.mode === "dashboard",
@@ -75332,6 +75475,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, 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.2.0-alpha.6";
-__info__.date = "2025-02-05T06:50:47.008Z";
-__info__.hash = "dae9ab2";
+__info__.version = "18.2.0-alpha.7";
+__info__.date = "2025-02-10T09:01:19.353Z";
+__info__.hash = "0432f17";