A web component for easy math input
getPromptValue()
mathVirtualKeyboard.layouts property was a frozen array (an array
that cannot be modified) but that wasn't clear. Now, a runtime error is
produced if an attempt is made to modify the array. If using Typescript,
a compile-time error is also generated.\text{} command,) did
not include the digits before the decimal.\raise, \lower and \raisebox commands. Those commands
were necessary to render some chemical bonds.(, [ or { with a selection will enclose the selection with
this delimiter.\ce{ O\bond{~-}H}
\mathtooltip{} and \texttip{} commands
are now displayed when used with a static formula.unstyled-latex).
This strips any color/background-color/font sizing commands from the ouput.\cos^2 (operators
with a superscript).Full Changelog: https://cortexjs.io/mathlive/changelog/
virtualKeyboardState property to indicate if the virtual
keyboard is currently visible or hidden. The property can also be modified to
show or hide the virtual keyboard.version (previously available as MathLive.version).infty and int inline shortcuts.\chi13 (0.1em) gap between the nucleus and the above element was missing
in OverUnder atoms (\overset, etc...).renderMathInElement() or renderMathInDocument(),
formulas containing styling information would get too aggressively coalesced,
dropping some styling.renderMathInElement() or renderMathInDocument().#225 Added onCommit listener to mf.options. This listener is invoked when
the user presses Enter or Return key, or when the field loses focus
and its value has changed since it acquired it.
In addition, a change event is triggered when using a MathfieldElement.
The event previously named change has been renamed to input.
This mimics the behavior of <input> and <textarea> elements.
#225 Changed the keyboard shortcuts to add columns and rows:
| Shortcut | Command |
|---|---|
| ctrl/cmd + Return/Enter | addRowAfter |
| ctrl/cmd + shift + Return/Enter | addRowBefore |
| ctrl/cmd + ; | addRowAfter |
| ctrl/cmd + shift + ; | addRowBefore |
| ctrl/cmd + , | addColumnAfter |
| ctrl/cmd + shift + , | addColumnBefore |
Note that Enter/Return no longer create a matrix/vector when inside a parenthesized expression. Use ctrl/cmd + Return/Enter instead.
Added a commit command to programmatically trigger the onCommit listener
change event.
Added mount and unmount events to MathfieldElement
The $text() method, which is deprecated, was accidentally prematurely removed.
It has been added back.
x=sin -> x\sin instead of x=\sin
\xrightarrow were incorrectly
treated as if they had an invisible boundary, resulting in the cursor
being positioned incorrectly when navigating with the keyboard.This release introduce two major new features which will require code changes. For now, the older API remains supported but it will be dropped in an upcoming release.
Support for MathfieldElement custom element/web component and <math-field> tag.
The makeMathField() method is still supported, but it will be removed in an upcoming version. You should transition to using <math-field> or
MathfieldElement instead.
This transition require the following changes:
MathfieldElement or declaratively// Before
let mf = MathLive.makeMathField(document.createElement('div'), {
virtualKeyboardMode: 'manual',
});
mf.$latex('f(x) = \\sin x');
document.body.appendChild(mf.$el());
// After
let mfe = new MathfieldElement({
virtualKeyboardMode: 'manual',
});
mfe.value = 'f(x) = \\sin x';
document.body.appendChild(mfe);
or:
<math-field virtual-keyboard-mode="manual">f(x) = \sin x</math-field>
// Before
mf.setConfig({ onContentDidChange: (mf) => {
console.log(mf.$latex())
});
// After
mfe.addEventListener('input', (ev) => {
console.log(mfe.value);
});
Support for web component is an opportunity to revisit the MathLive public API and modernize it.
The goals are:
$latex() can be used to read or change the content of the mathfield.$selectedText() can return the value of the selection,
but there is no way to inspect (or save/restore) the selection.getConfig() is called getOptions() in most
Javascript text editor libraries.Mathfield methods
The following Mathfield methods have been renamed as indicated:
| Before | After |
|---|---|
$setConfig() |
setOptions() |
getConfig() |
getOptions() and getOption() |
$text() |
getValue() |
$latex() |
value, getValue() and setValue() |
$insert() |
insert() |
$hasFocus() |
hasFocus() |
$focus() |
focus() |
$blur() |
blur() |
$selectedText() |
mf.getValue(mf.selection) |
$selectionIsCollapsed() |
mf.selection[0].collapsed |
$selectionDepth() |
mf.selection[0].depth |
$selectionAtStart() |
mf.position === 0 |
$selectionAtEnd() |
mf.position === mf.lastPosition |
$select() |
select() |
$clearSelection() |
executeCommand('delete-previous-char') |
$keystroke() |
executeCommand() |
$typedText() |
executeCommand('typed-text') |
$perform() |
executeCommand() |
$revertToOriginalContent() |
n/a |
$el() |
n/a |
| n/a | selection |
| n/a | position |
The methods indicated with "n/a" in the After column have been dropped.
Only the new methods are available on MathfieldElement (i.e. when using web components). The Mathfield class retains both the old methods and the
new ones to facilitate the transition, but the old ones will be dropped
in an upcoming version.
There is also a new selection property on Mathfield and MathfieldElement
which can be used to inspect and change the selection and a position
property to inspect and change the insertion point (caret).
The getValue() method also now take an (optional) Range, which is
the type of the selection property, to extract a fragment of the expression.
Default Exports
While default exports have the benefits of expediency, particularly when converting an existing code base to ES Modules, they are problematic for effective tree shaking. Therefore the default export will be eliminated.
This means that instead of:
import Mathlive from 'mathlive';
Mathlive.renderMathInDocument();
you will need to use:
import { renderMathInDocument } from 'mathlive';
renderMathInDocument();
The following functions have been renamed:
| Before | After |
|---|---|
MathLive.latexToAST() |
Use MathJSON |
MathLive.latexToMarkup() |
convertLatexToMarkup() |
MathLive.latexToMathML() |
convertLatexToMathMl() |
MathLive.latexToSpeakableText() |
convertLatexToSpeakableText() |
getCaretPosition() and setCaretPosition()
Selector has been improvedgetOptions() (getConfig()) are more accurate\enclose is emptyupward and downward hooks when navigating out of the
mathfield (now also sent as a focus-out event)tabIndex was
set to 0 on the mathfield and some area of the mathfield were clicked on.
The issue was that with tabIndex="0" the mathfield frame would be focusable
and when that happened the focus would correctly switch to the invisible
<textarea> element which is normally focused to receive keyboard events,
but this generated an incorrect blur event (for the container losing focus)
and an incorrect focus event (for the <textarea> gaining focus)config.strings property did not reflect the state of the localization strings@stefnotch for contributing several of the improvements in this
releaseSee the Change Log
See the Change Log
See the Change Log
See the Change Log
See the Change Log