@pie-lib/math-input-mathlive 1.1.5-beta.1 → 1.1.5-beta.10

package/src/mathlive-instance.js

@@ -1,7 +1,6 @@
 import debug from 'debug';
 import { NEWLINE_EMBED, toMathLive, withVisibleEmptySlots } from './latex-bridge';
-import { registerEmbeddedFonts } from './fonts';
-import { ROOT_INDEX_CSS } from './mf/common-styles';
+import { ROOT_INDEX_CSS, PARALLEL_CSS } from './mf/common-styles';
 
 const log = debug('pie-lib:math-input-mathlive:instance');
 
@@ -49,7 +48,7 @@ const absoluteFontsDirectory = (dir) => {
 };
 
 /**
- * Last-resort CDN for the KaTeX fonts.
+ * Version-pinned CDN fallback for the KaTeX fonts.
  *
  * Some symbols are composed from Private Use Area glyphs that exist only in
  * those fonts: `\\neq` is U+E020 (a negation slash) overlapped on `=`, and
@@ -57,10 +56,9 @@ const absoluteFontsDirectory = (dir) => {
  * an arbitrary glyph for U+E020, so those keys render as garbage rather than
  * simply falling back to a plainer face.
  *
- * The fonts normally come from inside this package (see `./fonts`), so this URL
- * is only reached on a browser without the FontFace API, where MathLive has to
- * fetch the woff2 files itself. The version comes from MathLive, so the fonts
- * always match the engine.
+ * The version comes from MathLive itself, so the fonts always match the engine.
+ * Hosts that would rather not depend on a third party should serve the fonts and
+ * call `configureFonts('/their/path')`, or pass `null` to opt out.
  */
 const FALLBACK_MATHLIVE_VERSION = '0.110.0';
 
