@fw-components/formula-editor 2.0.7-formula-editor-enhancements.11 → 2.0.7-formula-editor.21

package/dist/formula-editor/src/{parser.js → utils/parser.js}

@@ -1,195 +1,152 @@
 import Big from "big.js";
-import { Expectation, Queue, Stack } from "./helpers.js";
 import { Recommender } from "./recommendor.js";
+import { Stack } from "./stack.js";
+import { Queue } from "./queue.js";
+import { Expectation } from "../types";
+import { mathematicalOperators, operatorPrecedence } from "./constants.js";
 export class Parser {
     constructor(variables, minSuggestionLen) {
-        this.mathematicalOperators = new Set(["^", "+", "-", "*", "/"]);
-        this.operatorPrecedence = {
-            "^": 3,
-            "/": 2,
-            "*": 2,
-            "+": 1,
-            "-": 1,
-        };
         this.variables = variables;
-        this._recommender = new Recommender(this.variables, minSuggestionLen);
+        this._recommender = new Recommender(Array.from(this.variables.keys()), minSuggestionLen);
     }
     parseInput(formula, prevCurPos = null, recommendation = null) {
-        let tokens = formula.match(/'[^']*'|\d+|[A-Za-z_][A-Za-z0-9_]*|[-+(),*^/:?\s]/g);
-        // Stores the positions of opening parentheses. This allows us to
-        // show "Unclosed parenthesis error" for positions which are far behind
-        // our current token
-        let parentheses = new Stack();
-        // The HTML formatted string which we eventually show on the view.
-        let formattedString = ``;
-        // The expectation that we have for the current token.
+        const tokens = formula.match(/'[^']*'|\d+|[A-Za-z_][A-Za-z0-9_]*|[-+(),*^/:?\s]/g);
+        const parentheses = new Stack();
         let expectation = Expectation.VARIABLE;
-        // Position of the current token in the formula string.
         let currentPosition = 0;
-        // Previous 'token' (not a space or a new line) that we just encountered.
         let previousToken = "";
-        let currentTokens = "";
-        // The object that we return as the output of the parsing result.
-        let parseOutput = {
-            recommendations: null,
-            formattedContent: null,
-            formattedString: null,
+        let parsedString = "";
+        const parseOutput = {
+            recommendations: [],
+            formattedString: "",
             newCursorPosition: prevCurPos ?? -1,
             errorString: null,
         };
-        if (!formula.trim()) {
-            if (recommendation) {
-                formattedString = `${recommendation}`;
-                currentPosition += recommendation.length;
-                const parser = new DOMParser();
-                const doc = parser.parseFromString(formattedString, "text/html");
-                parseOutput.formattedContent = doc.querySelector("body");
-                parseOutput.formattedString = formattedString;
-                parseOutput.newCursorPosition = recommendation.length;
-                return parseOutput;
-            }
+        if (!formula.trim() && recommendation) {
+            parseOutput.formattedString = recommendation;
+            parseOutput.newCursorPosition = recommendation.length;
+            return parseOutput;
         }
         tokens?.forEach((token) => {
-            // It is a number is either it's in the defined variables, or
-            // it's a valid number literal.
             let isNumber = token.trim() !== "" && (this.variables.has(token) || !Number.isNaN(Number(token)));
-            let isOperator = this.mathematicalOperators.has(token);
-            let isSpace = token.trim() == "";
-            let isBracket = token == "(" || token == ")";
+            const isOperator = mathematicalOperators.has(token);
+            const isSpace = token.trim() === "";
+            const isBracket = token === "(" || token === ")";
             if (isSpace) {
-                formattedString = `${formattedString}${token}`;
+                parseOutput.formattedString += token;
                 currentPosition += token.length;
                 return;
             }
-            // If the cursor position is 'inside` the current token:
-            //
-            // 1. If we've got a recommendation to add, simply replace the
-            //    word with the recommendation.
-            // 2. Ask the recommendor to fetch recommendations for this specific
-            //    token/word.
+            /**
+             * Check if the cursor is in between the formula string
+             *
+             * - If we've got a recommendation to add, replace the word with the recommendation
+             * - Update recommendations based on the token/word
+             */
             if (currentPosition <= prevCurPos && currentPosition + token.length >= prevCurPos) {
                 if (recommendation) {
-                    // Since we are sure that the recommendation will always correspond
-                    // to a variable.
                     isNumber = true;
-                    if (this.mathematicalOperators.has(token)) {
-                        // append recommendation at the end if token is an operator
+                    if (mathematicalOperators.has(token)) {
                         const updatedTokenString = `${token} ${recommendation}`;
-                        formattedString += updatedTokenString;
+                        parseOutput.formattedString += updatedTokenString;
                         currentPosition += updatedTokenString.length;
                         parseOutput.newCursorPosition = currentPosition;
                         recommendation = null;
                         return;
                     }
                     ;
-                    // If the new cursor length somehow becomes larger than the
-                    // length of the formula string, setting the caret to that
-                    // length will move the caret to the start. Although this overflow
-                    // won't happen, but still, this check prevents that.
                     const updatedTokenLength = recommendation.length - token.length;
                     parseOutput.newCursorPosition = Math.min(parseOutput.newCursorPosition, formula.length) + updatedTokenLength;
                     token = recommendation;
                     recommendation = null;
                 }
-                parseOutput.recommendations = this._recommender.getRecommendation(token);
+                parseOutput.recommendations = this._recommender.getRecommendations(token);
             }
-            let tokenClassName = "";
-            // Don't check for errors if an error has already been encountered.
+            /**
+             * Error checks
+             * skip error check if there is one already
+             */
             if (expectation != Expectation.UNDEFINED) {
-                if (this.mathematicalOperators.has(previousToken) && isOperator) {
+                if (mathematicalOperators.has(previousToken) && isOperator) {
                     parseOutput.errorString = `Multiple operators at position ${currentPosition}`;
                     expectation = Expectation.UNDEFINED;
                 }
-                // Unnecessary closing parenthesis
-                else if (parentheses.isEmpty() && token == ")") {
+                else if (parentheses.isEmpty() && token === ")") {
                     parseOutput.errorString = `Unexpected ')' at position ${currentPosition}`;
-                    tokenClassName += " error";
                     expectation = Expectation.UNDEFINED;
                 }
-                // Operator or ) after an operator. Eg: `23 / *` or `23 / )`
-                // Unary `+` and `-` are not an error as they might represent
-                // a positive or negative number respectively. But they will still
-                // be an error if the formula ends with them.
-                else if (expectation == Expectation.VARIABLE &&
-                    !isNumber &&
-                    !isSpace &&
-                    token != "(" &&
-                    !((token == "-" || token == "+") &&
-                        (!currentTokens.trim() || previousToken === "(" || this.mathematicalOperators.has(previousToken)))) {
+                /**
+                 * Operator or ')' after an operator (Eg: '23 / *' or '23 / )')
+                 * No error for Unary `+` and `-` as they might represent a positive or negative number respectively
+                 */
+                else if (expectation === Expectation.VARIABLE && !isNumber && !isSpace && token != "("
+                    && !((token === "-" || token === "+") && (!parsedString.trim() || previousToken === "(" || mathematicalOperators.has(previousToken)))) {
                     parseOutput.errorString = `Expected variable/number at position ${currentPosition}`;
-                    tokenClassName += " error";
                     expectation = Expectation.UNDEFINED;
                 }
-                // Number/Variable after the same. Eg: `a a` or `420 420`.
-                // Having a ) is fine. Eg: `23)` might be representing `(23 + 23)
-                else if (expectation == Expectation.OPERATOR &&
-                    !isOperator &&
-                    !isSpace &&
-                    token != ")") {
+                /**
+                 * Multiple number/variable together without operator
+                 */
+                else if (expectation === Expectation.OPERATOR && !isOperator && !isSpace && token != ")") {
                     parseOutput.errorString = `Expected mathematical operator at position ${currentPosition}`;
-                    tokenClassName += " error";
                     expectation = Expectation.UNDEFINED;
                 }
-                // Unknown symbol/variable/word
+                /**
+                 * Unknown symbol/variable/word
+                 */
                 else if (!(isNumber || isOperator || isBracket || isSpace)) {
                     parseOutput.errorString = `Unknown word at position ${currentPosition}`;
-                    tokenClassName += " error";
                     expectation = Expectation.UNDEFINED;
                 }
-                // The case of division by zero. Since we can't know if an expression evaluates
-                // to zero or not, that case can only be handled during calculation.
-                else if (isNumber &&
-                    previousToken == "/" &&
-                    (this.variables.get(token) == 0 || Number(token) == 0)) {
+                /**
+                 * division by zero
+                 */
+                else if (isNumber && previousToken === "/" && (this.variables.get(token) === 0 || Number(token) === 0)) {
                     parseOutput.errorString = `Division by zero at position ${currentPosition}`;
-                    tokenClassName += " error";
                     expectation = Expectation.UNDEFINED;
                 }
-                // Empty brackets. Default might be takn as 0, but that will only make sense
-                // in addition and subtraction and not in other operators, so making this
-                // case an error makes more sense.
-                else if (previousToken == "(" && token == ")") {
+                /**
+                 * Empty brackets
+                 */
+                else if (previousToken === "(" && token === ")") {
                     parseOutput.errorString = `Empty brackets at position ${currentPosition}`;
-                    tokenClassName += " error";
                     expectation = Expectation.UNDEFINED;
                 }
             }
-            // Setting the expectation for the next token, if we have not encountered an
-            // error already.
+            /**
+             * Setting the expectation for the next token, if no error is there till now
+             */
             if (expectation != Expectation.UNDEFINED) {
-                if (token == "(" || isOperator) {
+                if (token === "(" || isOperator) {
                     expectation = Expectation.VARIABLE;
                 }
-                else if (token == ")" || isNumber) {
+                else if (token === ")" || isNumber) {
                     expectation = Expectation.OPERATOR;
                 }
             }
-            if (token == "(")
+            if (token === "(")
                 parentheses.push(currentPosition);
-            else if (token == ")")
+            else if (token === ")")
                 parentheses.pop();
-            formattedString = `${formattedString}${token}`;
-            previousToken = token;
+            parseOutput.formattedString += token;
             currentPosition += token.length;
-            currentTokens += token;
+            parsedString += token;
+            previousToken = token;
         });
         if (recommendation) {
-            parseOutput.newCursorPosition = Math.min(parseOutput.newCursorPosition +
-                recommendation.length, formula.length + recommendation.length);
-            formattedString = `${formattedString}${recommendation}`;
+            parseOutput.newCursorPosition = Math.min(parseOutput.newCursorPosition, formula.length) + recommendation.length;
+            parseOutput.formattedString += recommendation;
+            previousToken = recommendation;
         }
-        // formula ends with a mathematical operator
-        if (this.mathematicalOperators.has(previousToken) || !previousToken.trim().length) {
+        if (mathematicalOperators.has(previousToken) || !previousToken.trim().length) {
             parseOutput.recommendations = !parseOutput.errorString?.length ? Array.from(this.variables.keys()) : [];
         }
-        // formula has unclosed `(`
+        if (mathematicalOperators.has(previousToken)) {
+            parseOutput.errorString = `Unexpected ending with mathematical operator at position: ${currentPosition}`;
+        }
         if (!parentheses.isEmpty()) {
             parseOutput.errorString = `Unclosed '(' at position: ${parentheses.top()}`;
         }
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(formattedString, "text/html");
-        parseOutput.formattedContent = doc.querySelector("body");
-        parseOutput.formattedString = formattedString;
         return parseOutput;
     }
     buildRPN(formula) {
@@ -205,8 +162,8 @@ export class Parser {
         const parsedTokens = [];
         let currentTokens = "";
         for (const token of tokens) {
-            if ((token == "+" || token == "-") &&
-                (!currentTokens.trim() || previousToken === "(" || this.mathematicalOperators.has(previousToken))) {
+            if ((token === "+" || token === "-") &&
+                (!currentTokens.trim() || previousToken === "(" || mathematicalOperators.has(previousToken))) {
                 carriedToken = token;
             }
             else if (carriedToken) {
@@ -225,19 +182,19 @@ export class Parser {
         const operatorStack = new Stack();
         const outputQueue = new Queue();
         for (const token of parsedTokens) {
-            if (token == "(") {
+            if (token === "(") {
                 operatorStack.push("(");
             }
-            else if (token == ")") {
+            else if (token === ")") {
                 while (operatorStack.top() != "(") {
                     outputQueue.enqueue(operatorStack.pop());
                 }
                 operatorStack.pop();
             }
-            else if (this.mathematicalOperators.has(token)) {
-                while (this.mathematicalOperators.has(operatorStack.top()) &&
-                    this.operatorPrecedence[token] <=
-                        this.operatorPrecedence[operatorStack.top()]) {
+            else if (mathematicalOperators.has(token)) {
+                while (mathematicalOperators.has(operatorStack.top()) &&
+                    operatorPrecedence[token] <=
+                        operatorPrecedence[operatorStack.top()]) {
                     outputQueue.enqueue(operatorStack.pop());
                 }
                 operatorStack.push(token);
@@ -270,7 +227,7 @@ export class Parser {
             // If we encounter a number or a variable in the RPN, it is itself
             // a calculated entity (say a result in itself), needs no modification
             // and can be directly put into the result stack.
-            if (((symbol === "+" || symbol[0] === "-") && this.variables.has(symbol.substring(1))) ||
+            if (((symbol[0] === "+" || symbol[0] === "-") && this.variables.has(symbol.substring(1))) ||
                 this.variables.has(symbol) ||
                 (!isNaN(parseFloat(symbol)) && isFinite(parseFloat(symbol)))) {
                 resultStack.push(symbol);
@@ -281,7 +238,7 @@ export class Parser {
             // them with the current one, adds brackets accordingly to the `results`
             // around it, and then finally add it to the `operatorStack` for
             // future reference.
-            else if (Object.keys(this.operatorPrecedence).includes(symbol)) {
+            else if (Object.keys(operatorPrecedence).includes(symbol)) {
                 let [rightExpression, leftExpression, operatorA, operatorB] = [
                     resultStack.pop(),
                     resultStack.pop(),
@@ -289,20 +246,20 @@ export class Parser {
                     operatorStack.pop(),
                 ];
                 // The conditions that govern when to show a parenthesis.
-                if (this.operatorPrecedence[operatorB] <=
-                    this.operatorPrecedence[symbol] ||
-                    (this.operatorPrecedence[operatorB] ===
-                        this.operatorPrecedence[symbol] &&
+                if (operatorPrecedence[operatorB] <=
+                    operatorPrecedence[symbol] ||
+                    (operatorPrecedence[operatorB] ===
+                        operatorPrecedence[symbol] &&
                         ["/", "-"].includes(symbol))) {
                     parsedLeftExpression = `(${leftExpression})`;
                 }
                 else {
                     parsedLeftExpression = leftExpression;
                 }
-                if (this.operatorPrecedence[operatorA] <=
-                    this.operatorPrecedence[symbol] ||
-                    (this.operatorPrecedence[operatorA] ===
-                        this.operatorPrecedence[symbol] &&
+                if (operatorPrecedence[operatorA] <=
+                    operatorPrecedence[symbol] ||
+                    (operatorPrecedence[operatorA] ===
+                        operatorPrecedence[symbol] &&
                         ["/", "-"].includes(symbol))) {
                     parsedRightExpression = `(${rightExpression})`;
                 }
@@ -334,7 +291,7 @@ export class Parser {
         let calcStack = new Stack();
         while (!rpn.isEmpty()) {
             const frontItem = rpn.dequeue();
-            if (!this.mathematicalOperators.has(frontItem)) {
+            if (!mathematicalOperators.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;
@@ -356,7 +313,7 @@ export class Parser {
                             calcStack.push(Big(numA).mul(Big(numB)));
                             break;
                         case "/":
-                            if (parseFloat(Big(numB).toString()) == 0) {
+                            if (parseFloat(Big(numB).toString()) === 0) {
                                 calculationResult.errorString = "Division by zero encountered";
                                 return calculationResult;
                             }

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

@@ -0,0 +1,28 @@
+export class Queue {
+    constructor() {
+        this._elements = {};
+        this._head = 0;
+        this._tail = 0;
+    }
+    enqueue(item) {
+        this._elements[this._tail] = item;
+        this._tail++;
+    }
+    dequeue() {
+        if (this._tail === this._head)
+            return undefined;
+        const element = this._elements[this._head];
+        delete this._elements[this._head];
+        this._head++;
+        return element;
+    }
+    peek() {
+        return this._elements[this._head];
+    }
+    isEmpty() {
+        return this._head === this._tail;
+    }
+    print() {
+        console.log(this._elements);
+    }
+}

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

@@ -0,0 +1,15 @@
+import { matchSorter } from "match-sorter";
+export class Recommender {
+    constructor(variables, minSuggestionLen) {
+        this._minimumSuggestionLength = minSuggestionLen > 0 ? minSuggestionLen : 1;
+        this.variableList = variables;
+    }
+    getRecommendations(word) {
+        if (word.length < this._minimumSuggestionLength)
+            return [];
+        const recommendations = matchSorter(this.variableList, word);
+        if (recommendations.length === 0 || (recommendations.length === 1 && recommendations[0] === word))
+            return [];
+        return recommendations;
+    }
+}

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

@@ -0,0 +1,20 @@
+export class Stack {
+    constructor() {
+        this._elements = [];
+    }
+    push(item) {
+        this._elements.push(item);
+    }
+    pop() {
+        return this._elements.pop();
+    }
+    top() {
+        return this._elements.at(-1);
+    }
+    isEmpty() {
+        return this._elements.length === 0;
+    }
+    print() {
+        console.log(this._elements);
+    }
+}

package/package.json

@@ -1,8 +1,14 @@
 {
   "name": "@fw-components/formula-editor",
-  "version": "2.0.7-formula-editor-enhancements.11",
+  "version": "2.0.7-formula-editor.21",
   "description": "A WYSIWYG type formula editor",
-  "main": "dist/formula-editor/src/formula-builder.js",
+  "main": "dist/formula-editor/src/formula-editor.js",
+  "exports": {
+    ".": "./dist/formula-editor/src/formula-editor.js",
+    "./types": "./dist/formula-editor/src/types",
+    "./types/*.js": "./dist/formula-editor/src/types/*.js",
+    "./utils/*.js": "./dist/formula-editor/src/utils/*.js"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -25,5 +31,5 @@
     "@types/big.js": "^6.1.6",
     "es-dev-server": "^2.1.0"
   },
-  "gitHead": "1d90f3aad9fd17c33427a9e9b973bd0e19b24109"
+  "gitHead": "2ee961ac801dddf4861fa5af2fce28636ffd1d74"
 }

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

@@ -1,142 +0,0 @@
-export class Cursor {
-    /**
-     * The functions `getCurrentCursorPosition`, `setCurrentCursorPosition` and their
-     * helpers `_createRange` and `_isChildOf` are not used for caret manipulation,
-     * but are still in the code for future reference, if the functionality breaks
-     * somehow in some obsolete browser.
-     */
-    static getCurrentCursorPosition(parentElement) {
-        let selection = window.getSelection(), charCount = -1, node;
-        if (selection?.focusNode) {
-            if (Cursor._isChildOf(selection.focusNode, parentElement)) {
-                node = selection.focusNode;
-                charCount = selection.focusOffset;
-                while (node) {
-                    if (node === parentElement) {
-                        break;
-                    }
-                    if (node.previousSibling) {
-                        node = node.previousSibling;
-                        charCount += node.textContent?.length ?? 0;
-                    }
-                    else {
-                        node = node.parentNode;
-                        if (node === null) {
-                            break;
-                        }
-                    }
-                }
-            }
-        }
-        return charCount;
-    }
-    static setCurrentCursorPosition(chars, element) {
-        if (chars >= 0) {
-            var selection = window.getSelection();
-            let range = Cursor._createRange(element, { count: chars }, undefined);
-            if (range) {
-                range.collapse(false);
-                selection?.removeAllRanges();
-                selection?.addRange(range);
-            }
-        }
-    }
-    static _createRange(node, chars, range) {
-        if (!range) {
-            range = document.createRange();
-            range.selectNode(node);
-            range.setStart(node, 0);
-        }
-        if (chars.count === 0) {
-            range.setEnd(node, chars.count);
-        }
-        else if (node && chars.count > 0) {
-            if (node.nodeType === Node.TEXT_NODE) {
-                if (node.textContent.length < chars.count) {
-                    chars.count -= node.textContent.length;
-                }
-                else {
-                    range.setEnd(node, chars.count);
-                    chars.count = 0;
-                }
-            }
-            else {
-                for (var lp = 0; lp < node.childNodes.length; lp++) {
-                    range = Cursor._createRange(node.childNodes[lp], chars, range);
-                    if (chars.count === 0) {
-                        break;
-                    }
-                }
-            }
-        }
-        return range;
-    }
-    static _isChildOf(node, parentElement) {
-        while (node !== null) {
-            if (node === parentElement) {
-                return true;
-            }
-            node = node.parentNode;
-        }
-        return false;
-    }
-    static _getComposedRange(shadowRoot) {
-        // `getSelection` is not defined for the type ShadowRoot in TS,
-        // but it does exist.
-        const sr = shadowRoot;
-        if (sr.getSelection && typeof sr.getSelection === 'function') {
-            const selection = sr.getSelection();
-            if (selection && selection.rangeCount > 0) {
-                return selection.getRangeAt(0);
-            }
-        }
-        // Fallback for browsers like Firefox/Safari.
-        const selection = window.getSelection();
-        if (selection && selection.rangeCount > 0) {
-            const range = selection.getRangeAt(0);
-            if (shadowRoot.contains(range.startContainer)) {
-                return range;
-            }
-        }
-        return null;
-    }
-    static getCaretPosition(shadowRoot, element) {
-        const range = Cursor._getComposedRange(shadowRoot);
-        if (!range) {
-            return 0;
-        }
-        const prefix = range.cloneRange();
-        prefix.selectNodeContents(element);
-        prefix.setEnd(range.endContainer, range.endOffset);
-        return prefix.toString().length;
-    }
-    static { this.setCaretPosition = (pos, parent) => {
-        for (const node of parent.childNodes) {
-            if (node.nodeType == Node.TEXT_NODE) {
-                if (node.length >= pos) {
-                    const range = document.createRange();
-                    const sel = window.getSelection();
-                    range.setStart(node, pos);
-                    range.collapse(true);
-                    sel.removeAllRanges();
-                    sel.addRange(range);
-                    return -1;
-                }
-                else {
-                    pos = pos - node.length;
-                }
-            }
-            else {
-                pos = this.setCaretPosition(pos, node);
-                if (pos < 0) {
-                    return pos;
-                }
-            }
-        }
-        return pos;
-    }; }
-    static getCursorRect(shadowRoot) {
-        const range = Cursor._getComposedRange(shadowRoot);
-        return range ? range.getClientRects()[0] : undefined;
-    }
-}