@fw-components/formula-editor 2.0.3-formula-editor.1 → 2.0.7-cline-formulaeditor.0

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

@@ -0,0 +1,367 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { 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 { Cursor } from "./cursor.js";
+import "./suggestion-menu.js";
+let FormulaEditor = class FormulaEditor extends LitElement {
+    constructor() {
+        super();
+        this._undoStack = [];
+        this._redoStack = [];
+        this._isCalculating = false;
+        this._inputDebounceTimer = null;
+        /**
+         * 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
+         */
+        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 = "undef";
+        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);
+    }
+    firstUpdated(_changedProperties) {
+        this._parser = new Parser(this.variables, this.minSuggestionLen);
+        this.parseInput(null, false);
+    }
+    handleChange(event) {
+        event.preventDefault();
+        this.lastInputType = event.inputType;
+        const newContent = event.target.innerText;
+        // Save state for undo/redo if content actually changed
+        if (newContent !== this.content) {
+            this._undoStack.push(this.content);
+            this._redoStack = []; // Clear redo stack on new changes
+            if (this._undoStack.length > 50)
+                this._undoStack.shift(); // Limit stack size
+        }
+        this.content = newContent;
+        // Debounce input parsing
+        if (this._inputDebounceTimer) {
+            window.clearTimeout(this._inputDebounceTimer);
+        }
+        this._inputDebounceTimer = window.setTimeout(() => {
+            this.parseInput();
+            this._inputDebounceTimer = null;
+        }, 150);
+        event.target.focus();
+    }
+    handlePaste(event) {
+        event.preventDefault();
+        const text = event.clipboardData?.getData('text/plain') || '';
+        // Clean and sanitize pasted content
+        const sanitizedText = text
+            .replace(/[\u200B-\u200D\uFEFF]/g, '') // Remove zero-width spaces
+            .replace(/\r\n/g, ' ') // Convert Windows line endings
+            .replace(/\n/g, ' ') // Convert remaining line endings
+            .trim();
+        document.execCommand('insertText', false, sanitizedText);
+    }
+    undo() {
+        if (this._undoStack.length > 0) {
+            this._redoStack.push(this.content);
+            this.content = this._undoStack.pop();
+            this.parseInput();
+        }
+    }
+    redo() {
+        if (this._redoStack.length > 0) {
+            this._undoStack.push(this.content);
+            this.content = this._redoStack.pop();
+            this.parseInput();
+        }
+    }
+    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",
+                });
+            }
+        }
+    }
+    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") {
+            event.preventDefault();
+            this.navigateRecommendations(event.code);
+            this.requestUpdate();
+        }
+        else if (event.code === "Enter" && this._selectedRecommendation) {
+            event.preventDefault();
+            this.parseInput(this._selectedRecommendation);
+            this._selectedRecommendation = null;
+        }
+        else if ((event.metaKey || event.ctrlKey) && event.code === "KeyZ") {
+            event.preventDefault();
+            if (event.shiftKey) {
+                this.redo();
+            }
+            else {
+                this.undo();
+            }
+        }
+    }
+    onClickRecommendation(recommendation) {
+        let editor = this.shadowRoot?.getElementById("wysiwyg-editor");
+        if (!editor)
+            return;
+        this.parseInput(recommendation);
+        this.currentCursorPosition = null;
+    }
+    /**
+     *
+     * @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, manageCursor = true) {
+        let editor = this.shadowRoot?.getElementById("wysiwyg-editor");
+        if (!editor)
+            return;
+        /**
+         * @see https://github.com/WICG/webcomponents/issues/79
+         */
+        if (manageCursor)
+            this.currentCursorPosition = recommendation
+                ? this.currentCursorPosition
+                : Cursor.getCaretPosition(this.shadowRoot, editor);
+        const parseOutput = this._parser.parseInput(this.content, this.currentCursorPosition, recommendation);
+        this._recommendations = parseOutput.recommendations;
+        this._formattedContent = parseOutput.formattedContent;
+        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.
+         * @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) {
+            editor.innerHTML = parseOutput.formattedString;
+        }
+        this.content = editor.innerText;
+        if (recommendation) {
+            this._recommendations = null;
+            this.currentCursorPosition = parseOutput.newCursorPosition;
+        }
+        if (manageCursor)
+            Cursor.setCaretPosition(this.currentCursorPosition, editor);
+        editor?.focus();
+        if (manageCursor)
+            this.currentCursorRect = Cursor.getCursorRect(this.shadowRoot);
+        this.requestUpdate();
+        this.dispatchEvent(new CustomEvent("fw-formula-content-changed", {
+            detail: {
+                formulaString: this.content,
+                error: this.errorString,
+                recommendations: this._recommendations
+            },
+            bubbles: true,
+        }));
+    }
+    async requestCalculate() {
+        if (this._parser.parseInput(this.content).errorString) {
+            return;
+        }
+        this._isCalculating = true;
+        this.requestUpdate();
+        try {
+            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;
+        }
+        finally {
+            this._isCalculating = false;
+            this._recommendations = null;
+            this.requestUpdate();
+        }
+    }
+    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());
+            }
+        }
+        if (_changedProperties.has("variables")) {
+            this._parser = new Parser(this.variables, this.minSuggestionLen);
+            this.parseInput(null, false);
+        }
+    }
+    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());
+        }
+    }
+    render() {
+        return html `
+      <style>
+        ${FormulaEditorStyles}
+      </style>
+
+        ${this.label
+            ? html `<label for="wysiwyg-editor" class="formula-editor-label">
+              ${this.label}
+            </label>`
+            : ""}
+        
+        <div
+          contenteditable
+          placeholder=${this.placeholder}
+          id="wysiwyg-editor"
+          spellcheck="false"
+          autocomplete="off"
+          role="textbox"
+          class=${this._isCalculating ? 'loading' : ''}
+          aria-label="Formula editor"
+          aria-placeholder=${this.placeholder}
+          aria-invalid=${Boolean(this.errorString)}
+          aria-describedby=${this.errorString ? "error-message" : null}
+          @input=${this.handleChange}
+          @keydown=${this.handleKeyboardEvents}
+          @blur=${this.handleFocusOut}
+          @focus=${this.handleFocus}
+          @paste=${this.handlePaste}
+        ></div>
+        ${this.errorString ? html `
+          <div id="error-message" class="error-message" role="alert">
+            ${this.errorString}
+          </div>
+        ` : null}
+      ${this.isFocus ? html `
+        <suggestion-menu
+          .recommendations=${this._recommendations ?? []}
+          .currentSelection=${this._selectedRecommendation}
+          .onClickRecommendation=${(e) => this.onClickRecommendation(e)}
+          .variables=${this.variables}
+          .constants=${this._parser.constants}
+          .isLoading=${this._inputDebounceTimer !== null}
+          @mousedown=${(e) => e.preventDefault()}
+        ></suggestion-menu>
+      ` : html ``}
+      ${this._calculatedResult !== undefined ? html `
+        <p role="status" aria-live="polite">Result: ${this._calculatedResult}</p>
+      ` : null}
+    `;
+    }
+};
+__decorate([
+    state()
+], FormulaEditor.prototype, "_formattedContent", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_recommendations", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_calculatedResult", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "currentCursorPosition", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "currentCursorRect", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "lastInputType", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "_selectedRecommendation", void 0);
+__decorate([
+    state()
+], FormulaEditor.prototype, "isFocus", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "content", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "placeholder", void 0);
+__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()));
+            },
+        },
+    })
+], FormulaEditor.prototype, "variables", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "minSuggestionLen", void 0);
+__decorate([
+    property()
+], FormulaEditor.prototype, "errorString", void 0);
+__decorate([
+    query("wysiwyg-editor")
+], FormulaEditor.prototype, "editor", void 0);
+FormulaEditor = __decorate([
+    customElement("formula-editor")
+], FormulaEditor);
+export { FormulaEditor };

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

