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

package/dist/o-spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.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
  */
 
 (function (exports, owl) {
@@ -770,9 +770,16 @@
       }
       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.
@@ -3646,10 +3653,8 @@
       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";
@@ -27949,7 +27954,6 @@ stores.inject(MyMetaStore, storeInstance);
           ["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"),
       },
@@ -29771,6 +29775,8 @@ stores.inject(MyMetaStore, storeInstance);
       const { locale, axisFormats } = args;
       const format = axisFormats?.y || axisFormats?.y1;
       return {
+          enabled: false,
+          external: customTooltipHandler,
           filter: function (tooltipItem) {
               return tooltipItem.raw.value !== undefined;
           },
@@ -30224,14 +30230,6 @@ stores.inject(MyMetaStore, storeInstance);
           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) {
@@ -30243,7 +30241,10 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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":
@@ -30270,7 +30271,7 @@ stores.inject(MyMetaStore, storeInstance);
           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;
@@ -30311,20 +30312,24 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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
@@ -30345,11 +30350,10 @@ stores.inject(MyMetaStore, storeInstance);
           };
       }
       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);
       }
   }
@@ -30372,12 +30376,18 @@ stores.inject(MyMetaStore, storeInstance);
               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) {
@@ -30425,16 +30435,46 @@ stores.inject(MyMetaStore, storeInstance);
           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;
@@ -37322,8 +37362,8 @@ stores.inject(MyMetaStore, storeInstance);
           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,
@@ -37334,8 +37374,8 @@ stores.inject(MyMetaStore, storeInstance);
           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));
       };
       owl.onWillUnmount(() => {
@@ -38046,7 +38086,7 @@ stores.inject(MyMetaStore, storeInstance);
               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) {
@@ -39615,1897 +39655,1954 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  class DOMFocusableElementStore {
+      mutators = ["setFocusableElement"];
+      focusableElement = undefined;
+      setFocusableElement(element) {
+          this.focusableElement = element;
+      }
+  }
+
   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;
-    }
+  .o-autocomplete-dropdown {
+    pointer-events: auto;
+    cursor: pointer;
+    background-color: #fff;
+    max-width: 400px;
+    z-index: 1;
 
-    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%;
+    .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 owl.Component {
-      static template = "o-spreadsheet-GaugeChartDesignPanel";
-      static components = {
-          SidePanelCollapsible,
-          Section,
-          RoundColorPicker,
-          GeneralDesignEditor,
-          ChartErrorSection,
-      };
+  class TextValueProvider extends owl.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 = owl.useRef("autoCompleteList");
       setup() {
-          this.state = owl.useState({
-              sectionRuleDispatchResult: undefined,
-              sectionRule: deepCopy(this.props.definition.sectionRule),
-          });
-      }
-      get designErrorMessages() {
-          const cancelledReasons = [...(this.state.sectionRuleDispatchResult?.reasons || [])];
-          return cancelledReasons.map((error) => ChartTerms.Errors[error] || ChartTerms.Errors.Unexpected);
-      }
-      isRangeMinInvalid() {
-          return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("EmptyGaugeRangeMin" /* CommandResult.EmptyGaugeRangeMin */) ||
-              this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeRangeMinNaN" /* CommandResult.GaugeRangeMinNaN */) ||
-              this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeRangeMinBiggerThanRangeMax" /* CommandResult.GaugeRangeMinBiggerThanRangeMax */));
-      }
-      isRangeMaxInvalid() {
-          return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("EmptyGaugeRangeMax" /* CommandResult.EmptyGaugeRangeMax */) ||
-              this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeRangeMaxNaN" /* CommandResult.GaugeRangeMaxNaN */) ||
-              this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeRangeMinBiggerThanRangeMax" /* CommandResult.GaugeRangeMinBiggerThanRangeMax */));
-      }
-      // ---------------------------------------------------------------------------
-      // COLOR_SECTION_TEMPLATE
-      // ---------------------------------------------------------------------------
-      get isLowerInflectionPointInvalid() {
-          return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeLowerInflectionPointNaN" /* CommandResult.GaugeLowerInflectionPointNaN */) ||
-              this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeLowerBiggerThanUpper" /* CommandResult.GaugeLowerBiggerThanUpper */));
-      }
-      get isUpperInflectionPointInvalid() {
-          return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeUpperInflectionPointNaN" /* CommandResult.GaugeUpperInflectionPointNaN */) ||
-              this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeLowerBiggerThanUpper" /* CommandResult.GaugeLowerBiggerThanUpper */));
-      }
-      updateSectionColor(target, color) {
-          const sectionRule = deepCopy(this.state.sectionRule);
-          sectionRule.colors[target] = color;
-          this.updateSectionRule(sectionRule);
-      }
-      updateSectionRule(sectionRule) {
-          this.state.sectionRuleDispatchResult = this.props.updateChart(this.props.figureId, {
-              sectionRule,
-          });
-          if (this.state.sectionRuleDispatchResult.isSuccessful) {
-              this.state.sectionRule = deepCopy(sectionRule);
-          }
-      }
-      canUpdateSectionRule(sectionRule) {
-          this.state.sectionRuleDispatchResult = this.props.canUpdateChart(this.props.figureId, {
-              sectionRule,
-          });
+          owl.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]);
       }
   }
 
