Mathjax, rich text editing, contentEditable

[Casey W. Stark]

[Previously posted at http://sourceforge.net/projects/mathjax/forums/forum/948700/topic/3677998]

ericmjonas
2010-04-15 16:40:58 PDT

So, this is slightly O/T but I figured I'd throw it out there anyway.
I'm trying to integrate MathJax (and LaTeX equation support) with the
new HTML 5 contentEditable attribute. Has anyone out there been
thinking along these lines, or would anyone have interest in this sort
of integration?
...Eric

----------

robertminer
2010-04-16 08:05:52 PDT

Hi Eric,

I'm sure there is interest in that kind of thing, but I don't think
Davide has looked at it. Maybe some other have. How are you
envisioning it working?

--Robert

--Robert

----------

ericmjonas
2010-04-16 11:13:22 PDT

Well, of course, that's the interesting question, isn't it. :) I'm
still trying to wrap my head around what exactly is offered by
contentEditable and modern HTML5-happy browsers. I'm totally happy
basically telling people "you need to use the most recent generation
of browser for your platform" -- IE 8, Firefox 3.5, etc. But even
still, I worry there might be a lot of cross-browser quirks that get
me.


There are sort of two ways to imagine you might want feedback. The
best I've come up with is, you type $x + y$, and upon typing the
closing $, mathjax does the conversion. While it's pretty easy to
imagine how contentEditable handles <span> tags (and I've done some
testing here), more work needs to be done on the div tag front.

I'm going to have some free time to mock this up this weekend. I'm
going to be doing the work on github, so I'll post the project link
when i get it here. If other people are interested in helping out,
please feel free to ping me at jo...@mit.edu.

...Eric

----------

robertminer
2010-04-16 11:49:07 PDT

Sounds good. I'll be interested to see how it goes.

As an aside, I toss out another possible model, similar to how
MathType handles TeX input in Word. You could set things up to
basically toggle back and forth between TeX code and type set may on a
hot key/button/etc. You can see how it goes in practice, but I'm
guessing you will want a way to get back to markup to fix little
errors, rather than just having to delete and start again.

--Robert

[fe...@fbreuer.de]

Hello!

I just wanted to ask if anyone made progress with formula editing via MathJax inside a contentEditable paragraph?

In my own editor, Qute, I always switch an entire paragraph from "edit mode" to "display mode" and back. But it would be great to figure out a way of making MathJax work in a more WYSIWYG richt text editor as well. In particular, integrating MathJax editing with PROPER so as to get math support in Substance would be great!

Cheers,
Felix

[Paul Topping]

Hi,

I am sure some MathJax folks will be at JMM in Boston in a few weeks (Wednesday, Jan. 4th thru Saturday, Jan 7th). I will be there, as will Davide Cervone and others. It would be nice to meet up. However, with the upheaval due to Robert Miner's passing, nothing formal has been planned. My hope is we can come up with something even if it is at the last minute. Obviously we can use these mailing lists to communicate but I also want to find some way to let JMM attendees know. Conferences usually have some kind of birds-of-a-feather bulletin board so we might be able to do something with that. If anyone wants to let me know of their interest or has ideas on how to organize this, please reply.

Since Robert's death, I have been trying to take his place until we are able to make other arrangements, with the help of others of course. Several qualified people responded to our MathJax Business Development Manager posting and the project's sponsors have all indicated their continued support of the project. My hope and expectation is that we will have the project squared away under new management very soon.

Paul Topping
President & CEO

Design Science, Inc.
"How Science Communicates"
Makers of MathType, MathFlow, MathDaisy, MathPlayer, Equation Editor
http://www.dessci.com

[Christian Perfect]

