@khanacademy/perseus 3.0.0 → 4.0.1

package/src/components/highlighting/ui/types.js

@@ -1,21 +0,0 @@
-// @flow
-// Import the DOM-related types from the parent directory, and re-export them
-// to the UI code.
-import type {DOMHighlight, DOMHighlightSet, DOMRange} from "../types.js";
-
-export type {DOMHighlight, DOMHighlightSet, DOMRange};
-
-export type Position = {|
-    left: number,
-    top: number,
-|};
-
-export type Rect = {|
-    ...Position,
-    width: number,
-    height: number,
-|};
-
-// TODO(mdr): Is this way of passing around `z-index: 0` actually worth the
-//     trouble? We used to have more, but now we don't need them...
-export type ZIndexes = {belowContent: number, ...};

package/src/components/highlighting/ui/util.js

@@ -1,166 +0,0 @@
-// @flow
-/**
- * Utility functions for highlighting UI.
- */
-import {rangesOverlap, intersectRanges} from "../ranges.js";
-
-import type {DOMRange, Position, Rect} from "./types.js";
-
-/**
- * Given two positions relative to the same origin, return `child`'s position
- * relative to `parent`'s position.
- */
-export function getRelativePosition(
-    child: Position,
-    parent: Position,
-): Position {
-    return {
-        left: child.left - parent.left,
-        top: child.top - parent.top,
-    };
-}
-
-/**
- * `getRelativePosition`, but for Rects.
- *
- * Given a rectangle and a position relative to the same origin, return a new
- * rectangle of the same size, whose position is relative to the given
- * position.
- */
-export function getRelativeRect(
-    {left, top, width, height}: Rect,
-    parent: Position,
-): Rect {
-    return {
-        ...getRelativePosition({left, top}, parent),
-        width,
-        height,
-    };
-}
-
-/**
- * Given a DOMRange, return a list of client-relative rects that cover the text
- * inside the DOMRange.
- *
- * This behaves differently than the browser's built-in `getClientRects` method
- * for DOMRanges, because this method only gets rects for the *text* nodes,
- * whereas the browser's method will also return rects for any fully-contained
- * *element* nodes.
- *
- * For example, if an entire paragraph is selected, then `getClientRects` will
- * return a rectangle that covers the entire paragraph block, whereas this
- * method will only return rectangles for the text inside the paragraph.
- */
-export function getClientRectsForTextInRange(
-    range: DOMRange,
-): $ReadOnlyArray<Rect> {
-    const mutableRects = [];
-    addClientRectsForTextInNodeAndRange(
-        range.commonAncestorContainer,
-        range,
-        mutableRects,
-    );
-    return mutableRects;
-}
-
-/**
- * A helper method for getClientRectsForTextInRange.
- *
- * Given a node and a range, find text that is contained within both the node
- * and the range by recursing down the node's subtree, and push the text's
- * client rects onto the given `mutableRects` array.
- */
-function addClientRectsForTextInNodeAndRange(
-    node: Node,
-    range: DOMRange,
-    // eslint-disable-next-line ft-flow/no-mutable-array
-    mutableRects: Array<Rect>,
-): void {
-    const nodeContentsRange = new Range();
-    nodeContentsRange.selectNodeContents(node);
-
-    if (node.nodeType === Node.TEXT_NODE) {
-        // Get the text that appears both in this text node and in the range
-        // we're searching.
-        const intersectedRange = intersectRanges(range, nodeContentsRange);
-        if (intersectedRange) {
-            addClientRectsForText(node, intersectedRange, mutableRects);
-        }
-    } else if (node.nodeType === Node.ELEMENT_NODE) {
-        // Don't bother deep-traversing a node that doesn't even overlap the
-        // range we're searching.
-        if (!rangesOverlap(range, nodeContentsRange)) {
-            return;
-        }
-
-        // NOTE(mdr): Safari returns a non-iterable `childNodes` object, so
-        //     convert it to an array.
-        for (const child of Array.from(node.childNodes)) {
-            // TODO(mdr): If this parent has overflow: hidden, bound the child
-            //     rects accordingly. This would allow us to remove the hack
-            //     we added to .perseus-sr-only.
-            addClientRectsForTextInNodeAndRange(child, range, mutableRects);
-        }
-    }
-}
-
-/**
- * Given a DOMRange of text fully contained by the given `textNode`, compute
- * rectangles that visually cover the range, and push them onto the given
- * `mutableRects` array.
- *
- * This function adjusts the rectangles to the line height of the text, to
- * match the visual behavior of native text selection, and remove annoying gaps
- * between lines that disrupt hover behavior.
- */
-function addClientRectsForText(
-    textNode: Node,
-    textRange: DOMRange,
-    // eslint-disable-next-line ft-flow/no-mutable-array
-    mutableRects: Array<Rect>,
-): void {
-    const parentElement = textNode.parentElement;
-    const computedStyle = window.getComputedStyle(parentElement);
-
-    // NOTE(mdr): I'm not sure how computed line height works in all contexts
-    //     in all browsers. It's valid to specify line height as a ratio,
-    //     relative to font size. Latest Chrome seems to transform this into a
-    //     px value, but maybe some browsers don't, so I'm being defensive here
-    //     and only using the computed line height if it's explicitly a px
-    //     value. We could also handle other browsers by computing font size
-    //     and doing the math ourselves, but let's punt that until we need it.
-    let lineHeight = null;
-    if (
-        typeof computedStyle.lineHeight === "string" &&
-        computedStyle.lineHeight.endsWith("px")
-    ) {
-        const parsedLineHeight = parseFloat(computedStyle.lineHeight);
-        if (!isNaN(parsedLineHeight)) {
-            lineHeight = parsedLineHeight;
-        }
-    }
-
-    // NOTE(mdr): Safari returns a non-iterable `getClientRects` object, so
-    //     convert it to an array.
-    const boundingRects = Array.from(textRange.getClientRects());
-
-    for (const boundingRect of boundingRects) {
-        const rect: Rect = {
-            left: boundingRect.left,
-            top: boundingRect.top,
-            height: boundingRect.height,
-            width: boundingRect.width,
-        };
-
-        // Adjust the rectangle according to the text's line height. It should
-        // keep the same bottom coordinate, so the top coordinate will move
-        // accordingly.
-        if (lineHeight !== null) {
-            const heightIncrease = lineHeight - rect.height;
-            rect.top -= heightIncrease;
-            rect.height = lineHeight;
-        }
-
-        mutableRects.push(rect);
-    }
-}

