Lack some implements

[asukaminato0721]

but it can be a frontend :smile:

RowBox, BoxData, and some underlying layout functions.

maybe there can even be some jsx/tsx or frontend template to semi-auto interpret the string to the dom tree. But using a frontend framework is a double-edged sword.

[asukaminato0721]

Amazing, I only installed the wolfram engine, but what is this?

[asukaminato0721]

also, I noticed there may miss some error handling.

so after running

GeneralUtilities`PrintDefinitionsLocal[Sin] // HTMLForm

there will be a pop up said this:

[JerryI]

Hah. Don't worry, there will be a major update soon, where i accumulated all bug fixes :D

[JerryI]

Amazing, I only installed the wolfram engine, but what is this?

This is some standard behaviour, when you interrupt the kernel on Linux with GUI. Just click ok)

[JerryI]

A long time ago I tried to implement low-level notebook cells functions. Well, I would say looking back to the code it was a huge mess. Since it is also not well-documented, hard to imagine how it can be inspected.

I think, in this sense, the immutable objects like this can be a good compromise - looks still fancy, but fully editable using a single instance of the CodeMirror

[JerryI]

I added a new option to the env variable, now we have

• env.hold to prevent further evaluation, used by core.List in this example
• env.numerical tells that we need an exact value to be used by JS program.
• env.todom tells that the outer function will be displayed, then, all content is not computable, but will be attached to the env.element. Of course, this property can be overridden by Graphics3D.

In principle, using this we can reproduce the results from Mathematica's frontend. Like mixing rational numbers and graphics

Table[(i+j) /j Graphics3D[{RGBColor[i/2,j/2,1], Sphere[{1/2,1/2,1/2}, 0.6], Cuboid[]}], {i,1,2}, {j,1,2}]//TableForm

It already works. I tried to implement it with core.Times and core.Rational as a proof of concept.

[userrand]

but it can be a frontend smile

RowBox, BoxData, and some underlying layout functions.

maybe there can even be some jsx/tsx or frontend template to semi-auto interpret the string to the dom tree. But using a frontend framework is a double-edged sword.

DisplayForm followed by TeXForm can transform some of the row boxes to LaTeX. Then one can maybe just render the LaTeX to HTML using MathJax or something (or if you already have something that converts Graphics to HTML then maybe MaTeX https://resources.wolframcloud.com/FunctionRepository/resources/MaTeXInstall/ ). However, the Box expression to LaTeX converter is not perfect (in particular it ignores Style usually) but maybe it is easier to fix a few cases of the LaTeX converter than to implement the entire box structure into HTML from scratch.

LyX uses a WYSIWYG approach to render in real time, modify the LaTeX and copy parts of an expression as pure latex. That could be convenient to use instead of boxes if it is easy to extract the relevant code from LyX or if one of these repositories: https://github.com/search?q=wysiwyg+latex works well and is easy to use. As shown here : https://tex.stackexchange.com/a/79097 one can include images in an equation so it might be possible to have some of the flexibility of using boxes using a WYSIWYG latex editor. Animations are also possible as they can be used with beamer for example here https://tex.stackexchange.com/questions/55216/tikz-animated-equation-in-beamer

For the example given by @wuyudi one can use the printdef function below instead of GeneralUtilities`PrintDefinitionsLocal

 printdef[args___]:=Reap[Block[{CreateDocument = 
 Function[Sow@#]}, GeneralUtilities`PrintDefinitions @ args]][[2,1]]//DisplayForm 

I used a "CreateDocument =..." trick that I found using GeneralUtilitiesPrintDefinitions on GeneralUtilitiesPrintDefinitionsLocal.

With Wolfram language for jupyter the output is automatically rasterized. One can obtain the output in LaTeX using printdef[Sin]//TeXForm

With longer outputs with hyperlinks it might be better to use the rasterized image or convert the output to HTML (there are wolfram notebook to jupyter converters if I am not mistaken, so maybe some of the code from those converters could be used)

[userrand]

A mathematica notebook to jupyter converter that might help (not sure did not check the code nor use it)

https://mathematica.stackexchange.com/a/210938

A mathematica notebook to markdown converter that might help (not sure)

https://mathematica.stackexchange.com/a/100127

[JerryI]

but it can be a frontend 😄

RowBox, BoxData, and some underlying layout functions.

maybe there can even be some jsx/tsx or frontend template to semi-auto interpret the string to the dom tree. But using a frontend framework is a double-edged sword.

Well, @wuyudi, In the end I decided to implement those boxes by spawning a nested editor inside each box

Surprisingly it has no input lag, thanks @marijnh for 14 years of development of CodeMirror

In principle everything works, but I have no idea how to implement parentheses, that can adjust their height according to the nested expression

And the navigation using arrows now is also problematic, one have to click manually on each box

[userrand]

but it can be a frontend smile RowBox, BoxData, and some underlying layout functions. maybe there can even be some jsx/tsx or frontend template to semi-auto interpret the string to the dom tree. But using a frontend framework is a double-edged sword.

Well, @wuyudi, In the end I decided to implement those boxes by spawning a nested editor inside each box

Surprisingly it has no input lag, thanks @marijnh for 14 years of development of CodeMirror

In principle everything works, but I have no idea how to implement parentheses, that can adjust their height according to the nested expression

And the navigation using arrows now is also problematic, one have to click manually on each box

Why is the $\beta$ in the numerator in the output when it is in the denominator in the input?

[userrand]

The output from codemirror is MathML?

[JerryI]

Ouups. I flipped those by accident. ;)

The output from codemirror is MathML?

Actually this is sort of Box output. I basically take the DisplayForm of mathematica output, remove some overcomplicated stuff like TagBox, RowBox leaving out only fractions, matrixes and send to the editor.

On the editor's side regular expressions are looking for Subscript, Sqrt, FractionBox functions and decorates them with HTML/CSS creating a new editor inside (I had to implement a small WL parser), i.e. you can edit everything like in Mathematica. The depth of nested editors is not limited. Each editor updates the content it hides each time you type anything from top to bottom. So one copy them from the cell, it will show pure WL code.

Snippets and hotkeys (Ctrl+/ to create fractions) are supported.

So this is a somewhat a compromise between Mathematica's Boxs, where the code is held in a string and InputForm.

PS: But yes, firstly I was experimenting with MathML and MaTeX, I stole CSS styles from them and it gave me a hit on how to process the data from DisplayForm

[JerryI]

example.

what you see

inside

Table[i, {i,1}]; Sqrt[Fraction[1, 2]] + Subscript[x, y_ ] 

where only Fraction is unknown expression to Mathematica, but on input it can be replaced Fraction -> Function[{x,y}, x/y] by the preprocessor

UPD: I have separated it as a package and published it on NPM

[JerryI]

Looks like it is done