I've been wondering this as well, because my editor
(http://takenot.es) works in pretty much the same way yours does.
Really all I need is the ability to get the screen position of the
cursor, in order to position a preview box. That's a browser issue
though, not something MathJax can fix.

cp

[Mike Waters]

Take a look at http://notepag.es/latexdemo.

Very impressive with the live preview.

Mike


On Dec 22, 5:15 pm, Christian Perfect <christianperf...@gmail.com>
wrote:

[Felix Breuer]

Hi Christian, hi Mike!

@Christian: takenot.es looks very nice! Is it possible to try out editing right on your server? New pages appear to be locked after creation.

@Mike: Thanks for the pointer to notepag.es! Qute also has a split view with live preview, even though, personally, I prefer the paragraph-wise editing concept.

I know that MathJax lends itself very well for use in editors that convert between a source representation and a display format, either on a document level or on a paragraph level. I was going after something else with my question: Is there a good way to use MathJax in a rich text editor with a WYSIWYG flavor, built around the contenteditable attribute? (Concretely, I am thinking about PROPER and Substance - see http://substance.io)

User interface wise, I can think of two ways to go here.

a) Switch between typeset formula and TeX source for each *formula* individually. (I.e. on the level of inline elements and not on the level of paragraphs or whole documents.)

b) True WYSIWYG two-dimensional formula editing in the spirit of TeXmacs or Mathematica.

While b) might be the most desireable option (if we are doing WYSIWYG editing instead of source-based editing, we might as well do it properly), I think b) is way more complex than a) - so I am going to ignore it right now. However, browser technologies also make it very difficult to realize a) as well:

* As Christian already mentioned, there is no way to get the pixel coordinates of the cursor in contenteditable mode. This makes it  difficult to place "floating preview boxes", etc.

* According to the DOM Event reference there is no way to detect cursor movement in a contenteditable paragraph. Also handling keyboard events such as arrow keys, etc is a nightmare. All of this makes automatically switching to edit mode when the cursor touches a formula infeasible.

* The typeset output generated by MathJax would have to have contenteditable set to false so that the user is forced to use the source view to edit the formula. This seems to work in Firefox, however, I am not sure how stable this is across browsers.

Given these constraints, I think the only UI that can be implemented with a reasonable amount of work is the following:

If a user has their cursor placed on a typeset formula and *manually* presses a keyboard shortcut the formula is *replaced* with a source view of that one formula. After editing, they have to press the keyboard shortcut *again* and the TeX source is replaced with the retypeset formula. The same keyboard shortcut could also be used to insert new formulas.

Now:

* Do you think this user experience is reasonably attractive? Do you have suggestions how to improve it?

* Do you think this is feasible to implement? Or do you see problems down the road?

Cheers,

Felix

2011/12/22 Mike Waters <mike.wate...@gmail.com>

--
http://www.felixbreuer.net

[Felix Breuer]

I will be at JMM and I would certainly like to talk about MathJax and math on the web in general. I am looking forward to meeting all of you!

Best,

Felix

2011/12/22 Paul Topping <pa...@dessci.com>

--
http://www.felixbreuer.net

[Charles Wells]

I think this approach would be a great help and I hope someone implements it.

Charles Wells

On Thu, Dec 22, 2011 at 9:44 PM, Felix Breuer <fe...@fbreuer.de> wrote:

Given these constraints, I think the only UI that can be implemented with a reasonable amount of work is the following:

If a user has their cursor placed on a typeset formula and *manually* presses a keyboard shortcut the formula is *replaced* with a source view of that one formula. After editing, they have to press the keyboard shortcut *again* and the TeX source is replaced with the retypeset formula. The same keyboard shortcut could also be used to insert new formulas.

Now:

* Do you think this user experience is reasonably attractive? Do you have suggestions how to improve it?

* Do you think this is feasible to implement? Or do you see problems down the road?

Cheers,

Felix

professional website: http://www.cwru.edu/artsci/math/wells/home.html

blog: http://www.abstractmath.org/Word%20Press/
abstract math website: http://www.abstractmath.org/MM//MMIntro.htm
astounding math stories: http://www.abstractmath.org/MM//MMAstoundingMath.htm
personal website:  http://www.abstractmath.org/Personal/index.html
sixwingedseraph.facebook.com

[aRbEr]

Do you think this would be organized within the Hynes Convention Center and be open only to JMM attendees, or will it be organized somewhere else outside the conference hours??

I live close to Boston and I would like to attend the meet-up, however I don't think I can make it during the office hours (9-5) and I am not going to be at the JMM - I m just a young developer where the company has decided to use MathJax in a project I am working on, I mean not very related to math :)


