@khanacademy/perseus 0.0.1 → 0.2.1

package/src/widgets/passage/passage-markdown.jsx

@@ -0,0 +1,416 @@
+/* eslint-disable react/sort-comp */
+// @flow
+import SimpleMarkdown from "@khanacademy/simple-markdown";
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+const START_REF_PREFIX = "start-ref-";
+const END_REF_PREFIX = "end-ref-";
+const REF_STYLE = {
+    display: "inline-block",
+    width: 0,
+    visibility: "hidden",
+};
+
+const LABEL_OUTER_STYLE = {
+    // for some reason we need these to keep the nbsp from wrapping when the
+    // inner circle/square is display: inline-block
+    display: "inline",
+    whiteSpace: "nowrap",
+};
+
+const SQUARE_LABEL_STYLE = {
+    display: "inline-block",
+    color: "rgb(255, 255, 255)",
+    backgroundColor: "rgb(90, 90, 90)",
+    paddingLeft: 10,
+    paddingRight: 10,
+    userSelect: "none",
+    WebkitUserSelect: "none",
+};
+
+const CIRCLE_LABEL_STYLE = {
+    display: "inline-block",
+    color: "rgb(255, 255, 255)",
+    backgroundColor: "rgb(90, 90, 90)",
+    userSelect: "none",
+    WebkitUserSelect: "none",
+    width: 22,
+    height: 22,
+    borderRadius: "50%",
+    textAlign: "center",
+};
+
+class RefStart extends React.Component<$FlowFixMe> {
+    static propTypes = {
+        refContent: PropTypes.node.isRequired,
+    };
+
+    render(): React.Node {
+        return <span style={REF_STYLE}>{i18n.doNotTranslate("_")}</span>;
+    }
+
+    getRefContent = () => {
+        return this.props.refContent;
+    };
+}
+
+class RefEnd extends React.Component<$FlowFixMe> {
+    render(): React.Node {
+        return <span style={REF_STYLE}>{i18n.doNotTranslate("_")}</span>;
+    }
+}
+
+const rules: $FlowFixMe = {
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[incompatible-use]
+    newline: SimpleMarkdown.defaultRules.newline,
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[incompatible-use]
+    paragraph: SimpleMarkdown.defaultRules.paragraph,
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[incompatible-use]
+    escape: SimpleMarkdown.defaultRules.escape,
+    passageFootnote: {
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
+        order: SimpleMarkdown.defaultRules.escape.order + 0.1,
+        // $FlowFixMe[prop-missing]
+        match: SimpleMarkdown.inlineRegex(/^\^/),
+        parse: (capture, parse, state) => {
+            // if no footnotes have been seen, we're id 1. otherwise,
+            // we're the next subsequent id
+            const id = state.lastFootnote.id + 1;
+            const footnote = {
+                id: id,
+                // our text is what to output. if there is only one footnote,
+                // it's a *; otherwise it's a superscript number
+                text: id === 1 ? "*" : "" + id,
+            };
+
+            // If the previous footnote was a *, we need to adjust it to be
+            // a number, since now we know there is more than one footnote
+            if (state.lastFootnote.text === "*") {
+                state.lastFootnote.text = "" + state.lastFootnote.id;
+            }
+
+            // and update our last footnote, + return.
+            state.lastFootnote = footnote;
+            return footnote;
+        },
+        react: (node, output, state) => {
+            return <sup key={state.key}>{node.text}</sup>;
+        },
+    },
+    refStart: {
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
+        order: SimpleMarkdown.defaultRules.escape.order + 0.2,
+        match: function (source, state) {
+            const capture = /^\{\{/.exec(source);
+            if (capture) {
+                // We need to do extra processing here to capture the
+                // full text of the reference, which we include so that
+                // we can use that information as a screenreader
+                let closeIndex = 2; // start looking after the opening "{{"
+                let refNestingLevel = 0;
+
+                // Find the closing "}}" for our opening "{{"
+                while (closeIndex < source.length) {
+                    const token = source.slice(closeIndex, closeIndex + 2);
+                    if (token === "{{") {
+                        refNestingLevel++;
+                        // increment an extra character so we get the
+                        // full 2-char token
+                        closeIndex++;
+                    } else if (token === "}}") {
+                        if (refNestingLevel > 0) {
+                            refNestingLevel--;
+                            // increment an extra character so we get the
+                            // full 2-char token
+                            closeIndex++;
+                        } else {
+                            break;
+                        }
+                    }
+                    closeIndex++;
+                }
+
+                const refText = source.slice(2, closeIndex);
+
+                // A "magic" capture that matches the opening {{
+                // but captures the full ref text internally :D
+                return [capture[0], refText];
+            }
+            return null;
+        },
+        parse: (capture, parse, state) => {
+            if (!state.useRefs) {
+                return {
+                    ref: null,
+                    refContent: null,
+                };
+            }
+
+            const ref = state.lastRef + 1;
+            state.lastRef = ref;
+            state.currentRef.push(ref);
+
+            const refContent = parse(
+                // Curly quotes
+                "(\u201C" + capture[1] + "\u201D)\n\n",
+                _.defaults(
+                    {
+                        // We don't want to parse refs while looking through
+                        // this refs contents. We definitely don't want
+                        // to make those refs into react refs on the
+                        // passage, for instance!
+                        useRefs: false,
+                    },
+                    INITIAL_PARSE_STATE,
+                ),
+            );
+
+            return {
+                ref: ref,
+                refContent: refContent,
+            };
+        },
+        react: (node, output, state) => {
+            if (node.ref == null) {
+                return null;
+            }
+
+            // We don't pass state here because this is parsed
+            // and output out-of-band. We don't want to affect
+            // our state by the double-output here :).
+            const refContent = output(node.refContent, {});
+            return (
+                <RefStart
+                    ref={START_REF_PREFIX + node.ref}
+                    key={START_REF_PREFIX + node.ref}
+                    refContent={refContent}
+                />
+            );
+        },
+    },
+    refEnd: {
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
+        order: SimpleMarkdown.defaultRules.escape.order + 0.3,
+        // $FlowFixMe[prop-missing]
+        match: SimpleMarkdown.inlineRegex(/^\}\}/),
+        parse: (capture, parse, state) => {
+            if (!state.useRefs) {
+                return {
+                    ref: null,
+                };
+            }
+
+            const ref = state.currentRef.pop() || null;
+            return {
+                ref: ref,
+            };
+        },
+        react: (node, output, state) => {
+            if (node.ref != null) {
+                return (
+                    <RefEnd
+                        ref={END_REF_PREFIX + node.ref}
+                        key={END_REF_PREFIX + node.ref}
+                    />
+                );
+            }
+            // if we didn't have a matching start reference, or
+            // we aren't parsing refs for this pass (we do this
+            // inside of refContent), don't output a ref
+            return null;
+        },
+    },
+    squareLabel: {
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
+        order: SimpleMarkdown.defaultRules.escape.order + 0.4,
+        // $FlowFixMe[prop-missing]
+        match: SimpleMarkdown.inlineRegex(/^\[\[(\w+)\]\]( *)/),
+        parse: (capture, parse, state) => {
+            if (!state.firstQuestionRef) {
+                state.firstQuestionRef = capture[1];
+            }
+            return {
+                content: capture[1],
+                space: capture[2].length > 0,
+            };
+        },
+        react: (node, output, state) => {
+            return [
+                <span
+                    key="visual-square"
+                    className="perseus-passage-square-label"
+                    style={LABEL_OUTER_STYLE}
+                    aria-hidden="true"
+                >
+                    <span style={SQUARE_LABEL_STYLE}>{node.content}</span>
+                </span>,
+                <span key="alt-text" className="perseus-sr-only">
+                    {i18n.$_("[Marker for question %(number)s]", {
+                        number: node.content,
+                    })}
+                </span>,
+                node.space ? "\u00A0" : null,
+            ];
+        },
+    },
+    circleLabel: {
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
+        order: SimpleMarkdown.defaultRules.escape.order + 0.5,
+        // $FlowFixMe[prop-missing]
+        match: SimpleMarkdown.inlineRegex(/^\(\((\w+)\)\)( *)/),
+        parse: (capture, parse, state) => {
+            return {
+                content: capture[1],
+                space: capture[2].length > 0,
+            };
+        },
+        react: (node, output, state) => {
+            return [
+                <span
+                    key="visual-circle"
+                    className="perseus-passage-circle-label"
+                    style={LABEL_OUTER_STYLE}
+                    aria-hidden={true}
+                >
+                    <span style={CIRCLE_LABEL_STYLE}>{node.content}</span>
+                </span>,
+                <span key="alt-text" className="perseus-sr-only">
+                    {i18n.$_("[Circle marker %(number)s]", {
+                        number: node.content,
+                    })}
+                </span>,
+                node.space ? "\u00A0" : null,
+            ];
+        },
+    },
+    squareBracketRef: {
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
+        order: SimpleMarkdown.defaultRules.escape.order + 0.6,
+        // $FlowFixMe[prop-missing]
+        match: SimpleMarkdown.inlineRegex(/^\[(\d+)\]( *)/),
+        parse: (capture, parse, state) => {
+            if (!state.firstSentenceRef) {
+                state.firstSentenceRef = capture[1];
+            }
+            return {
+                content: capture[1],
+                space: capture[2].length > 0,
+            };
+        },
+        react: (node, output, state) => {
+            return [
+                <span
+                    key="visual-brackets"
+                    className="perseus-passage-bracket-label"
+                    aria-hidden="true"
+                >
+                    [{node.content}]
+                </span>,
+                <span key="alt-text" className="perseus-sr-only">
+                    {i18n.$_("[Sentence %(number)s]", {number: node.content})}
+                </span>,
+                node.space ? "\u00A0" : null,
+            ];
+        },
+    },
+    highlight: {
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
+        order: SimpleMarkdown.defaultRules.escape.order + 0.7,
+        // $FlowFixMe[prop-missing]
+        match: SimpleMarkdown.inlineRegex(
+            /^{highlighting.start}(.+?){highlighting.end}/,
+        ),
+        parse: (capture, parse, state) => {
+            return {
+                content: capture[1],
+            };
+        },
+        react: (node, output, state) => {
+            return [
+                <span key={0} className="perseus-highlight">
+                    {node.content}
+                </span>,
+            ];
+        },
+    },
+    reviewHighlight: {
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
+        order: SimpleMarkdown.defaultRules.escape.order + 0.7,
+        // $FlowFixMe[prop-missing]
+        match: SimpleMarkdown.inlineRegex(
+            /^{review-highlighting.start}(.+?){review-highlighting.end}/,
+        ),
+        parse: (capture, parse, state) => {
+            return {
+                content: capture[1],
+            };
+        },
+        react: (node, output, state) => {
+            return [
+                <span key={0} className="perseus-review-highlight">
+                    {node.content}
+                </span>,
+            ];
+        },
+    },
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[incompatible-use]
+    strong: SimpleMarkdown.defaultRules.strong,
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[incompatible-use]
+    u: SimpleMarkdown.defaultRules.u,
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[incompatible-use]
+    em: SimpleMarkdown.defaultRules.em,
+    // $FlowFixMe[prop-missing]
+    // $FlowFixMe[incompatible-use]
+    del: SimpleMarkdown.defaultRules.del,
+    text: {
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
+        ...SimpleMarkdown.defaultRules.text,
+        react(node, output, state) {
+            return <span key={state.key}>{node.content}</span>;
+        },
+    },
+};
+
+const INITIAL_PARSE_STATE = {
+    currentRef: [],
+    useRefs: true,
+    lastRef: 0,
+    lastFootnote: {id: 0, text: ""},
+};
+// $FlowFixMe[prop-missing]
+const builtParser = SimpleMarkdown.parserFor(rules);
+const parse: (string, $FlowFixMe) => $FlowFixMe = (source, state) => {
+    state = state || {};
+    const paragraphedSource = source + "\n\n";
+    return builtParser(paragraphedSource, _.extend(state, INITIAL_PARSE_STATE));
+};
+
+export default {
+    parse: parse,
+    // $FlowFixMe[prop-missing]
+    output: (SimpleMarkdown.reactFor(
+        // $FlowFixMe[prop-missing]
+        SimpleMarkdown.ruleOutput(rules, "react"),
+    ): $FlowFixMe),
+    START_REF_PREFIX: START_REF_PREFIX,
+    END_REF_PREFIX: END_REF_PREFIX,
+    _rulesForTesting: rules,
+};

