@khanacademy/perseus 0.2.4 → 0.2.7

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "0.2.4",
+    "version": "0.2.7",
     "publishConfig": {
         "access": "public"
     },
@@ -21,26 +21,27 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kmath": "0.0.5",
-        "@khanacademy/math-input": "^0.5.1",
-        "@khanacademy/kas": "^0.2.3",
-        "@khanacademy/simple-markdown": "^0.8.1",
+        "@khanacademy/kmath": "^0.0.5",
+        "@khanacademy/math-input": "^0.5.2",
+        "@khanacademy/kas": "^0.2.4",
+        "@khanacademy/simple-markdown": "^0.8.3",
         "mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-button": "2.11.5",
+        "@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-layout": "^1.4.9",
         "@khanacademy/wonder-blocks-link": "^3.8.5",
+        "@khanacademy/wonder-blocks-modal": "^2.3.1",
         "@khanacademy/wonder-blocks-popover": "^1.1.10",
-        "@khanacademy/wonder-blocks-progress-spinner": "1.1.31",
+        "@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-blocks-typography": "^1.1.31",
         "@khanacademy/wonder-stuff-core": "^0.1.2",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
@@ -50,26 +51,27 @@
         "intersection-observer": "^0.12.0",
         "jquery": "^2.1.1",
         "lodash.debounce": "^4.0.8",
-        "perseus-build-settings": "^0.0.1",
+        "perseus-build-settings": "^0.0.2",
         "prop-types": "^15.6.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-button": "2.11.5",
+        "@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-layout": "^1.4.9",
         "@khanacademy/wonder-blocks-link": "^3.8.5",
+        "@khanacademy/wonder-blocks-modal": "^2.3.1",
         "@khanacademy/wonder-blocks-popover": "^1.1.10",
-        "@khanacademy/wonder-blocks-progress-spinner": "1.1.31",
+        "@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-blocks-typography": "^1.1.31",
         "@khanacademy/wonder-stuff-core": "^0.1.2",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",

package/src/__tests__/jipt-paragraphs_test.js

@@ -0,0 +1,34 @@
+// @flow
+
+import JiptParagraphs from "../jipt-paragraphs.js";
+
+const {parseToArray} = JiptParagraphs;
+
+describe("jipt-paragraphs", () => {
+    it("should split paragraphs using custom JIPT SimpleMarkdown rules", () => {
+        expect(parseToArray("  \n\nhello\n\n")).toMatchInlineSnapshot(`
+            Array [
+              "  ",
+              "hello",
+            ]
+        `);
+    });
+
+    it("should recognize code fences using custom JIPT SimpleMarkdown rules", () => {
+        expect(
+            parseToArray(
+                "Let's write the canonical Hello World in Javascript\n\n" +
+                    '```js\nconst x = "hello world";\nconsole.log(x);```\n\n' +
+                    "**Congratulations, you are on your way to becoming a " +
+                    "computer programmer!",
+            ),
+        ).toMatchInlineSnapshot(`
+            Array [
+              "Let's write the canonical Hello World in Javascript",
+              "const x = \\"hello world\\";
+            console.log(x);",
+              "**Congratulations, you are on your way to becoming a computer programmer!",
+            ]
+        `);
+    });
+});

package/src/jipt-paragraphs.js

@@ -11,28 +11,36 @@ const arrayRules: ParserRules = {
     fence: {
         match: SimpleMarkdown.defaultRules.fence.match,
         order: 1,
-        // $FlowFixMe[incompatible-type]
-        parse: (capture, state, parse) => capture[3],
+        parse: (capture, state, parse) => ({
+            type: "codeBlock",
+            lang: capture[2] || undefined,
+            content: capture[3],
+        }),
     },
     paragraph: {
         match: SimpleMarkdown.defaultRules.paragraph.match,
         order: 2,
-        // $FlowFixMe[incompatible-type]
-        parse: (capture, state, parse) => capture[1],
+        parse: (capture, state, parse) => ({
+            content: capture[1],
+        }),
     },
 };
 