Arber

[Paul Topping]

Since it is too late to get anything actually sanctioned by JMM, it seems likely it will be something anyone can attend. One person knows  a nearby pub that might work. If you are over 21, that should work! LOL

 

Paul

[aRbEr]

young developer != teenager developer :D

That would work then :)

[Felix Breuer]

I have talked with the Substance people about this and apparently they are not exactly happy with their own rich text editor component - as I mentioned before, building on contenteditable is a pain. They pointed me to MediaWiki's Visual Editor component (which they are thinking about using as well). I think it would be really valuable to integrate MathJax with MediaWiki's visual editor - but I have no idea about the technical feasibility. Looking at the source, I can say this much: MediaWiki does not use contenteditable (which is good thing).

Felix

2011/12/23 Charles Wells <cha...@abstractmath.org>

--
http://www.felixbreuer.net

[Christian Perfect]

Felix,
I've fixed the bug that made new pages appear locked. If you'd just
refreshed the page it would've updated the access display, but anyway
it's fixed now.

cp

[John A]

Hello everyone,

Including an equation editor in the mediawiki Visual Editor is
something that I think will help a lot of websites. I'm a big fan of
lyx, so anything that could simulate that functionality for a website
I think would be great.

I took a stab at some basic tex support within the VisualEditor code.
What it lets you do is highlight text on the left side of the Visual
Editor and mark it as tex code. Then in the wikitext viewer on the
right side, it appends <math> and </math> to that text. In the html
viewer it appends <script type="math/tex"> and </script> and in the
renderer it shows the mathjax formula. It is my first experience with
javascript and really with mathjax in general, so please keep that in
mind when you look over the code.

Here's the patch (if there is a more official place to host it please
feel free to move it there):
https://jalto.net/tex.patch

Here's the steps:
svn checkout http://svn.wikimedia.org/svnroot/mediawiki/trunk/extensions/VisualEditor/
cd VisualEditor
wget https://jalto.net/tex.patch
patch -p1 <tex.patch

It seems to do the job fairly well. An issue that I noticed was that
if you type in an equation with brackets {}, click out of the equation
and then change something within the brackets, then the tex marker is
taken off the new text. By highlighting the new text and marking it
as tex, everything works fine again. I think brackets must have a
specific meaning within the VisualEditor code.

Also, is <script type="math/tex"> the proper way to do this? It seems
to work fine, but I'm new to mathjax. Does anyone know why there
aren't any indents in Mathjax.js, it makes it impossible to read.

So hopefully this is a starting point. Together I think we should be
able to figure this out,

Thanks,

John


On Dec 24 2011, 3:42 am, Christian Perfect

<christianperf...@gmail.com> wrote:
> Felix,
>   I've fixed the bug that made new pages appear locked. If you'd just
> refreshed the page it would've updated the access display, but anyway
> it's fixed now.
>
> cp
>
>
>
>
>
>
>
> On Fri, Dec 23, 2011 at 8:20 PM, Felix Breuer <fe...@fbreuer.de> wrote:
> > I have talked with the Substance people about this and apparently they are
> > not exactly happy with their own rich text editor component - as I mentioned
> > before, building on contenteditable is a pain. They pointed me to
> > MediaWiki's Visual Editor component (which they are thinking about using as
> > well). I think it would be really valuable to integrate MathJax with
> > MediaWiki's visual editor - but I have no idea about the technical
> > feasibility. Looking at the source, I can say this much: MediaWiki does not
> > use contenteditable (which is good thing).
>
> > Felix
>

> > 2011/12/23 Charles Wells <char...@abstractmath.org>

[Davide P. Cervone]

Looks like you are doing some good work, but have a few details to
work out.

> Also, is <script type="math/tex"> the proper way to do this? It seems
> to work fine, but I'm new to mathjax. Does anyone know why there
> aren't any indents in Mathjax.js, it makes it impossible to read.

