@pie-lib/math-input-mathlive 1.1.5-beta.9 → 2.0.1-next.20261107131445

package/dist/math-input.js

@@ -0,0 +1,74 @@
+import { baseSet as e } from "./keys/index.js";
+import { keyToAction as t } from "./latex-bridge.js";
+import { Input as n } from "./mf/input.js";
+import { KeyPad as r } from "./keypad/index.js";
+import i from "react";
+import a from "prop-types";
+import { styled as o } from "@mui/material/styles";
+import s from "debug";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/math-input.tsx
+var u = s("pie-lib:math-input-mathlive"), d = "rgba(0, 0, 0, 0.23)", f = o("div")(({ theme: e, focused: t }) => ({
+	borderRadius: "4px",
+	border: `solid 1px ${t ? e.palette.primary.main : d}`,
+	marginTop: e.spacing(1),
+	marginBottom: e.spacing(1),
+	transition: "border 200ms linear"
+})), p = o("div")({
+	width: "100%",
+	display: "flex"
+}), m = o(n)(({ theme: e }) => ({
+	width: "100%",
+	transition: "border 200ms linear",
+	padding: e.spacing(1),
+	"& math-field:focus-within": {
+		outline: "none",
+		boxShadow: "none"
+	}
+})), h = class extends i.Component {
+	static propTypes = {
+		className: a.string,
+		keyset: a.array,
+		displayMode: a.oneOf(["block", "block-on-focus"]),
+		latex: a.string,
+		onChange: a.func
+	};
+	static defaultProps = {
+		keyset: [],
+		displayMode: "block"
+	};
+	constructor(e) {
+		super(e), this.state = { focused: !1 };
+	}
+	keypadPress = (e) => {
+		if (u("[keypadPress] key:", e), !this.input) return;
+		let n = t(e);
+		n && (n.type === "command" ? this.input.keystroke(n.value) : this.input.write(n.value));
+	};
+	inputFocus = () => this.setState({ focused: !0 });
+	inputBlur = () => this.setState({ focused: !1 });
+	changeLatex = (e) => {
+		let { onChange: t } = this.props;
+		t && e !== this.props.latex && (u("[changeLatex]", e, this.props.latex), t(e));
+	};
+	render() {
+		let { className: t, keyset: n, latex: i } = this.props, { focused: a } = this.state;
+		return /* @__PURE__ */ l(f, {
+			className: t,
+			focused: a,
+			children: [/* @__PURE__ */ c(m, {
+				innerRef: (e) => this.input = e,
+				onFocus: this.inputFocus,
+				onBlur: this.inputBlur,
+				latex: i,
+				onChange: this.changeLatex
+			}), /* @__PURE__ */ c(p, { children: /* @__PURE__ */ c(r, {
+				baseSet: e,
+				additionalKeys: n,
+				onPress: this.keypadPress
+			}) })]
+		});
+	}
+};
+//#endregion
+export { h as MathInput, h as default };

package/dist/mathlive-instance.d.ts

