@odoo/o-spreadsheet 16.4.0-alpha.7 → 16.4.1

package/dist/o-spreadsheet.esm.js

@@ -108,8 +108,8 @@ const SELECTION_BORDER_COLOR = "#3266ca";
 const HEADER_BORDER_COLOR = "#C0C0C0";
 const CELL_BORDER_COLOR = "#E2E3E3";
 const BACKGROUND_CHART_COLOR = "#FFFFFF";
-const MENU_ITEM_DISABLED_COLOR = "#CACACA";
 const BG_HOVER_COLOR = "#EBEBEB";
+const DISABLED_TEXT_COLOR = "#CACACA";
 const DEFAULT_COLOR_SCALE_MIDPOINT_COLOR = 0xb6d7a8;
 const LINK_COLOR = "#01666b";
 const FILTERS_COLOR = "#188038";
@@ -235,6 +235,7 @@ const DEFAULT_FONT_SIZE = 10;
 const HEADER_FONT_SIZE = 11;
 const DEFAULT_FONT = "'Roboto', arial";
 const DEFAULT_VERTICAL_ALIGN = "bottom";
+const DEFAULT_WRAPPING_MODE = "overflow";
 // Borders
 const DEFAULT_BORDER_DESC = { style: "thin", color: "#000000" };
 const DEFAULT_FILTER_BORDER_DESC = { style: "thin", color: FILTERS_COLOR };
@@ -392,82 +393,6 @@ function getCanonicalSheetName(sheetName) {
 function clip(val, min, max) {
     return val < min ? min : val > max ? max : val;
 }
-function computeTextLinesHeight(textLineHeight, numberOfLines = 1) {
-    return numberOfLines * (textLineHeight + MIN_CELL_TEXT_MARGIN) - MIN_CELL_TEXT_MARGIN;
-}
-/**
- * Get the default height of the cell given its style.
- */
-function getDefaultCellHeight(cell) {
-    if (!cell || !cell.content) {
-        return DEFAULT_CELL_HEIGHT;
-    }
-    const fontSize = computeTextFontSizeInPixels(cell.style);
-    // the number of lines should be computed from the formula result, but it's not evaluated at this point
-    const numberOfLines = cell.isFormula ? 1 : cell.content.split(NEWLINE).length;
-    return computeTextLinesHeight(fontSize, numberOfLines) + 2 * PADDING_AUTORESIZE_VERTICAL;
-}
-function computeTextWidth(context, text, style) {
-    const font = computeTextFont(style);
-    if (!textWidthCache[font]) {
-        textWidthCache[font] = {};
-    }
-    if (textWidthCache[font][text] === undefined) {
-        context.save();
-        context.font = font;
-        const textWidth = context.measureText(text).width;
-        context.restore();
-        textWidthCache[font][text] = textWidth;
-    }
-    return textWidthCache[font][text];
-}
-const textWidthCache = {};
-function fontSizeInPixels(fontSize) {
-    return Math.round((fontSize * 96) / 72);
-}
-function computeTextFont(style) {
-    const italic = style.italic ? "italic " : "";
-    const weight = style.bold ? "bold" : DEFAULT_FONT_WEIGHT;
-    const size = computeTextFontSizeInPixels(style);
-    return `${italic}${weight} ${size}px ${DEFAULT_FONT}`;
-}
-function computeTextFontSizeInPixels(style) {
-    const sizeInPt = style?.fontSize || DEFAULT_FONT_SIZE;
-    return fontSizeInPixels(sizeInPt);
-}
-/**
- * Return the font size that makes the width of a text match the given line width.
- * Minimum font size is 1.
- *
- * @param getTextWidth function that takes a fontSize as argument, and return the width of the text with this font size.
- */
-function getFontSizeMatchingWidth(lineWidth, maxFontSize, getTextWidth, precision = 0.25) {
-    let minFontSize = 1;
-    if (getTextWidth(minFontSize) > lineWidth)
-        return minFontSize;
-    if (getTextWidth(maxFontSize) < lineWidth)
-        return maxFontSize;
-    // Dichotomic search
-    let fontSize = (minFontSize + maxFontSize) / 2;
-    let currentTextWidth = getTextWidth(fontSize);
-    // Use a maximum number of iterations to be safe, because measuring text isn't 100% precise
-    let iterations = 0;
-    while (Math.abs(currentTextWidth - lineWidth) > precision && iterations < 20) {
-        if (currentTextWidth >= lineWidth) {
-            maxFontSize = (minFontSize + maxFontSize) / 2;
-        }
-        else {
-            minFontSize = (minFontSize + maxFontSize) / 2;
-        }
-        fontSize = (minFontSize + maxFontSize) / 2;
-        currentTextWidth = getTextWidth(fontSize);
-        iterations++;
-    }
-    return fontSize;
-}
-function computeIconWidth(style) {
-    return computeTextFontSizeInPixels(style) + 2 * MIN_CF_ICON_MARGIN;
-}
 /**
  * Create a range from start (included) to end (excluded).
  * range(10, 13) => [10, 11, 12]
@@ -722,10 +647,6 @@ function removeFalsyAttributes(obj) {
     Object.keys(cleanObject).forEach((key) => !cleanObject[key] && delete cleanObject[key]);
     return cleanObject;
 }
-/** Transform a string to lower case. If the string is undefined, return an empty string */
-function toLowerCase(str) {
-    return str ? str.toLowerCase() : "";
-}
 function transpose2dArray(matrix, callback = (val) => val) {
     if (!matrix.length)
         return [];
@@ -814,6 +735,14 @@ function memoize(func) {
             return cache.get(args[0]);
         },
     }[funcName];
+}
+function removeIndexesFromArray(array, indexes) {
+    return array.filter((_, index) => !indexes.includes(index));
+}
+function insertItemsAtIndex(array, items, index) {
+    const newArray = [...array];
+    newArray.splice(index, 0, ...items);
+    return newArray;
 }
 
 const RBA_REGEX = /rgba?\(|\s+|\)/gi;
