[IMP] composer: prettify formula when content is too long.

Prettify formula depending on the content width.

closes #6435

Task: 4735172
Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
Co-authored-by: lul-odoo <[email protected]>

Author: laa-odoo

src/components/composer/composer/abstract_composer_store.ts

@@ -539,11 +539,14 @@ export abstract class AbstractComposerStore extends SpreadsheetStore {
     if (isNewCurrentContent || this.editionMode !== "inactive") {
       const locale = this.getters.getLocale();
       this.currentTokens = isFormula(text) ? composerTokenize(text, locale) : [];
-      if (this.currentTokens.length > 100) {
+      const nonSpaceTokensCount = this.currentTokens.filter(
+        (token) => token.type !== "SPACE"
+      ).length;
+      if (nonSpaceTokensCount > 1000) {
         if (raise) {
           this.notificationStore.raiseError(
             _t(
-              "This formula has over 100 parts. It can't be processed properly, consider splitting it into multiple cells"
+              "This formula has over 1000 parts. It can't be processed properly, consider splitting it into multiple cells"
             )
           );
         }

src/components/composer/composer/cell_composer_store.ts

@@ -1,3 +1,5 @@
+import { prettify } from "../../../formulas/formula_formatter";
+import { parseTokens } from "../../../formulas/parser";
 import { isMultipleElementMatrix, toScalar } from "../../../functions/helper_matrices";
 import { parseLiteral } from "../../../helpers/cells";
 import {
@@ -202,7 +204,10 @@ export class CellComposerStore extends AbstractComposerStore {
     const locale = this.getters.getLocale();
     const cell = this.getters.getCell(position);
     if (cell?.isFormula) {
-      return localizeFormula(cell.content, locale);
+      const prettifiedContent = cell.compiledFormula.isBadExpression
+        ? cell.content
+        : prettify(parseTokens(cell.compiledFormula.tokens), 80);
+      return localizeFormula(prettifiedContent, locale);
     }
     const spreader = this.model.getters.getArrayFormulaSpreadingOn(position);
     if (spreader) {

src/components/composer/composer/composer.ts

@@ -61,6 +61,8 @@ css/* scss */ `
       padding-right: 3px;
       outline: none;
 
+      tab-size: 4;
+
       p {
         margin-bottom: 0px;
 

src/components/composer/top_bar_composer/top_bar_composer.ts

@@ -14,7 +14,7 @@ import { CellComposerStore } from "../composer/cell_composer_store";
 import { Composer } from "../composer/composer";
 import { ComposerFocusStore, ComposerInterface } from "../composer_focus_store";
 
-const COMPOSER_MAX_HEIGHT = 100;
+const COMPOSER_MAX_HEIGHT = 300;
 
 /* svg free of use from https://uxwing.com/formula-fx-icon/ */
 const FX_SVG = /*xml*/ `