@@ -0,0 +1,221 @@
+import { NEWLINE_EMBED } from './latex-bridge.js';
+/**
+ * Tell the package where the MathLive fonts are served from.
+ *
+ * Call before `loadMathLive()`.
+ *
+ *  - 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]
+ */
+export declare const configureFonts: (dir: any) => void;
+/**
+ * What the spacebar inserts in math mode.
+ *
+ * MathLive's `mathModeSpace` defaults to an empty string, which makes the
+ * spacebar a no-op - users cannot type a space at all. `\\ ` (a LaTeX control
+ * space) is what MathQuill serialised spaces as, so existing content and the
+ * MathJax renderer in @pie-lib/math-rendering both already understand it.
+ *
+ * A literal " " is not usable: LaTeX skips raw whitespace.
+ */
+export declare const MATH_MODE_SPACE = "\\ ";
+/**
+ * Custom macros for the pie-specific commands that the MathQuill fork
+ * understood but stock LaTeX does not.
+ *
+ * Kept deliberately in sync with the MathJax macros in
+ * @pie-lib/math-rendering (`render-math.js`) so the same latex renders the same
+ * way in the editor and in the static renderer.
+ */
+export declare const PIE_MACROS: {
+    parallelogram: string;
+    parallel: string;
+    napprox: string;
+    nsim: string;
+    ncong: string;
+    nparallel: string;
+    perpendicular: string;
+    divide: string;
+    degree: string;
+    square: string;
+    longdiv: string;
+    overarc: string;
+    abs: string;
+    answerBlock: {
+        args: number;
+        def: string;
+        captureSelection: boolean;
+        expand: boolean;
+    };
+};
+/**
+ * CSS that has to live *inside* a mathfield's shadow root.
+ *
+ * A live `<math-field>` renders in shadow DOM (`attachShadow({mode:'open'})`),
+ * so nothing in the host page's stylesheets reaches it. The stretchy-accent
+ * problem therefore needs fixing twice: once for static markup (see
+ * `placeholderStyles`) and once here for the editor.
+ *
+ * MathLive centres an accent with `margin-left: <half the content width>` as an
+ * inline style. For a stretchy accent that also shrinks its containing block
+ * (`.ML__center` is position:relative), so the arc ends up half-width and offset
+ * - visibly failing to span the text underneath.
+ *
+ * `:has(.ML__stretchy)` keeps the fix to stretchy accents; single-glyph accents
+ * (`\hat{x}`, `\vec{x}`) still need their centring offset.
+ */
+/**
+ * Marker put on the host `<math-field>` while a `\placeholder{}` is selected,
+ * so the caret rules below apply to a placeholder and nothing else.
+ */
+export declare const PLACEHOLDER_CARET_CLASS = "pie-caret-in-placeholder";
+/**
+ * Keep {@link PLACEHOLDER_CARET_CLASS} in step with the selection.
+ *
+ * Gating on the class is what keeps the caret specific to placeholders: an
+ * ordinary selection (`x+1`) must not sprout one. MathLive fires
+ * `selection-change` for every caret move, including the one that lands on the
+ * placeholder straight after an insert.
+ *
+ * @param {HTMLElement} mathField
+ * @returns {function|undefined} teardown, to call on unmount
+ */
+export declare const trackPlaceholderCaret: (mathField: any) => (() => any) | undefined;
+/**
+ * Apply {@link SHADOW_CSS} inside a mathfield's shadow root.
+ *
+ * Uses `adoptedStyleSheets` when available (which is how MathLive loads its own
+ * stylesheets) and falls back to appending a <style> node.
+ *
+ * @param {HTMLElement} mathField
+ */
+export declare const applyShadowStyles: (mathField: any) => void;
+/**
+ * The loaded MathLive, starting the load if it has not begun.
+ *
+ * This package is ESM, so there is no synchronous `require`: a caller that runs
+ * synchronously (applyStaticMath, keypad labels) gets undefined on the first
+ * pass and is expected to retry once {@link loadMathLive} resolves.
+ *
+ * Returns undefined during SSR or until the module has loaded.
+ *
+ * @returns {object|undefined}
+ */
+export declare const loadMathLiveSync: () => any;
+/**
+ * Load MathLive with a dynamic import. Resolves to undefined during SSR.
+ *
+ * `webpackMode: "eager"` keeps MathLive inside a webpack host's bundle: a
+ * separate chunk 404s on deployments that do not serve it, leaving every
+ * mathfield and keypad label blank with no obvious cause.
+ *
+ * @returns {Promise<object|undefined>}
+ */
+export declare const loadMathLive: () => Promise<any>;
+/**
+ * Synchronous accessor for an already-loaded MathLive.
+ * @returns {object|undefined}
+ */
+export declare const getMathLive: () => any;
+/**
+ * The macro dictionary to hand to a mathfield: pie macros plus anything
+ * registered through `registerEmbed`.
+ *
+ * @returns {object}
+ */
+export declare const getMacros: () => {
+    parallelogram: string;
+    parallel: string;
+    napprox: string;
+    nsim: string;
+    ncong: string;
+    nparallel: string;
+    perpendicular: string;
+    divide: string;
+    degree: string;
+    square: string;
+    longdiv: string;
+    overarc: string;
+    abs: string;
+    answerBlock: {
+        args: number;
+        def: string;
+        captureSelection: boolean;
+        expand: boolean;
+    };
+};
+/**
+ * Register an embed. API-compatible with @pie-lib/math-input's `registerEmbed`
+ * so existing callers do not change.
+ *
+ * MathQuill's factory returns `{ htmlString, text, latex }`. Only the
+ * declarative parts survive: `latex` round-trips through a macro and the
+ * styling hook becomes a `data-embed` attribute. Arbitrary DOM injection via
+ * `htmlString` has no MathLive equivalent and is ignored.
+ *
+ * @param {string} name
+ * @param {Function} factory
+ */
+export declare function registerEmbed(name: any, factory: any): void;
+/**
+ * Embeds registered so far. Exposed for tests/diagnostics.
+ * @returns {string[]}
+ */
+export declare const registeredEmbeds: () => any[];
+/** Reset the embed registry. Test helper. */
+export declare const __resetEmbeds: () => void;
+/** Inject a stub MathLive instance. Test helper. */
+export declare const __setMathLiveForTest: (stub: any) => void;
+/**
+ * Render static math into an element. API-compatible with
+ * @pie-lib/math-input's `applyStaticMath`.
+ *
+ * Callers written against MathQuill invoke this synchronously from lifecycle
+ * methods, where MathLive (a dynamic import) may not have loaded yet. Rather
+ * than silently rendering nothing, this kicks off the load and re-applies once
+ * the engine is ready, so the element fills in on the next tick.
+ *
+ * @param {HTMLElement} element
+ * @param {string} [latex] assigned to the element before rendering
+ * @param {object} [options] `{ macros }` overrides
+ * @returns {HTMLElement|undefined} the element, or undefined if deferred
+ */
+export declare function applyStaticMath(element: any, latex: any, options?: {}): any;
+/**
+ * Convert latex to markup using the pie macro set. Used for keypad labels and
+ * any read-only rendering that does not need a live mathfield.
+ *
+ * @param {string} latex
+ * @param {object} [options]
+ * @returns {string} HTML markup, or '' if MathLive is not loaded
+ */
+export declare function latexToMarkup(latex: any, options?: {}): any;
+/**
+ * Latex as MathML, for a text alternative to static markup, which has none of
+ * its own: a screen reader reads its glyphs in DOM order, so `\frac12` came out
+ * as "2 1".
+ *
+ * @param {string} latex stored latex
+ * @returns {string} a `<math>` element, or '' if MathLive is not loaded
+ */
+export declare function latexToMathMl(latex: any): string;
+/**
+ * A new `<math-field>`, configured with the pie macros.
+ *
+ * Built through the registry, not with `new MathfieldElement()`: every IIFE
+ * bundle carries its own MathLive, and only the first one to load registers
+ * `math-field`. Constructing another copy's unregistered class throws "Illegal
+ * constructor", while `createElement` returns the registered one.
+ *
+ * @param {object} ml the loaded MathLive module
+ * @returns {HTMLElement}
+ */
+export declare function createMathField(ml: any): any;
+export { NEWLINE_EMBED };