package/src/widgets/passage-ref-target.jsx

@@ -0,0 +1,70 @@
+// @flow
+import PropTypes from "prop-types";
+import * as React from "react";
+import _ from "underscore";
+
+import {linterContextProps, linterContextDefault} from "../gorgon/proptypes.js";
+import * as Changeable from "../mixins/changeable.jsx";
+import WidgetJsonifyDeprecated from "../mixins/widget-jsonify-deprecated.jsx";
+import Renderer from "../renderer.jsx";
+
+import type {WidgetExports} from "../types.js";
+
+class PassageRefTarget extends React.Component<$FlowFixMe> {
+    static propTypes = {
+        ...Changeable.propTypes,
+        content: PropTypes.string,
+        linterContext: linterContextProps,
+    };
+
+    static defaultProps: $FlowFixMe = {
+        content: "",
+        linterContext: linterContextDefault,
+    };
+
+    static validate(state: $FlowFixMe, rubric: $FlowFixMe): $FlowFixMe {
+        return {
+            type: "points",
+            earned: 0,
+            total: 0,
+            message: null,
+        };
+    }
+
+    getUserInput: () => $FlowFixMe = () => {
+        return WidgetJsonifyDeprecated.getUserInput.call(this);
+    };
+
+    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    simpleValidate: ($FlowFixMe) => $FlowFixMe = (rubric) => {
+        return PassageRefTarget.validate(this.getUserInput(), rubric);
+    };
+
+    render(): React.Node {
+        return (
+            // $FlowFixMe[prop-missing]: inline doesn't exist in Renderer's declared props
+            <Renderer
+                content={this.props.content}
+                inline={true}
+                apiOptions={this.props.apiOptions}
+                linterContext={this.props.linterContext}
+            />
+        );
+    }
+}
+
+export default ({
+    name: "passage-ref-target",
+    displayName: "PassageRefTarget",
+    defaultAlignment: "inline",
+    widget: PassageRefTarget,
+    hidden: true,
+    transform: (editorProps: $FlowFixMe): $FlowFixMe => {
+        return _.pick(editorProps, "content");
+    },
+    version: {major: 0, minor: 0},
+    isLintable: true,
+}: WidgetExports<typeof PassageRefTarget>);

