Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add <formula-editor /> component #4

Open
wants to merge 48 commits into
base: formula-editor
Choose a base branch
from

Conversation

literalEval
Copy link

@literalEval literalEval commented Jun 5, 2023

Fixes #2

What is done ?

  • A WYSIWYG editor
  • Highlight different expressions with some coloring
  • Autosuggestion for predefined variables
  • Validating input
    • Non-existent variables
    • Incorrect mathematical grammar
    • Invalid literals (too many decimals, division by zero etc)
  • Evaluator/Calculator with high precision
  • Add parentheses where meaning isn't clear
  • Allow numerical values

Possible bugs/Needs testing

  • Testing cursor movement and inputs on mobile devices
  • Space insertion when selecting a suggestion, clicking "Calculate"
  • Support for unary - and + operators / Handling negative numbers.

What remains ?

  • Putting suggestions right below the cursor

Isha-Sharma and others added 17 commits May 16, 2023 12:44
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
@literalEval literalEval changed the title Added the <formula-editor /> component Add <formula-editor /> component Jun 7, 2023
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
@@ -0,0 +1,62 @@
export class Stack<Type> {
private _inner: Type[] = [];

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

inner can be named more descriptively

similarly for Queue

return this._inner.at(-1);
}

empty(): boolean {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

empty -> isEmpty

export enum Expectation {
VARIABLE,
OPERATOR,
UNDEF,

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UNDEF -> UNDEFINED

@@ -0,0 +1,127 @@
export class Recommender {
private _trie: TrieNode;
private _minSuggestionLen: number;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

_minSuggestionLen -> _mininumSuggestionLength

Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
if (!editor) return;

this.parseInput(recommendation);
this.currentCursorPosition = null;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we need this?

return false;
}

static getCaret = (element: any) => {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getCaret -> getCaretPosition
similarly for setCaret

this.currentCursorPosition = null;
}

parseInput(addRecommendation: string | null = null) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

addRecommendation -> recommendation


this._calculatedResult = calculatedResult ?? NaN;
this._errorStr =
calculatedResult == undefined

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

condition doesn't seem intuitive

></suggestion-menu>`
: html``}
<div id="wysiwyg-err" class="${this._errorStr ?? "wysiwyg-no-err"}">
${this._errorStr ?? "No Errors"}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can choose to show \n instead of "No Errors"

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Newlines are treated the same as spaces, so I am changing to no breaking space instead.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can consider to move these functions to helpers.ts

Signed-off-by: Ravi Dev Pandey <[email protected]>
tokens.forEach((token) => {
// It is a number is either it's in the defined variables, or
// it's a valid number literal.
let isNumber = this.variables.has(token) || !Number.isNaN(Number(token)),

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how about using a tokenType=number | operator | bracket | space
instead of having 4 such variables.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually I was thinking of having an Enum for this. Seemed like a more structured approach to me.

}

const tokens = formula
.split(/([-+(),*^/:?\s])/g)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can have the delimiters defined as a const, to be used at multiple places

Signed-off-by: Ravi Dev Pandey <[email protected]>
Signed-off-by: Ravi Dev Pandey <[email protected]>
@Isha-Sharma Isha-Sharma changed the base branch from alpha to main July 24, 2023 13:07
@rickygarg rickygarg changed the base branch from main to formula-editor February 24, 2024 17:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants