@khanacademy/math-input 17.0.3 → 17.0.5

package/src/components/input/math-wrapper.ts

@@ -1,189 +0,0 @@
-// Notes about MathQuill
-//
-// MathQuill's stores its layout as nested linked lists.  Each node in the
-// list has MQ.L '-1' and MQ.R '1' properties that define links to
-// the left and right nodes respectively.  They also have
-//
-// ctrlSeq: contains the latex code snippet that defines that node.
-// jQ: jQuery object for the DOM node(s) for this MathQuill node.
-// ends: pointers to the nodes at the ends of the container.
-// parent: parent node.
-// blocks: an array containing one or more nodes that make up the node.
-// sub?: subscript node if there is one as is the case in log_n
-//
-// All of the code below is super fragile.  Please be especially careful
-// when upgrading MathQuill.
-
-import $ from "jquery";
-
-import handleBackspace from "../key-handlers/handle-backspace";
-import keyTranslator from "../key-handlers/key-translator";
-
-import {getCursorContext, maybeFindCommand} from "./mathquill-helpers";
-import {createMathField, mathQuillInstance} from "./mathquill-instance";
-
-import type {
-    MathFieldInterface,
-    MathFieldUpdaterCallback,
-} from "./mathquill-types";
-import type Key from "../../data/keys";
-
-const mobileKeyTranslator: Record<Key, MathFieldUpdaterCallback> = {
-    ...keyTranslator,
-    // note(Matthew): our mobile backspace logic is really complicated
-    // and for some reason doesn't really work in the desktop experience.
-    // So we default to the basic backspace functionality in the
-    // key translator and overwrite it with the complicated logic here
-    // until we can unify the experiences (if we even want to).
-    // https://khanacademy.atlassian.net/browse/LC-906
-    BACKSPACE: handleBackspace,
-};
-
-/**
- * This file contains a wrapper around MathQuill so that we can provide a
- * more regular interface for the functionality we need while insulating us
- * from MathQuill changes.
- */
-class MathWrapper {
-    mathField: MathFieldInterface; // MathQuill MathField input
-    callbacks: any;
-
-    constructor(element, callbacks = {}) {
-        this.mathField = createMathField(element, () => {
-            return {
-                // use a span instead of a textarea so that we don't bring up the
-                // native keyboard on mobile when selecting the input
-                substituteTextarea: function () {
-                    return document.createElement("span");
-                },
-            };
-        });
-        this.callbacks = callbacks;
-    }
-
-    focus() {
-        // HACK(charlie): We shouldn't reaching into MathQuill internals like
-        // this, but it's the easiest way to allow us to manage the focus state
-        // ourselves.
-        this.mathField.cursor().show();
-
-        // Set MathQuill's internal state to reflect the focus, otherwise it
-        // will consistently try to hide the cursor on key-press and introduce
-        // layout jank.
-        this.mathField.focus();
-    }
-
-    blur() {
-        this.mathField.cursor().hide();
-        this.mathField.blur();
-    }
-
-    /**
-     * Handle a key press and return the resulting cursor state.
-     *
-     * @param {Key} key - an enum representing the key that was pressed
-     * @returns {object} a cursor object, consisting of a cursor context
-     */
-    pressKey(key: Key) {
-        const cursor = this.getCursor();
-        const translator = mobileKeyTranslator[key];
-
-        if (translator) {
-            translator(this.mathField, key);
-        }
-
-        if (!cursor.selection) {
-            // don't show the cursor for selections
-            cursor.show();
-        }
-
-        if (this.callbacks.onSelectionChanged) {
-            this.callbacks.onSelectionChanged(cursor.selection);
-        }
-
-        // NOTE(charlie): It's insufficient to do this as an `edited` handler
-        // on the MathField, as that handler isn't triggered on navigation
-        // events.
-        return {
-            context: this.contextForCursor(),
-        };
-    }
-
-    /**
-     * Place the cursor beside the node located at the given coordinates.
-     *
-     * @param {number} x - the x coordinate in the viewport
-     * @param {number} y - the y coordinate in the viewport
-     * @param {Node} hitNode - the node next to which the cursor should be
-     *                         placed; if provided, the coordinates will be used
-     *                         to determine on which side of the node the cursor
-     *                         should be placed
-     */
-    setCursorPosition(x: number, y: number, hitNode: HTMLElement) {
-        const el = hitNode || document.elementFromPoint(x, y);
-
-        if (el) {
-            const cursor = this.getCursor();
-
-            if (el.hasAttribute("mq-root-block")) {
-                // If we're in the empty area place the cursor at the right
-                // end of the expression.
-                cursor.insAtRightEnd(this.mathField.controller().root);
-            } else {
-                // Otherwise place beside the element at x, y.
-                const controller = this.mathField.controller();
-
-                const pageX = x - document.body.scrollLeft;
-                const pageY = y - document.body.scrollTop;
-                controller.seek($(el), pageX, pageY).cursor.startSelection();
-
-                // Unless that would leave us mid-command, in which case, we
-                // need to adjust and place the cursor inside the parens
-                // following the command.
-                const command = maybeFindCommand(cursor[mathQuillInstance.L]);
-                if (command && command.endNode) {
-                    // NOTE(charlie): endNode should definitely be \left(.
-                    cursor.insLeftOf(command.endNode);
-                    this.mathField.keystroke("Right");
-                }
-            }
-
-            if (this.callbacks.onCursorMove) {
-                this.callbacks.onCursorMove({
-                    context: this.contextForCursor(),
-                });
-            }
-        }
-    }
-
-    // note(Matthew): extracted this logic to share it elsewhere,
-    // but it's part of the public MathWrapper API
-    getCursor() {
-        return this.mathField.cursor();
-    }
-
-    // note(Matthew): extracted this logic to keep this file focused,
-    // but it's part of the public MathWrapper API
-    contextForCursor() {
-        return getCursorContext(this.mathField);
-    }
-
-    getSelection() {
-        return this.getCursor().selection;
-    }
-
-    getContent() {
-        return this.mathField.latex();
-    }
-
-    setContent(latex: string) {
-        this.mathField.latex(latex);
-    }
-
-    isEmpty() {
-        const cursor = this.getCursor();
-        return cursor.parent.id === 1 && cursor[1] === 0 && cursor[-1] === 0;
-    }
-}
-
-export default MathWrapper;