package/src/widgets/passage-ref.jsx

@@ -0,0 +1,198 @@
+/* eslint-disable react/sort-comp */
+// @flow
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import * as React from "react";
+import _ from "underscore";
+
+import * as Changeable from "../mixins/changeable.jsx";
+import WidgetJsonifyDeprecated from "../mixins/widget-jsonify-deprecated.jsx";
+import PerseusMarkdown from "../perseus-markdown.jsx";
+
+import type {PerseusPassageRefWidgetOptions} from "../perseus-types.js";
+import type {
+    ChangeFn,
+    PerseusScore,
+    WidgetExports,
+    WidgetProps,
+} from "../types.js";
+
+const EN_DASH = "\u2013";
+
+type UserInput = $FlowFixMe;
+
+type RenderProps = {|
+    passageNumber: PerseusPassageRefWidgetOptions["passageNumber"],
+    referenceNumber: PerseusPassageRefWidgetOptions["referenceNumber"],
+    summaryText: PerseusPassageRefWidgetOptions["summaryText"],
+|};
+
+type Rubric = PerseusPassageRefWidgetOptions;
+
+type Props = WidgetProps<RenderProps, Rubric>;
+
+type DefaultProps = {|
+    passageNumber: Props["passageNumber"],
+    referenceNumber: Props["referenceNumber"],
+    summaryText: Props["summaryText"],
+|};
+
+type State = {|
+    lineRange: ?[number, number],
+    content: ?string,
+|};
+
+class PassageRef extends React.Component<Props, State> {
+    displayName: string = "PassageRef";
+    _isMounted: boolean;
+    _throttledUpdateRange: () => void;
+
+    static defaultProps: DefaultProps = {
+        passageNumber: 1,
+        referenceNumber: 1,
+        summaryText: "",
+    };
+
+    state: State = {
+        lineRange: null,
+        content: null,
+    };
+
+    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
+        return (
+            !_.isEqual(this.props, nextProps) ||
+            !_.isEqual(this.state, nextState)
+        );
+    }
+
+    getUserInput: () => UserInput = () => {
+        return WidgetJsonifyDeprecated.getUserInput.call(this);
+    };
+
+    render(): React.Node {
+        const lineRange = this.state.lineRange;
+        let lineRangeOutput;
+        if (!lineRange) {
+            lineRangeOutput = i18n.$_("lines %(lineRange)s", {
+                lineRange: `?${EN_DASH}?`,
+            });
+        } else if (lineRange[0] === lineRange[1]) {
+            lineRangeOutput = i18n.$_("line %(lineNumber)s", {
+                lineNumber: lineRange[0],
+            });
+        } else {
+            lineRangeOutput = i18n.$_("lines %(lineRange)s", {
+                lineRange: lineRange[0] + EN_DASH + lineRange[1],
+            });
+        }
+
+        let summaryOutput;
+        if (this.props.summaryText) {
+            const summaryTree = PerseusMarkdown.parseInline(
+                this.props.summaryText,
+            );
+            summaryOutput = (
+                <span aria-hidden={true}>
+                    {" "}
+                    {/* curly quotes */}
+                    (&ldquo;
+                    {PerseusMarkdown.basicOutput(summaryTree)}
+                    &rdquo;)
+                </span>
+            );
+        } else {
+            summaryOutput = null;
+        }
+
+        return (
+            <span>
+                {lineRangeOutput}
+                {summaryOutput}
+                {lineRange && (
+                    <div className="perseus-sr-only">{this.state.content}</div>
+                )}
+            </span>
+        );
+    }
+
+    change: ChangeFn = (...args) => {
+        return Changeable.change.apply(this, args);
+    };
+
+    componentDidMount() {
+        // TODO(scottgrant): This is a hack to remove the deprecated call to
+        // this.isMounted() but is still considered an anti-pattern.
+        this._isMounted = true;
+
+        this._deferredUpdateRange();
+
+        this._throttledUpdateRange = _.throttle(this._deferredUpdateRange, 500);
+        window.addEventListener("resize", this._throttledUpdateRange);
+    }
+
+    componentDidUpdate() {
+        this._deferredUpdateRange();
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener("resize", this._throttledUpdateRange);
+
+        this._isMounted = false;
+    }
+
+    _deferredUpdateRange: () => void = () => {
+        _.defer(this._updateRange);
+    };
+
+    _updateRange: () => void = () => {
+        const passage = this.props.findWidgets(
+            "passage " + this.props.passageNumber,
+        )[0];
+
+        let refInfo = null;
+        if (passage) {
+            refInfo = passage.getReference(this.props.referenceNumber);
+        }
+
+        if (this._isMounted) {
+            if (refInfo) {
+                this.setState({
+                    lineRange: [refInfo.startLine, refInfo.endLine],
+                    content: refInfo.content,
+                });
+            } else {
+                this.setState({
+                    lineRange: null,
+                    content: null,
+                });
+            }
+        }
+    };
+
+    simpleValidate: (Rubric) => PerseusScore = (rubric) => {
+        return PassageRef.validate(this.getUserInput(), rubric);
+    };
+
+    static validate(userInput: UserInput, rubric: Rubric): PerseusScore {
+        return {
+            type: "points",
+            earned: 0,
+            total: 0,
+            message: null,
+        };
+    }
+}
+
+export default ({
+    name: "passage-ref",
+    displayName: "PassageRef (SAT only)",
+    defaultAlignment: "inline",
+    widget: PassageRef,
+    transform: (
+        widgetOptions: PerseusPassageRefWidgetOptions,
+    ): RenderProps => ({
+        passageNumber: widgetOptions.passageNumber,
+        referenceNumber: widgetOptions.referenceNumber,
+        summaryText: widgetOptions.summaryText,
+    }),
+    version: {major: 0, minor: 1},
+}: WidgetExports<typeof PassageRef>);