-  class GeoChartRegionSelectSection extends owl.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 });
-      }
-      get availableRegions() {
-          return this.env.model.getters.getGeoChartAvailableRegions();
+  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];
       }
-      get selectedRegion() {
-          return this.props.definition.region || this.availableRegions[0]?.id;
+      useProvider(provider) {
+          this.provider = provider;
+          this.selectedIndex = provider.autoSelectFirstProposal ? 0 : undefined;
       }
-  }
-
-  class GeoChartConfigPanel extends GenericChartConfigPanel {
-      static template = "o-spreadsheet-GeoChartConfigPanel";
-      static components = { ...GenericChartConfigPanel.components, GeoChartRegionSelectSection };
-      get dataRanges() {
-          return this.getDataSeriesRanges().slice(0, 1);
+      hide() {
+          this.provider = undefined;
+          this.selectedIndex = undefined;
       }
-      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,
-          });
+      selectIndex(index) {
+          this.selectedIndex = index;
       }
-      getLabelRangeOptions() {
-          return [
-              {
-                  name: "dataSetsHaveTitle",
-                  label: this.dataSetsHaveTitleLabel,
-                  value: this.props.definition.dataSetsHaveTitle,
-                  onChange: this.onUpdateDataSetsHaveTitle.bind(this),
-              },
-          ];
+      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;
+          }
       }
   }
 
