@odoo/o-spreadsheet 16.4.0-alpha.2 → 16.4.0-alpha.3

package/dist/o-spreadsheet.esm.js

@@ -5218,14 +5218,6 @@ function* iterateChildren(el) {
         }
     }
 }
-function getElementScrollTop(el) {
-    return el?.scrollTop || 0;
-}
-function setElementScrollTop(el, scroll) {
-    if (!el)
-        return;
-    el.scrollTop = scroll;
-}
 function getOpenedMenus() {
     return Array.from(document.querySelectorAll(".o-spreadsheet .o-menu"));
 }
@@ -17943,7 +17935,7 @@ class LineBarPieConfigPanel extends Component {
         return !!this.state.labelsDispatchResult?.isCancelledBecause(33 /* CommandResult.InvalidLabelRange */);
     }
     onUpdateDataSetsHaveTitle(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             dataSetsHaveTitle: ev.target.checked,
         });
     }
@@ -17956,7 +17948,7 @@ class LineBarPieConfigPanel extends Component {
     }
     onDataSeriesConfirmed() {
         this.dataSeriesRanges = spreadRange(this.dataSeriesRanges);
-        this.state.datasetDispatchResult = this.props.updateChart({
+        this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
             dataSets: this.dataSeriesRanges,
         });
     }
@@ -17971,7 +17963,7 @@ class LineBarPieConfigPanel extends Component {
         this.labelRange = ranges[0];
     }
     onLabelRangeConfirmed() {
-        this.state.labelsDispatchResult = this.props.updateChart({
+        this.state.labelsDispatchResult = this.props.updateChart(this.props.figureId, {
             labelRange: this.labelRange,
         });
     }
@@ -17979,7 +17971,7 @@ class LineBarPieConfigPanel extends Component {
         return this.labelRange || "";
     }
     onUpdateAggregated(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             aggregated: ev.target.checked,
         });
     }
@@ -18009,12 +18001,12 @@ LineBarPieConfigPanel.props = {
 class BarConfigPanel extends LineBarPieConfigPanel {
     static template = "o-spreadsheet-BarConfigPanel";
     onUpdateStacked(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             stacked: ev.target.checked,
         });
     }
     onUpdateAggregated(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             aggregated: ev.target.checked,
         });
     }
@@ -18351,17 +18343,17 @@ class LineBarPieDesignPanel extends Component {
         this.state.fillColorTool = !this.state.fillColorTool;
     }
     updateBackgroundColor(color) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             background: color,
         });
     }
     updateTitle(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             title: ev.target.value,
         });
     }
     updateSelect(attr, ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             [attr]: ev.target.value,
         });
     }
@@ -18394,7 +18386,7 @@ class GaugeChartConfigPanel extends Component {
         this.dataRange = ranges[0];
     }
     updateDataRange() {
-        this.state.dataRangeDispatchResult = this.props.updateChart({
+        this.state.dataRangeDispatchResult = this.props.updateChart(this.props.figureId, {
             dataRange: this.dataRange,
         });
     }
@@ -18455,12 +18447,12 @@ class GaugeChartDesignPanel extends Component {
     }
     updateBackgroundColor(color) {
         this.state.openedMenu = undefined;
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             background: color,
         });
     }
     updateTitle(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             title: ev.target.value,
         });
     }
@@ -18525,7 +18517,7 @@ class GaugeChartDesignPanel extends Component {
         }
     }
     updateSectionRule(sectionRule) {
-        this.state.sectionRuleDispatchResult = this.props.updateChart({
+        this.state.sectionRuleDispatchResult = this.props.updateChart(this.props.figureId, {
             sectionRule,
         });
     }
@@ -18549,17 +18541,17 @@ class LineConfigPanel extends LineBarPieConfigPanel {
         return false;
     }
     onUpdateLabelsAsText(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             labelsAsText: ev.target.checked,
         });
     }
     onUpdateStacked(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             stacked: ev.target.checked,
         });
     }
     onUpdateAggregated(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             aggregated: ev.target.checked,
         });
     }
