Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
mathquill - npm Package Compare versions
Comparing version 0.9.1 to 0.10.1-a
203
CHANGELOG.md
@@ -1,5 +0,206 @@ | ||
| ## version 0.9.1: 2012-12-19 | ||
| ## v0.10.1: 2016-03-21 | ||
| Important fix: remove `font-size: 0` on textarea (#585), fixing typing | ||
| in Chrome Canary (#540) as well as the Enter key not triggering the | ||
| `enter` handler in Webkit and Blink (#566). `transform: scale(0)` is | ||
| used instead and expected to be much more robust. | ||
| (Note: if you're coming from v0.9.x, there've been major API changes, | ||
| see the [v0.9.x → v0.10.0 Migration Guide][].) | ||
| [v0.9.x → v0.10.0 Migration Guide]: https://github.com/mathquill/mathquill/wiki/v0.9.x-%E2%86%92-v0.10.0-Migration-Guide | ||
| **new features:** | ||
| - (#544, #552, #558, #581) new symbols `\nparallel`, `\measuredangle`, | ||
| `\odot`, `\parallelogram` (nonstandard), `\nless`, `\ngtr`, `\square` | ||
| - (#544) new commands `\overleftarrow`, `\overrightarrow` | ||
| **bugfixes:** | ||
| - (#585) fix typing in Chrome Canary, Enter key in Webkit+Blink | ||
| - (#582) fix `\degree` symbol to round-trip (rather than exporting | ||
| `^\circ` which doesn't parse as one symbol) | ||
| - (#578) fix `.text()` to output `\cdot` as `*` | ||
| - (#529, #571, #574) fix `.text()` of fractions, spaces, variables followed | ||
| by exponents | ||
| - (#577) fix `\triangle` symbol to match LaTeX better | ||
| - (#568) hotfix #435 order-dependence breaking clean build on Linux | ||
| - (#560) fix florin spacing still too close | ||
| - (#546) fix parsing or pasting `×` (Unicode times symbol) | ||
| - (#519/#487) fix auto-horizontal-scroll/pan on API calls | ||
| - (#528) fix #429 can't move cursor out of `TextBlock` | ||
| - (#526) fix exponentiation to export `^` not `**` | ||
| - (#525) fix Tab while there's a selection | ||
| **build system fixes:** | ||
| - (#532) add console output to show URL of local test pages | ||
| ## v0.10.0: 2016-02-20 | ||
| Many major changes including a total overhaul of the API (no more | ||
| auto-MathQuill-ifying of `.mathquill-editable` etc, and no more jQuery | ||
| plugin, instead global `MathQuill()` returns API objects, like jQuery | ||
| itself): See the [v0.9.x → v0.10.0 Migration Guide] | ||
| (https://github.com/mathquill/mathquill/wiki/v0.9.x-%E2%86%92-v0.10.0-Migration-Guide). | ||
| (If you already use the new global `MathQuill()`-based API from the | ||
| `dev` branch, migrating to v0.10.0 should be just [one small change] | ||
| (https://github.com/mathquill/mathquill/wiki/%60dev%60-branch-(2014%E2%80%932015)-%E2%86%92-v0.10.0-Migration-Guide) | ||
| for you.) | ||
| **API-only changes:** | ||
| - (#336, #349, #351, #353) config options architecture | ||
| - (#308) don't auto-MathQuill-ify on jQuery `ready` | ||
| - (#297) prefix all CSS classes with `mq-` | ||
| - (#238, #272, #288, #337, #362, #459, #463, #495) kill jQuery plugin; new | ||
| global `MathQuill()` returns API objects | ||
| **typist-facing changes:** | ||
| - (#506) delete `\caret` and `\underscore` | ||
| - (#453) incremental backspace: backspacing into a compound command like | ||
| fraction or exponent goes left into it rather than selecting it | ||
| - (#285) render pasted text in math mode if cursor in math mode | ||
| - (5cf838d) LiveFraction (typing `/`) stops at space when expanding left | ||
| - (#264) intentional blur (like clicking outside field) clears selection | ||
| - (#262, #281, #391, #449, #509) auto-expanding, mis-matchable parens/pipes | ||
| - (#259) blue focus ring only around whole field not individual blocks | ||
| - (#258) `\sum` now comes with lower and upper limit blocks | ||
| - (#246, #248, #274, #434, #473) merge adjacent `SupSub`s into one | ||
| command | ||
| - (#187) delete `\vector` | ||
| - (#144) Shift-Left/Right unselects back into a thing after selecting | ||
| out of it | ||
| - (#157) stop fractions created by typing `/` at `,`/`;`/`:` | ||
| **new features:** | ||
| - (#468) add WOFF and WOFF2 font formats | ||
| - (#376, #398) add `autoSubscriptNumerals` option | ||
| - (#338) config option `sumStartsWithNEquals` | ||
| - (#321) static math instances may have `.innerFields` | ||
| - (#279) `leftRightIntoCmdGoes: 'up'/'down'` | ||
| - (#278, #407, #442) `SupSub` options to improve usability | ||
| - (#276, #410) anything focusable can be used to `substituteTextarea` | ||
| - (#263) typing `<=` and `>=` results in `\le` and `\ge` | ||
| - (#265) "autocommands": LaTeX control sequences that automatically | ||
| render when you type the letters, without typing backslash first | ||
| - (#261, #361, #387, #404) when the math is too wide to fit in the | ||
| field, pan/scroll horizontally | ||
| - (#247, #301, #255, #509) auto-unitalicize `sin`, `log` etc operator names | ||
| - (#245, #253) config option whether to Spacebar behaves like Tab | ||
| - (#241, #325, #425, #462) new API methods as used by Desmos | ||
| - (#191) `\class{classname}{math}` _a la_ | ||
| [MathJax](http://docs.mathjax.org/en/v2.2-latest/tex.html#html) | ||
| - (#151) `\textcolor{color}{math}` | ||
| **new build system features:** | ||
| - (#377) `OMIT_FONT_FACE=true make` omits `@font-face {...}` | ||
| - (#319) `make basic` builds stripped-down MathQuill for basic math | ||
| **bugfixes:** | ||
| - (#452) fix blinking blue cursor and autocorrect on iOS | ||
| - (#448) fix `\ddots` to be downward-rightward not upward-rightward | ||
| - (#432) fix quadratic-time fragment construction | ||
| - (#379) fix `.text()` errors when currently typing backslash command | ||
| - (#364, #367, #363, #397, #402, #417, #472) fixes to spacing and | ||
| positioning | ||
| - (#323, #365, #409) fix LaTeX for `/`, `{`, `}` `^`, `_`, and `~` | ||
| - (99da82a) fix LaTeX parsing of `'` | ||
| - (#294, #355) fix `Cmd-Left` turns selection into typed text in Firefox | ||
| - (#296, #392) fix `f`/florin situation | ||
| - (#299) don't use reserved word `yield` | ||
| - (#284) escape non-ASCII Unicode characters in the JS source code | ||
| - (#272) fix API methods `.write()` on empty LaTeX and `.cmd()` erroring | ||
| - (#255) fix auto-spacing of `SupSub` and `PlusMinus` | ||
| - (#266) fix keyboard select after mouse select | ||
| - (#268) <code>\ </code> not `\:` as LaTeX for space | ||
| - (68c8f2b) fix resize gripper appearing sometimes in Chrome | ||
| - (6803077) fix Shift-Enter, Ctrl-Enter inputting newlines | ||
| - (f17fb95) fix potential Ctrl-C "copy" race condition | ||
| - (765dd70, #322) don't unnecessarily `stopPropagation()` mouse events | ||
| - (c1fe1ef, 9aef35f) fix up/down in an `\editable{}` in a fraction | ||
| **docs:** | ||
| - (#485) add more metadata to package.json | ||
| - (#484) fix links in README | ||
| - (#393) correctly credit co-creator @jneen | ||
| - (#283) use Mozilla Public License (MPL) instead of LGPL | ||
| **internal refactors:** | ||
| - (#303) remove STIX font files, never used them | ||
| - (#244) refactor focus/blur out into its own service | ||
| - (#240) simplify `saneKeyboardEvents()` handlers pattern | ||
| - (#233, #234, #236, #237, #239, #509) massive refactor of cursor and | ||
| - root block nonlocal responsibilities as controller and services instead | ||
| - (#195, #340) some LaTeX rendering performance fixes; separate out | ||
| root block DOM node from container DOM node | ||
| - (#183) `Cursor::notify` framework | ||
| - (#117, #142, #186, #287) massive refactor of cursor methods to not | ||
| assume the edit tree is double-layered | ||
| ## v0.9.4: 2014-1-22 | ||
| URGENT HOTFIX for cursor showing up as an ugly box in Chrome 40 (#371) | ||
| **bugfixes:** | ||
| - (#371) fix cursor showing up as an ugly box in Chrome 40 | ||
| - (#230) fix selecting previously selected static math can't be copied | ||
| - (#217) fix no Array::indexOf in IE<9, use RegExp::test | ||
| - (#213) fix exception on up/down while something is selected | ||
| - (#211) fix CSS typo causing no italics when there should be | ||
| **build system changes:** | ||
| - (#222 and #228) `make server` auto-rebuilds without restarting server | ||
| - (#212) use empty target trick in Makefile | ||
| **docs:** | ||
| - (#283) change license from LGPL to Mozilla Public License | ||
| ## v0.9.3: 2013-11-11 | ||
| **new features:** | ||
| - (#185) add `\vec` | ||
| **bugfixes:** | ||
| - (#164) displaying `NZQRC` as `\mathbb{NZQRC}` (double-struck) | ||
| - (#180) can't type >1 spaces in `RootTextBlock`s | ||
| - (#190) `$` at the end of a `TextBlock` causes errors later | ||
| - (#152) when "Select All"-ed, `.mathquill('latex')` throws | ||
| **internal refactors:** | ||
| - rename `.end` and `.endChild` both to `.ends` | ||
| **build system changes:** | ||
| - fix `make publish` to work on BSD | ||
| - (#189) replace Connect with tiny handwritten static server | ||
| - upgrade to uglifyjs2 | ||
| ## v0.9.2: 2013-04-02 | ||
| NOTE: The hotfix for typing over selections in Safari 5.1 (#135) from | ||
| v0.9.1 had a huge bug, fixed as #166. | ||
| **feature changes:** | ||
| - (#156) stop LiveFraction at commas/colons/semicolons | ||
| **bugfixes:** | ||
| - allow angle bracket as a VanillaSymbol (thanks @fpirsch!) | ||
| - (#166) fix selecting after paste | ||
| - (#121) editing `\text{...}` created from LaTeX | ||
| - (#122) spacebar was broken in TextBlocks | ||
| - (#125) `$` in TextBlock was jumping to the end | ||
| - stretched parens not being grayed | ||
| **internal refactors:** | ||
| - Massive renaming introducing direction constants `L` and `R`, and | ||
| directionalized methods | ||
| - Use a subclass of jQuery with directionalized methods (see `d5597e4`) | ||
| **build system changes:** | ||
| - New site-building system | ||
| - no more submodules, `npm` only | ||
| ## v0.9.1: 2012-12-19 | ||
| * Started the changelog | ||
| * Added a `make publish` script | ||
| * Hotfix for typing over selections in Safari 5.1 (#135) |
| { | ||
| "name": "mathquill", | ||
| "description": "Easily type math in your webapp", | ||
| "version": "0.9.1", | ||
| "version": "0.10.1a", | ||
| "license": "MPL-2.0", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/wensheng/umeditor-mathquill.git" | ||
| "url": "https://github.com/mathquill/mathquill.git" | ||
| }, | ||
@@ -14,7 +14,7 @@ "dependencies": { | ||
| "devDependencies": { | ||
| "pjs": "3.x", | ||
| "pjs": ">=3.1.0 <5.0.0", | ||
| "mocha": "*", | ||
| "uglify-js": "*", | ||
| "less": "1.5.1" | ||
| "uglify-js": "2.x", | ||
| "less": ">=1.5.1" | ||
| } | ||
| } |
536
README.md
| # [MathQuill](http://mathquill.github.com) | ||
| by [Han][] and [Jay][]. Current development is proudly supported by [Desmos][], whose awesome graphing calculator makes extensive use of Mathquill. | ||
| by [Han][], [Jeanine][], and [Mary][] (maintainers@mathquill.com) | ||
| [Han]: http://github.com/laughinghan | ||
| [Jay]: http://github.com/jayferd | ||
| [Desmos]: http://desmos.com/ | ||
| [Jeanine]: http://github.com/jneen | ||
| [Mary]: http://github.com/stufflebear | ||
| Please note that this is a beta version, so bugs and unimplemented features | ||
| are all over the place. | ||
| Good news! We've resumed active development and we're committed to getting | ||
| things running smoothly. | ||
| Find a dusty corner? Let us know! <big>[<img alt="slackin.mathquill.com" src="http://slackin.mathquill.com/badge.svg" align="top">](http://slackin.mathquill.com) | ||
| [<img alt="freenode irc: #mathquill" src="https://img.shields.io/badge/%20freenode%20irc%20-%20%23mathquill%20-brightgreen.svg" align="top">](http://webchat.freenode.net/?channels=mathquill)</big> | ||
| ## Usage | ||
| (Note: Requires [jQuery 1.4.3+](http://jquery.com). | ||
| [Google CDN-hosted copy](http://code.google.com/apis/libraries/devguide.html#jquery) recommended.) | ||
| Just load MathQuill and call our constructors on some HTML element DOM objects, | ||
| for example: | ||
| To use MathQuill on your website, grab the latest tarball from the [downloads page][], and serve | ||
| ```html | ||
| <link rel="stylesheet" href="/path/to/mathquill.css"/> | ||
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | ||
| <script src="/path/to/mathquill.js"></script> | ||
| [downloads page]: http://mathquill.com/downloads.html | ||
| <p> | ||
| Solve <span id="problem">ax^2 + bx + c = 0</span>: | ||
| <span id="answer">x=</span> | ||
| </p> | ||
| * [the stylesheet](http://mathquill.github.com/mathquill.css) | ||
| * [the fonts](http://mathquill.github.com/fonts.html) in the | ||
| `font/` directory relative to `mathquill.css` (or change your copy of | ||
| `mathquill.css` to include from the right directory) | ||
| * [the script](http://mathquill.github.com/mathquill/mathquill.min.js) ([unminified](http://mathquill.github.com/mathquill/mathquill.js)) | ||
| <script> | ||
| var MQ = MathQuill.getInterface(2); | ||
| MQ.StaticMath($('#problem')[0]); | ||
| var answer = MQ.MathField($('#answer')[0], { | ||
| handlers: { | ||
| edit: function() { | ||
| checkAnswer(answer.latex()); | ||
| } | ||
| } | ||
| }); | ||
| </script> | ||
| ``` | ||
| then on your webpages include the stylesheet | ||
| To load MathQuill, | ||
| - [jQuery 1.4.3+](http://jquery.com) has to be loaded before `mathquill.js` | ||
| ([Google CDN-hosted copy][] recommended) | ||
| - the fonts should be served from the `font/` directory relative to | ||
| `mathquill.css` (unless you'd rather change where your copy of `mathquill.css` | ||
| includes them from), which is already the case if you just: | ||
| - download and serve [the latest release][]. | ||
| <link rel="stylesheet" type="text/css" href="/path/to/mathquill.css">` | ||
| [Google CDN-hosted copy]: http://code.google.com/apis/libraries/devguide.html#jquery | ||
| [the latest release]: https://github.com/mathquill/mathquill/releases/latest | ||
| and after [jQuery](http://jquery.com), the script | ||
| To use the MathQuill API, first get the latest version of the interface: | ||
| <script src="/path/to/mathquill.min.js"></script> | ||
| ```js | ||
| var MQ = MathQuill.getInterface(2); | ||
| ``` | ||
| Then wherever you'd like to embed LaTeX math to be rendered in HTML: | ||
| Now you can call `MQ.StaticMath()` or `MQ.MathField()`, which MathQuill-ify | ||
| an HTML element and return an API object. If the element had already been | ||
| MathQuill-ified into the same kind, return that kind of API object (if | ||
| different kind or not an HTML element, `null`). Note that it always returns | ||
| either an instance of itself, or `null`. | ||
| <span class="mathquill-embedded-latex">\frac{d}{dx}\sqrt{x}</span> | ||
| ```js | ||
| var staticMath = MQ.StaticMath(staticMathSpan); | ||
| mathField instanceof MQ.StaticMath // => true | ||
| mathField instanceof MQ // => true | ||
| mathField instanceof MathQuill // => true | ||
| or have an editable math textbox: | ||
| var mathField = MQ.MathField(mathFieldSpan); | ||
| mathField instanceof MQ.MathField // => true | ||
| mathField instanceof MQ.EditableField // => true | ||
| mathField instanceof MQ // => true | ||
| mathField instanceof MathQuill // => true | ||
| ``` | ||
| <span class="mathquill-editable">f(x)=?</span> | ||
| `MQ` itself is a function that takes an HTML element and, if it's the root | ||
| HTML element of a static math or math field, returns an API object for it | ||
| (if not, `null`): | ||
| Note that for dynamically created elements that weren't in the HTML DOM on | ||
| document ready, you will need to call our jQuery plugin after inserting into | ||
| the visible HTML DOM: | ||
| ```js | ||
| MQ(mathFieldSpan) instanceof MQ.MathField // => true | ||
| MQ(otherSpan) // => null | ||
| ``` | ||
| `$('<span>x^2</span>').appendTo('body').mathquill()` or `.mathquill('editable')` | ||
| API objects for the same MathQuill instance have the same `.id`, which will | ||
| always be a unique truthy primitive value that can be used as an object key | ||
| (like an ad hoc [`Map`][] or [`Set`][]): | ||
| MathQuill has to perform calculations based on computed CSS values. If you | ||
| mathquill-ify an element before inserting into the visible HTML DOM, then once | ||
| it is visible MathQuill will need to recalculate: | ||
| ```js | ||
| MQ(mathFieldSpan).id === mathField.id // => true | ||
| $('<span>\sqrt{2}</span>').mathquill().appendTo('body').mathquill('redraw') | ||
| var setOfMathFields = {}; | ||
| setOfMathFields[mathField.id] = mathField; | ||
| MQ(mathFieldSpan).id in setOfMathFields // => true | ||
| staticMath.id in setOfMathFields // => false | ||
| ``` | ||
| [`Map`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map | ||
| [`Set`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set | ||
| Similarly, API objects for the same MathQuill instance share a `.data` object | ||
| (which can be used like an ad hoc [`WeakMap`][] or [`WeakSet`][]): | ||
| ```js | ||
| MQ(mathFieldSpan).data === mathField.data // => true | ||
| mathField.data.foo = 'bar'; | ||
| MQ(mathFieldSpan).data.foo // => 'bar' | ||
| ``` | ||
| [`WeakMap`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap | ||
| [`WeakSet`]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet | ||
| Any element that has been MathQuill-ified can be reverted: | ||
| $('.mathquill-embedded-latex').mathquill('revert'); | ||
| ```html | ||
| <span id="revert-me" class="mathquill-static-math"> | ||
| some <code>HTML</code> | ||
| </span> | ||
| ``` | ||
| ```js | ||
| MQ($('#revert-me')[0]).revert().html(); // => 'some <code>HTML</code>' | ||
| ``` | ||
| Manipulating the HTML DOM inside editable math textboxes can break MathQuill. | ||
| Currently, MathQuill only supports a limited scripting API: | ||
| MathQuill uses computed dimensions, so if they change (because an element was | ||
| mathquill-ified before it was in the visible HTML DOM, or the font size | ||
| changed), then you'll need to tell MathQuill to recompute: | ||
| * To access the LaTeX contents of a mathquill-ified element: | ||
| ```js | ||
| var mathFieldSpan = $('<span>\\sqrt{2}</span>'); | ||
| var mathField = MQ.MathField(mathFieldSpan[0]); | ||
| mathFieldSpan.appendTo(document.body); | ||
| mathField.reflow(); | ||
| ``` | ||
| $('<span>x^{-1}</span>').mathquill().mathquill('latex') === 'x^{-1}' | ||
| MathQuill API objects further expose the following public methods: | ||
| * To render some LaTeX in a mathquill-ified element: | ||
| * `.el()` returns the root HTML element | ||
| * `.html()` returns the contents as static HTML | ||
| * `.latex()` returns the contents as LaTeX | ||
| * `.latex('a_n x^n')` will render the argument as LaTeX | ||
| $('<span/>').mathquill().appendTo('body').mathquill('latex','a_n x^n') | ||
| Additionally, descendants of `MQ.EditableField` (currently only `MQ.MathField`) | ||
| expose: | ||
| * To write some LaTeX at the current cursor position: | ||
| * `.focus()`, `.blur()` focuses or defocuses the editable field | ||
| * `.write(' - 1')` will write some LaTeX at the current cursor position | ||
| * `.cmd('\\sqrt')` will enter a LaTeX command at the current cursor position or | ||
| with the current selection | ||
| * `.select()` selects the contents (just like [on `textarea`s][] and [on | ||
| `input`s][]) | ||
| * `.clearSelection()` clears the current selection | ||
| * `.moveTo{Left,Right,Dir}End()` move the cursor to the left/right end of the | ||
| editable field, respectively. (The first two are implemented in terms of | ||
| `.moveToDirEnd(dir)` where `dir` is one of `MQ.L` or `MQ.R`, constants that | ||
| obey the contract that `MQ.L === -MQ.R` and vice versa.) | ||
| * `.keystroke(keys)` simulates keystrokes given a string like `"Ctrl-Home Del"`, | ||
| a whitespace-delimited list of [key values][] with optional prefixes | ||
| * `.typedText(text)` simulates typing text, one character at a time | ||
| * `ᴇxᴘᴇʀɪᴍᴇɴᴛᴀʟ` `.dropEmbedded(pageX, pageY, options)` insert a custom | ||
| embedded element at the given coordinates, where `options` is an object like: | ||
| someMathQuillifiedElement.mathquill('write','\\frac{d}{dx}') | ||
| ```js | ||
| { | ||
| htmlString: '<span class="custom-embed"></span>', | ||
| text: function() { return 'custom_embed'; }, | ||
| latex: function() { return '\customEmbed'; } | ||
| } | ||
| ``` | ||
| * `ᴇxᴘᴇʀɪᴍᴇɴᴛᴀʟ` `.registerEmbed('name', function(id){return options})` allows MathQuill to parse custom embedded objects from latex, where `options` is an object like the one defined above in `.dropEmbedded`. This will parse the following latex into the embedded object you defined: `\embed{name}[id]}` | ||
| * To insert a LaTeX command at the current cursor position or with the current selection: | ||
| [on `textarea`s]: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-48880622 | ||
| [on `input`s]: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34677168 | ||
| [key values]: http://www.w3.org/TR/2012/WD-DOM-Level-3-Events-20120614/#fixed-virtual-key-codes | ||
| someMathQuillifiedElement.mathquill('cmd','\\sqrt') | ||
| MathQuill overwrites the global `MathQuill` variable when loaded. You can undo | ||
| that with `.noConflict()` (similar to [`jQuery.noConflict()`] | ||
| (http://api.jquery.com/jQuery.noConflict)): | ||
| ```html | ||
| <script src="/path/to/first-mathquill.js"></script> | ||
| <script src="/path/to/second-mathquill.js"></script> | ||
| <script> | ||
| var secondMQ = MathQuill.noConflict().getInterface(2); | ||
| secondMQ.MathField(...); | ||
| var firstMQ = MathQuill.getInterface(2); | ||
| firstMQ.MathField(...); | ||
| </script> | ||
| ``` | ||
| (Warning: This lets different copies of MathQuill each power their own | ||
| math fields, but using different copies on the same DOM element won't | ||
| work. Anyway, .noConflict() is primarily to help you reduce globals.) | ||
| #### Configuration Options | ||
| `MQ.MathField()` can also take an options object: | ||
| ```js | ||
| var el = $('<span>x^2</span>').appendTo('body'); | ||
| var mathField = MQ.MathField(el[0], { | ||
| spaceBehavesLikeTab: true, | ||
| leftRightIntoCmdGoes: 'up', | ||
| restrictMismatchedBrackets: true, | ||
| sumStartsWithNEquals: true, | ||
| supSubsRequireOperand: true, | ||
| charsThatBreakOutOfSupSub: '+-=<>', | ||
| autoSubscriptNumerals: true, | ||
| autoCommands: 'pi theta sqrt sum', | ||
| autoOperatorNames: 'sin cos etc', | ||
| substituteTextarea: function() { | ||
| return document.createElement('textarea'); | ||
| }, | ||
| handlers: { | ||
| edit: function(mathField) { ... }, | ||
| upOutOf: function(mathField) { ... }, | ||
| moveOutOf: function(dir, mathField) { if (dir === MQ.L) ... else ... } | ||
| } | ||
| }); | ||
| ``` | ||
| To change `mathField`'s options, the `.config({ ... })` method takes an options | ||
| object in the same format. | ||
| Global defaults for a page may be set with `MQ.config({ ... })`. | ||
| If `spaceBehavesLikeTab` is true the keystrokes {Shift-,}Spacebar will behave | ||
| like {Shift-,}Tab escaping from the current block (as opposed to the default | ||
| behavior of inserting a Space character). | ||
| By default, the Left and Right keys move the cursor through all possible cursor | ||
| positions in a particular order: right into a fraction puts the cursor at the | ||
| left end of the numerator, right out of the numerator puts the cursor at the | ||
| left end of the denominator, right out of the denominator puts the cursor to the | ||
| right of the fraction; symmetrically, left into a fraction puts the cursor at | ||
| the right end of the denominator, etc. Note that right out of the numerator to | ||
| the left end of the denominator is actually leftwards (and downwards, it's | ||
| basically wrapped). If instead you want right to always go right, and left to | ||
| always go left, you can set `leftRightIntoCmdGoes` to `'up'` or `'down'` so that | ||
| left and right go up or down (respectively) into commands, e.g. `'up'` means | ||
| that left into a fraction goes up into the numerator, skipping the denominator; | ||
| symmetrically, right out of the numerator skips the denominator and puts the | ||
| cursor to the right of the fraction, which unlike the default behavior is | ||
| actually rightwards (the drawback is the denominator is always skipped, you | ||
| can't get to it with just Left and Right, you have to press Down); which is | ||
| the same behavior as the Desmos calculator. `'down'` instead means it is the | ||
| numerator that is always skipped, which is the same behavior as the Mac OS X | ||
| built-in app Grapher. | ||
| If `restrictMismatchedBrackets` is true then you can type [a,b) and [a,b), but | ||
| if you try typing `[x}` or `\langle x|`, you'll get `[{x}]` or | ||
| `\langle|x|\rangle` instead. This lets you type `(|x|+1)` normally; otherwise, | ||
| you'd get `\left( \right| x \left| + 1 \right)`. | ||
| If `sumStartsWithNEquals` is true then when you type `\sum`, `\prod`, or | ||
| `\coprod`, the lower limit starts out with `n=`, e.g. you get the LaTeX | ||
| `\sum_{n=}^{ }`, rather than empty by default. | ||
| `supSubsRequireOperand` disables typing of superscripts and subscripts when | ||
| there's nothing to the left of the cursor to be exponentiated or subscripted. | ||
| Averts the especially confusing typo `x^^2`, which looks much like `x^2`. | ||
| `charsThatBreakOutOfSupSub` sets the chars that when typed, "break out" of | ||
| superscripts and subscripts: for example, typing `x^2n+y` normally results in | ||
| the LaTeX `x^{2n+y}`, you have to hit Down or Tab (or Space if | ||
| `spaceBehavesLikeTab` is true) to move the cursor out of the exponent and get | ||
| the LaTeX `x^{2n}+y`; this option makes `+` "break out" of the exponent and | ||
| type what you expect. Problem is, now you can't just type `x^n+m` to get the | ||
| LaTeX `x^{n+m}`, you have to type `x^(n+m` and delete the paren or something. | ||
| (Doesn't apply to the first character in a superscript or subscript, so typing | ||
| `x^-6` still results in `x^{-6}`.) | ||
| `autoCommands`, a space-delimited list of LaTeX control words (no backslash, | ||
| letters only, min length 2), defines the (default empty) set of "auto-commands", | ||
| commands automatically rendered by just typing the letters without typing a | ||
| backslash first. | ||
| `autoOperatorNames`, a list of the same form (space-delimited letters-only each | ||
| length>=2), and overrides the set of operator names that automatically become | ||
| non-italicized when typing the letters without typing a backslash first, like | ||
| `sin`, `log`, etc. Defaults to the LaTeX built-in operator names ([Section | ||
| 3.17 of the Short Math Guide][3.17]) plus some missing trig operators like | ||
| `sech`, `arcsec`, `arsinh`, etc. | ||
| [3.17]: http://tinyurl.com/jm9okjc | ||
| `substituteTextarea`, a function that creates a focusable DOM element, called | ||
| when setting up a math field. It defaults to `<textarea autocorrect=off .../>`, | ||
| but for example, Desmos substitutes `<span tabindex=0></span>` on iOS to | ||
| suppress the built-in virtual keyboard in favor of a custom math keypad that | ||
| calls the MathQuill API. Unfortunately there's no universal [check for a virtual | ||
| keyboard][StackOverflow], you can't even [detect a touchscreen][stucox] (notably | ||
| [Modernizr gave up][Modernizr]) and even if you could, Windows 8 and ChromeOS | ||
| devices have both physical keyboards and touchscreens and you can connect | ||
| physical keyboards to iOS and Android devices with Bluetooth, so touchscreen != | ||
| virtual keyboard. Desmos currently sniffs the user agent for iOS, so Bluetooth | ||
| keyboards just don't work in Desmos on iOS, the tradeoffs are up to you. | ||
| [StackOverflow]: http://stackoverflow.com/q/2593139/362030 | ||
| [stucox]: http://www.stucox.com/blog/you-cant-detect-a-touchscreen/ | ||
| [Modernizr]: https://github.com/Modernizr/Modernizr/issues/548 | ||
| Supported handlers: | ||
| - `moveOutOf`, `deleteOutOf`, and `selectOutOf` are called with `dir` and the | ||
| math field API object as arguments | ||
| - `upOutOf`, `downOutOf`, `enter`, and `edit` are called with just the API | ||
| object as the argument | ||
| The `*OutOf` handlers are called when Left/Right/Up/Down/Backspace/Del/ | ||
| Shift-Left/Shift-Right is pressed but the cursor is at the left/right/top/bottom | ||
| edge and so nothing happens within the math field. For example, when the cursor | ||
| is at the left edge, pressing the Left key causes the `moveOutOf` handler (if | ||
| provided) to be called with `MQ.L` and the math field API object as arguments, | ||
| and Backspace causes `deleteOutOf` (if provided) to be called with `MQ.L` and | ||
| the API object as arguments, etc. | ||
| The `enter` handler is called whenever Enter is pressed. | ||
| The `edit` handler is called when the contents of the field might have been | ||
| changed by stuff being typed, or deleted, or written with the API, etc. | ||
| (Deprecated aliases: `edited`, `reflow`.) | ||
| Handlers are always called directly on the `handlers` object passed in, | ||
| preserving the `this` value, so you can do stuff like: | ||
| ```js | ||
| var MathList = P(function(_) { | ||
| _.init = function() { | ||
| this.maths = []; | ||
| this.el = ... | ||
| }; | ||
| _.add = function() { | ||
| var math = MQ.MathField($('<span/>')[0], { handlers: this }); | ||
| $(math.el()).appendTo(this.el); | ||
| math.data.i = this.maths.length; | ||
| this.maths.push(math); | ||
| }; | ||
| _.moveOutOf = function(dir, math) { | ||
| var adjacentI = (dir === MQ.L ? math.data.i - 1 : math.data.i + 1); | ||
| var adjacentMath = this.maths[adjacentI]; | ||
| if (adjacentMath) adjacentMath.focus().moveToDirEnd(-dir); | ||
| }; | ||
| ... | ||
| }); | ||
| ``` | ||
| Of course you can always ignore the last argument, like when the handlers close | ||
| over the math field: | ||
| ```js | ||
| var latex = ''; | ||
| var mathField = MQ.MathField($('#mathfield')[0], { | ||
| handlers: { | ||
| edit: function() { latex = mathField.latex(); }, | ||
| enter: function() { submitLatex(latex); } | ||
| } | ||
| }); | ||
| ``` | ||
| **A Note On Changing Colors:** | ||
@@ -88,4 +369,4 @@ | ||
| need to, in addition to of course setting the background color on the | ||
| editable itself, set it on elements with class `matrixed`, and then set | ||
| a Chroma filter on elements with class `matrixed-container`. | ||
| editable itself, set it on elements with class `mq-matrixed`, and then set | ||
| a Chroma filter on elements with class `mq-matrixed-container`. | ||
@@ -99,6 +380,6 @@ For example, to style as white-on-black instead of black-on-white: | ||
| } | ||
| #my-math-input .matrixed { | ||
| #my-math-input .mq-matrixed { | ||
| background: black; | ||
| } | ||
| #my-math-input .matrixed-container { | ||
| #my-math-input .mq-matrixed-container { | ||
| filter: progid:DXImageTransform.Microsoft.Chroma(color='black'); | ||
@@ -114,108 +395,115 @@ } | ||
| [Transforms]: http://github.com/laughinghan/mathquill/wiki/Transforms | ||
| [Transforms]: http://github.com/mathquill/mathquill/wiki/Transforms | ||
| ## Building and Testing | ||
| If you hack on MathQuill, you're gonna want to build and test the source files | ||
| To hack on MathQuill, you're gonna want to build and test the source files | ||
| you edit. In addition to `make`, MathQuill uses some build tools written on | ||
| [Node][]. With the [Node Package Manager][npm] that comes with recent versions | ||
| of it, just run | ||
| [Node](http://nodejs.org/#download), so you will need to install that before | ||
| running `make`. (Once it's installed, `make` automatically does `npm install`, | ||
| installing the necessary build tools.) | ||
| npm install | ||
| from the root directory of the repo and `make` will start working. | ||
| - `make` builds `build/mathquill.{css,js,min.js}` | ||
| - `make dev` won't try to minify MathQuill (which can be take nonzero time) | ||
| - `make test` also doesn't minify MathQuill, but it also builds | ||
| `mathquill.test.js`, which is used in `test/unit.html` | ||
| - `make dev` won't try to minify MathQuill (which can be annoyingly slow) | ||
| - `make test` builds `mathquill.test.js` (used by `test/unit.html`) and also | ||
| doesn't minify | ||
| - `make basic` builds `mathquill-basic.{js,min.js,css}` and | ||
| `font/Symbola-basic.{eot,ttf}`; serve and load them instead for a stripped- | ||
| down version of MathQuill for basic mathematics, without advanced LaTeX | ||
| commands. Specifically, it doesn't let you type LaTeX backslash commands | ||
| with `\` or text blocks with `$`, and also won't render any LaTeX commands | ||
| that can't by typed without `\`. The resulting JS is only somewhat smaller, | ||
| but the font is like 100x smaller. (TODO: reduce full MathQuill's font size.) | ||
| [Node]: http://nodejs.org/#download | ||
| [npm]: http://npmjs.org | ||
| ## Understanding The Source Code | ||
| All the CSS is in `mathquill.css`. Most of it's pretty straightforward, the | ||
| choice of font isn't settled, and fractions are somewhat arcane, see the Wiki | ||
| pages ["Fonts"](http://github.com/laughinghan/mathquill/wiki/Fonts) and | ||
| ["Fractions"](http://github.com/laughinghan/mathquill/wiki/Fractions). | ||
| All the CSS is in `src/css`. Most of it's pretty straightforward, the choice of | ||
| font isn't settled, and fractions are somewhat arcane, see the Wiki pages | ||
| ["Fonts"](http://github.com/mathquill/mathquill/wiki/Fonts) and | ||
| ["Fractions"](http://github.com/mathquill/mathquill/wiki/Fractions). | ||
| All the JavaScript that you actually want to read is in `src/`, `build/` is | ||
| created when you run `make` just to contain a cat'ed and minified version of | ||
| all that. | ||
| created by `make` to contain the same JS cat'ed and minified. | ||
| ### Overview of how things fit together: | ||
| There's a lot of JavaScript but the big picture isn't too complicated, there's 2 | ||
| thin layers sandwiching 2 broad but modularized layers: | ||
| (Just skim the logic, but do read the starred comments, definitions and method | ||
| signatures.) | ||
| - At the highest level, the public API is a thin wrapper around calls to: | ||
| - "services" on the "controller", which sets event listeners that call: | ||
| - methods on "commands" in the "edit tree", which call: | ||
| - tree- and cursor-manipulation methods, at the lowest level, to move the | ||
| cursor or edit the tree or whatever. | ||
| In comments and internal documentation, `::` means `.prototype.`. | ||
| More specifically: | ||
| `intro.js` defines some simple sugar for the idiomatic JS classes used | ||
| throughout MathQuill, plus some globals and opening boilerplate. | ||
| (In comments and internal documentation, `::` means `.prototype.`.) | ||
| * Classes are defined using [Pjs][], and the variable `_` is used by convention | ||
| as the prototype. | ||
| - At the lowest level, the **edit tree** of JS objects represents math and text | ||
| analogously to how [the HTML DOM][] represents a web page. | ||
| + (Old docs variously called this the "math tree", the "fake DOM", or some | ||
| combination thereof, like the "math DOM".) | ||
| + `tree.js` defines base classes of objects relating to the tree. | ||
| + `cursor.js` defines objects representing the cursor and a selection of | ||
| math or text, with associated HTML elements. | ||
| - Interlude: a **feature** is a unit of publicly exposed functionality, either | ||
| by the API or interacted with by typists. Following are the 2 disjoint | ||
| categories of features. | ||
| - A **command** is a thing you can type and edit like a fraction, square root, | ||
| or "for all" symbol, ∀. They are implemented as a class of node objects | ||
| in the edit tree, like `Fraction`, `SquareRoot`, or `VanillaSymbol`. | ||
| + Each command has an associated **control sequence** (as termed by Knuth; | ||
| in the LaTeX community, commonly called a "macro" or "command"), a token | ||
| in TeX and LaTeX syntax consisting of a backslash then any single | ||
| character or string of letters, like `\frac` or <code>\ </code>. Unlike | ||
| loose usage in the LaTeX community, where `\ne` and `\neq` (which print | ||
| the same symbol, ≠) might or might not be considered the same command, | ||
| in the context of MathQuill they are considered different "control | ||
| sequences" for the same "command". | ||
| - A **service** is a feature that applies to all or many commands, like typing, | ||
| moving the cursor around, LaTeX exporting, LaTeX parsing. Note that each of | ||
| these varies by command (the cursor goes in a different place when moving into | ||
| a fraction vs into a square root, they export different LaTeX, etc), cue | ||
| polymorphism: services define methods on the controller that call methods on | ||
| nodes in the edit tree with certain contracts, such as a controller method | ||
| called on initialization to set listeners for keyboard events, that when the | ||
| Left key is pressed, calls `.moveTowards` on the node just left of the cursor, | ||
| dispatching on what kind of command the node is (`Fraction::moveTowards` and | ||
| `SquareRoot::moveTowards` can insert the cursor in different places). | ||
| + `controller.js` defines the base class for the **controller**, which each | ||
| math field or static math instance has one of, and to which each service | ||
| adds methods. | ||
| - `publicapi.js` defines the global `MathQuill.getInterface()` function, the | ||
| `MQ.MathField()` etc. constructors, and the API objects returned by | ||
| them. The constructors, and the API methods on the objects they return, call | ||
| appropriate controller methods to initialize and manipulate math field and | ||
| static math instances. | ||
| [pjs]: https://github.com/jayferd/pjs | ||
| [the HTML DOM]: http://www.w3.org/TR/html5-author/introduction.html#a-quick-introduction-to-html | ||
| `tree.js` defines the abstract classes for the JS objects that make up the edit tree. | ||
| Misc.: | ||
| * A `Node` is a node in the tree. | ||
| * A `Fragment` is a range of siblings in the tree. This is used, for | ||
| example, for selections. | ||
| `intro.js` defines some simple sugar for the idiomatic JS classes used | ||
| throughout MathQuill, plus some globals and opening boilerplate. | ||
| * The edit tree has two kinds of nodes: commands and blocks | ||
| - blocks, like the root block, can contain any number of commands | ||
| - commands, like `x`, `1`, `+`, `\frac`, `\sqrt` (clearly siblings in the | ||
| tree) contain a fixed number of blocks | ||
| + symbols like `x`, `y`, `1`, `2`, `+`, `-` are commands with 0 blocks | ||
| * All edit tree nodes are instances of `MathElement` | ||
| - blocks are instances of `MathBlock` | ||
| - commands are instances of `MathCommand` | ||
| + symbols are instances of `Symbol` | ||
| Classes are defined using [Pjs][], and the variable `_` is used by convention as | ||
| the prototype. | ||
| `cursor.js` defines the "singleton" classes for the visible blinking | ||
| cursor and highlighted selection. | ||
| [pjs]: https://github.com/jneen/pjs | ||
| * The methods on `Cursor` pretty much do what they say on the tin. | ||
| They're how the tree is supposed to traversed and modified. | ||
| `services/*.util.js` files are unimportant to the overall architecture, you can | ||
| ignore them until you have to deal with code that is using them. | ||
| `rootelements.js` defines the edit tree root elements, and a function | ||
| `createRoot()` that attaches event handlers to the jQuery-wrapped HTML elements: | ||
| ## Open-Source License | ||
| * Some root elements can actually be in others, so rather than attaching | ||
| handlers in the constructor, `createRoot()` is called on the actual root | ||
| element. Except `\editable{}`s need text input event handlers that aren't | ||
| attached to the static math containing them...it's a little messy. | ||
| * Event delegation is used in 2 ways: | ||
| - in the HTML DOM, the root `span` element of each MathQuill thing is | ||
| delegated all the events in it's own MathQuill thing | ||
| + keyboard events usually end up triggering their analogue in the edit tree | ||
| on the cursor, which then bubble upwards | ||
| - in the edit tree, the root MathElement is delegated most of these | ||
| virtual keyboard events | ||
| + for example, `RootMathBlock::keydown()` | ||
| + some special commands do intercept these events, though | ||
| The Source Code Form of MathQuill is subject to the terms of the Mozilla Public | ||
| License, v. 2.0: http://mozilla.org/MPL/2.0/ | ||
| `textarea.js` handles all the HTML DOM events necessary to emulate a textarea, using | ||
| a hidden textarea. | ||
| The quick-and-dirty is you can do whatever if modifications to MathQuill are in | ||
| public GitHub forks. (Other ways to publicize modifications are also fine, as | ||
| are private use modifications. See also: [MPL 2.0 FAQ][]) | ||
| `symbols.js` defines classes for all the symbols like `&` and `\partial`, and | ||
| adds the constructors to `CharCmds` or `LatexCmds` as used by `Cursor::write()`. | ||
| [MPL 2.0 FAQ]: https://www.mozilla.org/en-US/MPL/2.0/FAQ/ | ||
| `commands.js` defines classes for all the commands like `\frac` and `/`, and | ||
| adds the constructors to `CharCmds` or `LatexCmds`. | ||
| ## umeditor note | ||
| `publicapi.js` defines the public `jQuery::mathquill()` method and on document | ||
| ready, finds and mathquill-ifies `.mathquill-editable` and so on elements. | ||
| `outro.js` is just closing boilerplate to match that in `intro.js`. | ||
| See [the EtherPad for MathQuill on sync.in](http://sync.in/mathquill) for | ||
| the current active development discussion. | ||
| ## Open-Source License | ||
| [GNU Lesser General Public License](http://www.gnu.org/licenses/lgpl.html) | ||
| Copyleft 2010-2012 [Han](http://github.com/laughinghan) and [Jay](http://github.com/jayferd) | ||
| mathquill npm version 0.9.1 is from commit 38e162b |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 3 instances in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Non-permissive License
License(Experimental) A license not known to be considered permissive was found.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Native code
Supply chain riskContains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.
Found 8 instances in 1 package
Mixed license
License(Experimental) Package contains multiple licenses.
Found 1 instance in 1 package
Non-permissive License
License(Experimental) A license not known to be considered permissive was found.
Found 1 instance in 1 package
Improved metrics
- Number of low license alerts
- decreased by-33.33%
2
- Lines of code
- increased by19.88%
5669
- Number of lines in readme file
- increased by131.51%
507
- Number of medium supply chain risk alerts
- decreased by-36.36%
7
Worsened metrics
- Total package byte prevSize
- decreased by-44.31%
6195433
- Number of package files
- decreased by-36.84%
24
No dependency changes