There are two different types of equations: in-line and displayed
equations. The in-line equations are those that form part of a
paragraph and fit into the rest of the text of the sentence in which
they are used, whereas displayed equations are offset on their own
line, often centered, with space above and below. These are usually
longer equations that would cause line-break problems if they appeared
within the text.

In TeX and LaTeX, the difference between these is indicated by the
delimiters used: $...$ or \(...\) for in-line equations, and $$...$$
or \[...\] for displayed equations. In MathJax, these are represented
by <script type="math/tex">...</script> and <script type="math/tex;
mode=display">...</script>.

You are using only the in-line form, so the things that should be
displayed equations are being represented as in-line equations, so
they are not centered by MathJax, and will not use the displayed
equation spacing rules.

You probably need to give your users two choices for math (in-line or
display). Or you could perhaps make some guesses about which is
needed, depending on whether the equation is in a paragraph by itself,
but that would be more fragile.

Davide

[John Altobelli]

Davide,

Thank you for the response, you were absolutely correct, only inline
equations were implemented in the patched mediawiki Visual Editor.
This was actually by design because I thought displayed/centered
equations would be better defined using the dropdown menu at the top
of the editor. However, I certainly didn't state this in the original
email.

I've added in displayed/centered equations the way I was thinking and
I'd love to hear your feedback. I've also changed the leftside
display of the inline equations from italic to a box around the
equations. A shortcut to inline equations was added as Ctrl-Win-M,
which is close to lyx's command. (See attached patch)

Of course the end goal is for the user to have an option not to have
to input tex equations, but instead use some sort of an equation
editor which would be similar to lyx. Then on the backend it would
convert that to tex and bring it over to the right side as either
wikitext, json, html, or rendered.

From the mathjax perspective, I've noticed that the mathjax script is
able to find equations that are outside the <script> tags (ie
http://www.mathjax.org/demos/tex-samples/). Since the mathjax script
has to run often using the MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
command, is it possible to tell it to only check <script
type="math/tex"> tags and ignore all other text? Would this be
reasonable and how much time would it save during the render?

Thanks,

John

[John Altobelli]

I've put the changes up on github:
https://github.com/jalto/VisualEditor . The site is yet another new
thing to me, so if I did something wrong please let me know. Unless
mediawiki comes out with something drastically important, I think I'd
like to try to treat the git as a temporary fork so we don't have to
keep updating it from svn. I'd be happy to allow contributors or feel
free to fork and we can merge it later. Hopefully github will support
php in their "github pages" section and we can use the site directly
as a testing ground. Until then I've got it hosted at
https://jalto.net/equationdb/VisualEditor/demo/ (please be kind to the
server, it's a sheevaplug).

There are two problems currently:
1) We need to find a way to disable the other formatting options when
either the inline equation or centered equations are in use. To see
what happens, create a new centered equation and make it bold. You'll
notice the <b><\b> tags will show up in the equation.
2) The next problem is a bigger Visual Editor problem and the fix
should go upstream, but if you click away from an inline equation and
click back in the middle of the equation, the new text does not get
included within the equation. The same thing happens with bolds and
italics, so it's not specific to the new work. By selecting the new
text and selecting the inline equation button, everything works fine.

Next there are design decisions for the left side panel. We have to
decide what gets displayed. I think we'll need to use something
similar to how it handles internal and external links, where more
options are available below the equation. I'd like to see the ability
to input an equation as tex, mathml, or some sort of lyx type input.
For example if you check out the first equation at
https://jalto.net/equationdb/working/ , you can see that
contenteditable really can be used to change a lot of values within an
equation. If we have a script watching user input, and they type
something like \frac then the equation on the left hand side could be
updated to include the horizontal bar and the numerator and
denominator could be editable. The same could be true for entering
greek leters, ie if someone typed \pi and then space, it should be
replaced with a pi symbol.

That's probably enough rambling for this evening. Thanks for listening.

John

[John Altobelli]

Problem #2 has been fixed in the code. A bug has been filed
(https://bugzilla.wikimedia.org/show_bug.cgi?id=33596).

New Problem: Highlighting and replacing text causes the new text to
loose the annotation type (math formatting). This occurs with all
annotation types (bold, italic, etc) as well.