@khanacademy/perseus 0.1.0 → 0.2.2

package/dist/strings.js

@@ -56,35 +56,21 @@ module.exports = [
     i18n._("Correct (but you crossed it out)", {}),
     i18n._("Correct (selected)", {}),
     i18n._("Correct!", {}),
-    i18n._("Cosine", {}),
     i18n._("Cross out", {}),
     i18n._("Cross out Choice %(letter)s", {}),
-    i18n._("Cube", {}),
-    i18n._("Cube root", {}),
-    i18n._("Custom exponent", {}),
-    i18n._("Decimal", {}),
-    i18n._("Delete", {}),
     // I18N: As in the command, "Dilate the polygon"
     i18n._("Dilate", {}),
     i18n._("dilation", {}),
     i18n._("Dilation", {}),
     i18n.$_("Dilation about %(point)s by %(scale)s", {}),
     i18n.$_("Dilation of scale %(scale)s about %(point)s", {}),
-    i18n._("Dismiss", {}),
-    i18n._("Divide", {}),
-    i18n._("Down arrow", {}),
     i18n._("Drag handles to make graph", {}),
     i18n._("End of reading passage.", {}),
     i18n._("entered in an invalid answer.", {}),
-    i18n._("Equals sign", {}),
     i18n.$_("Error rendering: %(error)s", {}),
     i18n._("Explain", {}),
     i18n._("False", {}),
-    i18n._("Fraction, excluding the current expression", {}),
-    i18n._("Fraction, with current expression in numerator", {}),
     i18n._("Get another hint", {}),
-    i18n._("Greater than or equal to sign", {}),
-    i18n._("Greater than sign", {}),
     i18n._("Hide explanation", {}),
     i18n._("Hint #%(pos)s", {}),
     i18n._("Hints", {}),
@@ -96,48 +82,26 @@ module.exports = [
     i18n._("It looks like you left something blank or ", {}),
     i18n._("Keep trying", {}),
     i18n._("Khan Academy video wrapper", {}),
-    i18n._("Left arrow", {}),
-    i18n._("Left parenthesis", {}),
-    i18n._("Less than or equal to sign", {}),
-    i18n._("Less than sign", {}),
     // I18N: a label next to a reading passage to denote the line number
     i18n._("Line ", {}),
     i18n.$_("line %(lineNumber)s", {}),
     i18n.$_("lines %(lineRange)s", {}),
     i18n._("Loading...", {}),
-    i18n._("Logarithm with base 10", {}),
-    i18n._("Logarithm with custom base", {}),
     i18n._("Make circle filled", {}),
     i18n._("Make circle open", {}),
     i18n._("Make sure you fill in all cells in the matrix.", {}),
     i18n._("Make sure you select something for every row.", {}),
-    i18n._("Math input box", {}),
-    i18n._("Minus", {}),
     i18n.ngettext("Moves: %(num)s","Moves: %(num)s", {}),
-    i18n._("Multiply", {}),
-    i18n._("Natural logarithm", {}),
-    i18n._("Navigate right into the numerator of a fraction", {}),
-    i18n._("Navigate right out of a base", {}),
-    i18n._("Navigate right out of a set of parentheses", {}),
-    i18n._("Navigate right out of an exponent", {}),
-    i18n._("Navigate right out of the denominator of a fraction", {}),
-    i18n._("Navigate right out of the numerator and into the denominator", {}),
-    i18n._("Negative", {}),
     i18n._("Next question", {}),
     i18n._("No", {}),
     i18n._("None of the above", {}),
-    i18n._("Not-equals sign", {}),
     i18n._("Note: For this question, the shape will not move.", {}),
     i18n._("Number of divisions:", {}),
     i18n._("Number of trials:", {}),
     i18n._("Open menu for Choice %(letter)s", {}),
     i18n._("Parameter", {}),
-    i18n._("Percent", {}),
-    i18n._("Pi", {}),
     i18n._("Please choose the correct number of answers.", {}),
     i18n.$_("Please make sure the number of divisions is in the range %(divRangeString)s.", {}),
-    i18n._("Plus", {}),
-    i18n._("Radical with custom root", {}),
     i18n._("Reaction arrow pointing to the right.", {}),
     // I18N: As in the command, "Reflect the polygon"
     i18n._("Reflect", {}),
@@ -145,8 +109,6 @@ module.exports = [
     i18n._("Reflection", {}),
     i18n.$_("Reflection over the line from %(point1)s to %(point2)s", {}),
     i18n._("Remove highlight", {}),
-    i18n._("Right arrow", {}),
-    i18n._("Right parenthesis", {}),
     // I18N: As in the command, "Rotate the polygon"
     i18n._("Rotate", {}),
     i18n._("rotation", {}),
@@ -157,21 +119,15 @@ module.exports = [
     i18n._("Run simulation", {}),
     i18n._("Sample size:", {}),
     i18n._("See video transcript", {}),
-    i18n._("Sine", {}),
     i18n._("Skip to %(title)s", {}),
     i18n._("Something went wrong.", {}),
     i18n._("Sorry, I don't understand that!", {}),
-    i18n._("Square", {}),
-    i18n._("Square root", {}),
     i18n._("Switch direction", {}),
-    i18n._("Tangent", {}),
     i18n._("Tap each dot on the image to select all answers that apply.", {}),
     i18n._("Tap each dot on the image to select an answer.", {}),
     i18n._("Tap to add points", {}),
-    i18n._("Tap with one or two fingers to open keyboard", {}),
     i18n._("That answer is numerically incorrect.", {}),
     i18n._("The symbol %(questionSymbol)s indicates that question %(questionNumber)s references this portion of the passage.", {}),
-    i18n._("Theta", {}),
     i18n._("This controls the proportion or percentage that will be used in your simulation.", {}),
     i18n._("This controls the sample size that will be used in your simulation. For example, if you set this to 100, then for each trial, responses from 100 participants will be simulated.", {}),
     i18n._("This is the number of trials used in the simulation. For example, if set to 50, then the survey will be conducted 50 times.", {}),
@@ -184,7 +140,6 @@ module.exports = [
     i18n._("True", {}),
     i18n._("Try again", {}),
     i18n._("Undo", {}),
-    i18n._("Up arrow", {}),
     i18n._("Use the interactive graph to define a correct transformation.", {}),
     i18n._("Value", {}),
     i18n._("We could not understand your answer. Please check your answer for extra text or symbols.", {}),

package/package.json

@@ -3,7 +3,7 @@
         "access": "public"
     },
     "name": "@khanacademy/perseus",
-    "version": "0.1.0",
+    "version": "0.2.2",
     "description": "Core Perseus API (includes renderers and widgets)",
     "module": "dist/es/index.js",
     "main": "dist/index.js",
@@ -12,22 +12,26 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/math-input": "^0.4.1",
-        "kas": "git+https://git@github.com/Khan/KAS.git#a5b04e0688ec692da86e2991cd389f1fd3831528",
-        "kmath": "git+https://git@github.com/Khan/kmath.git#e1191bbc7bac64ccb582de1b3b2d47ba38b510e0",
-        "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992",
-        "simple-markdown": "^0.3.1"
+        "@khanacademy/kmath": "0.0.5",
+        "@khanacademy/math-input": "^0.5.1",
+        "@khanacademy/kas": "^0.2.3",
+        "@khanacademy/simple-markdown": "^0.8.1",
+        "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"
     },
     "devDependencies": {
+        "@khanacademy/wonder-blocks-button": "2.11.5",
         "@khanacademy/wonder-blocks-color": "^1.1.20",
         "@khanacademy/wonder-blocks-core": "^4.3.0",
         "@khanacademy/wonder-blocks-data": "^7.0.0",
         "@khanacademy/wonder-blocks-dropdown": "^2.6.7",
         "@khanacademy/wonder-blocks-i18n": "^1.2.3",
+        "@khanacademy/wonder-blocks-layout": "1.4.9",
         "@khanacademy/wonder-blocks-link": "^3.8.5",
         "@khanacademy/wonder-blocks-popover": "^1.1.10",
+        "@khanacademy/wonder-blocks-progress-spinner": "1.1.31",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
         "@khanacademy/wonder-blocks-tooltip": "^1.3.10",
+        "@khanacademy/wonder-blocks-typography": "1.1.31",
         "@khanacademy/wonder-stuff-core": "^0.1.2",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
@@ -36,6 +40,7 @@
         "eslint-plugin-import": "^2.26.0",
         "intersection-observer": "^0.12.0",
         "jquery": "^2.1.1",
+        "lodash.debounce": "^4.0.8",
         "perseus-build-settings": "^0.0.1",
         "prop-types": "^15.6.1",
         "react": "16.14.0",
@@ -43,21 +48,26 @@
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
+        "@khanacademy/wonder-blocks-button": "2.11.5",
         "@khanacademy/wonder-blocks-color": "^1.1.20",
         "@khanacademy/wonder-blocks-core": "^4.3.0",
         "@khanacademy/wonder-blocks-data": "^7.0.0",
         "@khanacademy/wonder-blocks-dropdown": "^2.6.7",
         "@khanacademy/wonder-blocks-i18n": "^1.2.3",
+        "@khanacademy/wonder-blocks-layout": "1.4.9",
         "@khanacademy/wonder-blocks-link": "^3.8.5",
         "@khanacademy/wonder-blocks-popover": "^1.1.10",
+        "@khanacademy/wonder-blocks-progress-spinner": "1.1.31",
         "@khanacademy/wonder-blocks-spacing": "^3.0.5",
         "@khanacademy/wonder-blocks-tooltip": "^1.3.10",
+        "@khanacademy/wonder-blocks-typography": "1.1.31",
         "@khanacademy/wonder-stuff-core": "^0.1.2",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
         "intersection-observer": "^0.12.0",
         "jquery": "^2.1.1",
+        "lodash.debounce": "^4.0.8",
         "prop-types": "^15.6.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",

package/src/README.md

@@ -1,7 +1,35 @@
-Widgets from the Perseus (exercise) editor.
+# Perseus
 
-TODO(benkraft): Figure out the distinction between this and the various other
-Perseus packages.
+<p align="center"><img src="logo.png" alt="perseus logo" width="150px"/></p>
 
-Code-Owner: Learning Platform
-Crowdin-Category: content.chrome
+<p align="center">Perseus Exercise Renderer</p>
+
+Perseus is Khan Academy's exercise system. This repo contains the code needed to take a problem in the perseus format and present it, allow interaction, and grade the result of a learner's work.
+
+<p align="center"><img src="sample.png" alt="sample of perseus in use" height="150px"/></p>
+
+This repo is a constellation of sub-repos for showing exercise content. Please see individual projects in in the `packages/` folder for more information about each sub-project.
+
+## Getting started
+
+### Prerequisites
+
+- [Node.JS v12](https://nodejs.org/download/release/v10.18.1/)
+- [Yarn](https://yarnpkg.com/lang/en/docs/install/)
+
+### Installation
+
+To install perseus, you need to run the following commands:
+
+#### `yarn install`
+
+Installs project dependencies
+
+## Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for a walkthrough of how some
+of the Perseus code works and how to extend it.
+
+## License
+
+[MIT License](http://opensource.org/licenses/MIT)

package/src/components/fixed-to-responsive.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 // @flow
 /**
  * A wrapper for a component that would otherwise have a fixed width and

package/src/components/graph.jsx

@@ -6,11 +6,12 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
 
-import SvgImage from "../components/svg-image.jsx";
 import {interactiveSizes} from "../styles/constants.js";
 import Util from "../util.js";
 import GraphUtils from "../util/graph-utils.js";
 
+import SvgImage from "./svg-image.jsx";
+
 const defaultBackgroundImage = {
     url: null,
 };

package/src/components/info-tip/info-tip.jsx

@@ -120,9 +120,6 @@ class InfoTip extends React.Component<Props, State> {
                     alt=""
                     width={10}
                     height={10}
-                    // The question mark icon is a data url, so no need to run
-                    // it through staticUrl!
-                    // eslint-disable-next-line static-service/require-static-url
                     src={questionMark}
                     onMouseEnter={this.handleMouseEnter}
                     onMouseLeave={this.handleMouseLeave}

package/src/components/input-with-examples.jsx

@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import MathOutput from "../components/math-output.jsx";
 import Gorgon from "../gorgon/gorgon.js";
 import {linterContextProps, linterContextDefault} from "../gorgon/proptypes.js";
 import {ClassNames as ApiClassNames} from "../perseus-api.jsx";
@@ -12,6 +11,7 @@ import Renderer from "../renderer.jsx";
 import Util from "../util.js";
 
 import MathInput from "./math-input.jsx";
+import MathOutput from "./math-output.jsx";
 import TextInput from "./text-input.jsx";
 import Tooltip from "./tooltip.jsx";
 

package/src/components/lint.jsx

@@ -114,8 +114,6 @@ class Lint extends React.Component<Props, State> {
 
         return (
             <a
-                // This is not a user-facing component and so
-                // eslint-disable-next-line static-service/require-safe-link-to
                 href={`https://khanacademy.org/r/linter-rules#${this.props.ruleName}`}
                 target="lint-help-window"
                 className={css(style)}

package/src/components/number-input.jsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/sort-comp */
 // @flow
+import {number as knumber} from "@khanacademy/kmath";
 import classNames from "classnames";
 import $ from "jquery";
-import {number as knumber} from "kmath";
 import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";

package/src/components/prop-check-box.jsx

@@ -1,4 +1,6 @@
-/* eslint-disable @babel/no-invalid-this, react/sort-comp */
+/* eslint-disable react/prop-types */
+/* eslint-disable @babel/no-invalid-this */
+/* eslint-disable react/sort-comp */
 // @flow
 import createReactClass from "create-react-class";
 import PropTypes from "prop-types";

package/src/components/range-input.jsx

@@ -3,7 +3,7 @@
 import PropTypes from "prop-types";
 import * as React from "react";
 
-import NumberInput from "../components/number-input.jsx";
+import NumberInput from "./number-input.jsx";
 
 const truth = () => true;
 

package/src/components/simple-keypad-input.jsx

@@ -9,15 +9,15 @@
  * interface to `math-input`'s MathInput component.
  */
 
-import {components, consts, propTypes} from "@khanacademy/math-input";
+import {
+    KeypadInput,
+    KeypadTypes,
+    keypadElementPropType,
+} from "@khanacademy/math-input";
 import createReactClass from "create-react-class";
 import PropTypes from "prop-types";
 import * as React from "react";
 
-const {KeypadInput} = components;
-const {KeypadTypes} = consts;
-const {keypadElementPropType} = propTypes;
-
 const SimpleKeypadInput: any = createReactClass({
     displayName: "SimpleKeypadInput",
 

package/src/components/sortable.jsx

@@ -16,6 +16,7 @@ import Renderer from "../renderer.jsx";
 import Util from "../util.js";
 
 import type {LinterContextProps} from "../types";
+
 const HORIZONTAL = "horizontal";
 const VERTICAL = "vertical";
 

package/src/components/stub-tag-editor.jsx

@@ -16,6 +16,7 @@ import PropTypes from "prop-types";
 import * as React from "react";
 
 import TextListEditor from "./text-list-editor.jsx";
+
 const EMPTY_ARRAY = [];
 
 class StubTagEditor extends React.Component<$FlowFixMe> {

package/src/interactive2/movable-helper-methods.js

@@ -8,7 +8,7 @@
  * are simply for convenience.
  */
 
-import {point as kpoint} from "kmath";
+import {point as kpoint} from "@khanacademy/kmath";
 import _ from "underscore";
 
 import {Errors} from "../logging/log.js";

package/src/interactive2/movable-line-options.js

@@ -3,7 +3,7 @@
 /**
  * A library of options to pass to add/draw/remove/constraints
  */
-import {vector as kvector, point as kpoint} from "kmath";
+import {vector as kvector, point as kpoint} from "@khanacademy/kmath";
 import _ from "underscore";
 
 import KhanMath from "../util/math.js";
@@ -35,7 +35,7 @@ const getClipPoint = function (graph, coord: Coord, angle: number) {
     // shoot a point off into the distance ...
     const distance = xExtent + yExtent;
     // we need to scale the point according to the scale of the axes
-    const angleVec = graph.unscaleVector(kvector.cartFromPolarDeg([1, angle]));
+    const angleVec = graph.unscaleVector(kvector.cartFromPolarDeg(1, angle));
     const distVec = kvector.scale(kvector.normalize(angleVec), distance);
     const farCoord = kvector.add(coord, distVec);
     const scaledAngle = kvector.polarDegFromCart(angleVec)[1];

package/src/interactive2/movable-line.js

@@ -2,7 +2,7 @@
 /**
  * MovableLine
  */
-import {vector as kvector} from "kmath";
+import {vector as kvector} from "@khanacademy/kmath";
 import _ from "underscore";
 
 import KhanColors from "../util/colors.js";

package/src/interactive2/movable-point-options.js

@@ -3,7 +3,7 @@
 /**
  * A library of options to pass to add/draw/remove/constraints
  */
-import {point as kpoint} from "kmath";
+import {point as kpoint} from "@khanacademy/kmath";
 import _ from "underscore";
 
 import WrappedEllipse from "./wrapped-ellipse.js";

package/src/interactive2/movable-point.jsx

@@ -50,8 +50,7 @@
  *   remove:
  *     removes the point from graphie
  */
-import {point as kpoint} from "kmath";
-import {vector as kvector} from "kmath";
+import {point as kpoint, vector as kvector} from "@khanacademy/kmath";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import _ from "underscore";

package/src/interactive2/movable-polygon-options.js

@@ -4,7 +4,7 @@
  * A library of options to pass to add/draw/remove/constraints
  */
 
-import {point as kpoint, vector as kvector} from "kmath";
+import {point as kpoint, vector as kvector} from "@khanacademy/kmath";
 import _ from "underscore";
 
 import type {Coord} from "./types.js";

package/src/interactive2/movable-polygon.js

@@ -3,7 +3,7 @@
  * Creates and adds a polygon to the graph that can be dragged around.
  * It allows constraints on its movement and draws when moves happen.
  */
-import {vector as kvector} from "kmath";
+import {vector as kvector} from "@khanacademy/kmath";
 import _ from "underscore";
 
 import KhanColors from "../util/colors.js";
@@ -213,6 +213,7 @@ _.extend(MovablePolygon.prototype, {
                         refCoord,
                         self._prevRefCoord,
                     );
+                    // $FlowFixMe[incompatible-type] _applyConstraints can return false
                     if (refCoord === false) {
                         return;
                     }

package/src/interactive2/movable.js

@@ -10,8 +10,8 @@
  * let this class handle all of the virtual mouse events, and then
  * take appropriate action in onMoveStart, onMove, onMoveEnd
  */
+import {point as kpoint} from "@khanacademy/kmath";
 import $ from "jquery";
-import {point as kpoint} from "kmath";
 import _ from "underscore";
 
 import InteractiveUtil from "./interactive-util.js";

package/src/interactive2/wrapped-defaults.js

@@ -4,8 +4,8 @@
  * Default methods for a wrapped movable.
  */
 
+import {vector as kvector} from "@khanacademy/kmath";
 import $ from "jquery";
-import {vector as kvector} from "kmath";
 import _ from "underscore";
 
 import InteractiveUtil from "./interactive-util.js";

package/src/interactive2/wrapped-ellipse.js

@@ -1,5 +1,5 @@
 // @flow
-import {vector as kvector} from "kmath";
+import {vector as kvector} from "@khanacademy/kmath";
 import _ from "underscore";
 
 import InteractiveUtil from "./interactive-util.js";

package/src/interactive2/wrapped-line.js

@@ -1,5 +1,5 @@
 // @flow
-import {point as kpoint, vector as kvector} from "kmath";
+import {point as kpoint, vector as kvector} from "@khanacademy/kmath";
 import _ from "underscore";
 
 import KhanMath from "../util/math.js";

package/src/jipt-paragraphs.js

@@ -3,21 +3,21 @@
  * Paragraph parsing/splitting for article jipt i18n
  */
 
-import SimpleMarkdown from "simple-markdown";
+import SimpleMarkdown from "@khanacademy/simple-markdown";
 
-const arrayRules = {
+import type {ParserRules} from "@khanacademy/simple-markdown";
+
+const arrayRules: ParserRules = {
     fence: {
-        // $FlowFixMe[prop-missing]
-        // $FlowFixMe[incompatible-use]
         match: SimpleMarkdown.defaultRules.fence.match,
         order: 1,
+        // $FlowFixMe[incompatible-type]
         parse: (capture, state, parse) => capture[3],
     },
     paragraph: {
-        // $FlowFixMe[prop-missing]
-        // $FlowFixMe[incompatible-use]
         match: SimpleMarkdown.defaultRules.paragraph.match,
         order: 2,
+        // $FlowFixMe[incompatible-type]
         parse: (capture, state, parse) => capture[1],
     },
 };

package/src/mixins/provide-keypad.jsx

@@ -11,19 +11,19 @@
  * extend a `ProvideKeypad` component instead of using this mixin.
  */
 
-import {components} from "@khanacademy/math-input";
+import {Keypad} from "@khanacademy/math-input";
 import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
-const {Keypad} = components;
+import type {CSSProperties} from "aphrodite";
 
 export type KeypadProps = {|
     // An Aphrodite style object, to be applied to the keypad container.
     // Note that, given our awkward structure of injecting the keypad, this
     // style won't be applied or updated dynamically. Rather, it will only
     // be applied in `componentDidMount`.
-    keypadStyle?: any,
+    keypadStyle?: CSSProperties,
 |};
 
 export type KeypadApiOptions = {|

package/src/multi-items/multi-renderer.jsx

@@ -38,6 +38,7 @@
  */
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
+// eslint-disable-next-line import/no-extraneous-dependencies
 import lens from "hubble";
 import * as React from "react";
 

package/src/perseus-markdown.jsx

@@ -1,9 +1,9 @@
-/* eslint-disable no-useless-escape */
+/* eslint-disable no-useless-escape, no-prototype-builtins */
 // @flow
 // TODO(FEI-4465): move this into it's own package called perseus-markdown
+import SimpleMarkdown from "@khanacademy/simple-markdown";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import * as React from "react";
-import SimpleMarkdown from "simple-markdown";
 import _ from "underscore";
 
 import Lint from "./components/lint.jsx";
@@ -303,6 +303,7 @@ const rules = {
 // and false otherwise. We need this so that lint nodes can figure out whether
 // they should behave as an inline wrapper or a block wrapper
 function isInline(node) {
+    // eslint-disable-next-line no-prototype-builtins
     return !!(node && node.type && inlineNodeTypes.hasOwnProperty(node.type));
 }
 const inlineNodeTypes = {
@@ -319,6 +320,7 @@ const inlineNodeTypes = {
 };
 
 // $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-call]
 const builtParser = SimpleMarkdown.parserFor(rules);
 const parse = (source: string, state: $FlowFixMe): $FlowFixMe => {
     const paragraphedSource = source + "\n\n";
@@ -420,15 +422,12 @@ export default {
     traverseContent: traverseContent,
     parse: parse,
     parseInline: inlineParser,
-    // $FlowFixMe[prop-missing]
     reactFor: SimpleMarkdown.reactFor,
-    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[incompatible-use]
     ruleOutput: (SimpleMarkdown.ruleOutput(rules, "react"): $FlowFixMe),
-    // $FlowFixMe[prop-missing]
     basicOutput: (SimpleMarkdown.reactFor(
-        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
         SimpleMarkdown.ruleOutput(rules, "react"),
     ): $FlowFixMe),
-    // $FlowFixMe[prop-missing]
     sanitizeUrl: SimpleMarkdown.sanitizeUrl,
 };

package/src/pure-markdown.js

@@ -3,7 +3,7 @@
  * Contains markdown related functions in pure javascript,
  * extracted from perseus-markdown.jsx
  */
-import SimpleMarkdown from "simple-markdown";
+import SimpleMarkdown from "@khanacademy/simple-markdown";
 
 import Util from "./util.js";
 
@@ -334,6 +334,7 @@ export const pureMarkdownRules = {
 };
 
 // $FlowFixMe[prop-missing]
+// $FlowFixMe[incompatible-call]
 const builtParser = SimpleMarkdown.parserFor(pureMarkdownRules);
 
 export const parse = (source: string, state: $FlowFixMe): $FlowFixMe => {

package/src/renderer.jsx

@@ -1275,6 +1275,7 @@ class Renderer extends React.Component<Props, State> {
                         {({setAssetStatus}) => (
                             <SvgImage
                                 setAssetStatus={setAssetStatus}
+                                /* $FlowFixMe[incompatible-type]: sanitizeUrl() can return null */
                                 src={PerseusMarkdown.sanitizeUrl(node.target)}
                                 alt={node.alt}
                                 title={node.title}

package/src/styles/perseus-renderer.less

@@ -1004,5 +1004,4 @@
     }
 }
 
-@import (inline) "../../../../node_modules/@khanacademy/math-input/build/math-input.css";
-@import (inline) "../../../../node_modules/mathquill/build/mathquill.css";
+@import (inline) "../../../math-input/dist/index.css";