package/src/components/input/mathquill-helpers.ts

@@ -1,262 +0,0 @@
-import {CursorContext} from "./cursor-contexts";
-import {mathQuillInstance} from "./mathquill-instance";
-import {MathFieldActionType} from "./mathquill-types";
-
-import type {MathFieldInterface} from "./mathquill-types";
-
-const Numerals = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
-const GreekLetters = ["\\theta", "\\pi"];
-const Letters = [
-    "A",
-    "B",
-    "C",
-    "D",
-    "E",
-    "F",
-    "G",
-    "H",
-    "I",
-    "J",
-    "K",
-    "L",
-    "M",
-    "N",
-    "O",
-    "P",
-    "Q",
-    "R",
-    "S",
-    "T",
-    "U",
-    "V",
-    "W",
-    "X",
-    "Y",
-    "Z",
-];
-
-// We only consider numerals, variables, and Greek Letters to be proper
-// leaf nodes.
-const ValidLeaves = [
-    ...Numerals,
-    ...GreekLetters,
-    ...Letters.map((letter) => letter.toLowerCase()),
-    ...Letters.map((letter) => letter.toUpperCase()),
-];
-
-const mqNodeHasClass = (node: any, className: string): boolean =>
-    node._el && (node._el as HTMLElement).classList.contains(className);
-
-export function isFraction(node): boolean {
-    return mqNodeHasClass(node, "mq-fraction");
-}
-
-export function isNumerator(node): boolean {
-    return mqNodeHasClass(node, "mq-numerator");
-}
-
-export function isDenominator(node): boolean {
-    return mqNodeHasClass(node, "mq-denominator");
-}
-
-export function isSubScript(node): boolean {
-    // NOTE(charlie): MyScript has a structure whereby its superscripts seem
-    // to be represented as a parent node with 'mq-sup-only' containing a
-    // single child with 'mq-sup'.
-    return (
-        mqNodeHasClass(node, "mq-sub-only") || mqNodeHasClass(node, "mq-sub")
-    );
-}
-
-export function isSuperScript(node): boolean {
-    // NOTE(charlie): MyScript has a structure whereby its superscripts seem
-    // to be represented as a parent node with 'mq-sup-only' containing a
-    // single child with 'mq-sup'.
-    return (
-        mqNodeHasClass(node, "mq-sup-only") || mqNodeHasClass(node, "mq-sup")
-    );
-}
-
-export function isParens(node): boolean {
-    return node && node.ctrlSeq === "\\left(";
-}
-
-export function isLeaf(node): boolean {
-    return node && node.ctrlSeq && ValidLeaves.includes(node.ctrlSeq.trim());
-}
-
-export function isSquareRoot(node): boolean {
-    return node.blocks && mqNodeHasClass(node.blocks[0], "mq-sqrt-stem");
-}
-
-export function isNthRoot(node): boolean {
-    return node.blocks && mqNodeHasClass(node.blocks[0], "mq-nthroot");
-}
-
-export function isNthRootIndex(node): boolean {
-    return mqNodeHasClass(node, "mq-nthroot");
-}
-
-export function isInsideLogIndex(cursor): boolean {
-    const grandparent = cursor.parent.parent;
-
-    if (grandparent && mqNodeHasClass(grandparent, "mq-supsub")) {
-        const command = maybeFindCommandBeforeParens(grandparent);
-
-        if (command && command.name === "\\log") {
-            return true;
-        }
-    }
-
-    return false;
-}
-
-export function isInsideEmptyNode(cursor): boolean {
-    return (
-        cursor[mathQuillInstance.L] === MathFieldActionType.MQ_END &&
-        cursor[mathQuillInstance.R] === MathFieldActionType.MQ_END
-    );
-}
-
-export function selectNode(node, cursor) {
-    cursor.insLeftOf(node);
-    cursor.startSelection();
-    cursor.insRightOf(node);
-    cursor.select();
-    cursor.endSelection();
-}
-
-/**
- * Return the start node, end node, and full name of the command of which
- * the initial node is a part, or `null` if the node is not part of a
- * command.
- *
- * @param {node} initialNode - the node to included as part of the command
- * @returns {null|object} - `null` or an object containing the start node
- *                          (`startNode`), end node (`endNode`), and full
- *                          name (`name`) of the command
- */
-export function maybeFindCommand(initialNode) {
-    if (!initialNode) {
-        return null;
-    }
-
-    // MathQuill stores commands as separate characters so that
-    // users can delete commands one character at a time.  We iterate over
-    // the nodes from right to left until we hit a sequence starting with a
-    // '\\', which signifies the start of a command; then we iterate from
-    // left to right until we hit a '\\left(', which signifies the end of a
-    // command.  If we encounter any character that doesn't belong in a
-    // command, we return null.  We match a single character at a time.
-    // Ex) ['\\l', 'o', 'g ', '\\left(', ...]
-    const commandCharRegex = /^[a-z]$/;
-    const commandStartRegex = /^\\[a-z]$/;
-    const commandEndSeq = "\\left(";
-
-    // Note: We allowlist the set of valid commands, since relying solely on
-    // a command being prefixed with a backslash leads to undesired
-    // behavior. For example, Greek symbols, left parentheses, and square
-    // roots all get treated as commands.
-    const validCommands = ["\\log", "\\ln", "\\cos", "\\sin", "\\tan"];
-
-    let name = "";
-    let startNode;
-    let endNode;
-
-    // Collect the portion of the command from the current node, leftwards
-    // until the start of the command.
-    let node = initialNode;
-    while (node !== 0) {
-        const ctrlSeq = node.ctrlSeq.trim();
-        if (commandCharRegex.test(ctrlSeq)) {
-            name = ctrlSeq + name;
-        } else if (commandStartRegex.test(ctrlSeq)) {
-            name = ctrlSeq + name;
-            startNode = node;
-            break;
-        } else {
-            break;
-        }
-
-        node = node[mathQuillInstance.L];
-    }
-
-    // If we hit the start of a command, then grab the rest of it by
-    // iterating rightwards to compute the full name of the command, along
-    // with its terminal node.
-    if (startNode) {
-        // Next, iterate from the start to the right.
-        node = initialNode[mathQuillInstance.R];
-        while (node !== 0) {
-            const ctrlSeq = node.ctrlSeq.trim();
-            if (commandCharRegex.test(ctrlSeq)) {
-                // If we have a single character, add it to the command
-                // name.
-                name = name + ctrlSeq;
-            } else if (ctrlSeq === commandEndSeq) {
-                // If we hit the command end delimiter (the left
-                // parentheses surrounding its arguments), stop.
-                endNode = node;
-                break;
-            }
-
-            node = node[mathQuillInstance.R];
-        }
-        if (validCommands.includes(name)) {
-            return {name, startNode, endNode};
-        } else {
-            return null;
-        }
-    } else {
-        return null;
-    }
-}
-
-/**
- * Return the start node, end node, and full name of the command to the left
- * of `\\left(`, or `null` if there is no command.
- *
- * @param {node} leftParenNode - node where .ctrlSeq == `\\left(`
- * @returns {null|object} - `null` or an object containing the start node
- *                          (`startNode`), end node (`endNode`), and full
- *                          name (`name`) of the command
- */
-export function maybeFindCommandBeforeParens(leftParenNode) {
-    return maybeFindCommand(leftParenNode[mathQuillInstance.L]);
-}
-
-export function getCursorContext(
-    mathField?: MathFieldInterface,
-): typeof CursorContext[keyof typeof CursorContext] {
-    if (!mathField) {
-        return CursorContext.NONE;
-    }
-
-    // First, try to find any fraction to the right, unimpeded.
-    const cursor = mathField.cursor();
-    let visitor = cursor;
-    while (visitor[mathQuillInstance.R] !== MathFieldActionType.MQ_END) {
-        if (isFraction(visitor[mathQuillInstance.R])) {
-            return CursorContext.BEFORE_FRACTION;
-        } else if (!isLeaf(visitor[mathQuillInstance.R])) {
-            break;
-        }
-        visitor = visitor[mathQuillInstance.R];
-    }
-
-    // If that didn't work, check if the parent or grandparent is a special
-    // context, so that we can jump outwards.
-    if (isParens(cursor.parent && cursor.parent.parent)) {
-        return CursorContext.IN_PARENS;
-    } else if (isNumerator(cursor.parent)) {
-        return CursorContext.IN_NUMERATOR;
-    } else if (isDenominator(cursor.parent)) {
-        return CursorContext.IN_DENOMINATOR;
-    } else if (isSubScript(cursor.parent)) {
-        return CursorContext.IN_SUB_SCRIPT;
-    } else if (isSuperScript(cursor.parent)) {
-        return CursorContext.IN_SUPER_SCRIPT;
-    } else {
-        return CursorContext.NONE;
-    }
-}