-  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";
+  class ContentEditableHelper {
+      // todo make el private and expose dedicated methods
+      el;
+      constructor(el) {
+          this.el = el;
       }
-      get selectedMissingValueColor() {
-          return this.props.definition.missingValueColor || "#ffffff";
+      updateEl(el) {
+          this.el = el;
       }
-      get customColorScale() {
-          if (typeof this.props.definition.colorScale === "object") {
-              return this.props.definition.colorScale;
+      /**
+       * 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);
           }
-          return undefined;
-      }
-      getCustomColorScaleColor(color) {
-          return this.customColorScale?.[color] ?? "";
       }
-      setCustomColorScaleColor(colorType, color) {
-          if (!color && colorType !== "midColor") {
-              color = "#fff";
+      /**
+       * 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 };
           }
-          const customColorScale = this.customColorScale;
-          if (!customColorScale) {
+          return { node: previous, offset: usedCharacters };
+      }
+      /**
+       * 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;
           }
-          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);
+          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]);
+              }
           }
-          return false;
       }
-      get stackedLabel() {
-          const definition = this.props.definition;
-          return definition.fillArea
-              ? this.chartTerms.StackedAreaChart
-              : this.chartTerms.StackedLineChart;
+      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" });
       }
-      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;
+      /**
+       * remove the current selection of the user
+       * */
+      removeSelection() {
+          let selection = window.getSelection();
+          selection.removeAllRanges();
       }
-      onUpdateLabelsAsText(labelsAsText) {
-          this.props.updateChart(this.props.figureId, {
-              labelsAsText,
-          });
+      removeAll() {
+          if (this.el) {
+              while (this.el.firstChild) {
+                  this.el.removeChild(this.el.firstChild);
+              }
+          }
       }
-      onUpdateStacked(stacked) {
-          this.props.updateChart(this.props.figureId, {
-              stacked,
-          });
+      /**
+       * finds the indexes of the current selection.
+       * */
+      getCurrentSelection() {
+          return getCurrentSelection(this.el);
       }
-      onUpdateCumulative(cumulative) {
-          this.props.updateChart(this.props.figureId, {
-              cumulative,
-          });
+      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;
       }
   }
-
-  class PieChartDesignPanel extends owl.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 owl.Component {
-      static template = "o-spreadsheet-RadarChartDesignPanel";
-      static components = {
-          GeneralDesignEditor,
-          SeriesDesignEditor,
-          Section,
-          Checkbox,
-          ChartLegend,
-      };
-      static props = {
-          figureId: String,
-          definition: Object,
-          canUpdateChart: Function,
-          updateChart: Function,
-      };
+  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;
   }
 
-  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,
-          });
+  // -----------------------------------------------------------------------------
+  // 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};
       }
-      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;
+      div:last-child {
+        color: black;
       }
+    }
+    .o-formula-assistant-gray {
+      color: gray;
+    }
   }