-// $FlowFixMe[prop-missing]
-const builtArrayParser = SimpleMarkdown.parserFor(arrayRules);
+const builtArrayParser: $Call<
+    typeof SimpleMarkdown.parserFor,
+    typeof arrayRules,
+> = SimpleMarkdown.parserFor(arrayRules);
 
 // This should just return an array of strings! magick!
-const parseToArray = (source: string): $FlowFixMe => {
+const parseToArray = (source: string): Array<string> => {
     // Remove any leading newlines to avoid splitting weirdness
     // (simple-markdown has the `newline` rule for this, and i have
     // no idea how this will handle leading newlines without that rule),
     // and add \n\n to let it parse at a block/paragraph level
     const paragraphedSource = source.replace(/^\n\s*\n/, "") + "\n\n";
-    return builtArrayParser(paragraphedSource, {inline: false});
+    return builtArrayParser(paragraphedSource, {inline: false}).map((c) => {
+        return c["content"];
+    });
 };
 
 const joinFromArray = (paragraphs: $ReadOnlyArray<string>): string =>

package/src/widgets/dropdown.jsx

@@ -1,9 +1,7 @@
-/* eslint-disable react/sort-comp */
 // @flow
 import {SingleSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
 import * as React from "react";
 import ReactDOM from "react-dom";
-import _ from "underscore";
 
 import {ApiOptions} from "../perseus-api.jsx";
 
@@ -51,6 +49,33 @@ class Dropdown extends React.Component<Props> {
         };
     }
 
+    focus: () => boolean = () => {
+        // TODO(LP-10797): This focus() call doesn't do anything because our
+        // root element is a <div> and that cannot be focused without a
+        // tabIndex.
+        // $FlowFixMe[incompatible-use]
+        // $FlowFixMe[prop-missing]
+        ReactDOM.findDOMNode(this).focus();
+        return true;
+    };
+
+    _handleChangeEvent: (SyntheticInputEvent<>) => void = (e) => {
+        this._handleChange(parseInt(e.target.value));
+    };
+
+    _handleChange: (number) => void = (selected) => {
+        this.props.trackInteraction();
+        this.props.onChange({selected: selected});
+    };
+
+    getUserInput: () => UserInput = () => {
+        return {value: this.props.selected};
+    };
+
+    simpleValidate: (Rubric) => PerseusScore = (rubric) => {
+        return Dropdown.validate(this.getUserInput(), rubric);
+    };
+
     render(): React.Node {
         const children = [
             <OptionItem
@@ -79,8 +104,8 @@ class Dropdown extends React.Component<Props> {
                     e.stopPropagation();
                 }}
             >
-                {/* $FlowFixMe[prop-missing]: placeholder is missing */}
                 <SingleSelect
+                    placeholder=""
                     onChange={(value) => this._handleChange(parseInt(value))}
                     selectedValue={String(this.props.selected)}
                     disabled={this.props.apiOptions.readOnly}
@@ -90,33 +115,6 @@ class Dropdown extends React.Component<Props> {
             </div>
         );
     }
-
-    focus: () => boolean = () => {
-        // TODO(LP-10797): This focus() call doesn't do anything because our
-        // root element is a <div> and that cannot be focused without a
-        // tabIndex.
-        // $FlowFixMe[incompatible-use]
-        // $FlowFixMe[prop-missing]
-        ReactDOM.findDOMNode(this).focus();
-        return true;
-    };
-
-    _handleChangeEvent: (SyntheticInputEvent<>) => void = (e) => {
-        this._handleChange(parseInt(e.target.value));
-    };
-
-    _handleChange: (number) => void = (selected) => {
-        this.props.trackInteraction();
-        this.props.onChange({selected: selected});
-    };
-
-    getUserInput: () => UserInput = () => {
-        return {value: this.props.selected};
-    };
-
-    simpleValidate: (Rubric) => PerseusScore = (rubric) => {
-        return Dropdown.validate(this.getUserInput(), rubric);
-    };
 }
 
 type RenderProps = {|
@@ -129,7 +127,7 @@ const optionsTransform: (PerseusDropdownWidgetOptions) => RenderProps = (
 ) => {
     return {
         placeholder: widgetOptions.placeholder,
-        choices: _.map(widgetOptions.choices, (choice) => choice.content),
+        choices: widgetOptions.choices.map((choice) => choice.content),
     };
 };