arnog / mathlive Goto Github PK

View Code? Open in Web Editor NEW

1.2K 1.2K 249.0 41.54 MB

A web component for easy math input

Home Page: https://cortexjs.io/mathlive

License: MIT License

JavaScript 4.90% Shell 0.64% TypeScript 84.21% Less 4.06% HTML 5.78% CSS 0.41%

custom-elements editor javascript math mathfield typescript webcomponent

mathlive's People

Contributors

Stargazers

Watchers

Forkers

lilfaf tom-s alexandre-garrec 19test ktj4820 nsoiffer mildlyincompetent arifw3 blueknek johnblesswin oskarhinc engagedlearning afijal dariobanfi alzy jboxman jasoncable lingrin elenacherepovskaya ldmtop68 lazidoca ddoyen soroushj purdue-tlt johanneswilm zhou6228 lelivrescolaire concludio developer-sunnywu shanhaiying rjclio justiceroyale1 benetechmatt plfort toanthuan nilesh-misal paosder a2l5t8 acegentile akashdeepbansal chillingvan sanchit002sanchit002 arncet zoranpopovic cywongnorman wzlw yzhang2907 omdesignz spirobel bengolds avmi itempool serginnios showbie-socrative aronpasieka protocyber bhujoshi somnath47 baojun-lee mulxcode jkorum mukasun develite98 stefnotch khazuar beneater kurosh-z edialearning shabashev-ivan gifary hepeng10 wonwondogs haozit146 antkhnvsk xiesangzi zxxryu jkla972 alexprey andresriveratoro kydyralin shariful2011 pontusgranstrom grant-davidson shaman123 rkeulemans mohammed-aslam shuaihuzhou leerobert crocla anantmittal cosdyt xrmx bdomitrekcforp ajean jongwon e3d cenven eds007 harrisnl physedo

mathlive's Issues

Can't type symbol of lower frequency

Description

If I want to type a TeX command for a symbol which has lower frequency than another symbol, and that more frequent symbol has a longer length, I can't type the lower frequency symbol. For, example, if I want to type \triangle, the suggested symbol for completion is triangleq (see screen image).

If I type a space or 'enter' key at this point, I end up with \triangleq. I can't see that there is any way that I can get the triangle symbol by typing the \triangle command.

Steps to Reproduce

Open mathlive.io, select the contents and type \triangle
Hit the enter key
You get \triangleq pictured below

Code to look at

It appears that the problem is either in EditableMathlist.prototype.extractCommandStringAroundInsertionPoint or in EditableMathlist.prototype.commandOffsets. In the former, perhaps it should return two values: the first is the (potential) command up to the point of the suggestion starting and the second is (as it currently stands) including the suggestion (siblings value has suggestion: true). That way the call MathField.prototype.complete_, which does the matchSymbol call can do a check for what is typed rather than the longer completion. In the later, perhaps a check could be made and both returned there. I think modifying extractCommandStringAroundInsertionPoint is likely better since it affects fewer calls.

Suggestion: add interface to allow specifying action for a key event

Description

I'd like to capture some key events and do some action with them. E.g., I'd like to capture shift-delete/backspace and bind those keys to an action that will cross out the item that would have been deleted. Ideally, I'd like the scheme to support multiple keystrokes, but potentially that is something that is handled by the callback (i.e, the callback records state).

Currently, there is no public interface to do this. However, there is a private interface in editor/keyboard that includes:

delegateKeyboardEvents(textarea: Element, handlers: Object)

Exposing something like this would like let me do what I want, at least for single key events.

Control of passing on the event to let another handler take it should probably be left up to the handler, but that needs to be thought about and maybe the answer is dependent upon the specific key event.

\leq and \geq are mapped to wrong versions of symbol

Description

<= and >= display with a slanted equal sign

The version with a horizontal equal sign is more common and the asciimath.org page shows these characters with the horizontal equal sign:

On mathlive.io, typing those chars shows the latex to be the slant versions: a\leqslant b\geqslant c.

Perhaps the problem is that \leq and \geq seem to use them... mostly. If I type \leq followed by 'enter', I get the slant version and the latex shows \leqslant. But if I type something like a\leq\alpha, I get the common version.

It seems like some matching algorithm is preferring the longest match, not the shortest one.

Cross out not dealing with overset

Description

Cross out is way too big around an \overset

Steps to Reproduce