package/src/components/highlighting/word-indexer.jsx

@@ -1,155 +0,0 @@
-// @flow
-/**
- * This component, whenever its content updates, traverses the DOM to find
- * semantic words and send the corresponding DOMRanges to the caller via a
- * callback.
- *
- * A "word" here is a sequence of non-whitespace text characters, uninterrupted
- * by the start/end of a non-inline element. That is, a word can span across
- * text nodes and inline tags like <b>, but cannot span across block
- * paragraphs.
- *
- * The words yielded by WordIndexer are sorted in document order, which makes
- * them amenable to binary search - see `findBoundaryWordIndex` in ranges.js.
- */
-import * as React from "react";
-
-import {Errors} from "../../logging/log.js";
-import {PerseusError} from "../../perseus-error.js";
-
-import type {DOMRange} from "./types.js";
-
-type WordIndexerProps = {|
-    // The content to display and traverse in search of words.
-    children?: React.Element<any>,
-    // After each mount and update, this callback is called with the list of
-    // word ranges in `children`'s DOM, sorted in document order.
-    onWordsUpdate: (wordRanges: $ReadOnlyArray<DOMRange>) => mixed,
-|};
-
-class WordIndexer extends React.PureComponent<WordIndexerProps> {
-    _container: ?HTMLElement;
-    /* eslint-enable react/sort-comp */
-
-    componentDidMount() {
-        this._sendWordsUpdate();
-    }
-
-    componentDidUpdate() {
-        this._sendWordsUpdate();
-    }
-
-    _sendWordsUpdate() {
-        this.props.onWordsUpdate(this._getWordRanges());
-    }
-
-    _getWordRanges(): $ReadOnlyArray<DOMRange> {
-        const container = this._container;
-
-        if (!container) {
-            throw new PerseusError(
-                "invariant violation: `this._container` is not defined, but " +
-                    "this method is only called after mount/update",
-                Errors.NotAllowed,
-            );
-        }
-
-        // Create a TreeWalker that visits text nodes and element nodes.
-        // We select the types of nodes we're interested in by bitwise-ORing
-        // the desired filters together.
-        const treeWalker = container.ownerDocument.createTreeWalker(
-            container,
-            NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT,
-            () => NodeFilter.FILTER_ACCEPT,
-            false,
-        );
-
-        // Traverse the container's descendant text nodes in DOM order,
-        // indexing the words we find.
-        const index = [];
-        let trailingWordRange = null;
-        while (treeWalker.nextNode()) {
-            const node = treeWalker.currentNode;
-
-            if (node.nodeType === Node.ELEMENT_NODE) {
-                const element: Element = (node: any);
-                if (getComputedStyle(element).display !== "inline") {
-                    // Block-level elements interrupt text words, so set the
-                    // current trailing word to `null`.
-                    //
-                    // This includes exiting one paragraph to visit another,
-                    // but also includes text interrupted by inline-block
-                    // elements.
-                    //
-                    // TODO(mdr): Is this behavior *generalizably* correct?
-                    // TODO(mdr): I don't *fully* understand the performance
-                    //     implications of `getComputedStyle`, but I think it's
-                    //     gonna be nbd at the current call sites. If we try to
-                    //     generalize to frequently-updating content, we might
-                    //     want to watch this as a potential performance
-                    //     bottleneck.
-                    trailingWordRange = null;
-                }
-            } else if (node.nodeType === Node.TEXT_NODE) {
-                const text = node.nodeValue;
-
-                // A "word" is here simply defined as a maximal-length
-                // substring of non-space characters.
-                //
-                // Loop over all the words in the string, by repeatedly calling
-                // `wordPattern.exec(text)`.
-                const wordPattern = /\S+/g;
-                let wordMatch;
-                let newTrailingWordRange = null;
-                while ((wordMatch = wordPattern.exec(text)) !== null) {
-                    // TODO(mdr): We found a new Flow error when upgrading:
-                    //     "index (Cannot get `wordMatch.index` because property `index` is missing in null [1].)"
-                    // $FlowFixMe[incompatible-use](0.57.3->0.75.0)
-                    const startOffset = wordMatch.index;
-                    // TODO(mdr): We found a new Flow error when upgrading:
-                    //     "index (Cannot get `wordMatch.index` because property `index` is missing in null [1].)", "0 (Cannot get `wordMatch[0]` because an indexer property is missing in null [1].)"
-                    // $FlowFixMe[incompatible-use](0.57.3->0.75.0)
-                    const endOffset = wordMatch.index + wordMatch[0].length;
-
-                    let range;
-                    if (startOffset === 0 && trailingWordRange) {
-                        // This word is at the start of this text node, and
-                        // there's a trailing word from the previous text node,
-                        // and there was no non-inline element between them.
-                        // This word and the trailing word are probably
-                        // intended to be two parts of the same word.
-                        //
-                        // So, instead of creating a new word range, we add
-                        // this word to the previous range by extending it.
-                        range = trailingWordRange;
-                        range.setEnd(node, endOffset);
-                    } else {
-                        // Otherwise, start a new word range here, and add it
-                        // to the list.
-                        range = node.ownerDocument.createRange();
-                        range.setStart(node, startOffset);
-                        range.setEnd(node, endOffset);
-                        index.push(range);
-                    }
-
-                    if (endOffset === text.length) {
-                        newTrailingWordRange = range;
-                    }
-                }
-                trailingWordRange = newTrailingWordRange;
-            }
-        }
-
-        return index;
-    }
-
-    render(): React.Element<"div"> {
-        return (
-            <div ref={(container) => (this._container = container)}>
-                {this.props.children}
-            </div>
-        );
-    }
-}
-
-export default WordIndexer;