@@ -0,0 +1,16 @@
+export var Operator;
+(function (Operator) {
+    Operator["PLUS"] = "+";
+    Operator["MINUS"] = "-";
+    Operator["MUL"] = "*";
+    Operator["DIV"] = "/";
+    Operator["NONE"] = "";
+})(Operator || (Operator = {}));
+export class Formula {
+    constructor(name, formulaString, precision = -1) {
+        this.error = null;
+        this.name = name || "";
+        this.formulaString = formulaString || "";
+        this.precision = precision;
+    }
+}

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

@@ -0,0 +1,72 @@
+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);
+    }
+}
+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);
+    }
+    toArray() {
+        const result = [];
+        for (let i = this._head; i < this._tail; i++) {
+            if (this._elements[i] !== undefined) {
+                result.push(this._elements[i]);
+            }
+        }
+        return result;
+    }
+    clone() {
+        const newQueue = new Queue();
+        Object.entries(this._elements).forEach(([key, value]) => {
+            newQueue._elements[parseInt(key)] = value;
+        });
+        newQueue._head = this._head;
+        newQueue._tail = this._tail;
+        return newQueue;
+    }
+}
+export var Expectation;
+(function (Expectation) {
+    Expectation[Expectation["VARIABLE"] = 0] = "VARIABLE";
+    Expectation[Expectation["OPERATOR"] = 1] = "OPERATOR";
+    Expectation[Expectation["UNDEFINED"] = 2] = "UNDEFINED";
+})(Expectation || (Expectation = {}));