-
-  class ScorecardChartConfigPanel extends owl.Component {
-      static template = "o-spreadsheet-ScorecardChartConfigPanel";
-      static components = { SelectionInput, ChartErrorSection, Section };
+`;
+  class FunctionDescriptionProvider extends owl.Component {
+      static template = "o-spreadsheet-FunctionDescriptionProvider";
       static props = {
-          figureId: String,
-          definition: Object,
-          updateChart: Function,
-          canUpdateChart: Function,
+          functionName: String,
+          functionDescription: Object,
+          argToFocus: Number,
       };
-      state = owl.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 || "";
+      getContext() {
+          return this.props;
       }
-      updateBaselineMode(ev) {
-          this.props.updateChart(this.props.figureId, { baselineMode: ev.target.value });
+      get formulaArgSeparator() {
+          return this.env.model.getters.getLocale().formulaArgSeparator + " ";
       }
   }
 
-  class ScorecardChartDesignPanel extends owl.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;
+  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;
+
+      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};
           }
-      }
-  }
 
-  class WaterfallChartDesignPanel extends owl.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);
-      }
-      get subTotalValuesColor() {
-          return (this.props.definition.subTotalValuesColor ||
-              CHART_WATERFALL_SUBTOTAL_COLOR);
-      }
-      updateVerticalAxisPosition(value) {
-          this.props.updateChart(this.props.figureId, {
-              verticalAxisPosition: value,
-          });
+          &.${backgroundClass} {
+            border-radius: 5px;
+            background-color: lightgray;
+            padding: 0px 1.5px 1.5px 1.5px;
+          }
+        }
       }
-  }
-
-  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,
-  });
+    }
+    .o-composer[placeholder]:empty:not(:focus):not(.active)::before {
+      content: attr(placeholder);
+      color: #bdbdbd;
+      position: relative;
+      top: 0%;
+      pointer-events: none;
+    }
 
-  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-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;
     }
-  }
 
-  .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;
+    .force-open-assistant {
+      left: -1px;
+      top: -1px;
+
+      .fa-question-circle {
+        color: ${PRIMARY_BUTTON_BG};
       }
-      .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 owl.Component {
-      static template = "o-spreadsheet-ChartTypePicker";
-      static components = { Section, Popover };
-      static props = { figureId: String, chartPanelStore: Object };
-      categories = chartCategories;
-      chartTypeByCategories = {};
-      popoverRef = owl.useRef("popoverRef");
-      selectRef = owl.useRef("selectRef");
-      state = owl.useState({ popoverProps: undefined, popoverStyle: "" });
-      setup() {
-          owl.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 owl.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 = owl.useRef("o_composer");
+      contentHelper = new ContentEditableHelper(this.composerRef.el);
+      composerState = owl.useState({
+          positionStart: 0,
+          positionEnd: 0,
+      });
+      autoCompleteState;
+      functionDescriptionState = owl.useState({
+          showDescription: false,
+          functionName: "",
+          functionDescription: {},
+          argToFocus: 0,
+      });
+      assistant = owl.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);
+          owl.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(),
+          });
+          owl.onWillUnmount(() => {
+              this.env.model.selection.detachObserver(this);
+          });
+          owl.useEffect(() => {
+              this.processContent();
+              if (document.activeElement === this.contentHelper.el &&
+                  this.props.composerStore.editionMode === "inactive" &&
+                  !this.props.isDefaultFocus) {
+                  this.DOMFocusableElementStore.focusableElement?.focus();
+              }
+          });
+          owl.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;
-        }
+      processF4Key(ev) {
+          ev.stopPropagation();
+          this.props.composerStore.cycleReferences();
+          this.processContent();
       }
-      .o-panel-element:last-child {
-        border-right: none;
+      toggleEditionMode(ev) {
+          ev.stopPropagation();
+          this.props.composerStore.toggleEditionMode();
+          this.processContent();
       }
-    }
-  }
-`;
-  class ChartPanel extends owl.Component {
-      static template = "o-spreadsheet-ChartPanel";
-      static components = { Section, ChartTypePicker };
-      static props = { onCloseSidePanel: Function, figureId: String };
-      store;
-      get figureId() {
-          return this.props.figureId;
+      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();
       }
-      setup() {
-          this.store = useLocalStore(MainChartPanelStore);
+      onCompositionStart() {
+          this.compositionActive = true;
       }
-      updateChart(figureId, updateDefinition) {
-          if (figureId !== this.figureId) {
+      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 owl.Component {
-      static template = "o-spreadsheet-TextValueProvider";
-      static props = {
-          proposals: Array,
-          selectedIndex: { type: Number, optional: true },
-          onValueSelected: Function,
-          onValueHovered: Function,
-      };
-      autoCompleteListRef = owl.useRef("autoCompleteList");
-      setup() {
-          owl.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 owl.Component {
-      static template = "o-spreadsheet-FunctionDescriptionProvider";
+  class StandaloneComposer extends owl.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 owl.Component {
-      static template = "o-spreadsheet-Composer";
+  class GaugeChartDesignPanel extends owl.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 = owl.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 owl.Component {
+      static template = "o-spreadsheet-GeoChartRegionSelectSection";
+      static components = { Section };
+      static props = {
+          figureId: String,
+          definition: Object,
+          updateChart: Function,
       };
-      DOMFocusableElementStore;
-      composerRef = owl.useRef("o_composer");
-      contentHelper = new ContentEditableHelper(this.composerRef.el);
-      composerState = owl.useState({
-          positionStart: 0,
-          positionEnd: 0,
-      });
-      autoCompleteState;
-      functionDescriptionState = owl.useState({
-          showDescription: false,
-          functionName: "",
-          functionDescription: {},
-          argToFocus: 0,
-      });
-      assistant = owl.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);
-          owl.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,
           });
-          owl.onWillUnmount(() => {
-              this.env.model.selection.detachObserver(this);
+      }
+      onUpdateStacked(stacked) {
+          this.props.updateChart(this.props.figureId, {
+              stacked,
           });
-          owl.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,
           });
-          owl.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 owl.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 owl.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 owl.Component {
+      static template = "o-spreadsheet-ScorecardChartConfigPanel";
+      static components = { SelectionInput, ChartErrorSection, Section };
+      static props = {
+          figureId: String,
+          definition: Object,
+          updateChart: Function,
+          canUpdateChart: Function,
+      };
+      state = owl.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 owl.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 owl.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;
+    }
+  }
+
+  .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;
       }
-      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-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 owl.Component {
+      static template = "o-spreadsheet-ChartTypePicker";
+      static components = { Section, Popover };
+      static props = { figureId: String, chartPanelStore: Object };
+      categories = chartCategories;
+      chartTypeByCategories = {};
+      popoverRef = owl.useRef("popoverRef");
+      selectRef = owl.useRef("selectRef");
+      state = owl.useState({ popoverProps: undefined, popoverStyle: "" });
+      setup() {
+          owl.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 owl.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 owl.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);
       }
   }
 
@@ -41765,7 +41862,7 @@ stores.inject(MyMetaStore, storeInstance);
               draggedItemId: cf.id,
               initialMousePosition: event.clientY,
               items: items,
-              containerEl: this.cfListRef.el,
+              scrollableContainerEl: this.cfListRef.el,
               onDragEnd: (cfId, finalIndex) => this.onDragEnd(cfId, finalIndex),
           });
       }
@@ -44950,6 +45047,7 @@ stores.inject(MyMetaStore, storeInstance);
           unusedGranularities: Object,
           dateGranularities: Array,
           datetimeGranularities: Array,
+          getScrollableContainerEl: { type: Function, optional: true },
           pivotId: String,
       };
       dimensionsRef = owl.useRef("pivot-dimensions");