Enter \enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{{\overset{?}{=}}`

Here's what I see:

It's about twice as high as it should be.

· (middle dot) doesn’t become \cdot

Hi, awesome project, thanks for making it!

My keyboard has a way to input “·” (Middle dot), but not “⋅” (Dot operator).

It would be great if both could be converted to \cdot.

MathFields interfere with tabbing

Description

If you create a page with tabable elements such as buttons, links, or input areas, or elements with 'tabindex' set to a non-negative value, then tabs move you to the next field. However, if you create a MathField (e.g, with MathLive.makeMathField(()), then tabbing gets stuck on the MathField.

Steps to Reproduce

Edit the location of mathlive in the document below to point to your location.
Open the modified attached file
Press the "tab" key to move to the two input elements -- tabbing works
Remove the "xxx" in the id for the mathfiield, save the file, and reload the page.
Press the "tab" key -- it is stuck in the mathfield.

Importance

Tabbing is very important for accessibility.

Environment

Windows 10, both Chrome and Firefox.

File

HTML file to try:

<!DOCTYPE html><html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>MathLive Sample</title>

    <link rel="stylesheet" href="../mathlive/dist/mathlive.core.css">
    <link rel="stylesheet" href="../mathlive/dist/mathlive.css">
    <script src="../mathlive/dist/mathlive.js"></script>
</head>
<body>
	<input type="text" placeholder="a place to tab to"/>
    <div id='xxxmathfield' style='border: 1px solid #999;padding:5px;'>
        f(x)=
    </div>
	<input type="text" placeholder="another place to tab to"/>
<script>
    const mathfield = MathLive.makeMathField(document.getElementById('mathfield'));
</script>
</body>
</html>

\enclose with crossout should make it harder to edit the contents

Description

If you cross something out with \enclose, then it should be hard or impossible to edit what is crossed out. Right now, it is hard to edit before or after a cross out because the insertion cursor wants to be inside the cross out.

Steps to Reproduce

Start with \frac{\enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{15}}{3}. This displays as:
I want to write '5' next to the crossed out 15. Click near the edge of cross out. You either end up with the insertion cursor inside the cross out or you end up outside of the fraction.
If you click in front of the '3' in the denominator and then hit left arrow, you can "sneak up" up on the cross out. However, the insertion cursor doesn't show up:

Expected Behavior

In the later case, the lack of an insertion cursor is a bug.

In the first case, clicking to the side of the crossed out content should put the insertion cursor outside
of the cross out. I.e, clicking in the highlighted areas

should put the insertion cursor to the side of the cross out. Currently clicking in those areas puts the insertion cursor inside of the cross out.

shift-left/right arrow doesn't follow standards

Description

At least under windows, if you click to set an insertion point, this acts as an anchor when extending a selection. E.g, if you have the characters "1234" and click between the 2 and 3, this set an insertion point. You should see the following behavior as you go type shift+left/right arrow:

shift+right arrow, the '3' is selected.
shift+left arrow, there is an insertion cursor between 2 and 3
shift+left arrow, the '2' is selected.

Steps to Reproduce

mathlive's behavior differs because it appears that the insertion point is lost/off by one (on the right side). Start with the same example: "1234"

shift+right arrow, the '3' is selected.
shift+left arrow, there is an insertion cursor between 3 and 4 -- it should be between the 2 and 3 where it started.
shift+left arrow, the '3' is selected.

If you select left first and then select right, you see the same behavior (insertion cursor between 3 and 4).

Environment

Chrome and Firefox on Windows

can't click in empty numerator

Description

When the numerator of a fraction is empty, you can't click in it to set an insertion cursor. This likely applies to any 2D notation slot.

Steps to Reproduce

Type 'a/' to get a fraction with 'a' in the numerator and a placeholder in the denominator.
Click in the numerator and delete the 'a'
Click outside of the fraction so the insertion cursor moves out of the numerator
Try to click inside the numerator -- the insertion cursor is placed on the left or right side of the fraction.

It is possible to arrow into the numerator.

insertion point selection when deleting numerator

Description

I don't think the insertion point position when the numerator is deleted what it should be. Currently the code places the insertion point after the denominator. But that's not where it would was when entering the fraction -- it would be in before the denominator

Steps to Reproduce

open mathlive.io
type a/b+1
delete the 'a' so the numerator is empty.
hit delete.

The insertion point is after the '1'. I believe it should be before the 'b' since you logically have '/b+1' and are you deleting the '/'.

The problem is at editor-editableMathlist.js:1491 (in ditableMathlist.prototype.delete_):
old: this.setSelection(this.anchorOffset() + denom.length - 1);
fix: this.setSelection(this.anchorOffset() - 1);

Note1: the code seems unfinished around here because if you have an empty numerator, you can't use backspace to delete the numerator (and fraction). Similarly, you can't use delete to delete an empty denominator (and fraction).

Note2: there is also a bug with an empty numerator (or denominator) -- you can't click to place the cursor into the empty numerator or denominator. You can arrow your way there though.

azerty keyboard

Description

Is it possible to add support for azerty keyboard ?

Exemple

shift + 6 = ^ ( in querty )
shift + 6 = 6 ( in azerty )

enclose draws poorly

Description

The way cross outs (using \enclose) are drawn makes is hard to tell what is crossed out. E.g., in the following, the entire (complex) fraction is being crossed out, but that's not obvious from the rendering:

Here's the latex for that example:
\enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{\frac{a}{\frac{b}{c}}}

I think it would be best to draw the diagonal strikes from corner to corner of the bounding box. That would correspond to what the MathML spec says

The values "northeastarrow", "updiagonalstrike", "downdiagonalstrike", "verticalstrike" and "horizontalstrike" should result in the indicated strikeout lines being superimposed over the content of the menclose, e.g. a strikeout that extends from the lower left corner to the upper right corner of the menclose element for "updiagonalstrike", etc.

\begin{array}... external output has extra row

Description

When I enter a two row array, the generation of the LaTeX and MathML has an extra row.

Steps to Reproduce

In mathlive.io paste \begin{array}{r} 123 \\ 3\end{array}. This displays correctly with two rows.
Observe that the TeX that is generated is \begin{array}{r}123 \\ 3 \\ \end{array} and the MathML is

<mtable columnalign="right ">
    <mtr>
        <mtd>
            <mn>123</mn>
        </mtd>
    </mtr>
    <mtr>
        <mtd>
            <mn>3</mn>
        </mtd>
    </mtr>
    <mtr>
        <mtd>
        </mtd>
    </mtr>
</mtable>

Both of these have three rows instead of two rows.

Add conversion to/from MathML

Description

It would add utility to mathlive to support both input and output of MathML. No one will type MathML, but it is a common interchange language so someone might have copied it from somewhere and want to paste it into mathlive.

For output, it would be good to make it an accepted format for the existing text function. Supporting output will enhance accessibility as it can be used internally to produce hidden MathML that screen readers can see and use for speech, navigation, and braille.

$ and % when used in an inlineShortcut don't behave properly

Description

In order to get a $ to show up, one needs to type $ in the editor. Given that we are in math mode and we don't need to worry about starting/ending math mode, it's not clear that the escapes are really needed.

Be that as it may, one workaround to make entering it easier is to use an inline shortcut as in:

MathLive.makeMathField(
	document.getElementById('mathEditorActive'),
	  {commandbarToggle: 'hidden',
	 overrideDefaultInlineShortcuts: false,
	 inlineShortcuts: {
			'$': '\\$',	// make it easy to type $
			'%': '\\%',	// make it easy to type %
		        }
	}

If you do this, then the following happens:

If you type '$' at the start of the math (or start of a numerator, etc), '$' shows up
If you type '$' after other characters, then it eats the previous character. E.g., '$2+$' results in the display '$2$'. This is the bug.

Note: all of the above applies to both $ and %.

"^" and "_" not working inside of {}s

Description

The superscript and subscript characters "^" and "_" don't work inside of braces during input inside of the math editor

Steps to Reproduce

Type "\frac{x^2}{y_1}
The result is as if the ^ and _ were not typed (i.e., you get \frac{x2}{y1})
Outside of {}s, the characters are not echoed, but do result in shifting the insertion point up or down

missing cases for delims

Description

It appears that there are number of places where the implementation regarding delims and sizeddelims is incomplete. Here are some examples that show problems...

Steps to Reproduce

Open mathlive.io,
Select the default contents and paste \Bigl{\lfloor}\blacksquare\Bigr{\rfloor}

Bugs

Clicking -- click anywhere to the left of the square (before left floor or square) - no insertion cursor; clicking anywhere after the square, including at the far edge and insertion cursor is directly after the square, never after the delim
Arrowing left or right -- moving the insertion cursor around with arrow keys results in not showing the insertion cursor when it is after a delim.
LaTex -- the delims do not show up as the latex equivalent -- it is shown as \blacksquare on the mathlive.io page.

Cross outs are positioned wrong

Description

Cross outs are positioned wrong. They broke recently.

Steps to Reproduce

On mathlive.io, paste the following \enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{x}=2

Actual behavior

Here's what it looks like:

The cross out should cover the 'x'.

Static math should be accessible

Description

There has been some work on making the editor accessible. More remains to be done for that. However, the static math (the parts inside of '$$') are not accessible at all; that is the easiest part to deal with.

Proposal

This proposal is based on what is used by Wikipedia, MathJax, KhanAcademy do for accessibility.

Each piece of math should consist of a pair of spans:

the CSS mess to display the math
the accessible part (preferably MathML -- see below)

The CSS mess has aria-hidden="true" on it so that AT doesn't try to read that mess. The accessible part is clipped so that it is not visible (i.e, non-AT users don't know it is there).

Although maybe not necessary, it seems cleaner to wrap both spans in a single span. This means that where ever a span was created before (with class="ML__mathlive"), there still exists a single span.

Most AT such as JAWS, NVDA, VoiceOver, and TextHELP know how to convert MathML into something accessible. This includes speech (often with prosody), navigation, and often braille. Ideally, the accessible span should be MathML to take advantage of this. However, as a first step, we can take advantage of the existing support for generating text from LaTeX and use that in the span.

& in array env generates new row, not new column

Description

In an array environment, & should mark a new column and \\ a new row. \\ does the right thing, but & creates a new row also, not a new column.

Steps to Reproduce

In mathlive.io, paste \begin{array}{r}-13 & +13 \end{array}. The display is

It should be

Fraction line disappears at some font sizes

Description

The line used for fractions (and probably other cases) disappears at certain font sizes.

Steps to Reproduce

Open a chrome tab andt ype cntl+0 to set the size to 100%
Open mathlive.io in that tab.
After the '=', type 1/3 -- looks good
Click outside the edit area and type cntl+= to increase fontsize to 110% -- fraction line goes away

It's back 125%. Going the other way, it's there at 90%, but not at 80%.

Same thing happens for the horizontal line in roots.

Environment

It happens on

Windows 10
Chrome, but not Firefox (at least the cases I tried)

deleting numerator leaves placeholder denominator

Description

If you use delete and delete an empty numerator, the fraction goes away and the denominator replaces it. That's fine for most things, but if the denominator is a placeholder, it too should go away.

Steps to Reproduce

Type a/. You should see
Click in the numerator and delete it it so that you have
Type Delete. You end up with just the placeholder (not as part of a fraction):

I would expect the denominator to disappear in this case.

An analogous things happens with the numerator: type /, delete the denominator, then type backspace and only the numerator placeholder is left.

Need a way to set a minimum font size

Description

As you use exponents, fractions, etc., the rules of TeX shrink the font size. In TeX, it will shrink at most three times. mathlive seems to follow this rule, but the smallest size is too small to easily read on a screen.

Below is an example (see exponent in denominator):

For people with good sight, this is very hard to read. Any one with the slightest visual disability would not be able to read this. If another app is using mathlive, then for accessibility reasons, the app may want to sacrifice some typesetting quality for readability.

Note: MathML has an attribute to deal with the readability issue. From the MathML ref:

scriptminsize | length | 8pt

Specifies the minimum font size allowed due to changes in scriptlevel. Note that this does not limit the font size due to changes to mathsize. See Section 3.1.6 Displaystyle and Scriptlevel.

It would be helpful to have such a setting in mathlive.

Suggestion for getOriginalContent

Description

getOriginalContent is very useful for extracting the math content from the page after mathlive has turned it into pretty math.

However, it is "fragile" because it only works for a single piece of math in an element, and if there is any whitespace inside the element, getOriginalContent won't find it. E.g, calling getOriginalContent on the following div works:

    <div>$$x^2+1$$</div>

but calling it on this div will not work due to the whitespace:

    <div> $$x^2+1$$ </div>

Potentially, there could be multiple pieces of math inside the div

Suggestion

getOriginalContent currently returns a string. It can be generalized to return an array of strings, one for each piece of math inside of the element. This would allow it work for several pieces of math in an element. More importantly for my usage, it would mean that whitespace would not be the difference between working correctly and failing to return an answer.

Problems with \enclose rendering

Description

The new \enclose command doesn't render properly. It should center the contents and add some padding. For maximum flexibility, the alignment and padding can be parameters, but the defaults should definitely be "center" for alignment and probably 0.4em horizontally and 0.5ex vertically (taken from the recommendations in the MathML spec).

As an example of the poor rendering,
\enclose{updiagonalstrike downdiagonalstrike}{\blacksquare}

displays as

(ignore the blue blob, that seems to be an artifact from the screen copy tool)

In the more complicated second case below, the centering and padding look good, but the linecap style on the lines can be improved (I think):
\enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{\frac{x^2+y^2}{\sqrt{x^2+y^2}}}

\overset & \underset don't allow editing of annotation

Description

The notation for underset and overset is:
\overset{annotation}{base}

In the editor, you can not select or move the cursor into the annotation part of the construct.

Steps to Reproduce

In a math editor instance, type 1+\overset{x-1}{ax+by+c} followed by enter
The \overset is properly display
Try to arrow backwards -- you can't get to the 'x-1'
Try to select 'x-1' -- you can't

I tried this in both Chrome and Firefox.

Clicking in empty numerator causes placeholder to appear

Description

If you create a fraction and delete either the numerator or denominator, it is blank. But if you click in the empty slot, a placeholder appears. This seems wrong (clicking shouldn't change the appearance)

Steps to Reproduce

Type a/. You see
Type delete to delete the placeholder. You see
Click in the denominator. You see

A similar thing happens for the numerator.

Typing in command completion suggestion causes internal error

Description

If you start to type a command, you often get a potential completion. If you click into this completion, all but the character in front of where you clicked changes from a grayed out color to the color of typed text. See image:

Note: I'm surprised that not all of the characters up to the point of the insertion cursor act like typed characters, but that's a different potential bug...

If you now type a character, you get the internal error (from the chrome debugger):

editor-editableMathlist.js:603 Uncaught TypeError: Cannot read property 'value' of undefined
    at EditableMathlist.extractCommandStringAroundInsertionPoint (editor-editableMathlist.js:603)
    at MathField._onTypedText (editor-mathfield.js:681)
    at handleTypedText (editor-keyboard.js:186)
    at editor-keyboard.js:174

Steps to Reproduce

Open mathlive.io, along with the chrome debugger (probably any of the browsers/debuggers will do).
Type \ri and you will see the following completion
Click after the 'w' (other places will also trigger the error), and type w.

You get the uncaught type error.

Where the bug lies

Although this happens in at the point indicated in the message, the problem lies in the call to this.commandOffsets. That returns an 'end' value beyond the length of the siblings array, and hence the bug.

This happens because in editor-editableMathlist.js, end is set to the startOffset()+1. In this case it is 12, but the length of the siblings array is only 11, which means the last element has index==10.

#0 as part of insert doesn't become a placeholder

Description

Here is the documentation that describes how #0 should work:

.insert(content, options) insert the specified content at the current insertion point. With options it is possible to specify the insertion mode, as well as what will be selected after the insertion. If the content contains a #? a placeholder will be indicated in its stead. The #0 sequence will be replaced by the item currently selected (or a placeholder if nothing is selected)

In practice, doing an insert with #0 does nothing with a few exceptions (fractions, square roots, ???).

Steps to Reproduce

Inline shortcuts are an easy way to see the problem.

open mathlive.io
type alt-[

What is inserted is \left[\right] -- no placeholder. If you type ctrl-2, you get a square root with a radicand placeholder.

Both shortcuts use #0 (see editor-shortcuts.js).

The bug appears to be in Parser.prototype.scanImplicitGroup

insertion cursor not visible before/after \enclose

Description

When \enclose is at the start/end of an expression, the insertion cursor is not visible when it is before/after the \enclose

Steps to Reproduce

Open mathlive.io
Select the f(x)= and paste \enclose{updiagonalstrike downdiagonalstrike}[2px solid red]{\frac{x}{y}}
Click before or after the cross out. You probably need to move left/right one char with the arrow key because (currently) clicking at the edge lands inside the \enclose.
The cursor isn't visible as (not) shown below:

After cursor click (cursor inside \enclose):

After move right once:

Actual behavior

[What actually happened]
[If there are any error messages, include the exact text shown,
or upload a screenshot]

Expected Behavior

[What you expected to happen]
[Is this a regression: did it use to work in a previous version]

Environment

Operating System [macOS, Windows, iOS], [include the version if possible]

Browser [Safari, Chrome, IE, Firefox, etc...]

URL [URL where the problem can be reproduced, if available]

Inconsistent return type of latexToAST

Description

The latexToAST function in mathlive.js is listed in the docs as returning a string (changed in #71), but returns an Object when the AST module is loaded and the latex is successfully parsed. However, if the AST module is not loaded, an empty string ('') is returned instead.

Steps to Reproduce

Use latexToAST on some LaTeX, for example 1+2.

Actual behavior

The correct AST is produced, but with type Object, not string as expected.

Expected Behavior

Expected either a MASTON-style string to be returned, or a default return value of an empty object instead of empty string if the module is not loaded.

It looks like the intended behaviour here is to output the AST object as the function is currently doing, and for the default return value (if the AST module is not loaded) to be changed to {}, as the default return value appears to be present simply because the function was copied over from latexToMathML.

<- and >- are problematic shortcuts

Description

Type "x<-3". My expectation is that it becomes "x < -3". Instead, it turns into x\leftarrow 3

Similarly, "x>-3" doesn't become "x > - 3", it turns into x\succ 3

Expected Behavior

These shortcuts make it very hard to type these simple expressions. I think they should be removed as there are TeX equivalents to (I believe) less likely situations.

It is probably a good idea to review all the shortcuts for unintended consequences when typing simple expressions.

Missing JSDoc comment blocks on some methods

Description

Some of the methods and functions do not have a JSDoc comment block

Steps to Reproduce

Read the source code of a .js file in the project
Locate a function or method declaration

Actual behavior

Some of the method and function declarations do not contain a JSDoc comment block

Expected Behavior

All methods and function declaration should have a JSDoc comment block, for example:

/**
 * Change the range of the selection
 * 
 * @param {number} dist - the change (positive or negative) to the extent
 * of the selection. The anchor point does not move.
 */
function setExtent(dist) {
...
}

Since this is a potentially large task, partial pull requests will be gladly accepted. Just fix a few functions by adding documentation to them, and submit a PR.
See the JSDoc documentation for details on the various JSDoc tags and how to use them

Add option to ignore escape

Description

The expected behavior for screen readers for edit areas is that Escape removes focus from the current editable field. mathlive maps Escape to \ and there is no way to override this.

There should be a configuration option that makes Esc not be handled by mathlive so that a calling application that cares about accessibility can deal with it. Alternatively, perhaps Esc should not be mapped at all -- it doesn't really add anything since it is the same number of keystrokes to type the Esc key as it is to type the \ key. That would help with mathlive's generic accessibility.

The later fix is trivial to do. In onKeydown i editor-keyboard.js, add the one line below involving "Escape":

        if (!compositionInProgress && 
            e.code !== 'Escape' &&
            e.code !== 'ControlLeft' &&
            e.code !== 'MetaLeft') {
            keydownEvent = e;
            keypressEvent = null;
            return handlers.keystroke(keyboardEventToString(e), e);
        }

Problems with \rlap

Description

There are a number of problems with \rlap

Startup

If a file contains an editor instance (not static math[!]) which is $$\rlap{/}{7}x$$, then when it is displayed, the "/" does not overlap and it displays as "\7x".

Copy

If I type \rlap{/}{7}x in the editor, the display is fine. If I select it and copy it to a text file, the rlap is missing and only "7x" shows up. If there is something in front of the \rlap (e.g., "x+\rlap{/}{7}x"), the same thing happens. Hence, it is not a matter of not selecting the rlap.

Edit

This may not be a bug, but it is definitely not intuitive...

With the expression \rlap{/}{7}x, click at the start of the expression. There is no way to add something that doesn't become the argument of the \rlap. E.g., If I type "x", it has the slash on top of it. No matter what is typed (maybe also pasted) and no matter in what order, the first character always has a slash through it. It is not possible to keep the slash in the '7' nor is it possible to type anything in front of the '7' without it having a slash. Neither backspace nor delete get rid of it either.

Backslash (\)

If '\' is the first arg, either as {\} or {\\}, you don't end up with a "\". In the first case, you end up with a "}" and in the second, you end up with neither '\'nor '7' displaying.

HTML checker says role="none presentation" on textarea is not valid

Title says it all -- from the w3c HTML checker:

Error: Bad value none for attribute role on element textarea.
... <textarea class="ML__textarea--textarea" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" aria-hidden="true" role="none presentation" aria-label="">...

Looking at the valid values, only aria-multiline appears to be legal.

"Big" ideas for future development

Collecting Ideas for future development...

Synchronized highlighting

When a key command is used to speak an expression...

Could use speech API, but only get word callback boundaries
Could use google speech API with fall backs
SRE integration
How does sync highlighting work with SRE?
Can we carve out some part of SRE because SRE is big?
Can we pass maston to SRE with bookmark indicators
Pass info to SRE/speech engine
Modern speech engines support SSML and bookmarks (callbacks happen when bookmark is reached); speech continues
Web SpeechAPI only does bookmarks at word boundaries
Modern speech engines allow an arbitrary string for a book mark. This could be ID attr value or possibly some augmented value to reference a character or character range (e.g., 123 or sin)

Error warning/correction and expression prediction

We can gather data on likely expressions, perhaps using n-grams or machine learning to either say something is likely/unlikely. This can be used to flag potential mistakes (e.g., a missing coefficient in a polynomial or an unlikely combination of variables (e.g., 2sd).

Alternatively it can be used to give potential endings such as offering bx + c after a user types ax^2.

Semantic editing

We should find a non-obtrusive means to allow uses to enter and/or supplement information in the editor so that the editor has a better idea of what the notation means. This might influence speech or computation.

One idea that is already implemented is a semantic palette where a user chooses from among alternative meanings for a given notation. Other possibilities are:

keyboard equivalents (perhaps LaTeX style commands such as \abs{x}
providing a subject area and inferring meaning based on the subject area. E.g, P(A|B) is 'probability of A given B' if we know the subject involves probability
type inference -- if the user has given some information about a variable or operator, more information about other variables and operators can be inferred. This includes knowing when something is a unit, it likely means other quantities also must involve units so things like m as a trailing part of a term likely means 'meter' rather than a variable.
using a jagged underline when the editor has to use a heuristic that has a higher (for some value of "higher") chance of being wrong. This might include some cases of function call vs multiplication (e.g, h(a+b) where h might be a height function or it might be the height of an object.

Elementary Math

Math editors that support kids in grades 1 - 5 are few and far between. Accessible ones probably don't exist. Elementary math consists of stacks of digits, horizontal lines, along with +, -, and cross outs for borrows & carries. Long division adds a little decoration but is otherwise similar.

These are difficult to enter using the standard WYSIWYG paradigm. They likely need to be templated. Probably legal characters should be restricted. Also, only some notations should be allowed. Entering numbers may even be better done right-to-left, but I'm not sure of that.

The implementation is not that difficult because the notation maps to tables where each entry in the table is a digit or maybe an operator sign. Borders are used for lines.

An extension of long division to synthetic division is useful because that is taught in Algebra II. Instead of digits in the columns, powers of 'x' along with the coefficient go in each column. Blanks replace 0's when the coefficient is 0.

Touch Screen Support

Gestures
Cross outs
Drag and drop

Speech Input

Math and commands (e.g, delete, select numerator, ...)

Handwriting Input

Handwriting input exists for math and is pretty good. However, it suffers from at least two drawbacks in the current implementations:

it is static -- if you want to insert something, you can't open up space. Conversely, if you delete something, it doesn't close the space up
it lives in its own world. You can't point somewhere and speak some input or command, nor can you enter or delete anything from the keyboard.

keystroke and typedText should return boolean

Description

mathlive has two public functions for handling keys:

MathField.prototype.keystroke
MathField.prototype.typedText

The functions sometimes handle the key input, and sometimes they pass on handling it. There is currently no way to tell if they did something or not. If they returned a boolean indicating whether they handled character, than it would be possible to call one, and if it didn't handle the key call the other or otherwise process the input.

Implementation Notes:

Making this work for keystroke appears trivial because the function it calls returns a boolean.

For typedText, I'm not sure if this is easy or not. render is always called at the end, so perhaps everything is handled, but I suspect not. Maybe a hook into the selection changing could be used.

Font issue with Firefox?

Description

The attached page renders the sqrts and big parens fine in Chrome but has problems in Firefox V54.0.1

Here is a snapshot of a test page in Firefox:

Same page in Chrome:

Here is the test page:

<!DOCTYPE html><html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>MathLive Sample</title>

    <link rel="stylesheet" href="../dist/mathlive.core.css">
    <link rel="stylesheet" href="../dist/mathlive.css">
    <script src="../dist/mathlive.js"></script>
</head>
<body>
<p> Here a test of font rendering with sqrts and large parens: <br>
    $$\Biggl(\sqrt{ \sqrt{ \sqrt{2} } } \Biggr)$$<br>
In Firefox, they don't display well, but do display fine in Chrome.
</p>

<script>
	MathLive.renderMathInDocument();
</script>
</body>
</html>

Same problem on mathlive.io?

I see the some issues for the mathlive reference page in Firefox that may be font related:

\atop, and \choose have bad LateX translations

Description

\atop, and \choose display properly. However, their LaTeX translation is \frac so that they will draw with a fraction line if the LaTeX is used as input.

Steps to Reproduce

In mathlive.io, paste or type {n+1\atop2}{n+1\choose3}

In the LaTeX box below you will see \frac{n+1}{2}\frac{n+1}{3}.

Placeholders should be easy to select

Description

When fractions and some other notations are created, a placeholder is created. They are automatically selected so the next character replaces them. That's great. But if the focus moves away, then replacing them requires much more effort (click and drag vs. just click).

Steps to Reproduce

Open mathlive.io
In the input area, type "a/". You get:
Click after the fraction and then click again on the placeholder. Instead of selecting the placeholder, the insertion cursor is placed on one side or the other:

Expected Behavior

Placeholders are "special" and I think it is much better that clicking on them makes them selected as they are meant to be replaced. Someone I'm working with complained to me about this also,

inlineShortcuts to makeMathField doesn't override old values

Description

If inlineShortcuts is given as an option to makeMathField, it should override any old values. It doesn't.

For example, if the value is

inlineShortcuts: { '>-': '>-',	// override builtin shortcut (\succ)
			   '<-': '<-'},	// override builtin shortcut (\leftarrow)

Then when >- is typed, the \succ symbol appears instead of the override >- (i.e, don't do the substitution).

Convert from AMD to JS modules

MathLive currently uses requirejs to implment AMD-style modules. Native JavaScript modules are now supported by the major browsers and Node.

We should:

convert all the import/export statements in the JS files to be JS modules
modify the package.json file and webpack/babel configuration accordingly

scanElement is missing a case

Description

Apologies that I don't have a good test case.

With input

"1.  (testing mathlive in annotation $$\alpha$$)LOCAL Find the product"

scanElement fails to deal with the \alpha. In the code for the function, splitWithDelimiters seems to be working correctly. It returns

data:Array(3)
  0:{type: "text", data: "1.  (testing mathlive in annotation "}
  1:{type: "math", data: "\alpha", rawData: "$$\alpha$$", mathstyle: "displaystyle"}
  2:{type: "text", data: ")LOCAL Find the product"}

The code that processes data is

        if (data.length === 1 && data[0].type === 'math') {
            // The entire content is a math expression: we can replace the content
            // with the latex markup without creating additional wrappers.
            elem.textContent = '';
            elem.appendChild( createAccessibleMarkupPair(data[0].data, data[0].mathstyle, options, latexToMarkup, latexToMathML, true) );
        } else if (data.length === 1 && data[0].type === 'text') {
            // This element only contained text with no math. No need to 
            // do anything.
        }
        return;

Notice that there is nothing to process data when its length is greater than 1. It seems like the above code should be wrapped in a for loop. Because of this, the math (\alpha) is never handled.

Azerty

Follow up of issue #5 (which has been closed)

That doesn't seem to work, i still get ^ when I type shift + 6 on my azerty keyboard.
FYI im using the master branch of this project.

Arrowing next to a placeholder should select it

Description

If you arrow next to a placeholder, it should be selected. This is related to #20.

Steps to Reproduce

In mathlive.io, type 'a/' to get a fraction with 'a' in the numerator and a placeholder in the denominator.
Click in the numerator after the 'a' so that the insertion cursor is after the 'a'
Hit the right arrow key.

The insertion cursor is in the denominator before the placeholder. Since the placeholder is just a dummy element, it really should be selected since anything you type should make it go away.

Placeholder too large in script position

Description

Placeholders display too big in some positions.

Steps to Reproduce

Type x^a/. I see:

The text for the denominator is not in superscript size (it may need to be in supsup size in this case).

Suggestion: improve how '/' works

Description

At the moment:

if you type '/' after an operand such as a or a^2, you get a fraction with that operand in the numerator
if you type '/' after anything else, you get a fraction fraction with an empty numerator. Eg., '/' after = gives '= \frac{}{placeholder}'

I think it makes more sense that whenever the thing to the right acts like an operand, it should be treated as an operand Here are two common cases to illustrate this:

\sqrt{x} -- this should become part of the numerator
(x+y) -- the grouping means that the subexpr is an operand and should be treated as such. In this case, it might be a good idea to remove the parens when it goes into the numerator.

I'm not 100% sure removing the parens is a good idea, but if you consider a naive user, they are probably use to writing (x+y) vs writing x+y and then selecting the x+y.

FYI: Removing the parens is what ASCII math does for (x+y)/2.

Missing JSDoc comment block in some source files

Description

Some of the source files do not have a JSDoc comment block

Steps to Reproduce

Read the source code of a .js file in the project
Locate the beginning of the source file

Actual behavior

Some of the files do not contain a JSDoc comment block

Expected Behavior

All files should have a JSDoc comment block, for example:

/**
 * @file
 * The long description of the file's purpose goes here and
 * describes in detail the complete functionality of the file.
 * This description can span several lines and ends with a period.
 *
 * @summary   A short description of the file.
 *
 * @since     x.x.x (if available)
 * @requires javascriptlibrary.js
 * @class
 * @classdesc This is a description of the MyClass class.
 */

Since this is a potentially large task, partial pull requests will be gladly accepted. Submit a PR fixing even a single file by adding a header to it.
See the JSDoc documentation for details on the various JSDoc tags and how to use them

Add option to turn off wrapping at start/end of line

Description

Right arrow at the end of a line wraps to the start of the line. Similarly, left arrow at the start of a line wraps to the end of a line. People who use screen readers often try to move through things quickly and bang on the arrow keys repeatedly. They want to hit "walls". The start/end of lines are a natural wall.

Since wraparound is potentially something other users might like, adding an option to mathlive that controls the behavior at the start/end of an expr would be useful.

The two places to change are in editor-editableMathlist.js

  EditableMathlist.prototype.next: this.path[0].offset = 0;
  EditableMathlist.prototype.previous: this.path[0].offset = this.root.children.length - 1;

but (obviously) there are other places that need to change to deal with configuring it.