Codemirror mode for the expression parser of math.js

[jpatel3]

math notepad is an awesome tool, though I wanted to use text area for taking math.js supported expressions as input and wanted to provide user IntelliSense and colored formatting to help to detect the errors while entering the equations. I think codemirror is a good lib to enable the math.js editor. I understand math.js is not language itself, though for long expressions or equations it can be helpful to get autocomplete and color coding on the formula.

[josdejong]

I don't know of a codemirror or Ace mode for math.js, could be interesting indeed. Would you be interested in checking out what would be needed to implement such a mode?

[jpatel3]

@josdejong Sure. Doing some initial assessment already. I'll share more details once I can scope minimal implementation.

[josdejong]

thanks!

[SimoneTosato]

any news about this? it would be an amazing feature for the software i'm developing

[josdejong]

No news. I've marked the topic with "help wanted", feel free to jump on to it :)

[DogAndHerDude]

I've been looking into this as well recently. I've been writing my own lexer and parser for an own proto-editor, just for fun and/or potentially integrating that with our product which has a formula editor that is quite basic.

I should have a bit more time in the coming weeks. I could take a look at getting a simple ruleset going for codemirror.

I've used codemirror on very basic terms in the past, and given that the MathJS syntax is fairly simple, one line statements etc., it shouldn't overly difficult... (How hard can it be, said the man that jinxed himself)

[jpatel3]

Sorry, haven't got much time to check on this. Would love to spend time someday on it.

[dvd101x]

Here is an attempt in codemirror 5.

https://github.com/dvd101x/CoolPropJavascriptDemo

The method to make it work was:

1. Take the codemirror mode for matlab/octave
2. Replace the comments % to #
3. Replace the functions
4. Replace the keywords

Stuff to be defined

• how to make it recognize units of measurement

• The highlighter recognizes blocks of comments but my mathjs implementation doesn't, I'm planning to do something with that

  #{
  Multi line
  comment
  #}
  

Also here is a better syntax highlighter working on highlight js + codejar

https://github.com/felipec/math-notepad

[josdejong]

Nice 😎 , thanks for sharing, David!

[dvd101x]

I got good progress with this including more features

• syntax highlighting taken directly from math
  • functions
  • physical constants
  • prefixed units
• autocomplete like bin/cli.js
  • including the variables in the current scope
  • functions
  • prefixed units
  • physical constants
  • using Ctrl + Space

I think something like this would be a good addition for browser examples.

https://dvd101x.github.io/web-thermodynamics/

[josdejong]

Good idea to add a browser example David! Can you create a PR for that?

[dvd101x]

Yes, I can include a PR with that.

[antoniomdk]

I think CodeMirror with the JS extension would provide good enough syntax highlighting. That is the approach I'm currently following. But for auto-completion, you'll probably need to define the symbols manually. I have tried to extract the typed function definitions from the mathjs object with no luck. But if you can get the list of available functions it is not hard to implement the autocompletion.

[josdejong]

You can get a list with all functions and constants by using something like Object.keys(math). This is missing units though. There is no ready made list with units since this list would be huge: each unit can have a large set of prefixes (like meter, millimeter, kilometer, etc). This is a combination though of prefix followed by unit, so maybe that can be solved in some smart way in the autocompletion. Or, well, just go with the dumb approach and expand all possible unit names 😁 .

[antoniomdk]

I see. Is it possible to get the typed-functions spec from the function object?

[dvd101x]

I did try the following steps to make the codemirror mode for mathjs.

• Start with Matlab/octave mode
• Change the comments from % to #
• Change the list of keywords and builtin functions
• Next: I will try autocomplete

I did extract the functions initially with Object.getOwnPropertyNames(math).filter(e => typeof math[e] === 'function') and did use them in a list.

This implementation uses it directly on the code using codejar https://github.com/felipec/math-notepad/blob/55c4738a200261add055cfebf38388e7dea1f8a5/hljs/mathjs.js#L43