package/dist/mathlive-instance.js

@@ -0,0 +1,159 @@
+import { toAccessibleLatex as e, toMathLive as t, withVisibleEmptySlots as n } from "./latex-bridge.js";
+import { PARALLEL_CSS as r, ROOT_INDEX_CSS as i } from "./mf/common-styles.js";
+import { fixLongDivisionWhenReady as a } from "./longdiv.js";
+import o from "debug";
+//#region src/mathlive-instance.ts
+var s = o("pie-lib:math-input-mathlive:instance"), c, l, u = (e) => {
+	if (!e || /^(?:[a-z+]+:)?\/\//i.test(e)) return e;
+	try {
+		return new URL(e, document.baseURI).href;
+	} catch (t) {
+		return s("could not resolve fontsDirectory \"%s\": %s", e, t && t.message), null;
+	}
+}, d = "0.110.0", f = () => `https://unpkg.com/mathlive@${c && c.version && c.version.mathlive || d}/fonts`, p = (e) => {
+	l = e, c && (c.MathfieldElement.fontsDirectory = e === void 0 ? f() : u(e));
+}, m = {
+	parallelogram: "\\htmlData{pie-macro=parallelogram}{\\unicode{\"25B1}}",
+	parallel: "\\htmlData{pie-macro=parallel}{\\unicode{\"2225}}",
+	napprox: "\\not\\approx",
+	nsim: "\\not\\sim",
+	ncong: "\\not\\cong",
+	nparallel: "\\not\\parallel",
+	perpendicular: "\\perp",
+	divide: "\\div",
+	degree: "^{\\circ}",
+	square: "\\unicode{\"25A1}",
+	longdiv: "\\enclose{longdiv}{#1}",
+	overarc: "\\overparen{#1}",
+	abs: "\\left|#1\\right|",
+	answerBlock: {
+		args: 1,
+		def: "\\htmlData{response-area=#1}{\\boxed{\\textsf{Response}}}",
+		captureSelection: !0,
+		expand: !1
+	}
+}, h = /* @__PURE__ */ new Map(), g = {
+	newLine: "",
+	answerBlock: ""
+}, _ = !1, v = () => {
+	l === void 0 && s("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.", f()), c.MathfieldElement.fontsDirectory = l === void 0 ? f() : u(l), D();
+}, y = "pie-caret-in-placeholder", b = "\\placeholder{}", x = [
+	`:host(.${y}) .ML__selected:not(:has(.ML__selected)){position:relative}`,
+	`:host(.${y}) .ML__selected:not(:has(.ML__selected))::after{`,
+	"content:\"\";position:absolute;left:50%;top:12%;height:76%;",
+	"border-right:2px solid var(--_caret-color, currentColor);",
+	"animation:ML__caret-blink 1.05s step-end forwards infinite}"
+].join(""), S = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 522' preserveAspectRatio='none'%3E%3Crect y='241' width='100' height='40'/%3E%3C/svg%3E\") 0 0/100% 100% no-repeat", C = `.ML__latex .overline>.ML__vlist-t>.ML__vlist-r>.ML__vlist>span:has(>.overline-line){top:-4.07em !important}.ML__latex .overline:has(>.ML__vlist-t>.ML__vlist-r>.ML__vlist>span>span[style*="height:0.9em"])>.ML__vlist-t>.ML__vlist-r>.ML__vlist>span:has(>.overline-line){top:-4.1em !important}.ML__latex .overline{position:relative;top:-0.06em}.ML__latex .overline>.ML__vlist-t>.ML__vlist-r>.ML__vlist>span:has(>span[style*="height:0.9em"]){top:-2.97em !important}.ML__latex .overline .overline-line{position:relative}.ML__latex .overline .overline-line:before{content:"";display:block;position:absolute;left:0;right:0;top:-0.241em;height:0.522em !important;border:0 !important;background:currentColor;-webkit-mask:${S};mask:${S}}.ML__latex .overline .overline-line:after{display:none !important}.ML__latex:has(.overline)>.ML__strut{height:1.37em !important}`, w = ".ML__latex .ML__center:has(.ML__stretchy){margin-left:0 !important}" + i + r + C + ".ML__latex .ML__mfrac:has(.ML__vlist>.ML__center:first-child span[style*=\"height:0.9em\"]) .ML__frac-line{position:relative;top:-0.025em}.ML__latex .ML__mfrac:not(:has(span[style*=\"height:0.9em\"])) .ML__frac-line{position:relative;top:0.04em}" + x, T = (e) => {
+	if (!e || typeof e.addEventListener != "function") return;
+	let t = () => {
+		let t = "";
+		try {
+			!e.selectionIsCollapsed && e.selection && (t = e.getValue(e.selection, "latex"));
+		} catch (e) {
+			s("could not read the selection: %s", e && e.message);
+		}
+		e.classList && e.classList.toggle(y, t === b);
+	};
+	return e.addEventListener("selection-change", t), t(), () => e.removeEventListener("selection-change", t);
+}, E = (e) => {
+	let t = e && e.shadowRoot;
+	if (t) try {
+		if ("adoptedStyleSheets" in t && typeof CSSStyleSheet < "u") {
+			if (t.__pieAccentSheet) return;
+			let e = new CSSStyleSheet();
+			e.replaceSync(w), t.adoptedStyleSheets = [...t.adoptedStyleSheets, e], t.__pieAccentSheet = e;
+			return;
+		}
+		if (!t.querySelector("style[data-pie-accent]")) {
+			let e = document.createElement("style");
+			e.setAttribute("data-pie-accent", ""), e.textContent = w, t.appendChild(e);
+		}
+	} catch (e) {
+		s("could not apply shadow styles to the mathfield: %s", e && e.message);
+	}
+}, D = () => {
+	if (typeof document < "u" && c && c.renderMathInElement) try {
+		c.renderMathInElement(document.createElement("span"));
+	} catch (e) {
+		s("could not trigger MathLive core stylesheet injection: %s", e && e.message);
+	}
+}, O, k = () => {
+	if (typeof window < "u") return c || A(), c;
+}, A = async () => {
+	if (typeof window < "u") {
+		if (c) return c;
+		O ??= import(
+			/* webpackMode: "eager" */
+			"mathlive"
+);
+		try {
+			let e = await O;
+			c || (c = e, v());
+		} catch (e) {
+			O = void 0, !_ && globalThis.process?.env?.NODE_ENV !== "test" && (_ = !0, console.warn("[@pie-lib/math-input-mathlive] MathLive could not be loaded; math input will not render. If this is a bundling issue, ensure \"mathlive\" is resolvable from the host bundle. Cause: " + (e && e.message)));
+			return;
+		}
+		return c;
+	}
+}, j = () => c, M = () => {
+	let e = { ...m };
+	return h.forEach(({ latex: t }, n) => {
+		Object.prototype.hasOwnProperty.call(m, n) || (e[n] = `\\htmlData{embed=${n}}{${t}}`);
+	}), e;
+};
+function N(e, t) {
+	if (!e || typeof t != "function") return;
+	let n = {};
+	try {
+		n = t() || {};
+	} catch (t) {
+		s("embed factory threw for \"%s\": %s", e, t.message);
+	}
+	let r = Object.prototype.hasOwnProperty.call(g, e) ? g[e] : n.mathliveLatex || "\\placeholder{}";
+	!Object.prototype.hasOwnProperty.call(g, e) && !n.mathliveLatex && s("embed \"%s\" is not natively supported by MathLive; rendering as a placeholder. Provide `mathliveLatex` in the factory result to control this.", e), h.set(e, {
+		factory: t,
+		latex: r
+	});
+}
+function P(e, r, i = {}) {
+	if (!e || typeof window > "u") return;
+	let o = r ?? e.textContent, c = j() || k();
+	if (!c) s("applyStaticMath called before MathLive loaded - deferring until it is ready"), A().then((t) => {
+		t && e.isConnected !== !1 && P(e, o, i);
+	});
+	else return e.innerHTML = c.convertLatexToMarkup(n(t(o)), { macros: {
+		...M(),
+		...i.macros || {}
+	} }), a(e), e;
+}
+function F(e, r = {}) {
+	let i = j() || k();
+	if (!i || !e) return "";
+	try {
+		return i.convertLatexToMarkup(n(t(e)), {
+			...r,
+			macros: {
+				...M(),
+				...r.macros || {}
+			}
+		});
+	} catch (t) {
+		return s("convertLatexToMarkup failed for \"%s\": %s", e, t.message), "";
+	}
+}
+function I(n) {
+	let r = j();
+	if (!r?.convertLatexToMathMl || !n) return "";
+	try {
+		let i = r.convertLatexToMathMl(e(t(n)));
+		return i ? `<math xmlns="http://www.w3.org/1998/Math/MathML">${i}</math>` : "";
+	} catch (e) {
+		return s("convertLatexToMathMl failed for \"%s\": %s", n, e.message), "";
+	}
+}
+function L(e) {
+	let t = typeof customElements < "u" && customElements.get("math-field") ? document.createElement("math-field") : new e.MathfieldElement();
+	return t.macros = M(), t;
+}
+//#endregion
+export { m as PIE_MACROS, y as PLACEHOLDER_CARET_CLASS, E as applyShadowStyles, P as applyStaticMath, p as configureFonts, L as createMathField, M as getMacros, j as getMathLive, F as latexToMarkup, I as latexToMathMl, A as loadMathLive, k as loadMathLiveSync, N as registerEmbed, T as trackPlaceholderCaret };