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

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

@@ -6,89 +6,41 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
-import { FormulaEditorStyles } from "./styles/formula-editor-styles.js";
-import { Parser } from "./parser.js";
 import "./suggestion-menu.js";
+import { Parser } from "./utils/parser.js";
+import { FormulaEditorStyles } from "./styles/editor.js";
 let FormulaEditor = class FormulaEditor extends LitElement {
     constructor() {
-        super();
+        super(...arguments);
+        this.recommendations = [];
+        this.currentCursorPosition = 0;
+        this.isFocused = false;
         /**
-         * These `states` and `properties` can't be defined as `static get properties`,
-         * because TS doesn't support that.
-         * @see https://github.com/lit/lit-element/issues/414
+         * Text area input value
          */
-        this._formattedContent = null;
-        this._recommendations = null;
-        this._calculatedResult = undefined;
-        /**
-         * If `parseInput` is called to add a recommendation, say by clicking,
-         * browser removes focus from the input box. In that case, we have no way
-         * of knowing where the cursor previously was, other than storing it somewhere.
-         */
-        this.currentCursorPosition = null;
-        this.currentCursorRect = undefined;
-        this.lastInputType = "";
-        this.isFocus = false;
         this.content = "";
         this.placeholder = "Type your formula...";
         this.variables = new Map();
         this.minSuggestionLen = 2;
-        this.errorString = null;
-        this._parser = new Parser(this.variables, this.minSuggestionLen);
+        this.errorString = "";
     }
     firstUpdated(_changedProperties) {
-        this._parser = new Parser(this.variables, this.minSuggestionLen);
-        let editor = this.shadowRoot?.getElementById("wysiwyg-editor");
         const inputListener = this.handleContentUpdate.bind(this);
-        editor.addEventListener("input", inputListener);
-        editor.focus();
+        this.editor.addEventListener("input", inputListener);
+        this.editor.focus();
     }
-    navigateRecommendations(direction) {
-        if (!this._recommendations)
-            return;
-        const currentIndex = this._recommendations.indexOf(this._selectedRecommendation);
-        const newIndex = direction === "ArrowDown"
-            ? (currentIndex + 1) % this._recommendations.length
-            : direction === "ArrowUp"
-                ? (currentIndex - 1 + this._recommendations.length) % this._recommendations.length
-                : currentIndex;
-        this._selectedRecommendation = this._recommendations[newIndex];
-        this.scrollToSelectedRecommendation(newIndex);
-    }
-    scrollToSelectedRecommendation(index) {
-        const suggestionMenu = this.shadowRoot?.querySelector("suggestion-menu");
-        if (suggestionMenu) {
-            const listItem = suggestionMenu.shadowRoot?.querySelectorAll("li")[index];
-            if (listItem) {
-                listItem.scrollIntoView({
-                    block: "nearest",
-                    inline: "nearest",
-                });
+    updated(_changedProperties) {
+        if (_changedProperties.has("content")) {
+            if (!this.content?.trim()) {
+                this.recommendations = Array.from(this.variables.keys());
             }
+            this._adjustTextAreaHeight();
         }
-    }
-    handleKeyboardEvents(event) {
-        if (event.code == "Tab" && this._recommendations?.length == 1) {
-            this._selectedRecommendation = null;
-            event.preventDefault();
-            this.parseInput(this._recommendations[0]);
-        }
-        else if (event.code === "ArrowDown" || event.code === "ArrowUp") {
-            if (this._recommendations)
-                event.preventDefault();
-            this.navigateRecommendations(event.code);
-            this.requestUpdate();
-        }
-        else if (event.code === "Enter" && this._selectedRecommendation) {
-            event.preventDefault();
-            this.parseInput(this._selectedRecommendation);
-            this._selectedRecommendation = null;
+        if (_changedProperties.has("variables") && this.variables.size) {
+            this._parser = new Parser(this.variables, this.minSuggestionLen);
         }
     }
     onClickRecommendation(recommendation) {
-        let editor = this.shadowRoot?.getElementById("wysiwyg-editor");
-        if (!editor)
-            return;
         this.parseInput(recommendation);
     }
     handleContentUpdate(event) {
@@ -97,149 +49,94 @@ let FormulaEditor = class FormulaEditor extends LitElement {
         this.content = event.target.value;
         this.parseInput();
     }
-    _adjustInputHeight() {
-        const editor = this.shadowRoot?.getElementById("wysiwyg-editor");
+    _adjustTextAreaHeight() {
         if (!this.content)
-            editor.style.height = "var(--fe-height, 30px)";
-        if (editor.scrollHeight > editor.clientHeight)
-            editor.style.height = (editor.scrollHeight + 5) + "px";
+            this.editor.style.height = "var(--fe-height, 30px)";
+        if (this.editor.scrollHeight > this.editor.clientHeight)
+            this.editor.style.height = String(this.editor.scrollHeight + 5).concat("px");
     }
     /**
-     *
      * @param recommendation The recommendation which needs to be inserted
      * at the current cursor position
-     * @param manageCursor Whether or not cursor management is needed. Not
-     * needed when manual insertion of text is required (eg: during initialization)
      * @returns void
      */
-    parseInput(recommendation = null) {
-        let editor = this.shadowRoot?.getElementById("wysiwyg-editor");
-        if (!editor)
-            return;
-        this.currentCursorPosition = editor.selectionStart;
+    parseInput(recommendation = "") {
+        this.currentCursorPosition = this.editor.selectionStart;
         const parseOutput = this._parser.parseInput(this.content, this.currentCursorPosition, recommendation);
-        this._recommendations = parseOutput.recommendations;
-        this._formattedContent = parseOutput.formattedContent;
+        this.recommendations = parseOutput.recommendations;
         this.errorString = parseOutput.errorString;
         /**
          * Don't modify the text stream manually if the text is being composed,
-         * unless the user manually chooses to do so by selecting a suggestion.
+         * unless the user manually chooses to do so by selecting a recommendation.
          * @see https://github.com/w3c/input-events/issues/86
          * @see https://github.com/w3c/input-events/pull/122
          * @see https://bugs.chromium.org/p/chromium/issues/detail?id=689541
-         * */
+         */
         if (this.lastInputType !== "insertCompositionText" || recommendation) {
-            const formattedString = parseOutput.formattedString;
-            this.content = formattedString;
+            this.content = parseOutput.formattedString;
         }
-        if (recommendation) {
-            this._recommendations = null;
+        if (Boolean(recommendation)) {
+            this.recommendations = [];
             this.currentCursorPosition = parseOutput.newCursorPosition;
+            /**
+             * update cursor position in text area
+             */
             setTimeout(() => {
-                editor.setSelectionRange(this.currentCursorPosition, this.currentCursorPosition);
+                this.editor.setSelectionRange(this.currentCursorPosition, this.currentCursorPosition);
             }, 0);
         }
         this.dispatchEvent(new CustomEvent("fw-formula-content-changed", {
             detail: {
                 formulaString: this.content,
                 error: this.errorString,
-                recommendations: this._recommendations
+                recommendations: this.recommendations,
             },
             bubbles: true,
         }));
-        editor.focus();
     }
-    requestCalculate() {
-        if (this._parser.parseInput(this.content).errorString) {
+    formatFormula() {
+        if (!Boolean(this.content))
             return;
-        }
-        const calculatedResult = this._parser.calculate(this.content);
         this.content = this._parser.addParentheses(this.content) ?? this.content;
         this.parseInput();
-        this._calculatedResult = calculatedResult.result;
-        this.errorString = calculatedResult.errorString;
-        this._recommendations = null;
-        this.requestUpdate();
+        this.recommendations = [];
     }
-    requestFormat() {
-        if (!Boolean(this.content)) {
-            return;
-        }
-        this.content = this._parser.addParentheses(this.content) ?? this.content;
-        this.parseInput();
-        this._recommendations = null;
-        this.requestUpdate();
-    }
-    async updated(_changedProperties) {
-        if (_changedProperties.has("content")) {
-            if (!this.content.trim()) {
-                this._recommendations = Array.from(this.variables.keys());
-            }
-            this._adjustInputHeight();
-        }
-        if (_changedProperties.has("variables")) {
-            this._parser = new Parser(this.variables, this.minSuggestionLen);
-        }
-    }
-    handleFocusOut(e) {
-        this.isFocus = false;
-        this._recommendations = null;
-        this.requestUpdate();
-    }
-    handleFocus(e) {
-        this.isFocus = true;
-        if (!this.content.trim()) {
-            this._recommendations = Array.from(this.variables.keys());
-        }
+    handleFocus(focus) {
+        this.isFocused = focus;
     }
     render() {
         return html `
-      <style>
-        ${FormulaEditorStyles}
-      </style>
+      <style>${FormulaEditorStyles}</style>
+
+      ${this.label ? html `<label for="wysiwyg-editor" class="editor-label">${this.label}</label>` : ""}
+
+      <textarea
+        id="wysiwyg-editor"
+        class=${this.errorString?.length ? "error" : ""}
+        .value=${this.content}
+        .placeholder=${this.placeholder}
+        spellcheck="false"
+        autocomplete="off"
+        @blur=${() => this.handleFocus(false)}
+        @focus=${() => this.handleFocus(true)}
+      ></textarea>
 
-        ${this.label
-            ? html `<label for="wysiwyg-editor" class="formula-editor-label">
-              ${this.label}
-            </label>`
-            : ""}
-        
-        <textarea
-          placeholder=${this.placeholder}
-          id="wysiwyg-editor"
-          class=${this.errorString?.length ? "error" : ""}
-          .value=${this.content}
-          @keydown=${this.handleKeyboardEvents}
-          @blur=${this.handleFocusOut}
-          @focus=${this.handleFocus}
-        ></textarea>
-      ${this._recommendations && this.isFocus
-            ? html ` <suggestion-menu
-              .recommendations=${this._recommendations}
-              .currentSelection=${this._selectedRecommendation}
-              .onClickRecommendation=${(e) => this.onClickRecommendation(e)}
-               @mousedown=${(e) => e.preventDefault()}
-            ></suggestion-menu>`
-            : html ``}
-      <p>${this._calculatedResult}</p>
+      ${this.isFocused && this.recommendations?.length
+            ? html `<suggestion-menu
+            .recommendations=${this.recommendations}
+            .currentSelection=${this._selectedRecommendation}
+            .onClickRecommendation=${this.onClickRecommendation.bind(this)}
+          ></suggestion-menu>`
+            : ''}
     `;
     }
 };
 __decorate([
     state()
-], FormulaEditor.prototype, "_formattedContent", void 0);
-__decorate([
-    state()
-], FormulaEditor.prototype, "_recommendations", void 0);
-__decorate([
-    state()
-], FormulaEditor.prototype, "_calculatedResult", void 0);
+], FormulaEditor.prototype, "recommendations", void 0);
 __decorate([
     state()
 ], FormulaEditor.prototype, "currentCursorPosition", void 0);
-__decorate([
-    state()
-], FormulaEditor.prototype, "currentCursorRect", void 0);
 __decorate([
     state()
 ], FormulaEditor.prototype, "lastInputType", void 0);
@@ -248,7 +145,7 @@ __decorate([
 ], FormulaEditor.prototype, "_selectedRecommendation", void 0);
 __decorate([
     state()
-], FormulaEditor.prototype, "isFocus", void 0);
+], FormulaEditor.prototype, "isFocused", void 0);
 __decorate([
     property()
 ], FormulaEditor.prototype, "content", void 0);
@@ -259,19 +156,7 @@ __decorate([
     property()
 ], FormulaEditor.prototype, "label", void 0);
 __decorate([
-    property({
-        type: (Map),
-        converter: {
-            fromAttribute: (value) => {
-                if (value) {
-                    return new Map(JSON.parse(value));
-                }
-            },
-            toAttribute: (value) => {
-                return JSON.stringify(Array.from(value.entries()));
-            },
-        },
-    })
+    property()
 ], FormulaEditor.prototype, "variables", void 0);
 __decorate([
     property()
@@ -280,7 +165,7 @@ __decorate([
     property()
 ], FormulaEditor.prototype, "errorString", void 0);
 __decorate([
-    query("wysiwyg-editor")
+    query("#wysiwyg-editor")
 ], FormulaEditor.prototype, "editor", void 0);
 FormulaEditor = __decorate([
     customElement("formula-editor")

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

@@ -1,6 +1,6 @@
 import { css } from "lit";
 export const FormulaEditorStyles = css `
-  .formula-editor-label {
+  .editor-label {
     display: block;
     font-size: var(--fe-label-font-size, 0.8rem);
     color: var(--fe-label-color, #515151);
@@ -13,7 +13,7 @@ export const FormulaEditorStyles = css `
     padding: var(--fe-padding, 4px);
     caret-color: var(--fe-caret-color, #fff);
     color: var(--fe-text-color, #f7f1ff);
-    font-size: var(--fe-text-font-size, 12px);
+    font-size: var(--fe-text-font-size, 14px);
     min-width: 100%;
     min-height: 30px;
     height: var(--fe-height, 30px);

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

@@ -0,0 +1,58 @@
+import { css } from "lit";
+export const SuggestionMenuStyles = css `
+  ul {
+    position: relative;
+    border: 1px solid var(--fe-suggestion-color, white);
+    color: var(--fe-suggestion-color, #bab6c0);
+    background-color: var(--fe-suggestion-background-color, white);
+    box-sizing: border-box;
+    width: var(--fe-suggestion-width, 20vw);
+    max-height: 25vh;
+    overflow-x: auto;
+    overflow-y: auto;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.13);
+    border-radius: 5px;
+    z-index: 99999;
+  }
+
+  li {
+    margin: 0;
+    padding: 0.5em 1rem;
+    cursor: pointer;
+    font-family: var(--theme-font);
+    font-size: var(--secondary-font-size, 16px);
+    color: var(--secondary-color, #bab6c0);
+  }
+
+  li:hover, li:focus-visible, li.selected {
+    color: var(--fe-suggestion-focus-color, #69676c);
+    background: rgba(var(--fe-suggestion-focus-background, 86, 86, 86), 0.1);
+  }
+
+
+  /* Scrollbar styling */
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: #ccc;
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: #aaa;
+  }
+
+  /* Optional shadow for the dropdown */
+  .content {
+    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.13);
+  }
+`;

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

@@ -4,101 +4,81 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { SuggestionMenuStyles } from "./styles/suggestion-menu";
 let SuggestionMenu = class SuggestionMenu extends LitElement {
     constructor() {
         super(...arguments);
         this.recommendations = [];
         this.onClickRecommendation = (recommendation) => { };
-        this.currentSelection = "";
+        this._selectedRecommendationIndex = 0;
     }
-    static { this.styles = css `
-      ul {
-        position: relative;
-        border: 1px solid var(--fe-suggestion-color, white);
-        color: var(--fe-suggestion-color, #bab6c0);
-        background-color: var(--fe-suggestion-background-color, white);
-        box-sizing: border-box;
-        width: var(--fe-suggestion-width, 20vw);
-        max-height: 25vh;
-        overflow-x: auto;
-        overflow-y: auto;
-        list-style-type: none;
-        padding: 0;
-        margin: 0;
-        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.13);
-        border-radius: 5px;
-        z-index: 99999
-      }
-
-      li {
-        margin: 0;
-        padding: 0.5em 1rem;
-        cursor: pointer;
-        font-family: var(--theme-font);
-        font-size: var(--secondary-font-size, 16px);
-        color: var(--secondary-color, #bab6c0);
-      }
-
-      li:hover,
-      li:focus-visible {
-        font-weight: bold;
-        color: var(--fe-suggestion-focus-color, #69676c);
-      }
-
-      li.selected {
-        color: var(--fe-suggestion-focus-color, #69676c);
-        font-weight: bold;
-      }
-
-      li[focused] {
-        font-weight: bold;
-      }
-
-      /* Scrollbar styling */
-      ::-webkit-scrollbar {
-        width: 10px;
-      }
-
-      ::-webkit-scrollbar-track {
-        background: transparent;
-      }
-
-      ::-webkit-scrollbar-thumb {
-        background: #ccc;
-        border-radius: 5px;
-      }
-
-      ::-webkit-scrollbar-thumb:hover {
-        background: #aaa;
-      }
-
-      /* Optional shadow for the dropdown */
-      .content {
-        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.13);
-      }
-    `; }
-    handleKeydown(event, recommendation) {
-        if (event.code == "Enter") {
+    firstUpdated(_changedProperties) {
+        this.abortController = new AbortController();
+        const handleKeydown = this.handleKeydown.bind(this);
+        document.addEventListener("keydown", handleKeydown, { signal: this.abortController?.signal });
+    }
+    scrollToSelectedRecommendation(index) {
+        const listItem = this.suggestionList?.querySelectorAll("li")[index];
+        if (!listItem)
+            return;
+        listItem.scrollIntoView({
+            block: "nearest",
+            inline: "nearest",
+            behavior: "smooth"
+        });
+    }
+    navigate(direction) {
+        if (!this.recommendations)
+            return;
+        let newIndex = this._selectedRecommendationIndex;
+        if (direction === "down")
+            newIndex = (this._selectedRecommendationIndex + 1) % this.recommendations.length;
+        else if (direction === "up")
+            newIndex = (this._selectedRecommendationIndex - 1 + this.recommendations.length) % this.recommendations.length;
+        this._selectedRecommendationIndex = newIndex;
+        this.scrollToSelectedRecommendation(newIndex);
+    }
+    handleKeydown(event) {
+        if (event.code === "Tab") {
+            event.preventDefault();
+            if (this.recommendations?.length === 1) {
+                this._handleRecommendationSelect();
+            }
+            else {
+                const direction = event.shiftKey ? "up" : "down";
+                this.navigate(direction);
+            }
+        }
+        else if (event.code === "ArrowDown" || event.code === "ArrowUp") {
+            event.preventDefault();
+            const direction = event.code === "ArrowDown" ? "down" : "up";
+            this.navigate(direction);
+        }
+        else if (event.code === "Enter") {
             event.preventDefault();
-            event.stopPropagation();
-            this.onClickRecommendation(recommendation);
+            this._handleRecommendationSelect();
         }
     }
+    _handleRecommendationSelect(index = this._selectedRecommendationIndex) {
+        const recommendation = this.recommendations[index];
+        if (!recommendation)
+            return;
+        this.onClickRecommendation(recommendation);
+        this._selectedRecommendationIndex = -1;
+    }
+    disconnectedCallback() {
+        this.abortController?.abort();
+    }
     render() {
         return html `
-      <ul class="wysiwyg-suggestion-menu">
-        ${this.recommendations.map((recommendation) => {
-            return html `<li
-            class="${this.currentSelection === recommendation ? 'selected' : ''}"
-            tabindex="0"
-            @click=${(e) => this.onClickRecommendation(recommendation)}
-            @keydown=${(e) => this.handleKeydown(e, recommendation)}
-          >
-            ${recommendation}
-          </li>`;
-        })}
+      <style>${SuggestionMenuStyles}</style>
+      <ul class="wysiwyg-suggestion-menu" @mousedown=${(e) => e.preventDefault()}>
+        ${this.recommendations.map((recommendation, index) => html `<li
+              class="${this._selectedRecommendationIndex === index ? "selected" : ""}"
+              @click=${(e) => this._handleRecommendationSelect(index)}
+            >${recommendation}</li>`)}
       </ul>
     `;
     }
@@ -110,8 +90,14 @@ __decorate([
     property()
 ], SuggestionMenu.prototype, "onClickRecommendation", void 0);
 __decorate([
-    property()
-], SuggestionMenu.prototype, "currentSelection", void 0);
+    state()
+], SuggestionMenu.prototype, "_selectedRecommendationIndex", void 0);
+__decorate([
+    state()
+], SuggestionMenu.prototype, "abortController", void 0);
+__decorate([
+    query(".wysiwyg-suggestion-menu")
+], SuggestionMenu.prototype, "suggestionList", void 0);
 SuggestionMenu = __decorate([
     customElement("suggestion-menu")
 ], SuggestionMenu);

package/dist/formula-editor/src/{helpers/types.js → types/index.js}

@@ -1,3 +1,9 @@
+export var Expectation;
+(function (Expectation) {
+    Expectation[Expectation["VARIABLE"] = 0] = "VARIABLE";
+    Expectation[Expectation["OPERATOR"] = 1] = "OPERATOR";
+    Expectation[Expectation["UNDEFINED"] = 2] = "UNDEFINED";
+})(Expectation || (Expectation = {}));
 export var Operator;
 (function (Operator) {
     Operator["PLUS"] = "+";

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

@@ -0,0 +1,8 @@
+export const mathematicalOperators = new Set(["^", "+", "-", "*", "/"]);
+export const operatorPrecedence = {
+    "^": 3,
+    "/": 2,
+    "*": 2,
+    "+": 1,
+    "-": 1,
+};