package/src/components/input/mathquill-instance.ts

@@ -1,106 +0,0 @@
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import MathQuill from "mathquill";
-
-import type {
-    MathQuillInterface,
-    MathFieldConfig,
-    MathFieldInterface,
-} from "./mathquill-types";
-
-// We only need one MathQuill instance (referred to as MQ in the docs)
-// and that contains some MQ constants and the MathField constructor
-export const mathQuillInstance: MathQuillInterface = MathQuill.getInterface(3);
-
-const createBaseConfig = (): MathFieldConfig => ({
-    // LaTeX commands that, when typed, are immediately replaced by the
-    // appropriate symbol. This does not include ln, log, or any of the
-    // trig functions; those are always interpreted as commands.
-    autoCommands: "pi theta phi sqrt nthroot",
-    // Most of these autoOperatorNames are simply the MathQuill defaults.
-    // We have to list them all in order to add the `sen` operator (see
-    // comment below).
-    autoOperatorNames: [
-        "arccos",
-        "arcsin",
-        "arctan",
-        "arg",
-        "cos",
-        "cosh",
-        "cot",
-        "coth",
-        "csc",
-        "deg",
-        "det",
-        "dim",
-        "exp",
-        "gcd",
-        "hom",
-        "inf",
-        "ker",
-        "lg",
-        "lim",
-        "liminf",
-        "limsup",
-        "ln",
-        "log",
-        "max",
-        "min",
-        "Pr",
-        "projlim",
-        "sec",
-        // sen is used instead of sin in e.g. Portuguese
-        "sen",
-        "sin",
-        "sinh",
-        "sup",
-        "tan",
-        "tanh",
-    ].join(" "),
-
-    // Pop the cursor out of super/subscripts on arithmetic operators
-    // or (in)equalities.
-    charsThatBreakOutOfSupSub: "+-*/=<>≠≤≥",
-
-    // Prevent excessive super/subscripts or fractions from being
-    // created without operands, e.g. when somebody holds down a key
-    supSubsRequireOperand: true,
-
-    // The name of this option is somewhat misleading, as tabbing in
-    // MathQuill breaks you out of a nested context (fraction/script)
-    // if you're in one, but moves focus to the next input if you're
-    // not. Spaces (with this option enabled) are just ignored in the
-    // latter case.
-    //
-    // TODO(alex): In order to allow inputting mixed numbers, we will
-    // have to accept spaces in certain cases. The desired behavior is
-    // still to escape nested contexts if currently in one, but to
-    // insert a space if not (we don't expect mixed numbers in nested
-    // contexts). We should also limit to one consecutive space.
-    spaceBehavesLikeTab: true,
-});
-
-/**
- * Creates a new [MathField](http://docs.mathquill.com/en/latest/Api_Methods/#mqmathfieldhtml_element-config)
- * instance within the given `container`.
- *
- * An optional configuration callback can be provided to customize
- * the created MathField. A default configuration is passed to this
- * callback which can then be adjusted as needed. The configuration
- * returned from this callback is used to create the MathField.
- * This allows callers to do minimal configuration as only configs
- * that vary from the default need to be provided.
- */
-export function createMathField(
-    container: HTMLDivElement | HTMLSpanElement,
-    configCallback?: (baseConfig: MathFieldConfig) => MathFieldConfig,
-): MathFieldInterface {
-    const baseConfig = createBaseConfig();
-    const config = configCallback ? configCallback(baseConfig) : baseConfig;
-
-    const mathField = mathQuillInstance
-        .MathField(container, config)
-        // translated in ./math-input.tsx
-        .setAriaLabel(i18n._("Math input box")) as MathFieldInterface;
-
-    return mathField;
-}

