MathKeyboardEngine for JavaScript provides the logic for a highly customizable virtual math keyboard. It is intended for use together with any LaTeX typesetting library (for example MathJax or KaTeX).
Also available:
- You load an html page with your customized virtual math keyboard (based on one of the examples). On load the LaTeX for each key is typeset (by KaTeX or MathJax) and a cursor is displayed in a textbox-look-a-like div.
- On your customized virtual math keyboard, you press a key. The key calls a MathKeyboardEngine function, for example
insert(someMatrixNode)
ormoveUp()
,deleteCurrent()
, etc. - Calling
getEditModeLatex()
outputs the total of LaTeX you typed, for example\frac{3}{4}\blacksquare
(if\blacksquare
is your cursor), which you then feed to KaTeX or MathJax for display. - Calling
getViewModeLatex()
outputs the LaTeX without a cursor.
Live examples can be tested at MathKeyboardEngine.GitHub.io.
Unique about MathKeyboardEngine:
- it supports (almost?) all math mode LaTeX, including matrices. (Please share if you know anything that is not supported.)
- its syntax tree consists of very few different parts: the
StandardLeafNode
,StandardBranchingNode
,AscendingBranchingNode
andDescendingBranchingNode
can be used for almost all LaTeX, including fractions, powers, combinations, subscript, etc. with ready-to-use up/down/left/right navigation. - it can be used with any LaTeX math typesetting library you like.
A con:
- this library will never be able to handle setting the cursor with the touch of a finger on a typeset formula. (But it DOES support up/down/left/right navigation and has a selection mode via arrow keys.)
More pros:
- you have full control over what you display on the virtual keyboard keys and what a virtual key press actually does.
- customize the editor output at runtime: dot or comma as decimal separator, cross or dot for multiplication, cursor style, colors, etc.
- this library also supports handling input from a physical keyboard, where - for example - the forward slash "/" key can be programmed to result in encapsulating a previously typed number as the numerator of a fraction. (See the examples.)
- almost forgotten: it's open source, free to use, free to modify (please fork this repo)!
There is no need to download or install anything. Your website just needs to have a <script>
element that results in getting one of the following files from jsDelivr:
- MathKeyboardEngine.es2020-esm.js
- MathKeyboardEngine.es2017-esm.js
- MathKeyboardEngine.es2015-iife.js
esYEAR: those are JavaScript language versions.
esm: the ECMAScript module is simply the best choice: easy, safe, future proof.
iife: an immediately invoked function expression for browsers that do not support ESM.
For each of those ".js" files there is a minified version (".min.js") - a smaller file (of only 13 kB) with the same capabilities.
A <script>
element using the recommended "MathKeyboardEngine.es2017-esm.min.js":
<script type="module" type="text/javascript">
import * as mke from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/MathKeyboardEngine.es2017-esm.min.js';
let latexConfiguration = new mke.LatexConfiguration();
let keyboardMemory = new mke.KeyboardMemory();
// Subscribe to onclick events of virtual key presses, etc.
</script>
A <script>
element using the with-older-browsers-compatible "MathKeyboardEngine.es2015-iife.min.js":
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/MathKeyboardEngine.es2015-iife.min.js"></script>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', (event) => {
let latexConfiguration = new mke.LatexConfiguration();
let keyboardMemory = new mke.KeyboardMemory();
// Subscribe to onclick events of virtual key presses, etc.
});
</script>
Note: "mke" is an abbreviation of "MathKeyboardEngine". You can choose something different. (But the iife format forces you to use "mke".)
After opening a folder in VS Code, run in the terminal:
npm i mathkeyboardengine
Verify that mathkeyboardengine
has been added to the node_modules
folder. Then you can choose:
Using the CommonJS module (the .cjs
file) in myFile.js
:
const mke = require('mathkeyboardengine');
const k = new mke.KeyboardMemory();
Using the ESM module (the .mjs
file) in myFile.js
or myFile.ts
:
import * as mke from 'mathkeyboardengine';
const k = new mke.KeyboardMemory();
Note that a .d.ts
file is shipped since v0.2.1
(this lets your editor show the (TypeScript) types).
MathKeyboardEngine has also been published to Deno.
Visit the documentation and (the right version of)* the examples folder for more implementation details.
* If you use a version tag in the url like this: https://github.com/MathKeyboardEngine/MathKeyboardEngine/tree/v0.1.0-beta.11, you can see the git repository as it was for that version.
Follow these steps to set up (and verify) a development environment for this repository:
- Install Node.js, Git and VS Code.
- Fork (or clone), checkout and then open the root folder of this repository in VS Code.
- Open the VS Code Terminal and run:
npm ci
This loads all the devDependencies from the tree as specified in package-lock.json. - Compiling the library:
All of the following commands run some script as defined in package.json:
npm run strictcheck
to do type checking, to check whether a successful compilation is possible.
npm run clean
to run eslint and prettier (performing auto-fixes of spacing etc.).
npm test
to run all unit tests from the 'tests' folder.
npm run build
creates a single-file library in different formats and language versions in the 'dist' folder. Note: the 'src' folder contains all the source code files. - Testing localhost:
For testing localhost with live reload from VS Code, you could install the VS Code extension Five Server and click> Go Live
in the bottom right corner of VS Code. The browser starts up automatically - navigate to the 'examples' folder and click the html file you'd like to test.
- ask questions about anything that is not clear or when you'd like help.
- share ideas or what you've made.
- report a bug.
- request an enhancement.
- open a pull request. (The command
npm run clean
runs eslint and prettier.)