@fw-components/formula-editor 2.0.7-formula-editor.34 → 2.0.7-formula-editor.36

package/dist/formula-editor/src/formula-editor.js

@@ -9,6 +9,7 @@ import { customElement, property, state, query } from "lit/decorators.js";
 import "./suggestion-menu.js";
 import { Parser } from "./utils/parser.js";
 import { FormulaEditorStyles } from "./styles/editor.js";
+import { getFormulaTokens } from "./utils/get-formula-tokens.js";
 let FormulaEditor = class FormulaEditor extends LitElement {
     constructor() {
         super(...arguments);
@@ -20,12 +21,13 @@ let FormulaEditor = class FormulaEditor extends LitElement {
          */
         this.content = "";
         this.placeholder = "Type your formula...";
+        this.recommendationLabels = new Map();
         this.variables = new Map();
         this.minSuggestionLen = 2;
         this.errorString = "";
-    }
-    firstUpdated(_changedProperties) {
-        this.editor.focus();
+        this.formulaRegex = /'[^']*'|[A-Za-z0-9_#@]+|[-+(),*^/\s]/g;
+        this.allowedNumbers = true;
+        this.allowedOperators = new Set(["^", "+", "-", "*", "/"]);
     }
     updated(_changedProperties) {
         if (_changedProperties.has("content")) {
@@ -35,7 +37,7 @@ let FormulaEditor = class FormulaEditor extends LitElement {
             this._adjustTextAreaHeight();
         }
         if (_changedProperties.has("variables")) {
-            this._parser = new Parser(this.variables, this.minSuggestionLen);
+            this._parser = new Parser(this.variables, this.formulaRegex, this.allowedNumbers, this.allowedOperators, this.minSuggestionLen);
             this.recommendations = Array.from(this.variables.keys());
         }
     }
@@ -87,6 +89,7 @@ let FormulaEditor = class FormulaEditor extends LitElement {
                 formulaString: this.content,
                 error: this.errorString,
                 recommendations: this.recommendations,
+                formulaTokens: getFormulaTokens(this.content || "", this.formulaRegex)
             },
             bubbles: true,
         }));