@@ -957,13 +886,13 @@ function rgbaToHex(rgba) {
     let g = rgba.g.toString(16);
     let b = rgba.b.toString(16);
     let a = Math.round(rgba.a * 255).toString(16);
-    if (r.length == 1)
+    if (r.length === 1)
         r = "0" + r;
-    if (g.length == 1)
+    if (g.length === 1)
         g = "0" + g;
-    if (b.length == 1)
+    if (b.length === 1)
         b = "0" + b;
-    if (a.length == 1)
+    if (a.length === 1)
         a = "0" + a;
     if (a === "ff")
         a = "";
@@ -1066,13 +995,13 @@ function rgbaToHSLA(rgba) {
     let l = 0;
     // Calculate hue
     // No difference
-    if (delta == 0)
+    if (delta === 0)
         h = 0;
     // Red is max
-    else if (cMax == r)
+    else if (cMax === r)
         h = ((g - b) / delta) % 6;
     // Green is max
-    else if (cMax == g)
+    else if (cMax === g)
         h = (b - r) / delta + 2;
     // Blue is max
     else
@@ -1083,7 +1012,7 @@ function rgbaToHSLA(rgba) {
         h += 360;
     l = (cMax + cMin) / 2;
     // Calculate saturation
-    s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+    s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
     // Multiply l and s by 100
     s = +(s * 100).toFixed(1);
     l = +(l * 100).toFixed(1);
@@ -1520,7 +1449,7 @@ function addMonthsToDate(date, months, keepEndOfMonth) {
 }
 function isLeapYear(year) {
     const _year = Math.trunc(year);
-    return (_year % 4 === 0 && _year % 100 != 0) || _year % 400 == 0;
+    return (_year % 4 === 0 && _year % 100 != 0) || _year % 400 === 0;
 }
 function getYearFrac(startDate, endDate, _dayCountConvention) {
     if (startDate === endDate) {
@@ -2181,6 +2110,39 @@ function detectNumberFormat(content) {
     }
     return undefined;
 }
+function createCurrencyFormat(currency) {
+    const decimalPlaces = currency.decimalPlaces ?? 2;
+    const position = currency.position ?? "before";
+    const code = currency.code ?? "";
+    const symbol = currency.symbol ?? "";
+    const decimalRepresentation = decimalPlaces ? "." + "0".repeat(decimalPlaces) : "";
+    const numberFormat = "#,##0" + decimalRepresentation;
+    let textExpression = `${code} ${symbol}`.trim();
+    if (position === "after" && code) {
+        textExpression = " " + textExpression;
+    }
+    return insertTextInFormat(textExpression, position, numberFormat);
+}
+function insertTextInFormat(text, position, format) {
+    const textExpression = `[$${text}]`;
+    return position === "before" ? textExpression + format : format + textExpression;
+}
+function roundFormat(format) {
+    const internalFormat = parseFormat(format);
+    const roundedFormat = internalFormat.map((formatPart) => {
+        if (formatPart.type === "NUMBER") {
+            return {
+                type: formatPart.type,
+                format: {
+                    ...formatPart.format,
+                    decimalPart: undefined,
+                },
+            };
+        }
+        return formatPart;
+    });
+    return convertInternalFormatToFormat(roundedFormat);
+}
 function createLargeNumberFormat(format, magnitude, postFix, locale) {
     const internalFormat = parseFormat(format || "#,##0");
     const largeNumberFormat = internalFormat
@@ -3274,6 +3236,169 @@ function createDefaultRows(rowNumber) {
     return rows;
 }
 
+function computeTextLinesHeight(textLineHeight, numberOfLines = 1) {
+    return numberOfLines * (textLineHeight + MIN_CELL_TEXT_MARGIN) - MIN_CELL_TEXT_MARGIN;
+}
+/**
+ * Get the default height of the cell given its style.
+ */
+function getDefaultCellHeight(ctx, cell, colSize) {
+    if (!cell || !cell.content)
+        return DEFAULT_CELL_HEIGHT;
+    const maxWidth = cell.style?.wrapping ? colSize - 2 * MIN_CELL_TEXT_MARGIN : undefined;
+    const numberOfLines = cell.isFormula
+        ? 1
+        : splitTextToWidth(ctx, cell.content, cell.style, maxWidth).length;
+    const fontSize = computeTextFontSizeInPixels(cell.style);
+    return computeTextLinesHeight(fontSize, numberOfLines) + 2 * PADDING_AUTORESIZE_VERTICAL;
+}
+const textWidthCache = {};
+function computeTextWidth(context, text, style) {
+    const font = computeTextFont(style);
+    if (!textWidthCache[font]) {
+        textWidthCache[font] = {};
+    }
+    if (textWidthCache[font][text] === undefined) {
+        context.save();
+        context.font = font;
+        const textWidth = context.measureText(text).width;
+        context.restore();
+        textWidthCache[font][text] = textWidth;
+    }
+    return textWidthCache[font][text];
+}
+function fontSizeInPixels(fontSize) {
+    return Math.round((fontSize * 96) / 72);
+}
+function computeTextFont(style) {
+    const italic = style.italic ? "italic " : "";
+    const weight = style.bold ? "bold" : DEFAULT_FONT_WEIGHT;
+    const size = computeTextFontSizeInPixels(style);
+    return `${italic}${weight} ${size}px ${DEFAULT_FONT}`;
+}
+function computeTextFontSizeInPixels(style) {
+    const sizeInPt = style?.fontSize || DEFAULT_FONT_SIZE;
+    return fontSizeInPixels(sizeInPt);
+}
+function splitWordToSpecificWidth(ctx, word, width, style) {
+    const wordWidth = computeTextWidth(ctx, word, style);
+    if (wordWidth <= width) {
+        return [word];
+    }
+    const splitWord = [];
+    let wordPart = "";
+    for (let l of word) {
+        const wordPartWidth = computeTextWidth(ctx, wordPart + l, style);
+        if (wordPartWidth > width) {
+            splitWord.push(wordPart);
+            wordPart = l;
+        }
+        else {
+            wordPart += l;
+        }
+    }
+    splitWord.push(wordPart);
+    return splitWord;
+}
+/**
+ * Return the given text, split in multiple lines if needed. The text will be split in multiple
+ * line if it contains NEWLINE characters, or if it's longer than the given width.
+ */
+function splitTextToWidth(ctx, text, style, width) {
+    if (!style)
+        style = {};
+    const brokenText = [];
+    // Checking if text contains NEWLINE before split makes it very slightly slower if text contains it,
+    // but 5-10x faster if it doesn't
+    const lines = text.includes(NEWLINE) ? text.split(NEWLINE) : [text];
+    for (const line of lines) {
+        const words = line.includes(" ") ? line.split(" ") : [line];
+        if (!width) {
+            brokenText.push(line);
+            continue;
+        }
+        let textLine = "";
+        let availableWidth = width;
+        for (let word of words) {
+            const splitWord = splitWordToSpecificWidth(ctx, word, width, style);
+            const lastPart = splitWord.pop();
+            const lastPartWidth = computeTextWidth(ctx, lastPart, style);
+            // At this step: "splitWord" is an array composed of parts of word whose
+            // length is at most equal to "width".
+            // Last part contains the end of the word.
+            // Note that: When word length is less than width, then lastPart is equal
+            // to word and splitWord is empty
+            if (splitWord.length) {
+                if (textLine !== "") {
+                    brokenText.push(textLine);
+                    textLine = "";
+                    availableWidth = width;
+                }
+                splitWord.forEach((wordPart) => {
+                    brokenText.push(wordPart);
+                });
+                textLine = lastPart;
+                availableWidth = width - lastPartWidth;
+            }
+            else {
+                // here "lastPart" is equal to "word" and the "word" size is smaller than "width"
+                const _word = textLine === "" ? lastPart : " " + lastPart;
+                const wordWidth = computeTextWidth(ctx, _word, style);
+                if (wordWidth <= availableWidth) {
+                    textLine += _word;
+                    availableWidth -= wordWidth;
+                }
+                else {
+                    brokenText.push(textLine);
+                    textLine = lastPart;
+                    availableWidth = width - lastPartWidth;
+                }
+            }
+        }
+        if (textLine !== "") {
+            brokenText.push(textLine);
+        }
+    }
+    return brokenText;
+}
+/**
+ * Return the font size that makes the width of a text match the given line width.
+ * Minimum font size is 1.
+ *
+ * @param getTextWidth function that takes a fontSize as argument, and return the width of the text with this font size.
+ */
+function getFontSizeMatchingWidth(lineWidth, maxFontSize, getTextWidth, precision = 0.25) {
+    let minFontSize = 1;
+    if (getTextWidth(minFontSize) > lineWidth)
+        return minFontSize;
+    if (getTextWidth(maxFontSize) < lineWidth)
+        return maxFontSize;
+    // Dichotomic search
+    let fontSize = (minFontSize + maxFontSize) / 2;
+    let currentTextWidth = getTextWidth(fontSize);
+    // Use a maximum number of iterations to be safe, because measuring text isn't 100% precise
+    let iterations = 0;
+    while (Math.abs(currentTextWidth - lineWidth) > precision && iterations < 20) {
+        if (currentTextWidth >= lineWidth) {
+            maxFontSize = (minFontSize + maxFontSize) / 2;
+        }
+        else {
+            minFontSize = (minFontSize + maxFontSize) / 2;
+        }
+        fontSize = (minFontSize + maxFontSize) / 2;
+        currentTextWidth = getTextWidth(fontSize);
+        iterations++;
+    }
+    return fontSize;
+}
+function computeIconWidth(style) {
+    return computeTextFontSizeInPixels(style) + 2 * MIN_CF_ICON_MARGIN;
+}
+/** Transform a string to lower case. If the string is undefined, return an empty string */
+function toLowerCase(str) {
+    return str ? str.toLowerCase() : "";
+}
+
 /*
  * https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript
  * */
@@ -3296,7 +3421,7 @@ class UuidGenerator {
         else {
             // mainly for jest and other browsers that do not have the crypto functionality
             return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
-                var r = (Math.random() * 16) | 0, v = c == "x" ? r : (r & 0x3) | 0x8;
+                var r = (Math.random() * 16) | 0, v = c === "x" ? r : (r & 0x3) | 0x8;
                 return v.toString(16);
             });
         }
@@ -3926,7 +4051,6 @@ const readonlyAllowedCommands = new Set([
     "SET_VIEWPORT_OFFSET",
     "SELECT_SEARCH_NEXT_MATCH",
     "SELECT_SEARCH_PREVIOUS_MATCH",
-    "REFRESH_SEARCH",
     "UPDATE_SEARCH",
     "CLEAR_SEARCH",
     "EVALUATE_CELLS",
@@ -4124,6 +4248,7 @@ var CommandResult;
     CommandResult[CommandResult["NoSplitSeparatorInSelection"] = 92] = "NoSplitSeparatorInSelection";
     CommandResult[CommandResult["NoActiveSheet"] = 93] = "NoActiveSheet";
     CommandResult[CommandResult["InvalidLocale"] = 94] = "InvalidLocale";
+    CommandResult[CommandResult["AlreadyInPaintingFormatMode"] = 95] = "AlreadyInPaintingFormatMode";
 })(CommandResult || (CommandResult = {}));
 
 const borderStyles = ["thin", "medium", "thick", "dashed", "dotted"];
@@ -5864,7 +5989,7 @@ css /* scss */ `
         }
       }
       &.disabled {
-        color: ${MENU_ITEM_DISABLED_COLOR};
+        color: ${DISABLED_TEXT_COLOR};
         cursor: not-allowed;
       }
     }
@@ -5939,8 +6064,8 @@ class Menu extends Component {
         return this.props.menuItems.some((menuItem) => !!menuItem.icon || !!menuItem.isActive);
     }
     getIconName(menu) {
-        if (menu.icon) {
-            return menu.icon;
+        if (menu.icon(this.env)) {
+            return menu.icon(this.env);
         }
         if (menu.isActive?.(this.env)) {
             return "o-spreadsheet-Icon.CHECK";
@@ -6374,7 +6499,7 @@ function invertMatrix(M) {
     for (let pivot = 0; pivot < dim; pivot++) {
         let diagonalElement = C[pivot][pivot];
         // if we have a 0 on the diagonal we'll need to swap with a lower row
-        if (diagonalElement == 0) {
+        if (diagonalElement === 0) {
             //look through every row below the i'th row
             for (let row = pivot + 1; row < dim; row++) {
                 //if the ii'th row has a non-0 in the i'th col, swap it with that row
@@ -6401,7 +6526,7 @@ function invertMatrix(M) {
         // the other rows so that there will be 0's in this column in the
         // rows above and below this one
         for (let row = 0; row < dim; row++) {
-            if (row == pivot) {
+            if (row === pivot) {
                 continue;
             }
             // We want to change this element to 0
@@ -12466,7 +12591,7 @@ const ISNA = {
             return false;
         }
         catch (e) {
-            return e?.errorType == CellErrorType.NotAvailable;
+            return e?.errorType === CellErrorType.NotAvailable;
         }
     },
     isExported: true,
@@ -15182,6 +15307,8 @@ const uuidGenerator$2 = new UuidGenerator();
 function createAction(item) {
     const name = item.name;
     const children = item.children;
+    const description = item.description;
+    const icon = item.icon;
     return {
         id: item.id || uuidGenerator$2.uuidv4(),
         name: typeof name === "function" ? name : () => name,
@@ -15199,8 +15326,8 @@ function createAction(item) {
             : () => [],
         isReadonlyAllowed: item.isReadonlyAllowed || false,
         separator: item.separator || false,
-        icon: item.icon || "",
-        description: item.description || "",
+        icon: typeof icon === "function" ? icon : () => icon || "",
+        description: typeof description === "function" ? description : () => description || "",
         textColor: item.textColor,
         sequence: item.sequence || 0,
     };
@@ -16666,7 +16793,7 @@ function getChartTimeOptions(labels, labelFormat, locale) {
 function convertDateFormatForMoment(format) {
     format = format.replace(/y/g, "Y");
     format = format.replace(/d/g, "D");
-    // "m" before "h" == month, "m" after "h" == minute
+    // "m" before "h" === month, "m" after "h" === minute
     const indexH = format.indexOf("h");
     if (indexH >= 0) {
         format = format.slice(0, indexH).replace(/m/g, "M") + format.slice(indexH);
@@ -17520,6 +17647,7 @@ function getChartMenu(figureId, onFigureDeleted, env) {
                 env.model.dispatch("SELECT_FIGURE", { id: figureId });
                 env.openSidePanel("ChartPanel");
             },
+            icon: "o-spreadsheet-Icon.EDIT",
         },
         getCopyMenuItem(figureId, env),
         getCutMenuItem(figureId, env),
@@ -17551,6 +17679,7 @@ function getImageMenuRegistry(figureId, onFigureDeleted, env) {
                     width,
                 });
             },
+            icon: "o-spreadsheet-Icon.REFRESH",
         },
         getDeleteMenuItem(figureId, onFigureDeleted, env),
     ];
@@ -17567,6 +17696,7 @@ function getCopyMenuItem(figureId, env) {
             env.model.dispatch("COPY");
             await env.clipboard.write(env.model.getters.getClipboardContent());
         },
+        icon: "o-spreadsheet-Icon.COPY",
     };
 }
 function getCutMenuItem(figureId, env) {
@@ -17580,6 +17710,7 @@ function getCutMenuItem(figureId, env) {
             env.model.dispatch("CUT");
             await env.clipboard.write(env.model.getters.getClipboardContent());
         },
+        icon: "o-spreadsheet-Icon.CUT",
     };
 }
 function getDeleteMenuItem(figureId, onFigureDeleted, env) {
@@ -17594,6 +17725,7 @@ function getDeleteMenuItem(figureId, onFigureDeleted, env) {
             });
             onFigureDeleted();
         },
+        icon: "o-spreadsheet-Icon.DELETE",
     };
 }
 
@@ -18661,7 +18793,7 @@ const insertFunctionMin = {
 };
 const categorieFunctionAll = {
     name: _lt("All"),
-    children: allFunctionListMenuBuilder(),
+    children: [allFunctionListMenuBuilder],
 };
 function allFunctionListMenuBuilder() {
     const fnNames = functionRegistry.getKeys();
@@ -18993,7 +19125,10 @@ const formatNumberAutomatic = {
 };
 const formatNumberNumber = {
     name: _lt("Number"),
-    description: "1,000.12",
+    description: (env) => formatValue(1000.12, {
+        format: "#,##0.00",
+        locale: env.model.getters.getLocale(),
+    }),
     execute: (env) => setFormatter(env, "#,##0.00"),
     isActive: (env) => isFormatSelected(env, "#,##0.00"),
 };
@@ -19004,21 +19139,34 @@ const formatPercent = {
 };
 const formatNumberPercent = {
     name: _lt("Percent"),
-    description: "10.12%",
+    description: (env) => formatValue(0.1012, {
+        format: "0.00%",
+        locale: env.model.getters.getLocale(),
+    }),
     execute: FORMAT_PERCENT_ACTION,
     isActive: (env) => isFormatSelected(env, "0.00%"),
 };
 const formatNumberCurrency = {
     name: _lt("Currency"),
-    description: "$1,000.12",
-    execute: (env) => setFormatter(env, "[$$]#,##0.00"),
-    isActive: (env) => isFormatSelected(env, "[$$]#,##0.00"),
+    description: (env) => formatValue(1000.12, {
+        format: env.model.config.defaultCurrencyFormat,
+        locale: env.model.getters.getLocale(),
+    }),
+    execute: (env) => setFormatter(env, env.model.config.defaultCurrencyFormat),
+    isActive: (env) => isFormatSelected(env, env.model.config.defaultCurrencyFormat),
 };
 const formatNumberCurrencyRounded = {
     name: _lt("Currency rounded"),
-    description: "$1,000",
-    execute: (env) => setFormatter(env, "[$$]#,##0"),
-    isActive: (env) => isFormatSelected(env, "[$$]#,##0"),
+    description: (env) => formatValue(1000, {
+        format: roundFormat(env.model.config.defaultCurrencyFormat),
+        locale: env.model.getters.getLocale(),
+    }),
+    execute: (env) => setFormatter(env, roundFormat(env.model.config.defaultCurrencyFormat)),
+    isActive: (env) => isFormatSelected(env, roundFormat(env.model.config.defaultCurrencyFormat)),
+    isVisible: (env) => {
+        const currencyFormat = env.model.config.defaultCurrencyFormat;
+        return currencyFormat !== roundFormat(currencyFormat);
+    },
 };
 const formatCustomCurrency = {
     name: _lt("Custom currency"),
@@ -19027,19 +19175,37 @@ const formatCustomCurrency = {
 };
 const formatNumberDate = {
     name: _lt("Date"),
-    description: "9/26/2008",
+    description: (env) => {
+        const locale = env.model.getters.getLocale();
+        return formatValue(parseLiteral("9/26/2023", DEFAULT_LOCALE), {
+            format: locale.dateFormat,
+            locale,
+        });
+    },
     execute: (env) => setFormatter(env, env.model.getters.getLocale().dateFormat),
     isActive: (env) => isFormatSelected(env, env.model.getters.getLocale().dateFormat),
 };
 const formatNumberTime = {
     name: _lt("Time"),
-    description: "10:43:00 PM",
+    description: (env) => {
+        const locale = env.model.getters.getLocale();
+        return formatValue(parseLiteral("9/26/2023 10:43:00 PM", DEFAULT_LOCALE), {
+            format: locale.timeFormat,
+            locale,
+        });
+    },
     execute: (env) => setFormatter(env, env.model.getters.getLocale().timeFormat),
     isActive: (env) => isFormatSelected(env, env.model.getters.getLocale().timeFormat),
 };
 const formatNumberDateTime = {
     name: _lt("Date time"),
-    description: "9/26/2008 22:43:00",
+    description: (env) => {
+        const locale = env.model.getters.getLocale();
+        return formatValue(parseLiteral("9/26/2023 22:43:00", DEFAULT_LOCALE), {
+            format: locale.dateFormat + " " + locale.timeFormat,
+            locale,
+        });
+    },
     execute: (env) => {
         const locale = env.model.getters.getLocale();
         setFormatter(env, locale.dateFormat + " " + locale.timeFormat);
@@ -19111,7 +19277,7 @@ const formatAlignment = {
 };
 const formatAlignmentHorizontal = {
     name: _lt("Horizontal align"),
-    icon: "o-spreadsheet-Icon.ALIGN_LEFT",
+    icon: (env) => getHorizontalAlignmentIcon(env),
 };
 const formatAlignmentLeft = {
     name: _lt("Left"),
@@ -19136,46 +19302,50 @@ const formatAlignmentRight = {
 };
 const formatAlignmentVertical = {
     name: _lt("Vertical align"),
-    icon: "o-spreadsheet-Icon.ALIGN_MIDDLE",
+    icon: (env) => getVerticalAlignmentIcon(env),
 };
 const formatAlignmentTop = {
     name: _lt("Top"),
     execute: (env) => setStyle(env, { verticalAlign: "top" }),
-    isActive: (env) => (env.model.getters.getCurrentStyle().verticalAlign || DEFAULT_VERTICAL_ALIGN) === "top",
+    isActive: (env) => getVerticalAlign(env) === "top",
     icon: "o-spreadsheet-Icon.ALIGN_TOP",
 };
 const formatAlignmentMiddle = {
     name: _lt("Middle"),
     execute: (env) => setStyle(env, { verticalAlign: "middle" }),
-    isActive: (env) => (env.model.getters.getCurrentStyle().verticalAlign || DEFAULT_VERTICAL_ALIGN) === "middle",
+    isActive: (env) => getVerticalAlign(env) === "middle",
     icon: "o-spreadsheet-Icon.ALIGN_MIDDLE",
 };
 const formatAlignmentBottom = {
     name: _lt("Bottom"),
     execute: (env) => setStyle(env, { verticalAlign: "bottom" }),
-    isActive: (env) => (env.model.getters.getCurrentStyle().verticalAlign || DEFAULT_VERTICAL_ALIGN) === "bottom",
+    isActive: (env) => getVerticalAlign(env) === "bottom",
     icon: "o-spreadsheet-Icon.ALIGN_BOTTOM",
 };
-const formatWrapping = {
+const formatWrappingIcon = {
     name: _lt("Wrapping"),
     icon: "o-spreadsheet-Icon.WRAPPING_OVERFLOW",
 };
+const formatWrapping = {
+    name: _lt("Wrapping"),
+    icon: (env) => getWrapModeIcon(env),
+};
 const formatWrappingOverflow = {
     name: _lt("Overflow"),
     execute: (env) => setStyle(env, { wrapping: "overflow" }),
-    isActive: (env) => (env.model.getters.getCurrentStyle().wrapping || "overflow") === "overflow",
+    isActive: (env) => getWrappingMode(env) === "overflow",
     icon: "o-spreadsheet-Icon.WRAPPING_OVERFLOW",
 };
 const formatWrappingWrap = {
     name: _lt("Wrap"),
     execute: (env) => setStyle(env, { wrapping: "wrap" }),
-    isActive: (env) => env.model.getters.getCurrentStyle().wrapping === "wrap",
+    isActive: (env) => getWrappingMode(env) === "wrap",
     icon: "o-spreadsheet-Icon.WRAPPING_WRAP",
 };
 const formatWrappingClip = {
     name: _lt("Clip"),
     execute: (env) => setStyle(env, { wrapping: "clip" }),
-    isActive: (env) => env.model.getters.getCurrentStyle().wrapping === "clip",
+    isActive: (env) => getWrappingMode(env) === "clip",
     icon: "o-spreadsheet-Icon.WRAPPING_CLIP",
 };
 const textColor = {
@@ -19191,14 +19361,6 @@ const formatCF = {
     execute: OPEN_CF_SIDEPANEL_ACTION,
     icon: "o-spreadsheet-Icon.CONDITIONAL_FORMAT",
 };
-const paintFormat = {
-    name: _lt("Paint Format"),
-    execute: (env) => env.model.dispatch("ACTIVATE_PAINT_FORMAT", {
-        target: env.model.getters.getSelectedZones(),
-    }),
-    icon: "o-spreadsheet-Icon.PAINT_FORMAT",
-    isActive: (env) => env.model.getters.isPaintingFormat(),
-};
 const clearFormat = {
     name: _lt("Clear formatting"),
     description: "Ctrl+<",
@@ -19238,6 +19400,53 @@ function getHorizontalAlign(env) {
     }
     const cell = env.model.getters.getActiveCell();
     return cell.defaultAlign;
+}
+function getVerticalAlign(env) {
+    const style = env.model.getters.getCurrentStyle();
+    if (style.verticalAlign) {
+        return style.verticalAlign;
+    }
+    return DEFAULT_VERTICAL_ALIGN;
+}
+function getWrappingMode(env) {
+    const style = env.model.getters.getCurrentStyle();
+    if (style.wrapping) {
+        return style.wrapping;
+    }
+    return DEFAULT_WRAPPING_MODE;
+}
+function getHorizontalAlignmentIcon(env) {
+    const horizontalAlign = getHorizontalAlign(env);
+    switch (horizontalAlign) {
+        case "right":
+            return "o-spreadsheet-Icon.ALIGN_RIGHT";
+        case "center":
+            return "o-spreadsheet-Icon.ALIGN_CENTER";
+        default:
+            return "o-spreadsheet-Icon.ALIGN_LEFT";
+    }
+}
+function getVerticalAlignmentIcon(env) {
+    const verticalAlign = getVerticalAlign(env);
+    switch (verticalAlign) {
+        case "top":
+            return "o-spreadsheet-Icon.ALIGN_TOP";
+        case "middle":
+            return "o-spreadsheet-Icon.ALIGN_MIDDLE";
+        default:
+            return "o-spreadsheet-Icon.ALIGN_BOTTOM";
+    }
+}
+function getWrapModeIcon(env) {
+    const wrapMode = getWrappingMode(env);
+    switch (wrapMode) {
+        case "wrap":
+            return "o-spreadsheet-Icon.WRAPPING_WRAP";
+        case "clip":
+            return "o-spreadsheet-Icon.WRAPPING_CLIP";
+        default:
+            return "o-spreadsheet-Icon.WRAPPING_OVERFLOW";
+    }
 }
 
 var ACTION_FORMAT = /*#__PURE__*/Object.freeze({
@@ -19269,6 +19478,7 @@ var ACTION_FORMAT = /*#__PURE__*/Object.freeze({
   formatAlignmentTop: formatAlignmentTop,
   formatAlignmentMiddle: formatAlignmentMiddle,
   formatAlignmentBottom: formatAlignmentBottom,
+  formatWrappingIcon: formatWrappingIcon,
   formatWrapping: formatWrapping,
   formatWrappingOverflow: formatWrappingOverflow,
   formatWrappingWrap: formatWrappingWrap,
@@ -19276,7 +19486,6 @@ var ACTION_FORMAT = /*#__PURE__*/Object.freeze({
   textColor: textColor,
   fillColor: fillColor,
   formatCF: formatCF,
-  paintFormat: paintFormat,
   clearFormat: clearFormat
 });
 
@@ -20039,7 +20248,7 @@ topbarMenuRegistry
     separator: true,
 })
     .addChild("format_wrapping", ["format"], {
-    ...formatWrapping,
+    ...formatWrappingIcon,
     sequence: 80,
     separator: true,
 })
@@ -22329,17 +22538,45 @@ class CustomCurrencyPanel extends Component {
     }
     get formatProposals() {
         const currency = this.availableCurrencies[this.state.selectedCurrencyIndex];
-        const proposalBases = this.initProposalBases(currency.decimalPlaces);
-        const firstPosition = currency.position;
-        const secondPosition = currency.position === "before" ? "after" : "before";
+        const position = currency.position;
+        const opposite = currency.position === "before" ? "after" : "before";
         const symbol = this.state.currencySymbol.trim() ? this.state.currencySymbol : "";
         const code = this.state.currencyCode.trim() ? this.state.currencyCode : "";
-        return code || symbol
-            ? [
-                ...this.createFormatProposals(proposalBases, symbol, code, firstPosition),
-                ...this.createFormatProposals(proposalBases, symbol, code, secondPosition),
-            ]
-            : [];
+        const decimalPlaces = currency.decimalPlaces;
+        if (!symbol && !code) {
+            return [];
+        }
+        const simple = symbol ? createCurrencyFormat({ symbol, position, decimalPlaces }) : "";
+        const rounded = simple ? roundFormat(simple) : "";
+        const simpleWithCode = createCurrencyFormat({ symbol, position, decimalPlaces, code });
+        const roundedWithCode = roundFormat(simpleWithCode);
+        const simpleOpposite = symbol
+            ? createCurrencyFormat({ symbol, position: opposite, decimalPlaces })
+            : "";
+        const roundedOpposite = simpleOpposite ? roundFormat(simpleOpposite) : "";
+        const simpleOppositeWithCode = createCurrencyFormat({
+            symbol,
+            position: opposite,
+            decimalPlaces,
+            code,
+        });
+        const roundedOppositeWithCode = roundFormat(simpleOppositeWithCode);
+        const formats = new Set([
+            rounded,
+            simple,
+            roundedWithCode,
+            simpleWithCode,
+            roundedOpposite,
+            simpleOpposite,
+            roundedOppositeWithCode,
+            simpleOppositeWithCode,
+        ]);
+        return [...formats]
+            .filter((format) => format !== "")
+            .map((format) => ({
+            format,
+            example: formatValue(1000.0, { format, locale: this.env.model.getters.getLocale() }),
+        }));
     }
     get isSameFormat() {
         const selectedFormat = this.formatProposals[this.state.selectedFormatIndex];
@@ -22396,41 +22633,6 @@ class CustomCurrencyPanel extends Component {
     initAvailableCurrencies() {
         this.state.selectedCurrencyIndex = 0;
     }
-    initProposalBases(decimalPlaces) {
-        const result = [{ format: "#,##0", example: "1,000" }];
-        const decimalRepresentation = decimalPlaces ? "." + "0".repeat(decimalPlaces) : "";
-        if (decimalRepresentation) {
-            result.push({
-                format: "#,##0" + decimalRepresentation,
-                example: "1,000" + decimalRepresentation,
-            });
-        }
-        return result;
-    }
-    createFormatProposals(proposalBases, symbol, code, position) {
-        let formatProposals = [];
-        // 1 - add proposal with symbol and without code
-        if (symbol) {
-            for (let base of proposalBases) {
-                formatProposals.push(this.createFormatProposal(position, base.example, base.format, symbol));
-            }
-        }
-        // 2 - if code exist --> add more proposal with symbol and with code
-        if (code) {
-            for (let base of proposalBases) {
-                const expression = (position === "after" ? " " : "") + code + " " + symbol;
-                formatProposals.push(this.createFormatProposal(position, base.example, base.format, expression));
-            }
-        }
-        return formatProposals;
-    }
-    createFormatProposal(position, baseExample, formatBase, expression) {
-        const formatExpression = "[$" + expression + "]";
-        return {
-            example: position === "before" ? expression + baseExample : baseExample + expression,
-            format: position === "before" ? formatExpression + formatBase : formatBase + formatExpression,
-        };
-    }
     getCommonFormat() {
         const selectedZones = this.env.model.getters.getSelectedZones();
         const sheetId = this.env.model.getters.getActiveSheetId();
@@ -22487,6 +22689,7 @@ class FindAndReplacePanel extends Component {
     state = useState(this.initialState());
     debounceTimeoutId;
     showFormulaState = false;
+    debouncedUpdateSearch;
     findAndReplaceRef = useRef("findAndReplace");
     get hasSearchResult() {
         return this.env.model.getters.getCurrentSelectedMatchIndex() !== null;
@@ -22496,11 +22699,16 @@ class FindAndReplacePanel extends Component {
     }
     setup() {
         this.showFormulaState = this.env.model.getters.shouldShowFormulas();
+        this.debouncedUpdateSearch = debounce(this.updateSearch.bind(this), 200);
         onMounted(() => this.focusInput());
         onWillUnmount(() => {
             this.env.model.dispatch("CLEAR_SEARCH");
             this.env.model.dispatch("SET_FORMULA_VISIBILITY", { show: this.showFormulaState });
         });
+        useEffect(() => {
+            this.state.searchOptions.searchFormulas = this.env.model.getters.shouldShowFormulas();
+            this.searchFormulas();
+        }, () => [this.env.model.getters.shouldShowFormulas()]);
     }
     onInput(ev) {
         this.state.toSearch = ev.target.value;
@@ -22520,10 +22728,6 @@ class FindAndReplacePanel extends Component {
             this.replace();
         }
     }
-    onFocusSidePanel() {
-        this.state.searchOptions.searchFormulas = this.env.model.getters.shouldShowFormulas();
-        this.env.model.dispatch("REFRESH_SEARCH");
-    }
     searchFormulas() {
         this.env.model.dispatch("SET_FORMULA_VISIBILITY", {
             show: this.state.searchOptions.searchFormulas,
@@ -22542,13 +22746,6 @@ class FindAndReplacePanel extends Component {
             searchOptions: this.state.searchOptions,
         });
     }
-    debouncedUpdateSearch() {
-        clearTimeout(this.debounceTimeoutId);
-        this.debounceTimeoutId = setTimeout(() => {
-            this.updateSearch();
-            this.debounceTimeoutId = undefined;
-        }, 400);
-    }
     replace() {
         this.env.model.dispatch("REPLACE_SEARCH", {
             replaceWith: this.state.replaceWith,
@@ -23233,7 +23430,7 @@ class ContentEditableHelper {
             selection.removeAllRanges();
             selection.addRange(range);
         }
-        if (start == end && start === 0) {
+        if (start === end && start === 0) {
             range.setStart(this.el, 0);
             range.setEnd(this.el, 0);
         }
@@ -23486,7 +23683,7 @@ class ContentEditableHelper {
                 }, 0);
             }
         }
-        if (nodeToFind.nodeName === "P" && !isFirstParagraph && nodeToFind.textContent == "") {
+        if (nodeToFind.nodeName === "P" && !isFirstParagraph && nodeToFind.textContent === "") {
             usedCharacters++;
         }
         return usedCharacters;
@@ -25033,6 +25230,14 @@ function useInterval(callback, delay) {
     };
 }
 
+const CURSOR_SVG = /*xml*/ `
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="16"><path d="M6.5.4c1.3-.8 2.9-.1 3.8 1.4l2.9 5.1c.2.4.9 1.6-.4 2.3l-1.6.9 1.8 3.1c.2.4.1 1-.2 1.2l-1.6 1c-.3.1-.9 0-1.1-.4l-1.8-3.1-1.6 1c-.6.4-1.7 0-2.2-.8L0 4.3"/><path fill="#fff" d="M9.1 2a1.4 1.1 60 0 0-1.7-.6L5.5 2.5l.9 1.6-1 .6-.9-1.6-.6.4 1.8 3.1-1.3.7-1.8-3.1-1 .6 3.8 6.6 6.8-3.98M3.9 8.8 10.82 5l.795 1.4-6.81 3.96"/></svg>
+`;
+css /* scss */ `
+  .o-paint-format-cursor {
+    cursor: url("data:image/svg+xml,${encodeURIComponent(CURSOR_SVG)}"), auto;
+  }
+`;
 function useCellHovered(env, gridRef, callback) {
     let hoveredPosition = {
         col: undefined,
@@ -25156,6 +25361,12 @@ class GridOverlay extends Component {
         }
         return this.gridOverlay.el;
     }
+    get style() {
+        return this.props.gridOverlayDimensions;
+    }
+    get isPaintingFormat() {
+        return this.env.model.getters.isPaintingFormat();
+    }
     onMouseDown(ev) {
         if (ev.button > 0) {
             // not main button, probably a context menu
@@ -26333,6 +26544,9 @@ class Grid extends Component {
             else if (this.menuState.isOpen) {
                 this.closeMenu();
             }
+            else if (this.env.model.getters.isPaintingFormat()) {
+                this.env.model.dispatch("CANCEL_PAINT_FORMAT");
+            }
             else {
                 this.env.model.dispatch("CLEAN_CLIPBOARD_HIGHLIGHT");
             }
@@ -27535,8 +27749,8 @@ function convertXlsxFormat(numFmtId, formats, warningManager) {
                 throw new Error("Multiple escaped blocks in format");
             }
             convertedFormat = convertedFormat.replace(/"(.*)"/g, "[$$$1]"); // replace '"..."' by '[$...]'
-            convertedFormat = convertedFormat.replace(/_.{1}/g, ""); // _ == ignore width of next char for align purposes. Not supported ATM
-            convertedFormat = convertedFormat.replace(/\*.{1}/g, ""); // * == repeat next character enough to fill the line. Not supported ATM
+            convertedFormat = convertedFormat.replace(/_.{1}/g, ""); // _ === ignore width of next char for align purposes. Not supported ATM
+            convertedFormat = convertedFormat.replace(/\*.{1}/g, ""); // * === repeat next character enough to fill the line. Not supported ATM
             convertedFormat = convertedFormat.replace(/\\ /g, " "); // unescape spaces
             convertedFormat = convertedFormat.replace(/\\./g, (match) => match[1]); // unescape other characters
             if (isXlsxDateFormat(convertedFormat)) {
@@ -28828,29 +29042,26 @@ function escapeXml(strings, ...expressions) {
     return new XMLString(concat(str));
 }
 /**
- * Removes the namespace of all the xml tags in the string.
+ * Removes the escaped namespace of all the xml tags in the string.
  *
- * Eg. : "ns:test a" => "test a"
+ * Eg. : "NAMESPACEnsNAMESPACEtest a" => "test a"
  */
-function removeNamespaces(query) {
-    return query.replace(/[a-z0-9]+:(?=[a-z0-9]+)/gi, "");
+function removeTagEscapedNamespaces(tag) {
+    return tag.replace(/NAMESPACE.*NAMESPACE(.*)/, "$1");
 }
 /**
- * Escape the namespace's colons of all the xml tags in the string.
+ * Encase the namespaces in the element's tags with NAMESPACE string
  *
- * Eg. : "ns:test a" => "ns\\:test a"
- */
-function escapeNamespaces(query) {
-    return query.replace(/([a-z0-9]+):(?=[a-z0-9]+)/gi, "$1\\:");
-}
-/**
- * Return true if the querySelector ignores the namespaces when searching for a tag in the DOM.
+ * e.g. <x:foo> becomes <NAMESPACExNAMESPACEFoo>
  *
- * Should return true if it's running on a browser, and false if it's running on jest (jsdom).
+ * That's useful because namespaces aren't supported by the HTML specification, so it's arbitrary whether a HTML parser/querySelector
+ * implementation will support namespaces in the tags or not.
  */
-function areNamespaceIgnoredByQuerySelector() {
-    const doc = new DOMParser().parseFromString("<t:test xmlns:t='a'/>", "text/xml");
-    return doc.querySelector("test") !== null;
+function escapeTagNamespaces(str) {
+    return str.replaceAll(/(<\/?)([a-zA-Z0-9]+):([a-zA-Z0-9]+)/g, "$1" + "NAMESPACE" + "$2" + "NAMESPACE" + "$3");
+}
+function escapeQueryNameSpaces(query) {
+    return query.replaceAll(/([a-zA-Z0-9]+):([a-zA-Z0-9]+)/g, "NAMESPACE" + "$1" + "NAMESPACE" + "$2");
 }
 
 class AttributeValue {
@@ -28880,14 +29091,20 @@ class XlsxBaseExtractor {
     // The xml file we are currently parsing. We should have one Extractor class by XLSXImportFile, but
     // the XLSXImportFile contains both the main .xml file, and the .rels file
     currentFile = undefined;
-    // If the parser querySelector() implementation ignores tag namespaces or not
-    areNamespaceIgnored;
+    /**
+     * /!\ Important : There should be no namespaces in the tags of the XML files.
+     *
+     * This class use native querySelector and querySelectorAll, that's used for HTML (not XML). These aren't supposed to
+     * handled namespaces, as they are not supported by the HTML specification. Some implementations (most browsers) do
+     * actually support namespaces, but some don't (e.g. jsdom).
+     *
+     * The namespace should be escaped as with NAMESPACE string (eg. <t:foo> => <NAMESPACEtNAMESPACEfoo>).
+     */
     constructor(rootFile, xlsxStructure, warningManager) {
         this.rootFile = rootFile;
         this.currentFile = rootFile.file.fileName;
         this.xlsxFileStructure = xlsxStructure;
         this.warningManager = warningManager;
-        this.areNamespaceIgnored = areNamespaceIgnoredByQuerySelector();
         this.relationships = {};
         if (rootFile.rels) {
             this.extractRelationships(rootFile.rels).map((rel) => {
@@ -29113,29 +29330,13 @@ class XlsxBaseExtractor {
             throw new Error("Cannot find target file");
         return f;
     }
-    /**
-     * Wrapper of querySelector, but we'll remove the namespaces from the query if areNamespacesIgnored is true.
-     *
-     * Why we need to do this :
-     *  - For an XML "<t:test />"
-     *  - on Jest(jsdom) : xml.querySelector("test") == null, xml.querySelector("t\\:test") == <t:test />
-     *  - on Browser : xml.querySelector("test") == <t:test />, xml.querySelector("t\\:test") == null
-     */
     querySelector(element, query) {
-        query = this.areNamespaceIgnored ? removeNamespaces(query) : escapeNamespaces(query);
-        return element.querySelector(query);
+        const escapedQuery = escapeQueryNameSpaces(query);
+        return element.querySelector(escapedQuery);
     }
-    /**
-     * Wrapper of querySelectorAll, but we'll remove the namespaces from the query if areNamespacesIgnored is true.
-     *
-     * Why we need to do this :
-     *  - For an XML "<t:test />"
-     *  - on Jest(jsdom) : xml.querySelectorAll("test") == [], xml.querySelectorAll("t\\:test") == [<t:test />]
-     *  - on Browser : xml.querySelectorAll("test") == [<t:test />], xml.querySelectorAll("t\\:test") == []
-     */
     querySelectorAll(element, query) {
-        query = this.areNamespaceIgnored ? removeNamespaces(query) : escapeNamespaces(query);
-        return element.querySelectorAll(query);
+        const escapedQuery = escapeQueryNameSpaces(query);
+        return element.querySelectorAll(escapedQuery);
     }
     /**
      * Get a color from its id in the Theme's colorScheme.
@@ -29375,7 +29576,7 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             throw new Error("Missing plot area in the chart definition.");
         }
         for (let child of plotAreaElement.children) {
-            const tag = removeNamespaces(child.tagName);
+            const tag = removeTagEscapedNamespaces(child.tagName);
             if (XLSX_CHART_TYPES.some((chartType) => chartType === tag)) {
                 return tag;
             }
@@ -29387,7 +29588,7 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
 class XlsxFigureExtractor extends XlsxBaseExtractor {
     extractFigures() {
         return this.mapOnElements({ parent: this.rootFile.file.xml, query: "xdr:wsDr", children: true }, (figureElement) => {
-            const anchorType = removeNamespaces(figureElement.tagName);
+            const anchorType = removeTagEscapedNamespaces(figureElement.tagName);
             if (anchorType !== "twoCellAnchor") {
                 throw new Error("Only twoCellAnchor are supported for xlsx drawings.");
             }
@@ -30021,7 +30222,8 @@ class XlsxReader {
         for (let key of Object.keys(files)) {
             // Random files can be in xlsx (like a bin file for printer settings)
             if (key.endsWith(".xml") || key.endsWith(".rels")) {
-                this.xmls[key] = parseXML(new XMLString(files[key]));
+                const contentString = escapeTagNamespaces(files[key]);
+                this.xmls[key] = parseXML(new XMLString(contentString));
             }
             else if (key.includes("media/image")) {
                 this.images.push({
@@ -31088,7 +31290,7 @@ class BordersPlugin extends CorePlugin {
     }
     /**
      * Set the borders of a cell.
-     * It overrides the current border if override == true.
+     * It overrides the current border if override === true.
      */
     setBorder(sheetId, col, row, border, override = true) {
         if (override || !this.borders?.[sheetId]?.[col]?.[row]?.vertical) {
@@ -32358,7 +32560,9 @@ class FigurePlugin extends CorePlugin {
         const numHeader = this.getters.getNumberRows(sheetId);
         let gridHeight = 0;
         for (let i = 0; i < numHeader; i++) {
-            gridHeight += this.getters.getRowSize(sheetId, i);
+            // TODO : since the row size is an UI value now, this doesn't work anymore. Using the default cell height is
+            // a temporary solution at best, but is broken.
+            gridHeight += this.getters.getUserRowSize(sheetId, i) || DEFAULT_CELL_HEIGHT;
         }
         const figures = this.getters.getFigures(sheetId);
         for (const figure of figures) {
@@ -32784,33 +32988,15 @@ class FiltersPlugin extends CorePlugin {
 }
 
 class HeaderSizePlugin extends CorePlugin {
-    static getters = ["getRowSize", "getColSize"];
+    static getters = ["getUserRowSize", "getColSize"];
     sizes = {};
     handle(cmd) {
         switch (cmd.type) {
             case "CREATE_SHEET": {
-                const computedSizes = this.computeSheetSizes(cmd.sheetId);
-                const sizes = {
-                    COL: computedSizes.COL.map((size) => ({
-                        manualSize: undefined,
-                        computedSize: lazy(size),
-                    })),
-                    ROW: computedSizes.ROW.map((size) => ({
-                        manualSize: undefined,
-                        computedSize: lazy(size),
-                    })),
-                };
-                this.history.update("sizes", cmd.sheetId, sizes);
+                this.history.update("sizes", cmd.sheetId, { COL: [], ROW: [] });
                 break;
             }
             case "DUPLICATE_SHEET":
-                // make sure the values are computed in case the original sheet is deleted
-                for (const row of this.sizes[cmd.sheetId].ROW) {
-                    row.computedSize();
-                }
-                for (const col of this.sizes[cmd.sheetId].COL) {
-                    col.computedSize();
-                }
                 this.history.update("sizes", cmd.sheetIdTo, deepCopy(this.sizes[cmd.sheetId]));
                 break;
             case "DELETE_SHEET":
@@ -32819,21 +33005,8 @@ class HeaderSizePlugin extends CorePlugin {
                 this.history.update("sizes", sizes);
                 break;
             case "REMOVE_COLUMNS_ROWS": {
-                let sizes = [...this.sizes[cmd.sheetId][cmd.dimension]];
-                for (let headerIndex of [...cmd.elements].sort((a, b) => b - a)) {
-                    sizes.splice(headerIndex, 1);
-                }
-                const min = Math.min(...cmd.elements);
-                sizes = sizes.map((size, row) => {
-                    if (cmd.dimension === "ROW" && row >= min) {
-                        // invalidate sizes
-                        return {
-                            manualSize: size.manualSize,
-                            computedSize: lazy(() => this.getRowTallestCellSize(cmd.sheetId, row)),
-                        };
-                    }
-                    return size;
-                });
+                const arr = this.sizes[cmd.sheetId][cmd.dimension];
+                const sizes = removeIndexesFromArray(arr, cmd.elements);
                 this.history.update("sizes", cmd.sheetId, cmd.dimension, sizes);
                 break;
             }
@@ -32842,51 +33015,18 @@ class HeaderSizePlugin extends CorePlugin {
                 const addIndex = getAddHeaderStartIndex(cmd.position, cmd.base);
                 const baseSize = sizes[cmd.base];
                 sizes.splice(addIndex, 0, ...Array(cmd.quantity).fill(baseSize));
-                sizes = sizes.map((size, row) => {
-                    if (cmd.dimension === "ROW" && row > cmd.base + cmd.quantity) {
-                        // invalidate sizes
-                        return {
-                            manualSize: size.manualSize,
-                            computedSize: lazy(() => this.getRowTallestCellSize(cmd.sheetId, row)),
-                        };
-                    }
-                    return size;
-                });
                 this.history.update("sizes", cmd.sheetId, cmd.dimension, sizes);
                 break;
             }
             case "RESIZE_COLUMNS_ROWS":
-                for (let el of cmd.elements) {
-                    if (cmd.dimension === "ROW") {
-                        const height = this.getRowTallestCellSize(cmd.sheetId, el);
-                        const size = height;
-                        this.history.update("sizes", cmd.sheetId, cmd.dimension, el, {
-                            manualSize: cmd.size || undefined,
-                            computedSize: lazy(size),
-                        });
-                    }
-                    else {
-                        this.history.update("sizes", cmd.sheetId, cmd.dimension, el, {
-                            manualSize: cmd.size || undefined,
-                            computedSize: lazy(cmd.size || DEFAULT_CELL_WIDTH),
-                        });
+                if (cmd.dimension === "ROW") {
+                    for (const el of cmd.elements) {
+                        this.history.update("sizes", cmd.sheetId, cmd.dimension, el, cmd.size || undefined);
                     }
                 }
-                break;
-            case "UPDATE_CELL":
-                if (!this.sizes[cmd.sheetId]?.["ROW"]?.[cmd.row]?.manualSize) {
-                    const { sheetId, row } = cmd;
-                    this.history.update("sizes", sheetId, "ROW", row, "computedSize", lazy(() => this.getRowTallestCellSize(sheetId, row)));
-                }
-                break;
-            case "ADD_MERGE":
-            case "REMOVE_MERGE":
-                for (let target of cmd.target) {
-                    for (let row of range(target.top, target.bottom + 1)) {
-                        const rowHeight = this.getRowTallestCellSize(cmd.sheetId, row);
-                        if (rowHeight !== this.getRowSize(cmd.sheetId, row)) {
-                            this.history.update("sizes", cmd.sheetId, "ROW", row, "computedSize", lazy(rowHeight));
-                        }
+                else {
+                    for (const el of cmd.elements) {
+                        this.history.update("sizes", cmd.sheetId, cmd.dimension, el, cmd.size || undefined);
                     }
                 }
                 break;
@@ -32894,94 +33034,29 @@ class HeaderSizePlugin extends CorePlugin {
         return;
     }
     getColSize(sheetId, index) {
-        return this.getHeaderSize(sheetId, "COL", index);
-    }
-    getRowSize(sheetId, index) {
-        return this.getHeaderSize(sheetId, "ROW", index);
-    }
-    getHeaderSize(sheetId, dimension, index) {
-        return Math.round(this.sizes[sheetId]?.[dimension][index]?.manualSize ||
-            this.sizes[sheetId]?.[dimension][index]?.computedSize() ||
-            this.getDefaultHeaderSize(dimension));
-    }
-    computeSheetSizes(sheetId) {
-        const sizes = { COL: [], ROW: [] };
-        for (let col of range(0, this.getters.getNumberCols(sheetId))) {
-            sizes.COL.push(this.getHeaderSize(sheetId, "COL", col));
-        }
-        for (let row of range(0, this.getters.getNumberRows(sheetId))) {
-            let rowSize = this.sizes[sheetId]?.["ROW"]?.[row].manualSize;
-            if (!rowSize) {
-                const height = this.getRowTallestCellSize(sheetId, row);
-                rowSize = height;
-            }
-            sizes.ROW.push(rowSize);
-        }
-        return sizes;
+        return Math.round(this.sizes[sheetId]?.["COL"][index] || DEFAULT_CELL_WIDTH);
     }
-    getDefaultHeaderSize(dimension) {
-        return dimension === "COL" ? DEFAULT_CELL_WIDTH : DEFAULT_CELL_HEIGHT;
-    }
-    /**
-     * Return the height the cell should have in the sheet, which is either DEFAULT_CELL_HEIGHT if the cell is in a multi-row
-     * merge, or the height of the cell computed based on its font size.
-     */
-    getCellHeight(position) {
-        const merge = this.getters.getMerge(position);
-        if (merge && merge.bottom !== merge.top) {
-            return DEFAULT_CELL_HEIGHT;
-        }
-        const cell = this.getters.getCell(position);
-        return getDefaultCellHeight(cell);
-    }
-    /**
-     * Get the tallest cell of a row and its size.
-     *
-     * The tallest cell of the row correspond to the cell with the biggest font size,
-     * and that is not part of a multi-line merge.
-     */
-    getRowTallestCellSize(sheetId, row) {
-        const cellIds = this.getters.getRowCells(sheetId, row);
-        let maxHeight = 0;
-        for (let i = 0; i < cellIds.length; i++) {
-            const cell = this.getters.getCellById(cellIds[i]);
-            if (!cell)
-                continue;
-            const position = this.getters.getCellPosition(cell.id);
-            const cellHeight = this.getCellHeight(position);
-            if (cellHeight > maxHeight && cellHeight > DEFAULT_CELL_HEIGHT) {
-                maxHeight = cellHeight;
-            }
-        }
-        if (maxHeight <= DEFAULT_CELL_HEIGHT) {
-            return DEFAULT_CELL_HEIGHT;
-        }
-        return maxHeight;
+    getUserRowSize(sheetId, index) {
+        const rowSize = this.sizes[sheetId]?.["ROW"][index];
+        return rowSize ? Math.round(rowSize) : undefined;
     }
     import(data) {
         for (let sheet of data.sheets) {
-            const manualSizes = { COL: [], ROW: [] };
+            const sizes = {
+                COL: Array(sheet.colNumber).fill(undefined),
+                ROW: Array(sheet.rowNumber).fill(undefined),
+            };
             for (let [rowIndex, row] of Object.entries(sheet.rows)) {
                 if (row.size) {
-                    manualSizes["ROW"][rowIndex] = row.size;
+                    sizes["ROW"][rowIndex] = row.size;
                 }
             }
             for (let [colIndex, col] of Object.entries(sheet.cols)) {
                 if (col.size) {
-                    manualSizes["COL"][colIndex] = col.size;
-                }
-            }
-            const computedSizes = this.computeSheetSizes(sheet.id);
-            this.sizes[sheet.id] = {
-                COL: computedSizes.COL.map((size, i) => ({
-                    manualSize: manualSizes.COL[i],
-                    computedSize: lazy(size),
-                })),
-                ROW: computedSizes.ROW.map((size, i) => ({
-                    manualSize: manualSizes.ROW[i],
-                    computedSize: lazy(size),
-                })),
-            };
+                    sizes["COL"][colIndex] = col.size;
+                }
+            }
+            this.sizes[sheet.id] = sizes;
         }
         return;
     }
@@ -33002,9 +33077,12 @@ class HeaderSizePlugin extends CorePlugin {
             if (sheet.rows === undefined) {
                 sheet.rows = {};
             }
-            for (let row of range(0, this.getters.getNumberRows(sheet.id))) {
-                if (exportDefaults || this.sizes[sheet.id]["ROW"][row]?.manualSize) {
-                    sheet.rows[row] = { ...sheet.rows[row], size: this.getRowSize(sheet.id, row) };
+            for (const row of range(0, this.getters.getNumberRows(sheet.id))) {
+                if (exportDefaults || this.sizes[sheet.id]["ROW"][row]) {
+                    sheet.rows[row] = {
+                        ...sheet.rows[row],
+                        size: this.getUserRowSize(sheet.id, row) ?? DEFAULT_CELL_HEIGHT,
+                    };
                 }
             }
             // Export col sizes
@@ -33012,7 +33090,7 @@ class HeaderSizePlugin extends CorePlugin {
                 sheet.cols = {};
             }
             for (let col of range(0, this.getters.getNumberCols(sheet.id))) {
-                if (exportDefaults || this.sizes[sheet.id]["COL"][col]?.manualSize) {
+                if (exportDefaults || this.sizes[sheet.id]["COL"][col]) {
                     sheet.cols[col] = { ...sheet.cols[col], size: this.getColSize(sheet.id, col) };
                 }
             }
@@ -36568,7 +36646,7 @@ class EvaluationConditionalFormatPlugin extends UIPlugin {
                 case "ContainsText":
                     return cell.value.toString().indexOf(values[0].toString()) > -1;
                 case "NotContains":
-                    return !cell.value || cell.value.toString().indexOf(values[0].toString()) == -1;
+                    return !cell.value || cell.value.toString().indexOf(values[0].toString()) === -1;
                 case "GreaterThan":
                     return cell.value > values[0];
                 case "GreaterThanOrEqual":
@@ -36595,6 +36673,156 @@ class EvaluationConditionalFormatPlugin extends UIPlugin {
     };
 }
 
+class UIRowSizePlugin extends UIPlugin {
+    static getters = ["getRowSize"];
+    tallestCellInRow = {};
+    ctx = document.createElement("canvas").getContext("2d");
+    handle(cmd) {
+        switch (cmd.type) {
+            case "START":
+                for (const sheetId of this.getters.getSheetIds()) {
+                    this.initializeSheet(sheetId);
+                }
+                break;
+            case "CREATE_SHEET": {
+                this.initializeSheet(cmd.sheetId);
+                break;
+            }
+            case "DUPLICATE_SHEET": {
+                const tallestCells = deepCopy(this.tallestCellInRow[cmd.sheetId]);
+                this.history.update("tallestCellInRow", cmd.sheetIdTo, tallestCells);
+                break;
+            }
+            case "DELETE_SHEET":
+                const tallestCells = { ...this.tallestCellInRow };
+                delete tallestCells[cmd.sheetId];
+                this.history.update("tallestCellInRow", tallestCells);
+                break;
+            case "REMOVE_COLUMNS_ROWS": {
+                if (cmd.dimension === "COL") {
+                    return;
+                }
+                const tallestCells = removeIndexesFromArray(this.tallestCellInRow[cmd.sheetId], cmd.elements);
+                this.history.update("tallestCellInRow", cmd.sheetId, tallestCells);
+                break;
+            }
+            case "ADD_COLUMNS_ROWS": {
+                if (cmd.dimension === "COL") {
+                    return;
+                }
+                const addIndex = getAddHeaderStartIndex(cmd.position, cmd.base);
+                const newCells = Array(cmd.quantity).fill(undefined);
+                const newTallestCells = insertItemsAtIndex(this.tallestCellInRow[cmd.sheetId], newCells, addIndex);
+                this.history.update("tallestCellInRow", cmd.sheetId, newTallestCells);
+                break;
+            }
+            case "RESIZE_COLUMNS_ROWS":
+                {
+                    const sheetId = cmd.sheetId;
+                    if (cmd.dimension === "ROW") {
+                        for (const row of cmd.elements) {
+                            const tallestCell = this.getRowTallestCell(sheetId, row);
+                            this.history.update("tallestCellInRow", sheetId, row, tallestCell);
+                        }
+                    }
+                    else {
+                        // Recompute row heights on col size change, they might have changed because of wrapped text
+                        for (const row of range(0, this.getters.getNumberRows(sheetId))) {
+                            for (const col of cmd.elements) {
+                                this.updateRowSizeForCellChange(sheetId, row, col);
+                            }
+                        }
+                    }
+                }
+                break;
+            case "UPDATE_CELL":
+                this.updateRowSizeForCellChange(cmd.sheetId, cmd.row, cmd.col);
+                break;
+            case "ADD_MERGE":
+            case "REMOVE_MERGE":
+                for (const target of cmd.target) {
+                    for (const position of positions(target)) {
+                        this.updateRowSizeForCellChange(cmd.sheetId, position.row, position.col);
+                    }
+                }
+        }
+        return;
+    }
+    getRowSize(sheetId, row) {
+        return Math.round(this.getters.getUserRowSize(sheetId, row) ??
+            this.tallestCellInRow[sheetId][row]?.size ??
+            DEFAULT_CELL_HEIGHT);
+    }
+    updateRowSizeForCellChange(sheetId, row, col) {
+        const tallestCellInRow = this.tallestCellInRow[sheetId]?.[row];
+        if (tallestCellInRow?.cell.col === col) {
+            const newTallestCell = this.getRowTallestCell(sheetId, row);
+            this.history.update("tallestCellInRow", sheetId, row, newTallestCell);
+        }
+        const updatedCellHeight = this.getCellHeight({ sheetId, col, row });
+        if (updatedCellHeight <= DEFAULT_CELL_HEIGHT) {
+            return;
+        }
+        if ((!tallestCellInRow && updatedCellHeight > DEFAULT_CELL_HEIGHT) ||
+            (tallestCellInRow && updatedCellHeight > tallestCellInRow.size)) {
+            const newTallestCell = { cell: { sheetId, col, row }, size: updatedCellHeight };
+            this.history.update("tallestCellInRow", sheetId, row, newTallestCell);
+        }
+    }
+    initializeSheet(sheetId) {
+        const tallestCells = [];
+        for (let row = 0; row < this.getters.getNumberRows(sheetId); row++) {
+            const tallestCell = this.getRowTallestCell(sheetId, row);
+            tallestCells.push(tallestCell);
+        }
+        this.history.update("tallestCellInRow", sheetId, tallestCells);
+    }
+    /**
+     * Return the height the cell should have in the sheet, which is either DEFAULT_CELL_HEIGHT if the cell is in a multi-row
+     * merge, or the height of the cell computed based on its style/content.
+     */
+    getCellHeight(position) {
+        if (this.isInMultiRowMerge(position)) {
+            return DEFAULT_CELL_HEIGHT;
+        }
+        const cell = this.getters.getCell(position);
+        const colSize = this.getters.getColSize(position.sheetId, position.col);
+        return getDefaultCellHeight(this.ctx, cell, colSize);
+    }
+    isInMultiRowMerge(position) {
+        const merge = this.getters.getMerge(position);
+        return !!merge && merge.bottom !== merge.top;
+    }
+    /**
+     * Get the tallest cell of a row and its size.
+     */
+    getRowTallestCell(sheetId, row) {
+        const userRowSize = this.getters.getUserRowSize(sheetId, row);
+        if (userRowSize !== undefined) {
+            return undefined;
+        }
+        const cellIds = this.getters.getRowCells(sheetId, row);
+        let maxHeight = 0;
+        let tallestCell = undefined;
+        for (let i = 0; i < cellIds.length; i++) {
+            const cell = this.getters.getCellById(cellIds[i]);
+            if (!cell) {
+                continue;
+            }
+            const position = this.getters.getCellPosition(cell.id);
+            const cellHeight = this.getCellHeight(position);
+            if (cellHeight > maxHeight && cellHeight > DEFAULT_CELL_HEIGHT) {
+                maxHeight = cellHeight;
+                tallestCell = { cell: position, size: cellHeight };
+            }
+        }
+        if (tallestCell && tallestCell.size > DEFAULT_CELL_HEIGHT) {
+            return tallestCell;
+        }
+        return undefined;
+    }
+}
+
 /**
  * This plugin manage the autofill.
  *
@@ -38296,6 +38524,7 @@ class FindAndReplacePlugin extends UIPlugin {
         searchFormulas: false,
     };
     toSearch = "";
+    isSearchDirty = false;
     // ---------------------------------------------------------------------------
     // Command Handling
     // ---------------------------------------------------------------------------
@@ -38323,14 +38552,21 @@ class FindAndReplacePlugin extends UIPlugin {
             case "REDO":
             case "REMOVE_COLUMNS_ROWS":
             case "ADD_COLUMNS_ROWS":
-                this.clearSearch();
+            case "EVALUATE_CELLS":
+            case "UPDATE_CELL":
+                this.isSearchDirty = true;
                 break;
             case "ACTIVATE_SHEET":
-            case "REFRESH_SEARCH":
                 this.refreshSearch();
                 break;
         }
     }
+    finalize() {
+        if (this.isSearchDirty) {
+            this.refreshSearch();
+            this.isSearchDirty = false;
+        }
+    }
     // ---------------------------------------------------------------------------
     // Getters
     // ---------------------------------------------------------------------------
@@ -38386,6 +38622,11 @@ class FindAndReplacePlugin extends UIPlugin {
         if (this.toSearch) {
             for (const cell of Object.values(cells)) {
                 const { col, row } = this.getters.getCellPosition(cell.id);
+                const isColHidden = this.getters.isColHidden(sheetId, col);
+                const isRowHidden = this.getters.isRowHidden(sheetId, row);
+                if (isColHidden || isRowHidden) {
+                    continue;
+                }
                 if (cell &&
                     this.currentSearchRegex &&
                     this.currentSearchRegex.test(this.getSearchableString({ sheetId, col, row }))) {
@@ -40028,10 +40269,8 @@ class SortPlugin extends UIPlugin {
                 }
                 updateCellCommands.push(newCellValues);
             }
-            for (const cmd of updateCellCommands) {
-                this.dispatch("UPDATE_CELL", cmd);
-            }
         }
+        updateCellCommands.forEach((cmdPayload) => this.dispatch("UPDATE_CELL", cmdPayload));
     }
     /**
      * Return the distances between main merge cells in the zone.
@@ -40132,24 +40371,28 @@ class SheetUIPlugin extends UIPlugin {
     // Getters
     // ---------------------------------------------------------------------------
     getCellWidth(position) {
-        const text = this.getCellText(position);
         const style = this.getters.getCellComputedStyle(position);
-        const multiLineText = text.split(NEWLINE);
-        let contentWidth = Math.max(...multiLineText.map((line) => this.getTextWidth(line, style)));
+        let contentWidth = 0;
+        const content = this.getters.getEvaluatedCell(position).formattedValue;
+        if (content) {
+            const multiLineText = splitTextToWidth(this.ctx, content, style, undefined);
+            contentWidth += Math.max(...multiLineText.map((line) => computeTextWidth(this.ctx, line, style)));
+        }
         const icon = this.getters.getConditionalIcon(position);
         if (icon) {
-            contentWidth += computeIconWidth(this.getters.getCellStyle(position));
+            contentWidth += computeIconWidth(style);
         }
         const isFilterHeader = this.getters.isFilterHeader(position);
         if (isFilterHeader) {
             contentWidth += ICON_EDGE_LENGTH + FILTER_ICON_MARGIN;
         }
-        if (contentWidth > 0) {
-            contentWidth += 2 * PADDING_AUTORESIZE_HORIZONTAL;
-            if (this.getters.getCellStyle(position).wrapping === "wrap") {
-                const colWidth = this.getters.getColSize(this.getters.getActiveSheetId(), position.col);
-                return Math.min(colWidth, contentWidth);
-            }
+        if (contentWidth === 0) {
+            return 0;
+        }
+        contentWidth += 2 * PADDING_AUTORESIZE_HORIZONTAL;
+        if (style.wrapping === "wrap") {
+            const colWidth = this.getters.getColSize(this.getters.getActiveSheetId(), position.col);
+            return Math.min(colWidth, contentWidth);
         }
         return contentWidth;
     }
@@ -40172,56 +40415,7 @@ class SheetUIPlugin extends UIPlugin {
     getCellMultiLineText(position, width) {
         const style = this.getters.getCellStyle(position);
         const text = this.getters.getCellText(position, this.getters.shouldShowFormulas());
-        const brokenText = [];
-        for (const line of text.split("\n")) {
-            const words = line.split(" ");
-            if (!width) {
-                brokenText.push(line);
-                continue;
-            }
-            let textLine = "";
-            let availableWidth = width;
-            for (let word of words) {
-                const splitWord = this.splitWordToSpecificWidth(this.ctx, word, width, style);
-                const lastPart = splitWord.pop();
-                const lastPartWidth = computeTextWidth(this.ctx, lastPart, style);
-                // At this step: "splitWord" is an array composed of parts of word whose
-                // length is at most equal to "width".
-                // Last part contains the end of the word.
-                // Note that: When word length is less than width, then lastPart is equal
-                // to word and splitWord is empty
-                if (splitWord.length) {
-                    if (textLine !== "") {
-                        brokenText.push(textLine);
-                        textLine = "";
-                        availableWidth = width;
-                    }
-                    splitWord.forEach((wordPart) => {
-                        brokenText.push(wordPart);
-                    });
-                    textLine = lastPart;
-                    availableWidth = width - lastPartWidth;
-                }
-                else {
-                    // here "lastPart" is equal to "word" and the "word" size is smaller than "width"
-                    const _word = textLine === "" ? lastPart : " " + lastPart;
-                    const wordWidth = computeTextWidth(this.ctx, _word, style);
-                    if (wordWidth <= availableWidth) {
-                        textLine += _word;
-                        availableWidth -= wordWidth;
-                    }
-                    else {
-                        brokenText.push(textLine);
-                        textLine = lastPart;
-                        availableWidth = width - lastPartWidth;
-                    }
-                }
-            }
-            if (textLine !== "") {
-                brokenText.push(textLine);
-            }
-        }
-        return brokenText;
+        return splitTextToWidth(this.ctx, text, style, width);
     }
     /**
      * Returns the size, start and end coordinates of a column on an unfolded sheet
@@ -40280,26 +40474,6 @@ class SheetUIPlugin extends UIPlugin {
         const sizes = cellsPositions.map((position) => this.getCellWidth({ sheetId, ...position }));
         return Math.max(0, ...sizes);
     }
-    splitWordToSpecificWidth(ctx, word, width, style) {
-        const wordWidth = computeTextWidth(ctx, word, style);
-        if (wordWidth <= width) {
-            return [word];
-        }
-        const splitWord = [];
-        let wordPart = "";
-        for (let l of word) {
-            const wordPartWidth = computeTextWidth(ctx, wordPart + l, style);
-            if (wordPartWidth > width) {
-                splitWord.push(wordPart);
-                wordPart = l;
-            }
-            else {
-                wordPart += l;
-            }
-        }
-        splitWord.push(wordPart);
-        return splitWord;
-    }
     /**
      * Check that any "sheetId" in the command matches an existing
      * sheet.
@@ -41291,7 +41465,7 @@ class ClipboardCellsState extends ClipboardCellsAbstractState {
             .join("\n") || "\t");
     }
     getHTMLContent() {
-        if (this.cells.length == 1 && this.cells[0].length == 1) {
+        if (this.cells.length === 1 && this.cells[0].length === 1) {
             return this.getters.getCellText(this.cells[0][0].position);
         }
         let htmlTable = '<table border="1" style="border-collapse:collapse">';
@@ -41616,7 +41790,7 @@ class ClipboardPlugin extends UIPlugin {
     status = "invisible";
     state;
     lastPasteState;
-    _isPaintingFormat = false;
+    paintFormatStatus = "inactive";
     originSheetId;
     // ---------------------------------------------------------------------------
     // Command Handling
@@ -41631,7 +41805,7 @@ class ClipboardPlugin extends UIPlugin {
                 if (!this.state) {
                     return 24 /* CommandResult.EmptyClipboard */;
                 }
-                const pasteOption = cmd.pasteOption || (this._isPaintingFormat ? "onlyFormat" : undefined);
+                const pasteOption = cmd.pasteOption || (this.paintFormatStatus !== "inactive" ? "onlyFormat" : undefined);
                 return this.state.isPasteAllowed(cmd.target, { pasteOption });
             case "PASTE_FROM_OS_CLIPBOARD": {
                 const state = new ClipboardOsState(cmd.text, this.getters, this.dispatch, this.selection);
@@ -41647,6 +41821,11 @@ class ClipboardPlugin extends UIPlugin {
                 const state = this.getClipboardStateForCopyCells(cut, "CUT");
                 return state.isPasteAllowed(paste);
             }
+            case "ACTIVATE_PAINT_FORMAT": {
+                if (this.paintFormatStatus !== "inactive") {
+                    return 95 /* CommandResult.AlreadyInPaintingFormatMode */;
+                }
+            }
         }
         return 0 /* CommandResult.Success */;
     }
@@ -41663,11 +41842,13 @@ class ClipboardPlugin extends UIPlugin {
                 if (!this.state) {
                     break;
                 }
-                const pasteOption = cmd.pasteOption || (this._isPaintingFormat ? "onlyFormat" : undefined);
-                this._isPaintingFormat = false;
+                const pasteOption = cmd.pasteOption || (this.paintFormatStatus !== "inactive" ? "onlyFormat" : undefined);
                 this.state.paste(cmd.target, { pasteOption, shouldPasteCF: true, selectTarget: true });
                 this.lastPasteState = this.state;
-                this.status = "invisible";
+                if (this.paintFormatStatus === "oneOff") {
+                    this.paintFormatStatus = "inactive";
+                    this.status = "invisible";
+                }
                 break;
             case "CLEAN_CLIPBOARD_HIGHLIGHT":
                 this.status = "invisible";
@@ -41735,8 +41916,13 @@ class ClipboardPlugin extends UIPlugin {
             case "ACTIVATE_PAINT_FORMAT": {
                 const zones = this.getters.getSelectedZones();
                 this.state = this.getClipboardStateForCopyCells(zones, "COPY");
-                this._isPaintingFormat = true;
                 this.status = "visible";
+                if (cmd.persistent) {
+                    this.paintFormatStatus = "persistent";
+                }
+                else {
+                    this.paintFormatStatus = "oneOff";
+                }
                 break;
             }
             case "DELETE_SHEET":
@@ -41748,6 +41934,11 @@ class ClipboardPlugin extends UIPlugin {
                     this.status = "invisible";
                 }
                 break;
+            case "CANCEL_PAINT_FORMAT": {
+                this.paintFormatStatus = "inactive";
+                this.status = "invisible";
+                break;
+            }
             default:
                 if (isCoreCommand(cmd)) {
                     this.status = "invisible";
@@ -41778,7 +41969,7 @@ class ClipboardPlugin extends UIPlugin {
         return this.state ? this.state.operation === "CUT" : false;
     }
     isPaintingFormat() {
-        return this._isPaintingFormat;
+        return this.paintFormatStatus !== "inactive";
     }
     // ---------------------------------------------------------------------------
     // Private methods
@@ -44413,6 +44604,7 @@ const coreViewsPluginRegistry = new Registry()
     .add("evaluation", EvaluationPlugin)
     .add("evaluation_chart", EvaluationChartPlugin)
     .add("evaluation_cf", EvaluationConditionalFormatPlugin)
+    .add("row_size", UIRowSizePlugin)
     .add("custom_colors", CustomColorsPlugin);
 
 const clickableCellRegistry = new Registry();
@@ -45535,6 +45727,11 @@ css /* scss */ `
     .o-sidePanelButton:enabled {
       cursor: pointer;
     }
+
+    .o-sidePanelButton:disabled {
+      color: ${DISABLED_TEXT_COLOR};
+    }
+
     .o-sidePanelButton:last-child {
       margin-right: 0px;
     }
@@ -45668,11 +45865,11 @@ class ActionButton extends Component {
     }
     get title() {
         const name = this.actionButton.name(this.env);
-        const description = this.actionButton.description;
+        const description = this.actionButton.description(this.env);
         return name + (description ? ` (${description})` : "");
     }
     get iconTitle() {
-        return this.actionButton.icon;
+        return this.actionButton.icon(this.env);
     }
     onClick(ev) {
         if (this.isEnabled) {
@@ -46057,6 +46254,27 @@ FontSizeEditor.props = {
     class: String,
 };
 
+class PaintFormatButton extends Component {
+    static template = "o-spreadsheet-PaintFormatButton";
+    get isActive() {
+        return this.env.model.getters.isPaintingFormat();
+    }
+    onDblClick() {
+        this.env.model.dispatch("ACTIVATE_PAINT_FORMAT", { persistent: true });
+    }
+    togglePaintFormat() {
+        if (this.isActive) {
+            this.env.model.dispatch("CANCEL_PAINT_FORMAT");
+        }
+        else {
+            this.env.model.dispatch("ACTIVATE_PAINT_FORMAT", { persistent: false });
+        }
+    }
+}
+PaintFormatButton.props = {
+    class: { type: String, optional: true },
+};
+
 // -----------------------------------------------------------------------------
 // TopBar
 // -----------------------------------------------------------------------------
@@ -46157,6 +46375,7 @@ class TopBar extends Component {
         TopBarComposer,
         FontSizeEditor,
         ActionButton,
+        PaintFormatButton,
         BorderEditorWidget,
     };
     state = useState({
@@ -48009,7 +48228,7 @@ class SelectionStreamProcessorImpl {
             : "nextCluster";
         while (true) {
             const nextCellPosition = this.getNextCellPosition(currentPosition, dim, dir);
-            // Break if nextPosition == currentPosition, which happens if there's no next valid position
+            // Break if nextPosition === currentPosition, which happens if there's no next valid position
             if (currentPosition.col === nextCellPosition.col &&
                 currentPosition.row === nextCellPosition.row) {
                 break;
@@ -49923,6 +50142,7 @@ class Model extends EventBus {
             ...config,
             mode: config.mode || "normal",
             custom: config.custom || {},
+            defaultCurrencyFormat: config.defaultCurrencyFormat || "[$$]#,##0.00",
             external: this.setupExternalConfig(config.external || {}),
             transportService,
             client,
@@ -50220,6 +50440,7 @@ const helpers = {
     numberToLetters,
     UuidGenerator,
     formatValue,
+    createCurrencyFormat,
     computeTextWidth,
     createEmptyWorkbookData,
     createEmptySheet,
@@ -50271,6 +50492,6 @@ const constants = {
 export { AbstractChart, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, compile, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, tokenize };
 
 
-__info__.version = '16.4.0-alpha.7';
-__info__.date = '2023-07-04T13:46:24.130Z';
-__info__.hash = 'b04cf78';
+__info__.version = '16.4.1';
+__info__.date = '2023-07-26T12:13:04.992Z';
+__info__.hash = 'e687fa9';