@@ -18595,7 +18587,7 @@ class ScorecardChartConfigPanel extends Component {
         this.keyValue = ranges[0];
     }
     updateKeyValueRange() {
-        this.state.keyValueDispatchResult = this.props.updateChart({
+        this.state.keyValueDispatchResult = this.props.updateChart(this.props.figureId, {
             keyValue: this.keyValue,
         });
     }
@@ -18606,7 +18598,7 @@ class ScorecardChartConfigPanel extends Component {
         this.baseline = ranges[0];
     }
     updateBaselineRange() {
-        this.state.baselineDispatchResult = this.props.updateChart({
+        this.state.baselineDispatchResult = this.props.updateChart(this.props.figureId, {
             baseline: this.baseline,
         });
     }
@@ -18614,7 +18606,7 @@ class ScorecardChartConfigPanel extends Component {
         return this.baseline || "";
     }
     updateBaselineMode(ev) {
-        this.props.updateChart({ baselineMode: ev.target.value });
+        this.props.updateChart(this.props.figureId, { baselineMode: ev.target.value });
     }
 }
 ScorecardChartConfigPanel.props = {
@@ -18633,12 +18625,12 @@ class ScorecardChartDesignPanel extends Component {
         useExternalListener(window, "click", this.closeMenus);
     }
     updateTitle(ev) {
-        this.props.updateChart({
+        this.props.updateChart(this.props.figureId, {
             title: ev.target.value,
         });
     }
     updateBaselineDescr(ev) {
-        this.props.updateChart({ baselineDescr: ev.target.value });
+        this.props.updateChart(this.props.figureId, { baselineDescr: ev.target.value });
     }
     toggleColorPicker(colorPickerId) {
         if (this.state.openedColorPicker === colorPickerId) {
@@ -18651,13 +18643,13 @@ class ScorecardChartDesignPanel extends Component {
     setColor(color, colorPickerId) {
         switch (colorPickerId) {
             case "backgroundColor":
-                this.props.updateChart({ background: color });
+                this.props.updateChart(this.props.figureId, { background: color });
                 break;
             case "baselineColorDown":
-                this.props.updateChart({ baselineColorDown: color });
+                this.props.updateChart(this.props.figureId, { baselineColorDown: color });
                 break;
             case "baselineColorUp":
-                this.props.updateChart({ baselineColorUp: color });
+                this.props.updateChart(this.props.figureId, { baselineColorUp: color });
                 break;
         }
         this.closeMenus();
@@ -18722,13 +18714,9 @@ css /* scss */ `
 class ChartPanel extends Component {
     static template = "o-spreadsheet-ChartPanel";
     state;
-    shouldUpdateChart = true;
     get figureId() {
         return this.state.figureId;
     }
-    get sheetId() {
-        return this.state.sheetId;
-    }
     setup() {
         const selectedFigureId = this.env.model.getters.getSelectedFigureId();
         if (!selectedFigureId) {
@@ -18738,17 +18726,11 @@ class ChartPanel extends Component {
         this.state = useState({
             panel: "configuration",
             figureId: selectedFigureId,
-            sheetId: this.env.model.getters.getActiveSheetId(),
         });
         onWillUpdateProps(() => {
             const selectedFigureId = this.env.model.getters.getSelectedFigureId();
             if (selectedFigureId && selectedFigureId !== this.state.figureId) {
                 this.state.figureId = selectedFigureId;
-                this.state.sheetId = this.env.model.getters.getActiveSheetId();
-                this.shouldUpdateChart = false;
-            }
-            else {
-                this.shouldUpdateChart = true;
             }
             if (!this.env.model.getters.isChartDefined(this.figureId)) {
                 this.props.onCloseSidePanel();
@@ -18756,8 +18738,8 @@ class ChartPanel extends Component {
             }
         });
     }
-    updateChart(updateDefinition) {
-        if (!this.shouldUpdateChart) {
+    updateChart(figureId, updateDefinition) {
+        if (figureId !== this.figureId) {
             return;
         }
         const definition = {
@@ -18766,8 +18748,8 @@ class ChartPanel extends Component {
         };
         return this.env.model.dispatch("UPDATE_CHART", {
             definition,
-            id: this.figureId,
-            sheetId: this.sheetId,
+            id: figureId,
+            sheetId: this.env.model.getters.getFigureSheetId(figureId),
         });
     }
     onTypeChange(type) {
@@ -18779,7 +18761,7 @@ class ChartPanel extends Component {
         this.env.model.dispatch("UPDATE_CHART", {
             definition,
             id: this.figureId,
-            sheetId: this.sheetId,
+            sheetId: this.env.model.getters.getFigureSheetId(this.figureId),
         });
     }
     get chartPanel() {
@@ -20575,12 +20557,23 @@ class ContentEditableHelper {
      */
     selectRange(start, end) {
         let selection = window.getSelection();
-        this.removeSelection();
-        let range = document.createRange();
+        const { start: currentStart, end: currentEnd } = this.getCurrentSelection();
+        if (currentStart === start && currentEnd === end) {
+            return;
+        }
+        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);
-            selection.addRange(range);
         }
         else {
             const textLength = this.getText().length;
@@ -20596,7 +20589,6 @@ class ContentEditableHelper {
             let startNode = this.findChildAtCharacterIndex(start);
             let endNode = this.findChildAtCharacterIndex(end);
             range.setStart(startNode.node, startNode.offset);
-            selection.addRange(range);
             selection.extend(endNode.node, endNode.offset);
         }
     }
@@ -20636,26 +20628,54 @@ class ContentEditableHelper {
         return { node: previous, offset: usedCharacters };
     }
     /**
-     * Sets (or Replaces all) the text inside the root element in the form of distinctive
+     * 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) {
-        this.el.innerHTML = "";
         if (contents.length === 0) {
+            this.removeAll();
             return;
         }
-        for (const line of contents) {
-            const p = document.createElement("p");
-            // Empty line
-            if (line.length === 0 || line.every((content) => !content.value && !content.class)) {
-                p.appendChild(document.createElement("br"));
-                this.el.appendChild(p);
-                continue;
+        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;
             }
-            for (const content of line) {
+            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");
@@ -20664,9 +20684,38 @@ class ContentEditableHelper {
                 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);
             }
-            this.el.appendChild(p);
+            // 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]);
+            }
         }
     }
     scrollSelectionIntoView() {
@@ -20676,13 +20725,6 @@ class ContentEditableHelper {
         const element = focusedNode instanceof HTMLElement ? focusedNode : focusedNode.parentElement;
         element?.scrollIntoView({ block: "nearest" });
     }
-    /**
-     * remove the current selection of the user
-     * */
-    removeSelection() {
-        let selection = window.getSelection();
-        selection.removeAllRanges();
-    }
     removeAll() {
         if (this.el) {
             while (this.el.firstChild) {
@@ -20812,6 +20854,14 @@ class ContentEditableHelper {
         }
         return text;
     }
+}
+function compareContentToSpanElement(content, node) {
+    const contentColor = content.color ? toHex(content.color) : "";
+    const nodeColor = node.style?.color ? toHex(node.style.color) : "";
+    const sameColor = contentColor === nodeColor;
+    const sameClass = deepEquals([content.class], [...node.classList]);
+    const sameContent = node.innerText === content.value;
+    return sameColor && sameClass && sameContent;
 }
 
 // -----------------------------------------------------------------------------
@@ -20957,7 +21007,6 @@ class Composer extends Component {
         functionDescription: {},
         argToFocus: 0,
     });
-    isKeyStillDown = false;
     compositionActive = false;
     get assistantStyle() {
         if (this.props.delimitation && this.props.rect) {
@@ -20992,21 +21041,18 @@ class Composer extends Component {
         F2: () => console.warn("Not implemented"),
         F4: this.processF4Key,
         Tab: (ev) => this.processTabKey(ev),
+        " ": (ev) => this.processSpaceKey(ev),
     };
     setup() {
         onMounted(() => {
             const el = this.composerRef.el;
             this.contentHelper.updateEl(el);
-            this.processContent();
-            this.contentHelper.scrollSelectionIntoView();
         });
         onWillUnmount(() => {
             this.props.onComposerUnmounted?.();
         });
-        onPatched(() => {
-            if (!this.isKeyStillDown) {
-                this.processContent();
-            }
+        useEffect(() => {
+            this.processContent();
         });
     }
     // ---------------------------------------------------------------------------
@@ -21059,32 +21105,25 @@ class Composer extends Component {
                 return;
             }
         }
-        else {
-            // when completing with tab, if there is no value to complete, the active cell will be moved to the right.
-            // we can't let the model think that it is for a ref selection.
-            // todo: check if this can be removed someday
-            this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
-        }
         const direction = ev.shiftKey ? "left" : "right";
         this.env.model.dispatch("STOP_EDITION");
         this.env.model.selection.moveAnchorCell(direction, 1);
     }
+    processSpaceKey(ev) {
+        if (ev.ctrlKey) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this.showAutocomplete("");
+            this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
+        }
+    }
     processEnterKey(ev) {
         ev.preventDefault();
         ev.stopPropagation();
         if (ev.altKey || ev.ctrlKey) {
-            const selection = this.contentHelper.getCurrentSelection();
-            const currentContent = this.env.model.getters.getCurrentContent();
-            const content = currentContent.slice(0, selection.start) + NEWLINE + currentContent.slice(selection.end);
-            this.env.model.dispatch("SET_CURRENT_CONTENT", {
-                content,
-                selection: { start: selection.start + 1, end: selection.start + 1 },
-            });
-            this.processContent();
-            this.contentHelper.scrollSelectionIntoView();
+            this.composerRef.el?.dispatchEvent(new InputEvent("input", { inputType: "insertParagraph", bubbles: true, isComposing: false }));
             return;
         }
-        this.isKeyStillDown = false;
         if (this.autoCompleteState.showProvider) {
             const autoCompleteValue = this.autoCompleteState.values[this.autoCompleteState.selectedIndex]?.text;
             if (autoCompleteValue) {
@@ -21117,56 +21156,42 @@ class Composer extends Component {
         else {
             ev.stopPropagation();
         }
-        const { start, end } = this.contentHelper.getCurrentSelection();
-        if (!this.env.model.getters.isSelectingForComposer() &&
-            !(ev.key === "Enter" && (ev.altKey || ev.ctrlKey))) {
-            this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", { start, end });
-            this.isKeyStillDown = true;
-        }
     }
     /*
      * Triggered automatically by the content-editable between the keydown and key up
      * */
-    onInput() {
+    onInput(ev) {
         if (this.props.focus === "inactive" || !this.shouldProcessInputEvents) {
             return;
         }
+        let content = this.contentHelper.getText();
+        let selection = this.contentHelper.getCurrentSelection();
+        if (ev.inputType === "insertParagraph") {
+            const start = Math.min(selection.start, selection.end);
+            const end = Math.max(selection.start, selection.end);
+            content = content.slice(0, start) + NEWLINE + content.slice(end);
+            selection = { start: start + 1, end: start + 1 };
+        }
         this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
         this.env.model.dispatch("SET_CURRENT_CONTENT", {
-            content: this.contentHelper.getText(),
-            selection: this.contentHelper.getCurrentSelection(),
+            content,
+            selection,
         });
+        this.processTokenAtCursor();
     }
-    onKeyup(ev) {
-        this.isKeyStillDown = false;
-        if (this.props.focus === "inactive" ||
-            ["Control", "Alt", "Shift", "Tab", "Enter", "F4"].includes(ev.key)) {
-            return;
-        }
-        if (this.autoCompleteState.showProvider && ["ArrowUp", "ArrowDown"].includes(ev.key)) {
-            return; // already processed in keydown
-        }
-        if (this.env.model.getters.isSelectingForComposer() &&
-            ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(ev.key)) {
-            return; // already processed in keydown
-        }
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.autoCompleteState.showProvider = false;
-        if (ev.ctrlKey && ev.key === " ") {
-            this.showAutocomplete("");
-            this.env.model.dispatch("STOP_COMPOSER_RANGE_SELECTION");
-            return;
-        }
-        const { start: oldStart, end: oldEnd } = this.env.model.getters.getComposerSelection();
-        const { start, end } = this.contentHelper.getCurrentSelection();
-        if (start !== oldStart || end !== oldEnd) {
-            this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", this.contentHelper.getCurrentSelection());
+    onKeyup() {
+        if (this.contentHelper.el === document.activeElement) {
+            const { start: oldStart, end: oldEnd } = this.env.model.getters.getComposerSelection();
+            const { start, end } = this.contentHelper.getCurrentSelection();
+            if (start !== oldStart || end !== oldEnd) {
+                this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", { start, end });
+            }
         }
-        this.processTokenAtCursor();
-        this.processContent();
     }
     showAutocomplete(searchTerm) {
+        if (!this.env.model.getters.getCurrentContent().startsWith("=")) {
+            return;
+        }
         this.autoCompleteState.showProvider = true;
         let values = Object.entries(functionRegistry.content)
             .filter(([_, { hidden }]) => !hidden)
@@ -21186,13 +21211,6 @@ class Composer extends Component {
         this.autoCompleteState.values = values.slice(0, 10);
         this.autoCompleteState.selectedIndex = 0;
     }
-    onMousedown(ev) {
-        if (ev.button > 0) {
-            // not main button, probably a context menu
-            return;
-        }
-        this.contentHelper.removeSelection();
-    }
     onClick() {
         if (this.env.model.getters.isReadonly()) {
             return;
@@ -21205,9 +21223,6 @@ class Composer extends Component {
         this.env.model.dispatch("CHANGE_COMPOSER_CURSOR_SELECTION", newSelection);
         this.processTokenAtCursor();
     }
-    onBlur() {
-        this.isKeyStillDown = false;
-    }
     // ---------------------------------------------------------------------------
     // Private
     // ---------------------------------------------------------------------------
@@ -21215,22 +21230,19 @@ class Composer extends Component {
         if (this.compositionActive) {
             return;
         }
-        const oldScroll = getElementScrollTop(this.composerRef.el);
-        this.contentHelper.removeAll(); // removes the content of the composer, to be added just after
         this.shouldProcessInputEvents = false;
         if (this.props.focus !== "inactive") {
             this.contentHelper.el.focus();
-            this.contentHelper.selectRange(0, 0); // move the cursor inside the composer at 0 0.
         }
         const content = this.getContentLines();
+        this.contentHelper.setText(content);
         if (content.length !== 0 && content.length[0] !== 0) {
-            this.contentHelper.setText(content);
-            const { start, end } = this.env.model.getters.getComposerSelection();
             if (this.props.focus !== "inactive") {
                 // Put the cursor back where it was before the rendering
+                const { start, end } = this.env.model.getters.getComposerSelection();
                 this.contentHelper.selectRange(start, end);
             }
-            setElementScrollTop(this.composerRef.el, oldScroll);
+            this.contentHelper.scrollSelectionIntoView();
         }
         this.shouldProcessInputEvents = true;
     }
@@ -21485,8 +21497,8 @@ class GridComposer extends Component {
                 height: el.clientHeight,
             };
             this.composerState.delimitation = {
-                width: el.parentElement.clientWidth,
-                height: el.parentElement.clientHeight,
+                width: this.props.gridDims.width,
+                height: this.props.gridDims.height,
             };
         });
         onWillUpdateProps(() => {
@@ -23204,7 +23216,7 @@ class Highlight extends Component {
         shiftingMode: "none",
     });
     onResizeHighlight(isLeft, isTop) {
-        const activeSheet = this.env.model.getters.getActiveSheet();
+        const activeSheetId = this.env.model.getters.getActiveSheetId();
         this.highlightState.shiftingMode = "isResizing";
         const z = this.props.zone;
         const pivotCol = isLeft ? z.right : z.left;
@@ -23213,11 +23225,10 @@ class Highlight extends Component {
         let lastRow = isTop ? z.top : z.bottom;
         let currentZone = z;
         this.env.model.dispatch("START_CHANGE_HIGHLIGHT", {
-            range: this.env.model.getters.getRangeDataFromZone(activeSheet.id, currentZone),
+            range: this.env.model.getters.getRangeDataFromZone(activeSheetId, currentZone),
         });
         const mouseMove = (col, row) => {
             if (lastCol !== col || lastRow !== row) {
-                const activeSheetId = this.env.model.getters.getActiveSheetId();
                 lastCol = clip(col === -1 ? lastCol : col, 0, this.env.model.getters.getNumberCols(activeSheetId) - 1);
                 lastRow = clip(row === -1 ? lastRow : row, 0, this.env.model.getters.getNumberRows(activeSheetId) - 1);
                 let newZone = {
@@ -23229,7 +23240,7 @@ class Highlight extends Component {
                 newZone = this.env.model.getters.expandZone(activeSheetId, newZone);
                 if (!isEqual(newZone, currentZone)) {
                     this.env.model.dispatch("CHANGE_HIGHLIGHT", {
-                        range: this.env.model.getters.getRangeDataFromZone(activeSheet.id, newZone),
+                        range: this.env.model.getters.getRangeFromZone(activeSheetId, this.env.model.getters.getUnboundedZone(activeSheetId, newZone)).rangeData,
                     });
                     currentZone = newZone;
                 }
@@ -23276,7 +23287,7 @@ class Highlight extends Component {
                 newZone = this.env.model.getters.expandZone(activeSheetId, newZone);
                 if (!isEqual(newZone, currentZone)) {
                     this.env.model.dispatch("CHANGE_HIGHLIGHT", {
-                        range: this.env.model.getters.getRangeDataFromZone(activeSheetId, newZone),
+                        range: this.env.model.getters.getRangeFromZone(activeSheetId, this.env.model.getters.getUnboundedZone(activeSheetId, newZone)).rangeData,
                     });
                     currentZone = newZone;
                 }
@@ -24598,6 +24609,16 @@ const XLSX_INDEXED_COLORS = {
     63: "333333",
     64: "000000",
     65: "FFFFFF", // system background
+};
+const IMAGE_MIMETYPE_EXTENSION_MAPPING = {
+    "image/avif": "avif",
+    "image/bmp": "bmp",
+    "image/gif": "gif",
+    "image/vnd.microsoft.icon": "ico",
+    "image/jpeg": "jpeg",
+    "image/png": "png",
+    "image/tiff": "tiff",
+    "image/webp": "webp",
 };
 
 /**
@@ -27080,6 +27101,11 @@ function createOverride(partName, contentType) {
     <Override ContentType="${contentType}" PartName="${partName}" />
   `;
 }
+function createDefaultXMLElement(extension, contentType) {
+    return escapeXml /*xml*/ `
+    <Default Extension="${extension}" ContentType="${contentType}" />
+  `;
+}
 function joinXmlNodes(xmlNodes) {
     return new XMLString(xmlNodes.join("\n"));
 }
@@ -31521,6 +31547,7 @@ class MergePlugin extends CorePlugin {
         "getMerge",
         "getMergesInZone",
         "isSingleCellOrMerge",
+        "getSelectionRangeString",
     ];
     nextId = 1;
     merges = {};
@@ -31608,6 +31635,26 @@ class MergePlugin extends CorePlugin {
             .map((mergeId) => this.getMergeById(sheetId, mergeId))
             .filter(isDefined$1);
     }
+    /**
+     * Same as `getRangeString` but add all necessary merge to the range to make it a valid selection
+     */
+    getSelectionRangeString(range, forSheetId) {
+        const rangeImpl = RangeImpl.fromRange(range, this.getters);
+        const expandedZone = this.getters.expandZone(rangeImpl.sheetId, rangeImpl.zone);
+        const expandedRange = rangeImpl.clone({
+            zone: {
+                ...expandedZone,
+                bottom: rangeImpl.isFullCol ? undefined : expandedZone.bottom,
+                right: rangeImpl.isFullRow ? undefined : expandedZone.right,
+            },
+        });
+        const rangeString = this.getters.getRangeString(expandedRange, forSheetId);
+        if (this.isSingleCellOrMerge(rangeImpl.sheetId, rangeImpl.zone)) {
+            const { sheetName, xc } = splitReference(rangeString);
+            return `${sheetName !== undefined ? getCanonicalSheetName(sheetName) + "!" : ""}${xc.split(":")[0]}`;
+        }
+        return rangeString;
+    }
     /**
      * Return true if the zone intersects an existing merge:
      * if they have at least a common cell
@@ -31940,12 +31987,12 @@ class RangeAdapter {
     }
     static getters = [
         "getRangeString",
-        "getSelectionRangeString",
         "getRangeFromSheetXC",
         "createAdaptedRanges",
         "getRangeDataFromXc",
         "getRangeDataFromZone",
         "getRangeFromRangeData",
+        "getRangeFromZone",
     ];
     // ---------------------------------------------------------------------------
     // Command Handling
@@ -32194,21 +32241,6 @@ class RangeAdapter {
         const rangeInterface = { prefixSheet, zone, sheetId, invalidSheetName, parts };
         return new RangeImpl(rangeInterface, this.getters.getSheetSize).orderZone();
     }
-    /**
-     * Same as `getRangeString` but add all necessary merge to the range to make it a valid selection
-     */
-    getSelectionRangeString(range, forSheetId) {
-        const rangeImpl = RangeImpl.fromRange(range, this.getters);
-        const expandedZone = this.getters.expandZone(rangeImpl.sheetId, rangeImpl.zone);
-        const expandedRange = rangeImpl.clone({
-            zone: {
-                ...expandedZone,
-                bottom: rangeImpl.isFullCol ? undefined : expandedZone.bottom,
-                right: rangeImpl.isFullRow ? undefined : expandedZone.right,
-            },
-        });
-        return this.getRangeString(expandedRange, forSheetId);
-    }
     /**
      * Gets the string that represents the range as it is at the moment of the call.
      * The string will be prefixed with the sheet name if the call specified a sheet id in `forSheetId`
@@ -32265,6 +32297,17 @@ class RangeAdapter {
     getRangeDataFromZone(sheetId, zone) {
         return { _sheetId: sheetId, _zone: zone };
     }
+    getRangeFromZone(sheetId, zone) {
+        return new RangeImpl({
+            sheetId,
+            zone,
+            parts: [
+                { colFixed: false, rowFixed: false },
+                { colFixed: false, rowFixed: false },
+            ],
+            prefixSheet: false,
+        }, this.getters.getSheetSize);
+    }
     getRangeFromRangeData(data) {
         const rangeInterface = {
             prefixSheet: false,
@@ -32350,6 +32393,7 @@ class SheetPlugin extends CorePlugin {
         "getPaneDivisions",
         "checkZonesExistInSheet",
         "getCommandZones",
+        "getUnboundedZone",
     ];
     sheetIdsMapName = {};
     orderedSheetIds = [];
@@ -32675,6 +32719,16 @@ class SheetPlugin extends CorePlugin {
             right: this.getNumberCols(sheetId) - 1,
         };
     }
+    getUnboundedZone(sheetId, zone) {
+        const isFullRow = zone.left === 0 && zone.right === this.getNumberCols(sheetId) - 1;
+        const isFullCol = zone.top === 0 && zone.bottom === this.getNumberRows(sheetId) - 1;
+        return {
+            ...zone,
+            bottom: isFullCol ? undefined : zone.bottom,
+            // cannot be unbounded in the 2 dimensions at once
+            right: isFullRow && !isFullCol ? undefined : zone.right,
+        };
+    }
     getPaneDivisions(sheetId) {
         return this.getSheet(sheetId).panes;
     }
@@ -38725,11 +38779,11 @@ class SelectionInputPlugin extends UIPlugin {
         return 0 /* CommandResult.Success */;
     }
     handleEvent(event) {
-        const xc = zoneToXc(event.anchor.zone);
         const inputSheetId = this.activeSheet;
         const sheetId = this.getters.getActiveSheetId();
-        const sheetName = this.getters.getSheetName(sheetId);
-        this.add([sheetId === inputSheetId ? xc : `${getCanonicalSheetName(sheetName)}!${xc}`]);
+        const zone = event.anchor.zone;
+        const range = this.getters.getRangeFromZone(sheetId, event.type === "HeadersSelected" ? this.getters.getUnboundedZone(sheetId, zone) : zone);
+        this.add([this.getters.getSelectionRangeString(range, inputSheetId)]);
     }
     handle(cmd) {
         switch (cmd.type) {
@@ -41187,12 +41241,20 @@ class EditionPlugin extends UIPlugin {
         if (this.mode !== "selecting") {
             return;
         }
+        const sheetId = this.getters.getActiveSheetId();
+        let unboundedZone;
+        if (event.type === "HeadersSelected") {
+            unboundedZone = this.getters.getUnboundedZone(sheetId, event.anchor.zone);
+        }
+        else {
+            unboundedZone = event.anchor.zone;
+        }
         switch (event.mode) {
             case "newAnchor":
-                this.insertSelectedRange(event.anchor.zone);
+                this.insertSelectedRange(unboundedZone);
                 break;
             default:
-                this.replaceSelectedRanges(event.anchor.zone);
+                this.replaceSelectedRanges(unboundedZone);
                 break;
         }
     }
@@ -41249,7 +41311,9 @@ class EditionPlugin extends UIPlugin {
                 }
                 break;
             case "START_CHANGE_HIGHLIGHT":
+                // FIXME: thiws whole ordeal could be handled with the Selection Processor which would extend the feature to selection inputs
                 this.dispatch("STOP_COMPOSER_RANGE_SELECTION");
+                // FIXME: we should check range SheetId compared to this.activeSheetId r maybe not have a sheetId in the payload ??
                 const range = this.getters.getRangeFromRangeData(cmd.range);
                 const previousRefToken = this.currentTokens
                     .filter((token) => token.type === "REFERENCE")
@@ -41603,14 +41667,11 @@ class EditionPlugin extends UIPlugin {
         const ref = this.getZoneReference(zone);
         this.replaceText(ref, this.selectionInitialStart, this.selectionEnd);
     }
-    getZoneReference(zone, fixedParts = [{ colFixed: false, rowFixed: false }]) {
+    getZoneReference(zone) {
+        const inputSheetId = this.getters.getCurrentEditedCell().sheetId;
         const sheetId = this.getters.getActiveSheetId();
-        let selectedXc = this.getters.zoneToXC(sheetId, zone, fixedParts);
-        if (this.getters.getCurrentEditedCell().sheetId !== this.getters.getActiveSheetId()) {
-            const sheetName = getCanonicalSheetName(this.getters.getSheetName(this.getters.getActiveSheetId()));
-            selectedXc = `${sheetName}!${selectedXc}`;
-        }
-        return selectedXc;
+        const range = this.getters.getRangeFromZone(sheetId, zone);
+        return this.getters.getSelectionRangeString(range, inputSheetId);
     }
     getRangeReference(range, fixedParts = [{ colFixed: false, rowFixed: false }]) {
         let _fixedParts = [...fixedParts];
@@ -42464,7 +42525,7 @@ class ImageProvider {
         const file = await this.getImageFromUser();
         const path = await this.fileStore.upload(file);
         const size = await this.getImageSize(path);
-        return { path, size };
+        return { path, size, mimetype: file.type };
     }
     getImageFromUser() {
         return new Promise((resolve, reject) => {
@@ -47531,8 +47592,7 @@ function createWorksheets(data, construct) {
         // Figures and Charts
         let drawingNode = escapeXml ``;
         const drawingRelIds = [];
-        const charts = sheet.charts;
-        for (const chart of charts) {
+        for (const chart of sheet.charts) {
             const xlsxChartId = convertChartId(chart.id);
             const chartRelId = addRelsToFile(construct.relsFiles, `xl/drawings/_rels/drawing${sheetIndex}.xml.rels`, {
                 target: `../charts/chart${xlsxChartId}.xml`,
@@ -47541,20 +47601,27 @@ function createWorksheets(data, construct) {
             drawingRelIds.push(chartRelId);
             files.push(createXMLFile(createChart(chart, sheetIndex, data), `xl/charts/chart${xlsxChartId}.xml`, "chart"));
         }
-        const images = sheet.images;
-        for (const image of images) {
+        for (const image of sheet.images) {
+            const mimeType = image.data.mimetype;
+            if (mimeType === undefined)
+                continue;
+            const extension = IMAGE_MIMETYPE_EXTENSION_MAPPING[mimeType];
+            // only support exporting images with mimetypes specified in the mapping
+            if (extension === undefined)
+                continue;
             const xlsxImageId = convertImageId(image.id);
+            let imageFileName = `image${xlsxImageId}.${extension}`;
             const imageRelId = addRelsToFile(construct.relsFiles, `xl/drawings/_rels/drawing${sheetIndex}.xml.rels`, {
-                target: `../media/image${xlsxImageId}`,
+                target: `../media/${imageFileName}`,
                 type: XLSX_RELATION_TYPE.image,
             });
             drawingRelIds.push(imageRelId);
             files.push({
-                path: `xl/media/image${xlsxImageId}`,
-                imagePath: image.data.path,
+                path: `xl/media/${imageFileName}`,
+                imageSrc: image.data.path,
             });
         }
-        const drawings = [...charts, ...images];
+        const drawings = [...sheet.charts, ...sheet.images];
         if (drawings.length) {
             const drawingRelId = addRelsToFile(construct.relsFiles, `xl/worksheets/_rels/sheet${sheetIndex}.xml.rels`, {
                 target: `../drawings/drawing${sheetIndex}.xml`,
@@ -47673,6 +47740,8 @@ function createRelsFiles(relsFiles) {
 }
 function createContentTypes(files) {
     const overrideNodes = [];
+    // hard-code supported image mimetypes
+    const imageDefaultNodes = Object.entries(IMAGE_MIMETYPE_EXTENSION_MAPPING).map(([mimetype, extension]) => createDefaultXMLElement(extension, mimetype));
     for (const file of files) {
         if ("contentType" in file && file.contentType) {
             overrideNodes.push(createOverride("/" + file.path, CONTENT_TYPES[file.contentType]));
@@ -47688,6 +47757,7 @@ function createContentTypes(files) {
     ];
     const xml = escapeXml /*xml*/ `
     <Types xmlns="${NAMESPACE["Types"]}">
+      ${joinXmlNodes(Object.values(imageDefaultNodes))}
       <Default ${formatAttributes(relsAttributes)} />
       <Default ${formatAttributes(xmlAttributes)} />
       ${joinXmlNodes(overrideNodes)}
@@ -47779,7 +47849,7 @@ class Model extends EventBus {
         this.coreGetters.getRangeDataFromXc = this.range.getRangeDataFromXc.bind(this.range);
         this.coreGetters.getRangeDataFromZone = this.range.getRangeDataFromZone.bind(this.range);
         this.coreGetters.getRangeFromRangeData = this.range.getRangeFromRangeData.bind(this.range);
-        this.coreGetters.getSelectionRangeString = this.range.getSelectionRangeString.bind(this.range);
+        this.coreGetters.getRangeFromZone = this.range.getRangeFromZone.bind(this.range);
         this.getters = {
             isReadonly: () => this.config.mode === "readonly" || this.config.mode === "dashboard",
             isDashboard: () => this.config.mode === "dashboard",
@@ -48270,6 +48340,6 @@ function addFunction(functionName, functionDescription) {
 export { AbstractChart, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, compile, components, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, links, load, parse, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, tokenize };
 
 
-__info__.version = '16.4.0-alpha.2';
-__info__.date = '2023-05-26T13:40:49.561Z';
-__info__.hash = '82328ad';
+__info__.version = '16.4.0-alpha.3';
+__info__.date = '2023-06-02T10:13:30.127Z';
+__info__.hash = '059d66a';