package/src/components/input/mathquill-types.ts

@@ -1,32 +0,0 @@
-import type Key from "../../data/keys";
-import type MathQuill from "mathquill";
-
-export type MathQuillInterface = MathQuill.v3.API;
-
-export type MathFieldConfig = MathQuill.v3.Config;
-
-/**
- * Editable math fields have all of the above methods in addition to
- * the ones listed here.
- * https://docs.mathquill.com/en/latest/Api_Methods/
- */
-export type MathFieldInterface = MathQuill.v3.EditableMathQuill;
-
-export enum MathFieldActionType {
-    WRITE = "write",
-    CMD = "cmd",
-    KEYSTROKE = "keystroke",
-    MQ_END = 0,
-}
-
-/**
- * The MathQuill MathField Cursor
- * it's not part of the public API for MathQuill,
- * we reach into the internals to get it
- */
-export type MathFieldCursor = any;
-
-export type MathFieldUpdaterCallback = (
-    mathField: MathFieldInterface,
-    key: Key,
-) => void;

package/src/components/input/scroll-into-view.ts

@@ -1,65 +0,0 @@
-/**
- * A single function used to scroll a DOM node into view, optionally taking into
- * account that it may be obscured by the custom keypad. The logic makes the
- * strong assumption that the keypad will be anchored to the bottom of the page
- * in calculating its height, as this method may be called before the keypad has
- * animated into view.
- *
- * TODO(charlie): Move this scroll logic out of our components and into a higher
- * level in the component tree--perhaps even into webapp, beyond Perseus.
- */
-
-// HACK(charlie): This should be injected by webapp somehow.
-// TODO(charlie): Add a link to the webapp location as soon as the footer
-// has settled down.
-export const toolbarHeightPx = 60;
-
-export const scrollIntoView = (containerNode, keypadNode) => {
-    // TODO(charlie): There's no need for us to be reading the keypad bounds
-    // here, since they're pre-determined by logic in the store. We should
-    // instead pass around an object that knows the bounds.
-    const containerBounds = containerNode.getBoundingClientRect();
-    const containerBottomPx = containerBounds.bottom;
-    const containerTopPx = containerBounds.top;
-
-    // Get the element that scrolls the document.
-    const scrollNode = document.scrollingElement;
-
-    const desiredMarginPx = 16;
-
-    if (keypadNode) {
-        // NOTE(charlie): We can't use the bounding rect of the keypad,
-        // as it is likely in the process of animating in. Instead, to
-        // calculate its top, we make the strong assumption that the
-        // keypad will end up anchored at the bottom of the page, but above the
-        // toolbar, and use its height, which is known at this point. Note that,
-        // in the native apps (where the toolbar is rendered natively), this
-        // will result in us leaving excess space between the input and the
-        // keypad, but that seems okay.
-        const pageHeightPx = window.innerHeight;
-        const keypadHeightPx = keypadNode.clientHeight;
-        const keypadTopPx = pageHeightPx - (keypadHeightPx + toolbarHeightPx);
-
-        if (containerBottomPx > keypadTopPx) {
-            // If the input would be obscured by the keypad, scroll such that
-            // the bottom of the input is just above the top of the keypad,
-            // taking care not to scroll the input out of view.
-            const scrollOffset = Math.min(
-                containerBottomPx - keypadTopPx + desiredMarginPx,
-                containerTopPx,
-            );
-
-            if (scrollNode) {
-                scrollNode.scrollTop += scrollOffset;
-            }
-            return;
-        }
-    }
-
-    // Alternatively, if the input is out of the viewport or nearly out
-    // of the viewport, scroll it into view. We can do this regardless
-    // of whether the keypad has been provided.
-    if (scrollNode && containerTopPx < desiredMarginPx) {
-        scrollNode.scrollTop -= containerBounds.height + desiredMarginPx;
-    }
-};