Page MenuHomePhabricator

Create a visual VisualEditor plugin tool to add/edit maths blocks
Open, MediumPublic

Description

Math is editable, but only as plain LaTeX like in the wikitext editor: https://en.wikipedia.org/wiki/User:Raymond/Math

Screenshot 2015-07-19 19.39.43.png (860×800 px, 144 KB)

Figure 1: Current non visual visual editor

Details

Reference
bz43058

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 1:11 AM
bzimport added a project: Math.
bzimport set Reference to bz43058.
bzimport added a subscriber: Unknown Object (MLST).

This will require Parsoid to be finished and expose ParserHooks to get alienated, and then a VE node handler to be written. The first bit is relatively easy, but the second is a very significant undertaking, so prioritising as "lowest".

jiabao.foss wrote:

(In reply to comment #1)

This will require Parsoid to be finished and expose ParserHooks to get
alienated, and then a VE node handler to be written. The first bit is
relatively easy, but the second is a very significant undertaking, so
prioritising as "lowest".

Hello James, I have designed and written my proposal for a plugin that will fix this bug. http://www.mediawiki.org/wiki/User:Jiabao_wu/GSoC_2013_Application

I am not yet familiar with the VE architecture so I need some help understanding it and your comments. Is my design close to what it needed for a "node handler" for the maths elements in a wiki page. Also currently I have two modules named doc reader and doc writer. It would be helpful to know more about how these can interact with the document in visual editor.

The design that I proposed of the User Interface for my plugin be similar to that of google docs. I am wondering if this is closer to what the community wants and needs for VisualEditor. Or if it would be better to stay closer to the existing way special characters are inserted in the traditional wikitext editor.

Thanks,
Jiabao

(In reply to comment #3)

Are there any news on this?

Jiabao was accepted as a GSoC student and will be working on this with us. Updates are going to be added at [[mw:User:Jiabao wu/GSoC 2013 Project Work]].

Wondering how the rendering is going to happen? Is it going to use MathJax which is the only game in town at the moment? The default texvc render won't be up to the job as it need to recreate an image for every keystroke. MathML based renders have basically failed with poor browser support.

If you use MathJax deployment will be a problem unless bug 36496 is fixed.

physik wrote:

I think a combination of MathML and MathJax would be optimal.
See https://gerrit.wikimedia.org/r/#/c/69298/

@Richard this plugin won't be dependent on bug 36496 (MathJax as default). Texvc-compatible syntax remains the internal/wikitext format. MathJax provides a live-preview within VE to enable visual editing. (Of course, a future iteration might use MathJax to save MathML and SVG alongside the TeX.)

Is this connect with http://www.mediawiki.org/wiki/VisualEditor:TestMath? If so its a nice start but I'm having trouble editing a large formula for arctan2 at the bottom?

@Richard I don't know which VE version is running there. I think I should point out that this is a GSoC project in the middle of development, not anywhere near production ready, frequently breaking etc.

(In reply to comment #7)

@Richard this plugin won't be dependent on bug 36496 (MathJax as default).
Texvc-compatible syntax remains the internal/wikitext format. MathJax
provides
a live-preview within VE to enable visual editing. (Of course, a future
iteration might use MathJax to save MathML and SVG alongside the TeX.)

Have removed the dependency.

(In reply to comment #8)

Is this connect with http://www.mediawiki.org/wiki/VisualEditor:TestMath?

Yes; that's the work being done by Jiabao Wu as part of Google Summer of Code. See https://www.mediawiki.org/wiki/User:Jiabao_wu/GSoC_2013_Project_Work for updates.

Its important that it will be possible to enter the raw latex and that the text input area is large enough to enter a large formula. Editing the formula for atan2 at https://www.mediawiki.org/wiki/VisualEditor:TestMath now give a multi line box, but its still a bit small and wraps the formula.

It may be an idea to use a different size box for inline formula which tend to be short and display formula which tend to be larger. $ vrs $$ in latex syntax, I don't know how you would distinguish this in VE.

The need for latex input was discussed at https://www.mediawiki.org/wiki/User_talk:Jiabao_wu and came up again at http://en.wikipedia.org/w/index.php?title=Wikipedia:VisualEditor/Feedback&curid=37904286&diff=570517247&oldid=570514963

GSoC "soft pencils down" date was yesterday and all coding must stop on 23 September. Has this project been completed?

If you have open tasks or bugs left, one possibility is to list them at https://www.mediawiki.org/wiki/Google_Code-In and volunteer yourself as mentor.

We have heard from Google and free software projects participating in Code-in that students participating in this programs have done a great work finishing and polishing GSoC projects, many times mentores by the former GSoC student. The key is to be able to split the pending work in little tasks.

More information in the wiki page. If you have questions you can ask there or you can contact me directly.

Created attachment 13550
Screenshot of editing a math block

Some small tweaks are needed to the dialog box. Editing the last equation at https://www.mediawiki.org/wiki/VisualEditor:TestMath?veaction=edit
there are a a few problems

  1. The dialog obscures the actual equation
  2. The dlalog is too small to see the whole source text of the equation

This could be solved the making the dialog, moveable and resizeable.

Attached:

VEmath.png (205×551 px, 33 KB)

Also editing the last equation at https://www.mediawiki.org/wiki/VisualEditor:TestMath?veaction=edit

if you actually make a change to the text of the equation the displayed equation becomes very jumbled. Any vertical positioning is lost, and text from different lines are overlaid on top of each other.

This happens with Chrome on a Mac, I can't seem to edit equations at all with firefox or safari.

@Richard/others: Thinking about making the dialog draggable and resizable...

The solution I initially think of is installing jquery.ui and then adding some parameters to OO.ui.Window that allow it to be made resizable and/or draggable. However, if I recall correctly one of the principles of OOJS was to be self-contained... so would this be wrong? Could someone else with a bit more firsthand experience chime in here?

Just a bit of background: Theopolisme is a Google Code-in student working on a task related to #comment 15 that was created by Jiabao:

http://www.google-melange.com/gci/task/view/google/gci2013/5861921152565248

Jiabao has been silent in the past days. Your help is welcome while she comes back. Thank you!

There are different problems reported here, and we should have separate reports for each. Then we will tie each bug report to a Google Code-in task:

  • The dialog overlaps the equation: the solution might be a combination of setting a default position with less chances of overlapping and/or allowing the dialog to be moved to a different position?
  • The dialog is sometimes too small: the solution might be to make the dialog resizable?
  • #Comment 16 deserves an own bug report but, haven't tested this plugin myself, I can't describe the problem or propose solutions.

Richard, would you like to create these reports?

I'm going to pull http://www.google-melange.com/gci/task/view/google/gci2013/5861921152565248 in order to create 2 GCI tasks or more. Theopolisme, you can try to work on these issues now, or you can wait until the plan is more defined (and Jiabao is back, or we have found a co-mentor able to help you).

OK I've created bug 57437 for the tweaks to the dialog and assigned it to Theopolisme. Hope that OK.

Seems that Jiabao is not currently working on this ticket, hence resetting ASSIGNED status.
It's a bit unclear to me which further steps are required to get this ticket closed (probably creating dependency tickets for the items in comment 19?).

physik wrote:

From what I see
https://gerrit.wikimedia.org/r/#/c/105647/ and
https://gerrit.wikimedia.org/r/#/c/105648/
need to be resolved before we can make progress on that.

Bug 57437 is to "Allow the VE dialog for math elements to be movable and resizable", which is already a blocker for this ticket. This assigned to a google code-in student, Theopolisme, who I suspect is no longer working on that bug.

I've create bug 61497 to cover up the jumbled up formula in comment 16.

I think Jiabao original plan was to create a GUI I've added a bug for this as bug 61498.

Dialog overlapping the equation might be resolved by bug 57437 or it could possibly resolved by changing the way it is initially displayed.

(In reply to Andre Klapper from comment #21)

It's a bit unclear to me which further steps are required to get this ticket
closed (probably creating dependency tickets for the items in comment 19?).

No, the issues in comment 19 only refer to the short-term LaTeX editor. This bug is asking for a fully-featured visual interactive editor for formulae – will merge bug 61498 back into this.

  • Bug 61498 has been marked as a duplicate of this bug. ***

I hope the LaTeX editor is not going to be short term. This is the preferred input method for the mathematical community. By all means develop a GUI but please make sure you can still use a LaTeX input method.

(In reply to Richard Morris from comment #26)

I hope the LaTeX editor is not going to be short term. This is the preferred
input method for the mathematical community. By all means develop a GUI but
please make sure you can still use a LaTeX input method.

+1

I'm not sure we need to reinvent the wheel. Aren't there already libre JS formula editors that can export to LaTeX? I just found one from Google: http://mathdox.org/formulaeditor/

(In reply to PiRSquared17 from comment #28)

I'm not sure we need to reinvent the wheel. Aren't there already libre JS
formula editors that can export to LaTeX? I just found one from Google:
http://mathdox.org/formulaeditor/

Who is talking about re-inventing the wheel?

physik wrote:

I'm happy to see the interest in the Math extension.
It would be really great to get some code reviews. There are a lot of unmerged improvements that are already implemented that wait for a code review.
https://gerrit.wikimedia.org/r/#/q/status:open+project:mediawiki/extensions/Math,n,z
The fromula editor for math is one example. The code for Math 2.0 that was finished in beginning of October 2013 is still waiting for review and not moving forward at all. That's really a very sad situation. (Sorry for the spamming)

This has been fixed a looong time ago, or needs a better summary to explain what's missing.

Jdforrester-WMF renamed this task from Create a VisualEditor plugin tool to add/edit maths blocks to Create a visual VisualEditor plugin tool to add/edit maths blocks.Dec 18 2014, 8:08 PM

This has been fixed a looong time ago, or needs a better summary to explain what's missing.

Happy?

Jdforrester-WMF lowered the priority of this task from High to Medium.Jan 15 2015, 12:20 AM
Physikerwelt claimed this task.
Physikerwelt subscribed.

I tested

Math is unparsed but shown as plain wikitext: https://en.wikipedia.org/wiki/User:Raymond/Math

and i could edit without issues. I could see a renderd formula when visiting this page
https://en.wikipedia.org/wiki/User:Raymond/Math?veaction=edit
Ok it had the png rendering and not the MathML rendering, but I think this is a seperate bug.

No. By "plain wikitext" the filer means "in LaTeX rather than visually", hence the title of this task.

I was already wondering... yes when you wonder...there might be a good reason for that;-)
Thanks for the clarification. So you mean something like
http://saskatoon.cs.rit.edu/min_instructions/

I added a screenshot so that the task becomes easier to understand

[http://en.wikipedia.org/wiki/Help:Displaying_a_formula Help:Displaying a formula Wikipedia Help:Displaying a formula]

[http://en.wikipedia.org/wiki/File:Editing_a_formula_using_VisualEditor.png This screenshot shows the formula ''E'' = ''mc2'' being edited using VisualEditor.]

  • I suggest Math Editor, a full visual math editor for VisualEditor. This would work in a similar way to a visual calculator (keyboard). If you put / in the visual box in your keyboard, it would put the wikitext: \frac .
  • It also can link to a visual list with commons functions (as square root), mathematical input graphical environment or math handwriting recognition. See:

https://www.texthelp.com/en-us/products/equatio/equatio-for-windows/ . Just some ideas ;-)

(In reply to comment #3)

Are there any news on this?

Jiabao was accepted as a GSoC student and will be working on this with us. Updates are going to be added at [[mw:User:Jiabao wu/GSoC 2013 Project Work]].

I suggest a way to implement Mediawiki links in Phabricator. ~~~~

Good!!!.

Created attachment 13550
Screenshot of editing a math block

Some small tweaks are needed to the dialog box. Editing the last equation at https://www.mediawiki.org/wiki/VisualEditor:TestMath?veaction=edit
there are a a few problems

  1. The dialog obscures the actual equation
  2. The dlalog is too small to see the whole source text of the equation

This could be solved the making the dialog, moveable and resizeable.

Attached:

VEmath.png (205×551 px, 33 KB)

I suggest a way to implement Mediawiki links in Phabricator. ~~~~

[offtopic] @BoldLuis: Please use the Preview at the bottom, below the comment field, before submitting a comment. See T251657. Thanks :)

Please also avoid unnecessary full quotes of previous comments when not needed.