Update/master to upstream

.gitignore

@@ -21,3 +21,4 @@ ehthumbs.db
 Thumbs.db
 #IDE files
 .idea
+dist/

CHANGELOG.md

@@ -1,7 +1,16 @@
-##
+## 0.
 
 ### Bug Fixes
 
+-   #371: When clicking after the last element in the mathfield, always set the anchor to be the last element in the root, i.e. as if `moveToMathFieldEnd` had been performed. For example, if the content is "x^2", clicking after the end of the field will put the caret after the last element (not after the "2" in the superscript)
+
+-   #372: Using an argument in a macro will result in the argument to be substituted without a group being inserted. Previously, `#1` with `ax` as a value for the first argument would have resulted in `{ax}`. This was noticeable when using the `x^2` key in the virtual keyboard: if the equation was `ab`, pressing that key resulted in `{ab}^2`. It now results in `ab^2`
+
+## 0.34 (Feb 5, 2020)
+
+### Bug Fixes
+
+-   Fix #364: Some expressions containing placeholders, when inserted, would not have the placeholder selected. For example, when using the "differentialD" key in the virtual keyboard.
 -   Fix #349:
     -   'latex-expanded' format no longer returns `\mleft` and `\mright`. This
         format is intended for inter-exchange with other TeX-compatible renderers
@@ -11,6 +20,16 @@
     -   When pasting content that begins/ends with `$` or `$$`, assume LaTeX format
 -   Fix keyboard shortcuts, e.g. "alt+(" or "alt+v"
 -   Fix #354: The argument of `\operatorname` is of type 'math', not 'text'. This means that using the '\text' command inside the argument is valid and that spaces should be ignored by default (but the `~` character can be used to insert a space in that context).
