<formula-editor></formula-editor>

[rickygarg]

<formula-editor></formula-editor>

Requirements

1. WYSIWYG editor that allows a user to type in simple formulas such as: b + a z - x q * r v / w l - (k + n)

2. Highlight mathematical operators using different formatting b + a

3. Use autosuggest (menu or tab/swipe complete) variable names from a predefined list of available variables.

4. Validate input on each key press to highlight invalid variable names or improper mathemetical formulas (e.g. a red-underline or a light red background).

   
   Examples of invalid inputs:

(i) Variable doesn't exist: nonExistentVariable + 1 (ii) Improper math: a ** b (iii) Too many decimal points: a + 1.0000000000001 (iv) Division by zero: a / 0

7. Return a JSON object, with the formula string as one of the properties.

{ "variableCode": "c", "formula": "b+a" }

8. Write a simple evaluator to evaluate a formula given the following inputs:

(a) the formula string `b + a`
(b) key value pair of variable values `{a: 1, b: 2}`

Use BigDecimal or similar library to ensure there are no floating point precision errors.

#### Bonus / Extras 

1. Automatically add parentheses based on BODAMS / PEMDAS where meaning isn't clear

User input: `b - a / y`
Formatted output = `b - (a / y)`

2. Allow for numerical values in formulas

`b * 3`

3. Write the formula evaluator also in `Java`.

#### Not doing / Out of scope

Complex formulas involving Latex such as powers, square roots, differentials and integrals.

[literalEval]

Seems interesting :) I can try this one.

[literalEval]

@rickygarg can you please explain the 3rd point ?

[literalEval]

Moreover,

1. Are we gonna use something like Stencil.js ?
2. How should the basic UI of this editor look like ?

Any link to a working example will help a lot. Thanks.

[rickygarg]

@rickygarg can you please explain the 3rd point ?

Like the autocomplete feature in Gmail Smart Compose. Here's a pic.

Are we gonna use something like Stencil.js ?

We use lit for our other web components and web apps, so that's ideal.

How should the basic UI of this editor look like ?

Open to suggestions on design. Note that the formulas can typically have upto 10 variables, so in-line editing in a table view might not be easy. Rather, we can have a dedicated screen (or multi line div) per formula. Perhaps maximum of one parentheses per line, with auto indentation for easy readability. I found an example that follows similar principles (pic).

Any link to a working example will help a lot. Thanks.

We'll commit an example by Monday.

[literalEval]

Thanks. I will learn Lit in the mean time :)

[literalEval]

@rickygarg what is the expected file hierarchy?

[literalEval]

Hey @rickygarg @Isha-Sharma

I read lit-elements a bit, and have come up with a solution like -

1. Using a div with contenteditable for the 'input field'
2. Bind @change to a callback that parses the string and converts it to the respective formatted code. Like + becomes bold, etc.
3. For the auto-suggestion, I will use a trie kind of data structure.

Does this sound good to you ?

[Isha-Sharma]

This looks good.

1. Can also try looking for any public component that might fit.

[Isha-Sharma]

Any link to a working example will help a lot. Thanks.

Here's an example of a lit component.

[literalEval]

Can also try looking for any public component that might fit.

Seems like a good idea. After many unsuccessful attempts at getting the editor to behave like wysiwyg, I was planning of having two divs, one on top of another, where the top one will have opacity: 0 and will be editable, whereas the bottom one will show the formatted output :laughing:

[literalEval]

Also, is the component supposed to explicitly tell what's going wrong in the formula? Like a red text below saying the variable doesn't exist? Or simply having a red underline is fine?

[literalEval]

Also, is the component supposed to explicitly tell what's going wrong in the formula? Like a red text below saying the variable doesn't exist? Or simply having a red underline is fine?

@rickygarg @Isha-Sharma