@@ -74,17 +72,15 @@ const cdnFontsDirectory = () => {
 /**
  * Tell the package where the MathLive fonts are served from.
  *
- * Optional: by default the fonts come from inside this package (see `./fonts`),
- * so nothing has to be served or configured. Call this before `loadMathLive()`
- * to point MathLive at your own copy instead - worth doing if the host already
- * serves the KaTeX woff2 files and would rather not carry them twice.
+ * Call before `loadMathLive()`.
  *
- *  - a path/URL: served by you; the embedded fonts are not registered
- *  - `null`:     skip font loading entirely; note `\\neq`, `\\nsim` and `\\ncong`
- *                then render incorrectly, being built from Private Use Area
- *                glyphs that only these fonts have
- *  - not called: the embedded fonts, with the CDN as a fallback for browsers
- *                without the FontFace API
+ *  - a path/URL: served by you, no third-party request
+ *  - `null`:     skip font loading; note `\\neq`, `\\nsim` and `\\ncong` then
+ *                render incorrectly, being built from Private Use Area glyphs
+ *  - not called: falls back to a version-pinned CDN
+ *
+ * The fonts ship inside the `mathlive` package (`node_modules/mathlive/fonts`)
+ * ready to copy into whatever the host app serves statically.
  *
  * @param {string|null} [dir]
  */
@@ -120,6 +116,9 @@ export const PIE_MACROS = {
   // Argument-less symbols. Atomic is correct here: backspace should remove the
   // whole glyph, and there is nothing to type into.
   parallelogram: '\\htmlData{pie-macro=parallelogram}{\\unicode{"25B1}}',
+  // Same glyph as the built-in `\\parallel` (U+2225), tagged so it can be sized -
+  // see `parallelStyles`.
+  parallel: '\\htmlData{pie-macro=parallel}{\\unicode{"2225}}',
   napprox: '\\not\\approx',
   nsim: '\\not\\sim',
   ncong: '\\not\\cong',
@@ -167,22 +166,18 @@ let loadWarned = false;
 
 /** Apply post-load configuration exactly once. */
 const configureLoaded = () => {
-  // No host path configured: use the fonts that ship inside this package. Once
-  // they are in `document.fonts`, MathLive's own loader short-circuits and never
-  // requests a woff2 - so math renders offline and under a CSP that allows no
-  // font origin at all.
-  if (fontsDirectory === undefined && !registerEmbeddedFonts()) {
+  // Always replace MathLive's relative `'./fonts/'` default: it throws
+  // "Invalid base URL" when bundled. Use the host's copy if one was configured,
+  // otherwise the version-pinned CDN.
+  if (fontsDirectory === undefined) {
     log(
-      'embedded fonts unavailable (no FontFace API) - falling back to the CDN (%s). ' +
-        'Serve the fonts yourself and call configureFonts("/path/to/fonts") to avoid the network request.',
+      'no fontsDirectory configured - falling back to the CDN (%s). ' +
+        'Serve the fonts yourself and call configureFonts("/path/to/fonts") to avoid the network request, ' +
+        'or configureFonts(null) to opt out.',
       cdnFontsDirectory(),
     );
   }
 
-  // Always replace MathLive's relative `'./fonts/'` default: it throws
-  // "Invalid base URL" when bundled. The host's copy if one was configured,
-  // otherwise the CDN, which is now only reached if the embedded fonts could not
-  // be registered.
   mathlive.MathfieldElement.fontsDirectory =
     fontsDirectory === undefined ? cdnFontsDirectory() : absoluteFontsDirectory(fontsDirectory);
 
@@ -244,7 +239,10 @@ const PLACEHOLDER_CARET_CSS = [
 // written for static markup in the host page, which cannot cross the shadow
 // boundary.
 const SHADOW_CSS =
-  '.ML__latex .ML__center:has(.ML__stretchy){margin-left:0 !important}' + ROOT_INDEX_CSS + PLACEHOLDER_CARET_CSS;
+  '.ML__latex .ML__center:has(.ML__stretchy){margin-left:0 !important}' +
+  ROOT_INDEX_CSS +
+  PARALLEL_CSS +
+  PLACEHOLDER_CARET_CSS;
 
 /**
  * Keep {@link PLACEHOLDER_CARET_CLASS} in step with the selection.

package/src/mf/common-styles.js

@@ -75,6 +75,24 @@ export const rootIndexStyles = {
  */
 export const ROOT_INDEX_CSS = `${ROOT_INDEX_SELECTOR}{font-size:${ROOT_INDEX_FONT_SIZE} !important}`;
 
+/**
+ * Size of the parallel sign (`\parallel`, tagged `data-pie-macro="parallel"` by
+ * `PIE_MACROS`). The legacy editor enlarged it (`updateSpans` set 32px) because
+ * the bars read too small next to the letters of `AB ∥ CD`; MathLive draws it at
+ * the surrounding size, so it is scaled up here. Not applied to keypad labels.
+ */
+const PARALLEL_SELECTOR = '[data-pie-macro="parallel"]';
+const PARALLEL_FONT_SIZE = '1.4em';
+
+export const parallelStyles = {
+  [`& ${PARALLEL_SELECTOR}`]: {
+    fontSize: PARALLEL_FONT_SIZE,
+  },
+};
+
+/** The same rule as a CSS string, for a live mathfield's shadow root. */
+export const PARALLEL_CSS = `${PARALLEL_SELECTOR}{font-size:${PARALLEL_FONT_SIZE}}`;
+
 /**
  * Superscript/subscript sizing. MathLive follows TeX metrics for scripts, so the
  * MathQuill-era corrections are gone; the radical index is the one place where a
@@ -82,6 +100,7 @@ export const ROOT_INDEX_CSS = `${ROOT_INDEX_SELECTOR}{font-size:${ROOT_INDEX_FON
  */
 export const supsubStyles = {
   ...rootIndexStyles,
+  ...parallelStyles,
 };
 
 /** Empty placeholder boxes (answer blocks / open slots). */

package/src/mf/index.js

@@ -7,6 +7,7 @@ import CommonMqStyles, {
   commonMqKeyboardStyles,
   longdivStyles,
   rootIndexStyles,
+  parallelStyles,
   supsubStyles,
   placeholderStyles,
 } from './common-styles';
@@ -23,6 +24,7 @@ export {
   commonMqKeyboardStyles,
   longdivStyles,
   rootIndexStyles,
+  parallelStyles,
   supsubStyles,
   placeholderStyles,
 };

package/src/mf/input.jsx

@@ -80,6 +80,11 @@ export class Input extends React.Component {
     // Without this the spacebar does nothing: MathLive's mathModeSpace
     // defaults to an empty string.
     this.mathField.mathModeSpace = MATH_MODE_SPACE;
+    // After the exponent key the cursor must stay in the exponent until it is moved
+    // MathLive's `smartSuperscript` (on by
+    // default) jumps out of an empty superscript after a single digit, which breaks
+    // typing x^23 or 10^6 and is inconsistent with non-digit exponents.
+    this.mathField.smartSuperscript = false;
 
     // The mathfield renders in shadow DOM, so page CSS cannot reach it - the
     // stretchy-accent fix has to be injected there directly.

package/src/mf/static.jsx

@@ -11,7 +11,7 @@ import {
   trackPlaceholderCaret,
 } from '../mathlive-instance';
 import { toMathLive, fromMathLive, fieldIds } from '../latex-bridge';
-import { placeholderStyles, rootIndexStyles } from './common-styles';
+import { placeholderStyles, rootIndexStyles, parallelStyles } from './common-styles';
 
 const log = debug('pie-lib:math-input-mathlive:static');
 
@@ -22,6 +22,7 @@ const Holder = styled('span')({
   // Readable radical index - display mode renders in the light DOM, so the
   // shadow-root copy of this rule does not reach it.
   ...rootIndexStyles,
+  ...parallelStyles,
   '& math-field': {
     display: 'inline-block',
     border: 'none',
@@ -101,6 +102,8 @@ export default class Static extends React.Component {
     // Without this the spacebar does nothing: MathLive's mathModeSpace
     // defaults to an empty string.
     this.mathField.mathModeSpace = MATH_MODE_SPACE;
+    // Same as the editor: stay in the exponent after a digit (see mf/input.jsx).
+    this.mathField.smartSuperscript = false;
     this.mathField.value = toMathLive(this.props.latex);
 
     // The mathfield renders in shadow DOM, so page CSS cannot reach it - the