@@ -44983,7 +45081,7 @@ stores.inject(MyMetaStore, storeInstance);
               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) {
@@ -45032,7 +45130,7 @@ stores.inject(MyMetaStore, storeInstance);
               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) {
@@ -45665,7 +45763,7 @@ stores.inject(MyMetaStore, storeInstance);
       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],
               };
@@ -45721,7 +45819,7 @@ stores.inject(MyMetaStore, storeInstance);
           pivotTableRows.push({
               fields: _fields,
               values: _values,
-              indent: index,
+              indent: index + 1,
           });
           const record = groups[value];
           if (record) {
@@ -46717,6 +46815,7 @@ stores.inject(MyMetaStore, storeInstance);
       };
       store;
       state;
+      pivotSidePanelRef = owl.useRef("pivotSidePanel");
       setup() {
           this.store = useLocalStore(PivotSidePanelStore, this.props.pivotId);
           this.state = owl.useState({
@@ -46745,6 +46844,9 @@ stores.inject(MyMetaStore, storeInstance);
       get definition() {
           return this.store.definition;
       }
+      getScrollableContainerEl() {
+          return this.pivotSidePanelRef.el;
+      }
       onSelectionChanged(ranges) {
           this.state.rangeHasChanged = true;
           this.state.range = ranges[0];
@@ -55923,6 +56025,8 @@ stores.inject(MyMetaStore, storeInstance);
           this.getters = getters;
       }
       static getters = [
+          "adaptFormulaStringDependencies",
+          "copyFormulaStringForSheet",
           "extendRange",
           "getRangeString",
           "getRangeFromSheetXC",
@@ -56315,6 +56419,38 @@ stores.inject(MyMetaStore, storeInstance);
           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
       // ---------------------------------------------------------------------------
@@ -69212,7 +69348,7 @@ stores.inject(MyMetaStore, storeInstance);
               draggedItemId: sheetId,
               initialMousePosition: event.clientX,
               items: sheets,
-              containerEl: this.sheetListRef.el,
+              scrollableContainerEl: this.sheetListRef.el,
               onDragEnd: (sheetId, finalIndex) => this.onDragEnd(sheetId, finalIndex),
           });
       }
@@ -69267,7 +69403,7 @@ stores.inject(MyMetaStore, storeInstance);
               this._registryItems = owl.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);
@@ -69275,33 +69411,37 @@ stores.inject(MyMetaStore, storeInstance);
               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;
@@ -74677,6 +74817,9 @@ stores.inject(MyMetaStore, storeInstance);
           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",
@@ -75378,9 +75521,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = 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";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);