Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
See cortexjs.io for more info or try it at mathlive.io
To add a mathfield element in your page use a <math-field>
tag. It works
just like a <textarea>
or <button>
. You can manipulate the mathfield using
methods of the element and listen for events to be notified when its internal
state changes.
<!DOCTYPE html>
<html lang="en-US">
<body>
<math-field>f(x)=</math-field>
<script src="https://unpkg.com/mathlive/dist/mathlive.mjs"></script>
</body>
</html>
Render static math equations by adding two lines to your web page.
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>Euler's Identity</h1>
<p>$$e^{i\pi} + 1 = 0$$</p>
<script type="module">
import { renderMathInDocument } from 'https://unpkg.com/mathlive/dist/mathlive.mjs';
renderMathInDocument();
</script>
</body>
</html>
This project is licensed under the MIT License.
0.57.0 2020-10-09
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()
function 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-backward')
|
| $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
releaseFAQs
A web component for math input
The npm package mathlive receives a total of 39,945 weekly downloads. As such, mathlive popularity was classified as popular.
We found that mathlive demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.