package/src/components/hud.jsx

@@ -1,179 +0,0 @@
-// @flow
-import {StyleSheet, css} from "aphrodite";
-import PropTypes from "prop-types";
-import * as React from "react";
-
-import * as constants from "../styles/constants.js";
-
-class HUD extends React.Component<$FlowFixMe> {
-    static propTypes = {
-        message: PropTypes.string.isRequired,
-        enabled: PropTypes.bool.isRequired,
-        onClick: PropTypes.func.isRequired,
-        fixedPosition: PropTypes.bool,
-    };
-
-    static defaultProps: $FlowFixMe = {
-        fixedPosition: true,
-    };
-
-    // Displays a stylized open eye: lint warnings are visible
-    renderVisibleIcon: () => React.Node = () => {
-        return (
-            <svg
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                className={css(styles.icon)}
-            >
-                <defs>
-                    <path
-                        id="a"
-                        d={
-                            "M7.401 10.035c-1.424.748-2.599 1.905-3.544 " +
-                            "3.48a1 1 0 0 1-1.714-1.03C4.325 8.849 7.652 7 " +
-                            "12 7c4.348 0 7.675 1.848 9.857 5.486a1 1 0 0 " +
-                            "1-1.714 1.028c-.945-1.574-2.12-2.73-3.544-" +
-                            "3.48a5 5 0 1 1-9.198 0zM12 15a3 3 0 1 0 0-6 3 3 " +
-                            "0 0 0 0 6z"
-                        }
-                    />
-                </defs>
-                <g fill="none" fillRule="evenodd">
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <mask id="b" fill="#fff">
-                        <use href="#a" />
-                    </mask>
-                    <use fill="#fff" fillRule="nonzero" href="#a" />
-                    <g fill="#fff" mask="url(#b)">
-                        <path d="M0 0h24v24H0z" />
-                    </g>
-                </g>
-            </svg>
-        );
-    };
-
-    // Displays a stylized eye with a line through it: I don't want to see lint
-    renderHiddenIcon: () => React.Node = () => {
-        return (
-            <svg
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                className={css(styles.icon)}
-            >
-                <defs>
-                    <path
-                        id="a"
-                        d={
-                            "M8.794 7.38C9.791 7.127 10.86 7 12 7c4.348 0 " +
-                            "7.675 1.848 9.857 5.486a1 1 0 0 1-1.714 " +
-                            "1.028c-.945-1.574-2.12-2.73-3.544-3.48.258." +
-                            "604.401 1.268.401 1.966 0 1.02-.305 " +
-                            "1.967-.828 2.757l2.535 2.536a1 1 0 0 " +
-                            "1-1.414 1.414l-12-12a1 1 0 0 1 " +
-                            "1.414-1.414L8.794 7.38zm5.914 5.913a3 3 0 0 " +
-                            "0-4.001-4.001l4 4.001zM6.072 8.486l2.976 " +
-                            "2.976a3 3 0 0 0 3.49 3.49l1.579 1.58A5 5 0 " +
-                            "0 1 7.4 10.035c-1.424.747-2.599 1.904-3.544 " +
-                            "3.478a1 1 0 0 1-1.714-1.028c1.049-1.75 " +
-                            "2.363-3.085 3.929-4z"
-                        }
-                    />
-                </defs>
-                <g fill="none" fillRule="evenodd">
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <mask id="b" fill="#fff">
-                        <use href="#a" />
-                    </mask>
-                    <use fill="#fff" fillRule="nonzero" href="#a" />
-                    <g fill="#fff" mask="url(#b)">
-                        <path d="M0 0h24v24H0z" />
-                    </g>
-                </g>
-            </svg>
-        );
-    };
-
-    render(): React.Node {
-        let state;
-        let icon;
-        if (this.props.enabled) {
-            state = styles.enabled;
-            icon = this.renderVisibleIcon();
-        } else {
-            state = styles.disabled;
-            icon = this.renderHiddenIcon();
-        }
-
-        return (
-            <button
-                className={css(
-                    styles.hud,
-                    this.props.fixedPosition && styles.hudFixedPosition,
-                    state,
-                )}
-                onClick={(e) => {
-                    this.props.onClick();
-                }}
-            >
-                {icon}
-                {this.props.message}
-            </button>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    hud: {
-        boxSizing: "border-box",
-        height: 36,
-        padding: "9px 16px",
-        borderRadius: 18,
-        fontFamily: constants.boldFontFamily,
-        fontSize: "15px",
-        lineHeight: "18px",
-        color: constants.white,
-        userSelect: "none",
-        borderWidth: 0, // <button> gives us a border by default
-    },
-
-    // We want to render the element in-place in our fixtures, so allow us to
-    // render in the bottom corner in production and in-place in testing.
-    hudFixedPosition: {
-        bottom: 20,
-        position: "fixed",
-        right: 20,
-        zIndex: 1,
-    },
-
-    icon: {
-        width: 24,
-        height: 24,
-        marginRight: 8,
-        marginTop: -3,
-        verticalAlign: "middle",
-    },
-
-    enabled: {
-        backgroundColor: constants.warningColor,
-        ":hover": {
-            backgroundColor: constants.warningColorHover,
-        },
-        ":active": {
-            backgroundColor: constants.warningColorActive,
-        },
-    },
-
-    disabled: {
-        backgroundColor: constants.gray76,
-        ":hover": {
-            backgroundColor: "#a1a5a9", // in between those two grays
-        },
-        ":active": {
-            backgroundColor: constants.gray68,
-        },
-    },
-});
-
-export default HUD;

package/src/components/icon.jsx

@@ -1,149 +0,0 @@
-// @flow
-/**
- * SVG Icon React Component
- *
- * This component is designed to take in SVG paths and render icons based upon
- * them. If you are looking for an icon that we've used before you should look
- * in `icon-paths.js` which is a reference file for all the SVG paths that
- * we've used. You'll need to copy the object from that file into whichever
- * file you're using the icon and explicitly pass it in to the <Icon/> React
- * component.
- *
- * Sample usage:
- *
- *   const dropdownIcon = `M5,6L0,0L10,0`;
- *   <Icon icon={dropdownIcon} />
- *
- * Or:
- *
- *   const dropdownIcon = {
- *       path: `M5,6L0,0L10,0`,
- *       height: 10,
- *       width: 10,
- *   };
- *   <Icon icon={dropdownIcon} size={20} />
- *
- * A full list of all the existing icons can be seen here:
- * http://localhost:8080/react-sandbox/shared-styles-package/icon.jsx.fixture.js
- *
- * If you want to add an entirely new icon please read the note inside
- * the `icon-paths.js` file.
- */
-
-import * as React from "react";
-
-import type {CSSProperties} from "aphrodite";
-
-// WARNING: This determines the *viewport* width and height, so a change here
-//          requires scaling the values of every SVG path passed in as a string
-//          without corresponding `width` and `height` values.
-const BASE_ICON_SIZE = 10;
-
-// If you pass in an object you need to specify an SVG path to
-// render along with the width and height of the path (to ensure
-// that it gets scaled correctly).
-export type IconType = {|
-    height: number,
-    path: string,
-    width: number,
-|};
-
-type Props = {|
-    // The className used for the SVG object (see the pathClassName prop as
-    // well).
-    className?: string,
-
-    // If you don't want to use Aphrodite, you can pass a style to the
-    // icon.
-    style?: CSSProperties,
-
-    // Accessible description for this icon. If omitted, icon will be
-    // aria-hidden.
-    title?: string,
-
-    // The color of the icon. Defaults to "currentColor".
-    color: string,
-
-    // Whether the SVG can be focused on when tab-bing around in IE.
-    focusable?: boolean,
-
-    // The SVG icon
-    icon:
-        | IconType
-
-        // If you pass in a string then it's assumed to be just an SVG
-        // path with a default size of 10 pixels wide and tall.
-        | string,
-
-    // To be used for custom styling of the component. If using with
-    // Aphrodite you'll want to pre-compute the class string by calling
-    // css(). Additionally you need to remember that many of the SVG
-    // properties are similar, but different. If you want to change the
-    // color of the path you'll need to set the `fill` property.
-    pathClassName?: string,
-
-    // The height of the icon. Defaults to 1em.
-    size?: number,
-
-    // Alt text set on SVG icon
-    alt?: string,
-|};
-
-class Icon extends React.Component<Props> {
-    static defaultProps: {|color: string|} = {
-        color: "currentColor",
-    };
-
-    render(): React.Element<"svg"> {
-        const {color, pathClassName, className, title, style, alt} = this.props;
-        let {icon, size} = this.props;
-        let units = "";
-
-        // If the raw path was passed in, wrap it in the format that we expect.
-        if (typeof icon === "string") {
-            icon = {
-                path: icon,
-                width: BASE_ICON_SIZE,
-                height: BASE_ICON_SIZE,
-            };
-        }
-
-        // `size` defaults to 1em to mirror the behavior of Font Awesome.
-        if (typeof size !== "number") {
-            size = 1;
-            units = "em";
-        }
-
-        const height = size;
-        const width = (height / icon.height) * icon.width;
-
-        // NOTE: We assume that the viewBox is cropped and aligned to (0, 0),
-        //       but icons can be defined differently. At some point we might
-        //       want to add these attributes to icon-paths.js, but for now
-        //       this is a fairly safe assumption.
-        const xMin = 0;
-        const yMin = 0;
-
-        const focusable = !!this.props.focusable;
-
-        return (
-            <svg
-                role="img"
-                alt={alt}
-                aria-label={title}
-                aria-hidden={title ? null : true}
-                className={className}
-                style={style}
-                focusable={focusable.toString()}
-                width={width + units}
-                height={height + units}
-                viewBox={`${xMin} ${yMin} ${icon.width} ${icon.height}`}
-            >
-                {!!title && <title>{title}</title>}
-                <path className={pathClassName} fill={color} d={icon.path} />
-            </svg>
-        );
-    }
-}
-
-export default Icon;