+-   Fix #282: Some keys from the virtual keyboards ('e', 'i') produce an incorrect input.
+-   Fix #227: An operator (`\sin`) following some text is incorrectly considered
+    to be part of the text.
+
+### Features / Improvements
+
+-   Documented `suppressChangeNotifications` options for `$insert()`
+-   Document `config.smartMode` (#312)
+-   The 'surd' (root) and 'leftright' (fences) elements now change color when the caret is inside their body. This helps distinguish the case where the caret position may be ambiguous, for example when it is either after the last element of the body of a 'surd' or the first element after the 'surd'.
+-   #339: Read-only mode. Set the mode to read-only with `mf.$setConfig({readOnly: true})`. When this mode is activated, the formula can be selected (so it can be copied), but it cannot be modified by the user. Progammatic modification is still possible.
 
 ## 0.33 (December 16, 2019)
 

README.md

@@ -3,15 +3,6 @@ Based on https://github.com/arnog/mathlive/issues/195
 
 Global changes :
 
-```diff
-// package.json
-
-"scripts": {
-  ...
-+ "babel": "rm -rf dist && npm run rollup && npx babel src --out-dir dist"
-},
-```
-
 ```diff
 // src/core/definitions.js
 
@@ -39,20 +30,22 @@ Global changes :
 
 <img alt="math live" src="assets/logo.png?raw=true">
 
-[![Maintenance](https://img.shields.io/maintenance/yes/2019.svg)]()
+[![Maintenance](https://img.shields.io/maintenance/yes/2020.svg)]()
 [![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/arnog/mathlive/master/LICENSE.txt)
 
 [![Build Status](https://travis-ci.org/arnog/mathlive.svg?branch=master)](https://travis-ci.org/arnog/mathlive)
 [![David](https://img.shields.io/david/dev/arnog/mathlive.svg)]()
 
 <img alt="Screenshot" src="assets/screenshots/screenshot.jpg">
 
-MathLive is a JavaScript library to render and edit math.
+MathLive: Math Input Made Easy
 
--   [x] TeX-quality typesetting
--   [x] Easy to use interface for math editing
--   [x] Fast and small
--   [x] Works great on desktop and on mobile devices thanks to an extensive set of virtual keyboards
+-   [x] JavaScript library easy to integrate in your project
+-   [x] Beautiful, TeX-quality typesetting
+-   [x] Easy to use interface for formula editing
+-   [x] Designed for mobile devices with an extensive set of virtual keyboards
+-   [x] Accessility support: screen reader compatible, and includes custom
+        math-to-speech support
 -   [x] Outputs **LaTeX**, **MathML** and **MathJSON** (Abstract Syntax Tree)
 -   [x] And it is easy to customize to your needs!
 

css/mathlive.core.less

@@ -1,6 +1,5 @@
 @math_main: KaTeX_Main;
 
-
 .ML__mathlive {
     // font: 400 100% @math_main,'times new roman',serif;
     line-height: 0;
@@ -25,7 +24,7 @@
 
     width: min-content;
 
-    // Encourage browsers to consider allocating a hardware accelerated 
+    // Encourage browsers to consider allocating a hardware accelerated
     // layer for this element.
     transform: translateZ(0);
 }
@@ -36,7 +35,8 @@
     cursor: text;
 }
 
-.ML__strut, .ML__strut--bottom {
+.ML__strut,
+.ML__strut--bottom {
     display: inline-block;
     min-height: 1em;
 }
@@ -72,27 +72,27 @@
     margin-right: -1ex;
     position: relative;
     color: var(--caret);
-    animation: ML__caret-command-blink 1.05s step-end forwards infinite;
+    animation: ML__caret-blink 1.05s step-end forwards infinite;
 }
 
 /* Text mode */
 .ML__text {
+    line-height: 1;
     white-space: pre;
 }
 
 .ML__focused .ML__text {
-    background: hsla(var(--hue), 40%, 50%, .1);
-}
-
-@keyframes  ML__caret-command-blink {
-    from, to    { opacity: 1; }
-    50%         { opacity: 0; }
+    background: hsla(var(--hue), 40%, 50%, 0.1);
 }
 
-
-@keyframes  ML__caret-blink {
-    from, to    { border-color: var(--caret); }
-    50%         { border-color: transparent; }
+@keyframes ML__caret-blink {
+    from,
+    to {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
 }
 
 /* Style for the invisible textarea element which is used
@@ -114,13 +114,12 @@ to make sure it doesn't show. */
     font-size: 16px;
 }
 
-
 .ML__fieldcontainer {
     display: flex;
     flex-flow: row;
     justify-content: space-between;
     align-items: flex-end;
-    min-height: 39px;       /* Need some room for the virtual keyboard toggle */
+    min-height: 39px; /* Need some room for the virtual keyboard toggle */
 
     /* Prevent the browser from trying to interpret touch gestures in the field */
     /* "Disabling double-tap to zoom removes the need for browsers to 
@@ -129,34 +128,34 @@ to make sure it doesn't show. */
     width: 100%;
 
     --hue: 212;
-    --highlight: hsl(var(--hue),97%,85%);
+    --highlight: hsl(var(--hue), 97%, 85%);
     // --highlight: Highlight;         // Highlight color defined in https://www.w3.org/TR/REC-CSS2/ui.html
     //                                 // It has been deprectated in https://www.w3.org/TR/css-color-3/ :(
     // --on-highlight: HighlightText;
     --caret: hsl(var(--hue), 40%, 49%);
     --highlight-inactive: #ccc;
     --primary: hsl(var(--hue), 40%, 50%);
 
-    --secondary: hsl(var(--hue),19%,26%);
-    --on-secondary: hsl(var(--hue),19%,26%);    
+    --secondary: hsl(var(--hue), 19%, 26%);
+    --on-secondary: hsl(var(--hue), 19%, 26%);
 }
 
 @media (prefers-color-scheme: dark) {
-    body:not([theme="light"]) .ML__fieldcontainer {
+    body:not([theme='light']) .ML__fieldcontainer {
         --highlight: hsl(var(--hue), 40%, 49%);
         --highlight-inactive: hsl(var(--hue), 10%, 35%);
-        --caret: hsl(var(--hue),97%,85%);
-        --secondary: hsl(var(--hue),25%,35%);
-        --on-secondary: hsl(0,0%,98%);
+        --caret: hsl(var(--hue), 97%, 85%);
+        --secondary: hsl(var(--hue), 25%, 35%);
+        --on-secondary: hsl(0, 0%, 98%);
     }
 }
 
-body[theme="dark"] .ML__fieldcontainer {
+body[theme='dark'] .ML__fieldcontainer {
     --highlight: hsl(var(--hue), 40%, 49%);
     --highlight-inactive: hsl(var(--hue), 10%, 35%);
-    --caret: hsl(var(--hue),97%,85%);
-    --secondary: hsl(var(--hue),25%,35%);
-    --on-secondary: hsl(0,0%,98%);
+    --caret: hsl(var(--hue), 97%, 85%);
+    --secondary: hsl(var(--hue), 25%, 35%);
+    --on-secondary: hsl(0, 0%, 98%);
 }
 
 .ML__fieldcontainer:focus {
@@ -165,7 +164,7 @@ body[theme="dark"] .ML__fieldcontainer {
 }
 
 /* This is the actual field content (formula) */
-.ML__fieldcontainer__field { 
+.ML__fieldcontainer__field {
     align-self: center;
     position: relative;
     overflow: hidden;
@@ -174,8 +173,6 @@ body[theme="dark"] .ML__fieldcontainer {
     width: 100%;
 }
 
-
-
 .ML__virtual-keyboard-toggle {
     display: flex;
     align-self: center;
@@ -193,28 +190,27 @@ body[theme="dark"] .ML__fieldcontainer {
     /* Avoid some weird blinking with :hover */
     border-radius: 50%;
     border: 1px solid transparent;
-    transition: background 0.2s cubic-bezier(.64,.09,.08,1);
+    transition: background 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
     color: var(--primary);
     fill: currentColor;
     background: transparent;
 
     &:hover {
-        background: hsl(var(--hue),25%,35%);
-        color: hsl(0,0%,98%);
+        background: hsl(var(--hue), 25%, 35%);
+        color: hsl(0, 0%, 98%);
         fill: currentColor;
         border-radius: 50%;
         // border: 1px solid rgba(255, 255, 255, .9);
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+            0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
     }
 }
 
-
-
 /* The element that display info while in command mode */
 .ML__popover {
     visibility: hidden;
     min-width: 160px;
-    background-color: rgba(97, 97, 97, .95);
+    background-color: rgba(97, 97, 97, 0.95);
     color: #fff;
     text-align: center;
     border-radius: 6px;
@@ -226,31 +222,31 @@ body[theme="dark"] .ML__fieldcontainer {
     flex-direction: column;
     justify-content: center;
 
-    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
-    transition: all 0.2s cubic-bezier(.64,.09,.08,1);
+    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+    transition: all 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
 
     /* The 'tip' of the popover panel */
     &::after {
-        content: "";
+        content: '';
         position: absolute;
         top: -5px;
         left: calc(50% - 3px);
-        width: 0; 
-        height: 0; 
+        width: 0;
+        height: 0;
         border-left: 5px solid transparent;
         border-right: 5px solid transparent;
-        
+
         font-size: 1rem;
-        
-        border-bottom: 5px solid rgba(97, 97, 97, .9);
+
+        border-bottom: 5px solid rgba(97, 97, 97, 0.9);
     }
 }
 
 .reverse-direction {
     &::after {
         top: auto;
         bottom: -5px;
-        border-top: 5px solid rgba(97, 97, 97, .9);
+        border-top: 5px solid rgba(97, 97, 97, 0.9);
         border-bottom: 0;
     }
 }