@khanacademy/perseus 3.0.0 → 4.0.0

package/src/util.js

@@ -1,984 +0,0 @@
-/* eslint-disable @babel/no-invalid-this, getter-return, one-var */
-// @flow
-import _ from "underscore";
-
-import {Errors} from "./logging/log.js";
-import {PerseusError} from "./perseus-error.js";
-import KhanAnswerTypes from "./util/answer-types.js";
-
-import type {Widget, PerseusScore, KEScore} from "./types.js";
-
-type WordPosition = {|
-    start: number,
-    end: number,
-|};
-
-type WordAndPosition = {|
-    string: string,
-    pos: WordPosition,
-|};
-
-type RNG = () => number;
-
-export type ParsedValue = {|
-    value: number,
-    exact: boolean,
-|};
-
-// TODO: dedupe this with Coord in interactive2/types.js
-type Coordinates = [number, number];
-
-export type GridDimensions = {|
-    scale: number,
-    tickStep: number,
-    unityLabel: boolean,
-|};
-
-type QueryParams = {
-    [param: string]: string,
-    ...
-};
-
-type Position = {|
-    top: number,
-    left: number,
-|};
-
-type TouchHandlers = {|
-    pointerDown: boolean,
-    currentTouchIdentifier: ?string,
-|};
-
-let supportsPassive = false;
-
-const svgLabelsRegex = /^web\+graphie:/;
-// For offline exercises in the mobile app, we download the graphie data
-// (svgs and localized data files) and serve them from the local file
-// system (with file://). We replace urls that start with `web+graphie`
-// in the perseus json with this `file+graphie` prefix to indicate that
-// they should have the `file://` protocol instead of `https://`.
-const svgLocalLabelsRegex = /^file\+graphie:/;
-
-const nestedMap = function <T, M>(
-    children: T | $ReadOnlyArray<T>,
-    func: (T) => M,
-    context: mixed,
-): M | $ReadOnlyArray<M> {
-    if (Array.isArray(children)) {
-        return _.map(children, function (child) {
-            return nestedMap(child, func);
-        });
-    }
-    return func.call(context, children);
-};
-
-/**
- * Used to compare equality of two input paths, which are represented as
- * arrays of strings.
- */
-function inputPathsEqual(
-    a: ?$ReadOnlyArray<string>,
-    b: ?$ReadOnlyArray<string>,
-): boolean {
-    if (a == null || b == null) {
-        return (a == null) === (b == null);
-    }
-
-    return (
-        a.length === b.length &&
-        a.every((item, index) => {
-            return b[index] === item;
-        })
-    );
-}
-
-const rWidgetRule: RegExp = /^\[\[\u2603 (([a-z-]+) ([0-9]+))\]\]/;
-const rTypeFromWidgetId: RegExp = /^([a-z-]+) ([0-9]+)$/;
-
-const rWidgetParts: RegExp = new RegExp(rWidgetRule.source + "$");
-const snowman = "\u2603";
-const noScore: PerseusScore = {
-    type: "points",
-    earned: 0,
-    total: 0,
-    message: null,
-};
-
-const seededRNG: (seed: number) => RNG = function (seed: number): RNG {
-    let randomSeed = seed;
-
-    return function () {
-        // Robert Jenkins' 32 bit integer hash function.
-        let seed = randomSeed;
-        seed = (seed + 0x7ed55d16 + (seed << 12)) & 0xffffffff;
-        seed = (seed ^ 0xc761c23c ^ (seed >>> 19)) & 0xffffffff;
-        seed = (seed + 0x165667b1 + (seed << 5)) & 0xffffffff;
-        seed = ((seed + 0xd3a2646c) ^ (seed << 9)) & 0xffffffff;
-        seed = (seed + 0xfd7046c5 + (seed << 3)) & 0xffffffff;
-        seed = (seed ^ 0xb55a4f09 ^ (seed >>> 16)) & 0xffffffff;
-        return (randomSeed = seed & 0xfffffff) / 0x10000000;
-    };
-};
-
-// Shuffle an array using a given random seed or function.
-// If `ensurePermuted` is true, the input and ouput are guaranteed to be
-// distinct permutations.
-function shuffle<T>(
-    array: $ReadOnlyArray<T>,
-    randomSeed: number | RNG,
-    ensurePermuted: boolean = false,
-): $ReadOnlyArray<T> {
-    // Always return a copy of the input array
-    const shuffled = _.clone(array);
-
-    // Handle edge cases (input array is empty or uniform)
-    if (
-        !shuffled.length ||
-        _.all(shuffled, function (value) {
-            return _.isEqual(value, shuffled[0]);
-        })
-    ) {
-        return shuffled;
-    }
-
-    let random;
-    if (typeof randomSeed === "function") {
-        random = randomSeed;
-    } else {
-        random = seededRNG(randomSeed);
-    }
-
-    do {
-        // Fischer-Yates shuffle
-        for (let top = shuffled.length; top > 0; top--) {
-            const newEnd = Math.floor(random() * top),
-                temp = shuffled[newEnd];
-
-            shuffled[newEnd] = shuffled[top - 1];
-            shuffled[top - 1] = temp;
-        }
-    } while (ensurePermuted && _.isEqual(array, shuffled));
-
-    return shuffled;
-}
-
-/**
- * TODO(somewhatabstract, FEI-3463):
- * Drop this custom split thing.
- */
-// In IE8, split doesn't work right. Implement it ourselves.
-const split: (str: string, r: RegExp) => $ReadOnlyArray<string> = "x".split(
-    /(.)/g,
-).length
-    ? function (str, r) {
-          return str.split(r);
-      }
-    : function (str, r) {
-          // Based on Steven Levithan's MIT-licensed split, available at
-          // http://blog.stevenlevithan.com/archives/cross-browser-split
-          const output = [];
-          let lastIndex = (r.lastIndex = 0);
-          let match;
-
-          while ((match = r.exec(str))) {
-              const m = match;
-              output.push(str.slice(lastIndex, m.index));
-              output.push(...m.slice(1));
-              lastIndex = m.index + m[0].length;
-          }
-
-          output.push(str.slice(lastIndex));
-          return output;
-      };
-
-/**
- * Combine two score objects.
- *
- * Given two score objects for two different widgets, combine them so that
- * if one is wrong, the total score is wrong, etc.
- */
-function combineScores(
-    scoreA: PerseusScore,
-    scoreB: PerseusScore,
-): PerseusScore {
-    let message;
-
-    if (scoreA.type === "points" && scoreB.type === "points") {
-        if (
-            scoreA.message &&
-            scoreB.message &&
-            scoreA.message !== scoreB.message
-        ) {
-            // TODO(alpert): Figure out how to combine messages usefully
-            message = null;
-        } else {
-            message = scoreA.message || scoreB.message;
-        }
-
-        return {
-            type: "points",
-            earned: scoreA.earned + scoreB.earned,
-            total: scoreA.total + scoreB.total,
-            message: message,
-        };
-    }
-    if (scoreA.type === "points" && scoreB.type === "invalid") {
-        return scoreB;
-    }
-    if (scoreA.type === "invalid" && scoreB.type === "points") {
-        return scoreA;
-    }
-    if (scoreA.type === "invalid" && scoreB.type === "invalid") {
-        if (
-            scoreA.message &&
-            scoreB.message &&
-            scoreA.message !== scoreB.message
-        ) {
-            // TODO(alpert): Figure out how to combine messages usefully
-            message = null;
-        } else {
-            message = scoreA.message || scoreB.message;
-        }
-
-        return {
-            type: "invalid",
-            message: message,
-        };
-    }
-
-    /**
-     * The above checks cover all combinations of score type, so if we get here
-     * then something is amiss with our inputs.
-     */
-    throw new PerseusError(
-        "PerseusScore with unknown type encountered",
-        Errors.InvalidInput,
-        {
-            metadata: {
-                scoreA: JSON.stringify(scoreA),
-                scoreB: JSON.stringify(scoreB),
-            },
-        },
-    );
-}
-
-function keScoreFromPerseusScore(
-    score: PerseusScore,
-    guess: $FlowFixMe,
-    state: $FlowFixMe,
-): KEScore {
-    if (score.type === "points") {
-        return {
-            empty: false,
-            correct: score.earned >= score.total,
-            message: score.message,
-            guess: guess,
-            state: state,
-        };
-    }
-    if (score.type === "invalid") {
-        return {
-            empty: true,
-            correct: false,
-            message: score.message,
-            suppressAlmostThere: score.suppressAlmostThere,
-            guess: guess,
-            state: state,
-        };
-    }
-    throw new PerseusError(
-        "Invalid score type: " + score.type,
-        Errors.InvalidInput,
-        {
-            metadata: {
-                score: JSON.stringify(score),
-                guess: JSON.stringify(guess),
-                state: JSON.stringify(state),
-            },
-        },
-    );
-}
-
-/**
- * Return the first valid interpretation of 'text' as a number, in the form
- * {value: 2.3, exact: true}.
- */
-function firstNumericalParse(text: string): ?ParsedValue {
-    // TODO(alpert): This is sort of hacky...
-    let first;
-    const val = KhanAnswerTypes.predicate.createValidatorFunctional(
-        function (ans) {
-            first = ans;
-            return true; /* break */
-        },
-        {
-            simplify: "optional",
-            inexact: true,
-            forms: "integer, proper, improper, pi, log, mixed, decimal",
-        },
-    );
-
-    val(text);
-    return first;
-}
-
-function stringArrayOfSize(size: number): $ReadOnlyArray<string> {
-    return _(size).times(function () {
-        return "";
-    });
-}
-
-/**
- * For a graph's x or y dimension, given the tick step,
- * the ranges extent (e.g. [-10, 10]), the pixel dimension constraint,
- * and the grid step, return a bunch of configurations for that dimension.
- *
- * Example:
- *      gridDimensionConfig(10, [-50, 50], 400, 5)
- *
- * Returns: {
- *      scale: 4,
- *      snap: 2.5,
- *      tickStep: 2,
- *      unityLabel: true
- * };
- */
-function gridDimensionConfig(
-    absTickStep: number,
-    extent: Coordinates,
-    dimensionConstraint: number,
-    gridStep: number,
-): GridDimensions {
-    const scale = scaleFromExtent(extent, dimensionConstraint);
-    const stepPx = absTickStep * scale;
-    const unityLabel = stepPx > 30;
-    return {
-        scale: scale,
-        tickStep: absTickStep / gridStep,
-        unityLabel: unityLabel,
-    };
-}
-/**
- * Given the range, step, and boxSize, calculate the reasonable gridStep.
- * Used for when one was not given explicitly.
- *
- * Example:
- *      getGridStep([[-10, 10], [-10, 10]], [1, 1], 340)
- *
- * Returns: [1, 1]
- *
- * TODO(somewhatabstract, FEI-3464): Consolidate query string parsing functions.
- */
-function getGridStep(
-    range: [Coordinates, Coordinates],
-    step: Coordinates,
-    boxSize: number,
-): Coordinates {
-    return _(2).times(function (i) {
-        const scale = scaleFromExtent(range[i], boxSize);
-        const gridStep = gridStepFromTickStep(step[i], scale);
-        return gridStep;
-    });
-}
-
-function snapStepFromGridStep(gridStep: [number, number]): [number, number] {
-    return [gridStep[0] / 2, gridStep[1] / 2];
-}
-
-/**
- * Given the tickStep and the graph's scale, find a
- * grid step.
- * Example:
- *      gridStepFromTickStep(200, 0.2) // returns 100
- */
-function gridStepFromTickStep(tickStep: number, scale: number): ?number {
-    const tickWidth = tickStep * scale;
-    const x = tickStep;
-    const y = Math.pow(10, Math.floor(Math.log(x) / Math.LN10));
-    const leadingDigit = Math.floor(x / y);
-    if (tickWidth < 25) {
-        return tickStep;
-    }
-    if (tickWidth < 50) {
-        if (leadingDigit === 5) {
-            return tickStep;
-        }
-        return tickStep / 2;
-    }
-    if (leadingDigit === 1) {
-        return tickStep / 2;
-    }
-    if (leadingDigit === 2) {
-        return tickStep / 4;
-    }
-    if (leadingDigit === 5) {
-        return tickStep / 5;
-    }
-}
-
-/**
- * Given the range and a dimension, come up with the appropriate
- * scale.
- * Example:
- *      scaleFromExtent([-25, 25], 500) // returns 10
- */
-function scaleFromExtent(
-    extent: Coordinates,
-    dimensionConstraint: number,
-): number {
-    const span = extent[1] - extent[0];
-    const scale = dimensionConstraint / span;
-    return scale;
-}
-
-/**
- * Return a reasonable tick step given extent and dimension.
- * (extent is [begin, end] of the domain.)
- * Example:
- *      tickStepFromExtent([-10, 10], 300) // returns 2
- */
-function tickStepFromExtent(
-    extent: Coordinates,
-    dimensionConstraint: number,
-): number {
-    const span = extent[1] - extent[0];
-
-    let tickFactor;
-    // If single number digits
-    if (15 < span && span <= 20) {
-        tickFactor = 23;
-
-        // triple digit or decimal
-    } else if (span > 100 || span < 5) {
-        tickFactor = 10;
-
-        // double digit
-    } else {
-        tickFactor = 16;
-    }
-    const constraintFactor = dimensionConstraint / 500;
-    const desiredNumTicks = tickFactor * constraintFactor;
-    return tickStepFromNumTicks(span, desiredNumTicks);
-}
-
-/**
- * Find a good tick step for the desired number of ticks in the range
- * Modified from d3.scale.linear: d3_scale_linearTickRange.
- * Thanks, mbostock!
- * Example:
- *      tickStepFromNumTicks(50, 6) // returns 10
- */
-function tickStepFromNumTicks(span: number, numTicks: number): number {
-    let step = Math.pow(10, Math.floor(Math.log(span / numTicks) / Math.LN10));
-    const err = (numTicks / span) * step;
-
-    // Filter ticks to get closer to the desired count.
-    if (err <= 0.15) {
-        step *= 10;
-    } else if (err <= 0.35) {
-        step *= 5;
-    } else if (err <= 0.75) {
-        step *= 2;
-    }
-
-    // Round start and stop values to step interval.
-    return step;
-}
-
-type Range = [number, number]; // [min, max]
-
-const constrainTickStep = (step: number, range: Range): number => {
-    const span = range[1] - range[0];
-    const numTicks = span / step;
-    if (numTicks <= 10) {
-        // Will displays fine on mobile
-        return step;
-    }
-    if (numTicks <= 20) {
-        // Will be crowded on mobile, so hide every other tick
-        return step * 2;
-    }
-    // Fallback in case we somehow have more than 20 ticks
-    // Note: This shouldn't happen due to GraphSettings.validStep
-    return tickStepFromNumTicks(span, 10);
-};
-
-/**
- * Constrain tick steps intended for desktop size graphs
- * to something more suitable for mobile size graphs.
- * Specifically, we aim for 10 or fewer ticks per graph axis.
- */
-function constrainedTickStepsFromTickSteps(
-    tickSteps: Coordinates,
-    ranges: [Range, Range],
-): Coordinates {
-    return [
-        constrainTickStep(tickSteps[0], ranges[0]),
-        constrainTickStep(tickSteps[1], ranges[1]),
-    ];
-}
-
-/**
- * Transparently update deprecated props so that the code to deal
- * with them only lives in one place: (Widget).deprecatedProps
- *
- * For example, if a boolean `foo` was deprecated in favor of a
- * number 'bar':
- *      deprecatedProps: {
- *          foo: function(props) {
- *              return {bar: props.foo ? 1 : 0};
- *          }
- *      }
- */
-const DeprecationMixin: $FlowFixMe = {
-    // This lifecycle stage is only called before first render
-    // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
-    UNSAFE_componentWillMount: function () {
-        const newProps = {};
-
-        _.each(
-            this.deprecatedProps,
-            function (func, prop) {
-                if (_.has(this.props, prop)) {
-                    _.extend(newProps, func(this.props));
-                }
-            },
-            this,
-        );
-
-        if (!_.isEmpty(newProps)) {
-            // Set new props directly so that widget renders correctly
-            // when it first mounts, even though these will be overwritten
-            // almost immediately afterwards...
-            _.extend(this.props, newProps);
-
-            // ...when we propagate the new props upwards and they come
-            // back down again.
-            // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
-            // eslint-disable-next-line no-restricted-syntax
-            setTimeout(this.props.onChange, 0, newProps);
-        }
-    },
-};
-
-/**
- * Approximate equality on numbers and primitives.
- */
-function eq<T>(x: T, y: T): boolean {
-    if (typeof x === "number" && typeof y === "number") {
-        return Math.abs(x - y) < 1e-9;
-    }
-    return x === y;
-}
-
-/**
- * Deep approximate equality on primitives, numbers, arrays, and objects.
- * Recursive.
- */
-function deepEq<T>(x: T, y: T): boolean {
-    if (Array.isArray(x) && Array.isArray(y)) {
-        if (x.length !== y.length) {
-            return false;
-        }
-        for (let i = 0; i < x.length; i++) {
-            if (!deepEq(x[i], y[i])) {
-                return false;
-            }
-        }
-        return true;
-    }
-    if (Array.isArray(x) || Array.isArray(y)) {
-        return false;
-    }
-    if (typeof x === "function" && typeof y === "function") {
-        return eq(x, y);
-    }
-    if (typeof x === "function" || typeof y === "function") {
-        return false;
-    }
-    if (typeof x === "object" && typeof y === "object" && !!x && !!y) {
-        return (
-            x === y ||
-            (_.all(x, function (v, k) {
-                return deepEq(y[k], v);
-            }) &&
-                _.all(y, function (v, k) {
-                    return deepEq(x[k], v);
-                }))
-        );
-    }
-    if ((typeof x === "object" && !!x) || (typeof y === "object" && !!y)) {
-        return false;
-    }
-    return eq(x, y);
-}
-
-/**
- * Query String Parser
- *
- * Original from:
- * http://stackoverflow.com/questions/901115/get-querystring-values-in-javascript/2880929#2880929
- */
-function parseQueryString(query: string): QueryParams {
-    // TODO(jangmi, CP-3340): Use withLocation to access SSR safe location.
-    // eslint-disable-next-line no-restricted-syntax
-    query = query || window.location.search.substring(1);
-    const urlParams = {};
-    // Regex for replacing addition symbol with a space
-    const a = /\+/g;
-    const r = /([^&=]+)=?([^&]*)/g;
-    const d = function (s) {
-        return decodeURIComponent(s.replace(a, " "));
-    };
-
-    let e;
-    while ((e = r.exec(query))) {
-        const m = e;
-        urlParams[d(m[1])] = d(m[2]);
-    }
-
-    return urlParams;
-}
-
-/**
- * Query string adder
- * Works for URLs without #.
- * Original from:
- * http://stackoverflow.com/questions/5999118/add-or-update-query-string-parameter
- */
-function updateQueryString(uri: string, key: string, value: string): string {
-    value = encodeURIComponent(value);
-    const re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
-    const separator = uri.indexOf("?") !== -1 ? "&" : "?";
-    if (uri.match(re)) {
-        return uri.replace(re, "$1" + key + "=" + value + "$2");
-    }
-    return uri + separator + key + "=" + value;
-}
-
-/**
- * A more strict encodeURIComponent that escapes `()'!`s
- * Especially useful for creating URLs that are embeddable in markdown
- *
- * Adapted from
- * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent
- * This function and the above original available under the
- * CC-BY-SA 2.5 license.
- */
-function strongEncodeURIComponent(str: string): string {
-    return (
-        encodeURIComponent(str)
-            // Note that although RFC3986 reserves "!", RFC5987 does not,
-            // so we do not need to escape it
-            .replace(/['()!]/g, window.escape) // i.e., %27 %28 %29
-            .replace(/\*/g, "%2A")
-    );
-}
-
-/**
- * TODO(somewhatabstract, JIRA-XXXX):
- * This does not appear to be used within webapp. Could be dead code.
- * Need to check with mobile.
- */
-// There are certain widgets where we don't want to provide the "answered"
-// highlight indicator.
-// The issue with just using the `graded` flag on questions is that showing
-// that a certain widget is ungraded can sometimes reveal the answer to a
-// question ("is this transformation possible? if so, do it")
-// This is kind of a hack to get around this.
-function widgetShouldHighlight(widget: Widget): boolean {
-    if (!widget) {
-        return false;
-    }
-    switch (widget.type) {
-        /**
-         * Highlight bar denylist
-         */
-        case "measurer":
-        case "protractor":
-            return true;
-
-        default:
-            return false;
-    }
-}
-
-/**
- * If a widget says that it is empty once it is graded.
- * Trying to encapsulate references to the score format.
- */
-function scoreIsEmpty(score: PerseusScore): boolean {
-    // HACK(benkomalo): ugh. this isn't great; the Perseus score objects
-    // overload the type "invalid" for what should probably be three
-    // distinct cases:
-    //  - truly empty or not fully filled out
-    //  - invalid or malformed inputs
-    //  - "almost correct" like inputs where the widget wants to give
-    //  feedback (e.g. a fraction needs to be reduced, or `pi` should
-    //  be used instead of 3.14)
-    //
-    //  Unfortunately the coercion happens all over the place, as these
-    //  Perseus style score objects are created *everywhere* (basically
-    //  in every widget), so it's hard to change now. We assume that
-    //  anything with a "message" is not truly empty, and one of the
-    //  latter two cases for now.
-    return (
-        score.type === "invalid" &&
-        (!score.message || score.message.length === 0)
-    );
-}
-
-/*
- * The touchHandlers are used to track the current state of the touch
- * event, such as whether or not the user is currently pressed down (either
- * through touch or mouse) on the screen.
- */
-const touchHandlers: TouchHandlers = {
-    pointerDown: false,
-    currentTouchIdentifier: null,
-};
-
-function resetTouchHandlers() {
-    Object.assign(touchHandlers, {
-        pointerDown: false,
-        currentTouchIdentifier: null,
-    });
-}
-
-/**
- * Extracts the location of a touch or mouse event, allowing you to pass
- * in a "mouseup", "mousedown", or "mousemove" event and receive the
- * correct coordinates. Shouldn't be used with "vmouse" events.
- */
-function extractPointerLocation(event: $FlowFixMe): ?Position {
-    let touchOrEvent;
-
-    if (touchHandlers.pointerDown) {
-        // Look for the touch matching the one we're tracking; ignore others
-        if (touchHandlers.currentTouchIdentifier != null) {
-            const len = event.changedTouches ? event.changedTouches.length : 0;
-            for (let i = 0; i < len; i++) {
-                if (
-                    event.changedTouches[i].identifier ===
-                    touchHandlers.currentTouchIdentifier
-                ) {
-                    touchOrEvent = event.changedTouches[i];
-                }
-            }
-        } else {
-            touchOrEvent = event;
-        }
-
-        const isEndish =
-            event.type === "touchend" || event.type === "touchcancel";
-        if (touchOrEvent && isEndish) {
-            touchHandlers.pointerDown = false;
-            touchHandlers.currentTouchIdentifier = null;
-        }
-    } else {
-        // touchstart or mousedown
-        touchHandlers.pointerDown = true;
-        if (event.changedTouches) {
-            touchOrEvent = event.changedTouches[0];
-            touchHandlers.currentTouchIdentifier = touchOrEvent.identifier;
-        } else {
-            touchOrEvent = event;
-        }
-    }
-
-    if (touchOrEvent) {
-        return {
-            left: touchOrEvent.pageX,
-            top: touchOrEvent.pageY,
-        };
-    }
-}
-
-// Older browsers don't support passive events and so we need to feature-
-// detect them and do event subscription differently for them.
-// See: orderer.jsx
-const supportsPassiveEvents: () => boolean = () => {
-    // Test via a getter in the options object to see if the passive
-    // property is accessed
-    try {
-        const opts = Object.defineProperty({}, "passive", {
-            get: function () {
-                supportsPassive = true;
-            },
-        });
-        window.addEventListener("testPassive", null, opts);
-        window.removeEventListener("testPassive", null, opts);
-    } catch (e) {
-        // Intentionally left empty!
-    }
-
-    return supportsPassive;
-};
-
-/**
- * Pass this function as the touchstart for an element to
- * avoid sending the touch to the mobile scratchpad
- */
-function captureScratchpadTouchStart(e: TouchEvent) {
-    e.stopPropagation();
-}
-
-function getImageSize(url: string, callback: (number, number) => void): void {
-    const img = new Image();
-    img.onload = function () {
-        // IE 11 seems to have problems calculating the heights of svgs
-        // if they're not in the DOM. To solve this, we add the element to
-        // the dom, wait for a rerender, and use `.clientWidth` and
-        // `.clientHeight`. I think we could also solve the problem by
-        // adding the image to the document before setting the src, but then
-        // the experience would be worse for other browsers.
-        // TODO(scottgrant): This is correctly calculating the width of SVG
-        // images in browsers, but incorrectly saving the width of what may
-        // be a smaller viewport when using the editor, and reusing that
-        // width in a full-screen article.
-        if (img.width === 0 && img.height === 0) {
-            document.body?.appendChild(img);
-            // TODO(scottgrant): Remove this use of _.defer.
-            _.defer(function () {
-                callback(img.clientWidth, img.clientHeight);
-                document.body?.removeChild(img);
-            });
-        } else {
-            callback(img.width, img.height);
-        }
-    };
-
-    img.src = getRealImageUrl(url);
-}
-
-// Sometimes other components want to download the actual image e.g. to
-// determine its size. Here, we transform an .svg-labels url into the
-// correct image url, and leave normal image urls alone
-function getRealImageUrl(url: string): string {
-    if (isLabeledSVG(url)) {
-        return getSvgUrl(url);
-    }
-    return url;
-}
-
-function isLabeledSVG(url: string): boolean {
-    return svgLabelsRegex.test(url) || svgLocalLabelsRegex.test(url);
-}
-
-// For each svg+labels, there are two urls we need to download from. This gets
-// the base url without the suffix, and `getSvgUrl` and `getDataUrl` apply
-// appropriate suffixes to get the image and other data
-function getBaseUrl(url: string): string {
-    return url
-        .replace(svgLabelsRegex, "https:")
-        .replace(svgLocalLabelsRegex, "file:");
-}
-
-function getSvgUrl(url: string): string {
-    return getBaseUrl(url) + ".svg";
-}
-
-function getDataUrl(url: string): string {
-    return getBaseUrl(url) + "-data.json";
-}
-
-/**
- * Gets the word right before where the textarea cursor is
- *
- * @param {Element} textarea - The textarea DOM element
- * @return {JSON} - An object with the word and its starting and ending positions in the textarea
- */
-function getWordBeforeCursor(textarea: HTMLTextAreaElement): WordAndPosition {
-    const text = textarea.value;
-
-    const endPos = textarea.selectionStart - 1;
-    const startPos =
-        Math.max(
-            text.lastIndexOf("\n", endPos),
-            text.lastIndexOf(" ", endPos),
-        ) + 1;
-
-    return {
-        string: text.substring(startPos, endPos + 1),
-        pos: {
-            start: startPos,
-            end: endPos,
-        },
-    };
-}
-
-/**
- * Moves the textarea cursor at the specified position
- *
- * @param {Element} textarea - The textarea DOM element
- * @param {int} pos - The position where the cursor will be moved
- */
-function moveCursor(textarea: HTMLTextAreaElement, pos: number): void {
-    textarea.selectionStart = pos;
-    textarea.selectionEnd = pos;
-}
-
-const textarea = {
-    getWordBeforeCursor,
-    moveCursor,
-};
-
-/**
- * Many of our labels are automatically converted into math mode without
- * the dollar signs. Unfortunately, this makes them untranslatable! This
- * helper function removes the math mode symbols from a string if we want
- * to translate it but don't need the extra dollar signs.
- */
-const unescapeMathMode: (label: string) => string = (label) =>
-    label.startsWith("$") && label.endsWith("$") ? label.slice(1, -1) : label;
-
-const random: RNG = seededRNG(new Date().getTime() & 0xffffffff);
-
-const Util = {
-    inputPathsEqual,
-    nestedMap,
-    rWidgetRule,
-    rTypeFromWidgetId,
-    rWidgetParts,
-    snowman,
-    noScore,
-    seededRNG,
-    shuffle,
-    split,
-    combineScores,
-    keScoreFromPerseusScore,
-    firstNumericalParse,
-    stringArrayOfSize,
-    gridDimensionConfig,
-    getGridStep,
-    snapStepFromGridStep,
-    scaleFromExtent,
-    tickStepFromExtent,
-    gridStepFromTickStep,
-    tickStepFromNumTicks,
-    constrainedTickStepsFromTickSteps,
-    DeprecationMixin,
-    eq,
-    deepEq,
-    parseQueryString,
-    updateQueryString,
-    strongEncodeURIComponent,
-    widgetShouldHighlight,
-    scoreIsEmpty,
-    touchHandlers,
-    resetTouchHandlers,
-    extractPointerLocation,
-    supportsPassiveEvents,
-    captureScratchpadTouchStart,
-    getImageSize,
-    getRealImageUrl,
-    isLabeledSVG,
-    getBaseUrl,
-    getSvgUrl,
-    getDataUrl,
-    textarea,
-    unescapeMathMode,
-    random,
-};
-
-export default Util;