@@ -148,6 +151,7 @@ let FormulaEditor = class FormulaEditor extends LitElement {
             .recommendations=${this.recommendations}
             .currentSelection=${this._selectedRecommendation}
             .onRecommendationClick=${this.onRecommendationClick.bind(this)}
+            .recommendationLabels=${this.recommendationLabels}
           ></suggestion-menu>`
             : ''}
     `;
@@ -174,6 +178,9 @@ __decorate([
 __decorate([
     property()
 ], FormulaEditor.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "recommendationLabels", void 0);
 __decorate([
     property()
 ], FormulaEditor.prototype, "label", void 0);
@@ -186,6 +193,15 @@ __decorate([
 __decorate([
     property()
 ], FormulaEditor.prototype, "errorString", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "formulaRegex", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "allowedNumbers", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "allowedOperators", void 0);
 __decorate([
     query("#wysiwyg-editor")
 ], FormulaEditor.prototype, "editor", void 0);

package/dist/formula-editor/src/suggestion-menu.js

@@ -11,6 +11,7 @@ let SuggestionMenu = class SuggestionMenu extends LitElement {
     constructor() {
         super(...arguments);
         this.recommendations = [];
+        this.recommendationLabels = new Map();
         this.onRecommendationClick = () => { };
         this._selectedRecommendationIndex = -1;
     }
@@ -49,7 +50,7 @@ let SuggestionMenu = class SuggestionMenu extends LitElement {
         ${this.recommendations.map((recommendation, index) => html `<li
               class="${this._selectedRecommendationIndex === index ? "selected" : ""}"
               @click=${(e) => this.handleRecommendationSelect(index)}
-            >${recommendation}</li>`)}
+            >${this.recommendationLabels.get(recommendation) ?? recommendation}</li>`)}
       </ul>
     `;
     }
@@ -57,6 +58,9 @@ let SuggestionMenu = class SuggestionMenu extends LitElement {
 __decorate([
     property()
 ], SuggestionMenu.prototype, "recommendations", void 0);
+__decorate([
+    property()
+], SuggestionMenu.prototype, "recommendationLabels", void 0);
 __decorate([
     property()
 ], SuggestionMenu.prototype, "onRecommendationClick", void 0);

package/dist/formula-editor/src/utils/get-formula-tokens.js

@@ -0,0 +1,7 @@
+export function getFormulaTokens(formulaString, formulaRegex) {
+    if (!formulaString?.length)
+        return [];
+    if (!Boolean(formulaRegex))
+        return formulaString.split(/(\s+)/) || [];
+    return formulaString.match(formulaRegex) || [];
+}

package/dist/formula-editor/src/utils/parser.js

@@ -3,19 +3,23 @@ import { Recommender } from "./recommendor.js";
 import { Stack } from "./stack.js";
 import { Queue } from "./queue.js";
 import { Expectation } from "../types";
-import { mathematicalOperators, operatorPrecedence, unaryOperators } from "./constants.js";
+import { operatorPrecedence, unaryOperators } from "./constants.js";
+import { getFormulaTokens } from "./get-formula-tokens.js";
 export class Parser {
-    constructor(variables, minSuggestionLen) {
+    constructor(variables, formulaRegex, allowedNumbers, allowedOperators, minSuggestionLen) {
         this.variables = variables;
+        this.formulaRegex = formulaRegex;
         this._recommender = new Recommender(Array.from(this.variables.keys()), minSuggestionLen);
+        this.allowedNumbers = allowedNumbers;
+        this.allowedOperators = allowedOperators;
     }
-    getFormulaTokens(formulaString) {
-        if (!formulaString?.length)
-            return [];
-        return formulaString.match(/'[^']*'|[A-Za-z0-9_#@]+|[-+(),*^/\s]/g);
+    isNumber(value) {
+        if (!this.allowedNumbers || value.trim() === "")
+            return false;
+        return !Number.isNaN(Number(value));
     }
     parseInput(formula, prevCurPos = null, recommendation = null) {
-        const tokens = this.getFormulaTokens(formula);
+        const tokens = getFormulaTokens(formula, this.formulaRegex);
         const parentheses = new Stack();
         let expectation = Expectation.VARIABLE;
         let currentPosition = 0;
@@ -33,8 +37,8 @@ export class Parser {
             return parseOutput;
         }
         tokens?.forEach((token) => {
-            let isNumber = token.trim() !== "" && (this.variables.has(token) || !Number.isNaN(Number(token)));
-            const isOperator = mathematicalOperators.has(token);
+            let isNumber = this.variables.has(token) || this.isNumber(token);
+            const isOperator = this.allowedOperators.has(token);
             const isSpace = token.trim() === "";
             const isBracket = token === "(" || token === ")";
             if (isSpace) {
@@ -51,7 +55,7 @@ export class Parser {
             if (currentPosition <= prevCurPos && currentPosition + token.length >= prevCurPos) {
                 if (recommendation) {
                     isNumber = true;
-                    if (mathematicalOperators.has(token)) {
+                    if (this.allowedOperators.has(token)) {
                         const updatedTokenString = `${token} ${recommendation}`;
                         parseOutput.formattedString += updatedTokenString;
                         currentPosition += updatedTokenString.length;
@@ -72,7 +76,7 @@ export class Parser {
              * skip error check if there is one already
              */
             if (expectation != Expectation.UNDEFINED) {
-                if (mathematicalOperators.has(previousToken) && isOperator) {
+                if (this.allowedOperators.has(previousToken) && isOperator) {
                     parseOutput.errorString = `Multiple operators at position ${currentPosition}`;
                     expectation = Expectation.UNDEFINED;
                 }
@@ -85,7 +89,7 @@ export class Parser {
                  * No error for Unary `+` and `-` as they might represent a positive or negative number respectively
                  */
                 else if (expectation === Expectation.VARIABLE && !isNumber && !isSpace && token != "("
-                    && !((unaryOperators.includes(token)) && (!parsedString.trim() || previousToken === "(" || mathematicalOperators.has(previousToken)))) {
+                    && !((unaryOperators.includes(token)) && (!parsedString.trim() || previousToken === "(" || this.allowedOperators.has(previousToken)))) {
                     parseOutput.errorString = `Expected variable/number at position ${currentPosition}`;
                     expectation = Expectation.UNDEFINED;
                 }
@@ -143,10 +147,10 @@ export class Parser {
             parseOutput.formattedString += recommendation;
             previousToken = recommendation;
         }
-        if (mathematicalOperators.has(previousToken) || !previousToken.trim().length) {
+        if (this.allowedOperators.has(previousToken) || !previousToken.trim().length) {
             parseOutput.recommendations = !parseOutput.errorString?.length ? Array.from(this.variables.keys()) : [];
         }
-        if (mathematicalOperators.has(previousToken)) {
+        if (this.allowedOperators.has(previousToken)) {
             parseOutput.errorString = `Unexpected ending with mathematical operator at position: ${currentPosition}`;
         }
         if (!parentheses.isEmpty()) {
@@ -157,14 +161,14 @@ export class Parser {
     buildRPN(formula) {
         if (this.parseInput(formula).errorString)
             return null;
-        const tokens = this.getFormulaTokens(formula)?.filter((el) => !/\s+/.test(el) && el !== "");
+        const tokens = getFormulaTokens(formula, this.formulaRegex)?.filter((el) => !/\s+/.test(el) && el !== "");
         let previousToken = "";
         let carriedToken = null;
         const parsedTokens = [];
         let currentTokens = "";
         // Check if variables include unary operators `-` and `+`.
         for (const token of tokens) {
-            if ((unaryOperators.includes(token)) && (!currentTokens.trim() || previousToken === "(" || mathematicalOperators.has(previousToken))) {
+            if ((unaryOperators.includes(token)) && (!currentTokens.trim() || previousToken === "(" || this.allowedOperators.has(previousToken))) {
                 carriedToken = token;
             }
             else if (carriedToken) {
@@ -192,8 +196,8 @@ export class Parser {
                 }
                 operatorStack.pop();
             }
-            else if (mathematicalOperators.has(token)) {
-                while (mathematicalOperators.has(operatorStack.top()) && operatorPrecedence[token] <= operatorPrecedence[operatorStack.top()]) {
+            else if (this.allowedOperators.has(token)) {
+                while (this.allowedOperators.has(operatorStack.top()) && operatorPrecedence[token] <= operatorPrecedence[operatorStack.top()]) {
                     outputQueue.enqueue(operatorStack.pop());
                 }
                 operatorStack.push(token);
@@ -270,7 +274,7 @@ export class Parser {
         const calcStack = new Stack();
         while (!formulaRPN.isEmpty()) {
             const frontItem = formulaRPN.dequeue();
-            if (!mathematicalOperators.has(frontItem)) {
+            if (!this.allowedOperators.has(frontItem)) {
                 const [sign, variableKey] = /^[+-]/.test(frontItem) ? [frontItem[0], frontItem.slice(1)] : ["", frontItem];
                 const operandValue = Number.parseFloat(this.variables.get(variableKey)?.toString() ?? variableKey);
                 const number = Number.parseFloat(sign + "1") * operandValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fw-components/formula-editor",
-  "version": "2.0.7-formula-editor.34",
+  "version": "2.0.7-formula-editor.36",
   "description": "A WYSIWYG type formula editor",
   "main": "dist/formula-editor/src/formula-editor.js",
   "exports": {
@@ -31,5 +31,5 @@
     "@types/big.js": "^6.1.6",
     "es-dev-server": "^2.1.0"
   },
-  "gitHead": "bdf6225910be4141015192c528d44ea62ca2eecf"
+  "gitHead": "78fd3b78f8f72ac4ab0b4b7ec57848b2a78cccad"
 }