@khanacademy/perseus-editor 4.1.4 → 4.1.6

package/src/components/hover-behavior.ts

@@ -1,177 +0,0 @@
-/* eslint-disable react/sort-comp */
-/**
- * Add hover behavior to another component.
- *
- * This component provides hover and focus status updates in a consistent way
- * across desktop and mobile.
- *
- * For advice on when to use this component instead of Button, see README.md.
- *
- * Many mobile browsers treat :hover as sticky which results in buttons looking
- * pressed even when the user has lifted their finger.  This component ensures
- * that when user lifts their finger the hover state is removed.
- *
- * We also chnage how the focus state works.  Browsers immediately set the
- * focus state as soon as you click on a button.  This component only sets the
- * focus state when a user starts navigating between elements via keybaord.
- *
- * HoverBehavior accepts a function as 'children' which is passed state and
- * an object containing event handlers.  The 'children' function should return
- * an React Element of some sort.
- *
- * Example:
- *
- * class MyButtonLikeComponent extends React.Component {
- *     render(): React.Node {
- *         return <HoverBehavior
- *             disabled={this.props.disabled}
- *             onClick={this.handleClick}
- *         >
- *             {({hovered}, handlers) =>
- *                 <RoundRect
- *                      textcolor='white'
- *                      backgroundColor={hovered ? 'red' : 'blue'}/>}
- *                      {...handlers}
- *                 >
- *                      {this.props.children}
- *                 </RoundRect>
- *             }
- *         </HoverBehavior>
- *     }
- * }
- *
- * This follows a pattern call 'Function as Child Components':
- * https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9#.sw0jiio8b
- */
-import * as React from "react";
-
-type Handlers = {
-    onBlur: () => unknown;
-    onClick: (e: React.MouseEvent) => unknown;
-    onFocus: () => unknown;
-    onMouseDown: () => unknown;
-    onMouseEnter: () => unknown;
-    onMouseLeave: () => unknown;
-    onTouchStart: () => unknown;
-    onTouchEnd: () => unknown;
-};
-
-type State = {
-    focused: boolean;
-    hovered: boolean;
-};
-
-type Props = {
-    children?: (state: State, handlers: Handlers) => React.ReactElement;
-    disabled?: boolean;
-    onClick?: (e: React.MouseEvent) => unknown;
-    startHovered: boolean;
-    shouldUpdate: () => boolean;
-};
-
-export default class HoverBehavior extends React.Component<Props, State> {
-    static defaultProps: {
-        shouldUpdate: () => boolean;
-        startHovered: boolean;
-    } = {
-        startHovered: false,
-        shouldUpdate: () => true,
-    };
-
-    constructor(props: Props) {
-        super(props);
-
-        this.state = {
-            focused: false,
-            hovered: props.startHovered,
-        };
-    }
-
-    // @ts-expect-error - TS2564 - Property 'focusFlag' has no initializer and is not definitely assigned in the constructor.
-    focusFlag: boolean;
-    // @ts-expect-error - TS2564 - Property 'waitingForClick' has no initializer and is not definitely assigned in the constructor.
-    waitingForClick: boolean;
-
-    handleClick: (e: React.MouseEvent) => void = (e: React.MouseEvent) => {
-        if (!this.props.disabled) {
-            if (this.props.shouldUpdate()) {
-                this.waitingForClick = false;
-            }
-            if (this.props.onClick && !this.props.disabled) {
-                this.props.onClick(e);
-            }
-        }
-    };
-
-    handleMouseEnter: () => void = () => {
-        if (
-            !this.props.disabled &&
-            this.props.shouldUpdate() &&
-            !this.waitingForClick
-        ) {
-            this.setState({hovered: true});
-        }
-    };
-
-    handleMouseLeave: () => void = () => {
-        if (
-            !this.props.disabled &&
-            this.props.shouldUpdate() &&
-            !this.waitingForClick
-        ) {
-            this.setState({hovered: false});
-        }
-    };
-
-    handleTouchStart: () => void = () => {
-        if (!this.props.disabled && this.props.shouldUpdate()) {
-            this.setState({hovered: true});
-        }
-    };
-
-    handleTouchEnd: () => void = () => {
-        if (!this.props.disabled && this.props.shouldUpdate()) {
-            this.setState({hovered: false});
-            this.waitingForClick = true;
-        }
-    };
-
-    handleMouseDown: () => void = () => {
-        if (!this.props.disabled && this.props.shouldUpdate()) {
-            this.setState({focused: false});
-            this.focusFlag = true;
-        }
-    };
-
-    handleBlur: () => void = () => {
-        if (!this.props.disabled && this.props.shouldUpdate()) {
-            this.setState({focused: false});
-        }
-    };
-
-    handleFocus: () => void = () => {
-        if (!this.props.disabled && this.props.shouldUpdate()) {
-            if (this.focusFlag) {
-                this.focusFlag = false;
-            } else {
-                this.setState({focused: true});
-            }
-        }
-    };
-
-    render(): React.ReactNode {
-        const handlers = {
-            onBlur: this.handleBlur,
-            onClick: this.handleClick,
-            onFocus: this.handleFocus,
-            onMouseDown: this.handleMouseDown,
-            onMouseEnter: this.handleMouseEnter,
-            onMouseLeave: this.handleMouseLeave,
-            onTouchStart: this.handleTouchStart,
-            onTouchEnd: this.handleTouchEnd,
-        } as const;
-
-        const {children} = this.props;
-        return children?.(this.state, handlers) || null;
-    }
-}

package/src/components/json-editor.tsx

@@ -1,121 +0,0 @@
-/* eslint-disable @babel/no-invalid-this */
-/* eslint-disable react/no-unsafe */
-/* eslint-disable react/sort-comp */
-import createReactClass from "create-react-class";
-import * as React from "react";
-import _ from "underscore";
-
-const JsonEditor: any = createReactClass({
-    displayName: "JsonEditor",
-
-    getInitialState: function () {
-        return {
-            currentValue: JSON.stringify(this.props.value, null, 4),
-            valid: true,
-        };
-    },
-
-    UNSAFE_componentWillReceiveProps: function (nextProps) {
-        const shouldReplaceContent =
-            !this.state.valid ||
-            !_.isEqual(nextProps.value, JSON.parse(this.state.currentValue));
-
-        if (shouldReplaceContent) {
-            this.setState(this.getInitialState());
-        }
-    },
-
-    render: function () {
-        const classes =
-            "perseus-json-editor " + (this.state.valid ? "valid" : "invalid");
-
-        return (
-            <textarea
-                className={classes}
-                value={this.state.currentValue}
-                onChange={this.handleChange}
-                onKeyDown={this.handleKeyDown}
-                onBlur={this.handleBlur}
-            />
-        );
-    },
-
-    handleKeyDown: function (e) {
-        // This handler allows the tab character to be entered by pressing
-        // tab, instead of jumping to the next (non-existant) field
-        if (e.key === "Tab") {
-            const cursorPos = e.target.selectionStart;
-            const v = e.target.value;
-            const textBefore = v.substring(0, cursorPos);
-            const textAfter = v.substring(cursorPos, v.length);
-            e.target.value = textBefore + "    " + textAfter;
-            e.target.selectionStart = textBefore.length + 4;
-            e.target.selectionEnd = textBefore.length + 4;
-
-            e.preventDefault();
-            this.handleChange(e);
-        }
-    },
-
-    handleChange: function (e) {
-        const nextString = e.target.value;
-        try {
-            let json = JSON.parse(nextString);
-            // Some extra handling to allow copy-pasting from /api/vi
-            if (_.isString(json)) {
-                json = JSON.parse(json);
-            }
-            // This callback unfortunately causes multiple renders,
-            // but seems to be necessary to avoid componentWillReceiveProps
-            // being called before setState has gone through
-            this.setState(
-                {
-                    currentValue: nextString,
-                    valid: true,
-                },
-                function () {
-                    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                    this.props.onChange(json);
-                },
-            );
-        } catch (ex: any) {
-            this.setState({
-                currentValue: nextString,
-                valid: false,
-            });
-        }
-    },
-
-    // You can type whatever you want as you're typing, but if it's not valid
-    // when you blur, it will revert to the last valid value.
-    handleBlur: function (e) {
-        const nextString = e.target.value;
-        try {
-            let json = JSON.parse(nextString);
-            // Some extra handling to allow copy-pasting from /api/vi
-            if (_.isString(json)) {
-                json = JSON.parse(json);
-            }
-            // This callback unfortunately causes multiple renders,
-            // but seems to be necessary to avoid componentWillReceiveProps
-            // being called before setState has gone through
-            this.setState(
-                {
-                    currentValue: JSON.stringify(json, null, 4),
-                    valid: true,
-                },
-                function () {
-                    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                    this.props.onChange(json);
-                },
-            );
-        } catch (ex: any) {
-            this.setState({
-                currentValue: JSON.stringify(this.props.value, null, 4),
-                valid: true,
-            });
-        }
-    },
-});
-
-export default JsonEditor;

package/src/components/link.ts

@@ -1,173 +0,0 @@
-/**
- * A generic link that removes common link styles.
- *
- * This is useful for wrapping many child components in a link and making sure
- * that "link" styles don't get applied to all you content.
- */
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import type {CSSProperties} from "aphrodite";
-
-// TODO(diedra): This is terrible! If we don't have a href for a link, it should
-// be a button instead. We just need to make sure we override the default browser
-// button styling (backgroundColor, border, and padding).
-const DEFAULT_HREF = "javascript:void(0)";
-
-type DefaultProps = {
-    element: React.ElementType;
-    // Whether the link should appear in a 'highlighted' state. In
-    // practice, this will apply the same styles that are applied on-hover.
-    highlighted: boolean;
-    href: string;
-    // Pass through styles but also add our own to normalize
-    style: CSSProperties | Array<CSSProperties>;
-};
-
-type Props = DefaultProps & {
-    children?: React.ReactNode;
-    // An additional class name to add. This is supported so-as to allow
-    // Perseus to add class-based styles to links when using this
-    // component as its base link class.
-    className?: string;
-    // Additional direct styles to add.
-    inlineStyles?: {
-        [key: string]: any;
-    };
-    // Optional referrer query parameter to add to the end of the URL, used
-    // for analytics purposes.
-    referrer?: string;
-    // A target window to open a link in
-    target?: string;
-    // The relationship between the linked page and the current page.
-    // Mostly used to prevent abuse from linked sites.
-    rel?: string;
-    // The data-test-id attribute
-    testId?: string;
-    // Specify either an HTML tag (like "a") or a React component (like
-    // React Router's `Link`) to be used as the underlying element.
-
-    onClick?: (e: React.MouseEvent) => unknown;
-    onMouseOver?: (e: React.MouseEvent) => unknown;
-    onMouseLeave?: (e: React.MouseEvent) => unknown;
-    onMouseEnter?: (e: React.MouseEvent) => unknown;
-    onBlur?: (e: React.SyntheticEvent) => unknown;
-    onFocus?: (e: React.SyntheticEvent) => unknown;
-    onKeyDown?: (e: React.KeyboardEvent) => unknown;
-    ["aria-label"]?: string;
-    ["aria-selected"]?: boolean;
-    ["aria-current"]?: boolean;
-    role?: "tab";
-    title?: string;
-    id?: string;
-    tabIndex?: number;
-};
-
-/**
- * A wrapper that creates an anchor tag with normalized styles
- */
-class Link extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        highlighted: false,
-        href: DEFAULT_HREF,
-        style: [] as Array<CSSProperties>,
-        element: "a",
-    };
-
-    render(): React.ReactNode {
-        const {
-            children,
-            className,
-            highlighted,
-            href,
-            inlineStyles,
-            referrer,
-            style,
-            target,
-            testId,
-            element,
-            ...otherProps
-        } = this.props;
-
-        // We need to make sure the hash goes at the end of the <a>'s href, so
-        // we'll split for now and re-add after potentially adding ?ref=
-        // Even though we have defined a default prop for href, if href is
-        // set to null, we will still get the null, so we need to handle that.
-        const [hrefWithoutHash, hash] = href ? href.split("#") : [DEFAULT_HREF];
-        let url = hrefWithoutHash;
-
-        if (referrer) {
-            if (url.indexOf("?") > -1) {
-                url += "&ref=" + referrer;
-            } else {
-                url += "?ref=" + referrer;
-            }
-        }
-
-        if (hash) {
-            url += "#" + hash;
-        }
-
-        const delegatedStyles = [
-            styles.link,
-            highlighted && styles.highlighted,
-        ];
-
-        if (Array.isArray(style)) {
-            delegatedStyles.push(...style);
-        } else {
-            delegatedStyles.push(style);
-        }
-
-        const delegatedClassName = className ? " " + className : "";
-
-        // When passing an anchor tag, we want to use the native `href`.
-        // ReactRouter links, though, need a special `to` prop instead.
-        const urlProp = element === "a" ? {href: url} : {to: url};
-
-        // When the link is set to open in a new window, we want to append
-        // some `rel` attributes. This is to ensure that the links we're
-        // sending folks to can't hijack the existing page.
-        // More info: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
-        //
-        // If `rel` is already defined, we assume the caller knows what they're
-        // doing. In the future, we may wish to check what keywords are passed,
-        // and add in `noopener` and `noreferrer`.
-        let rel = otherProps.rel;
-        if (target === "_blank" && !rel) {
-            rel = "noopener noreferrer";
-        }
-
-        return React.createElement(
-            element,
-            {
-                "data-test-id": testId,
-                ...otherProps,
-                ...urlProp,
-                className: css(...delegatedStyles) + delegatedClassName,
-                style: inlineStyles,
-                target,
-                rel,
-            },
-            children,
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    link: {
-        // Remove the gray background color from active links in IE 10
-        // https://necolas.github.io/normalize.css/3.0.2/normalize.css
-        backgroundColor: "transparent",
-        color: "inherit",
-        textDecoration: "none",
-        ":hover": {
-            textDecoration: "underline",
-        },
-    },
-    highlighted: {
-        textDecoration: "underline",
-    },
-});
-
-export default Link;

package/src/components/section-control-button.tsx

@@ -1,53 +0,0 @@
-import {components} from "@khanacademy/perseus";
-import Clickable from "@khanacademy/wonder-blocks-clickable";
-import Color from "@khanacademy/wonder-blocks-color";
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-
-import type {PropsFor} from "@khanacademy/wonder-blocks-core";
-
-const {InlineIcon} = components;
-
-type InlineIconProps = PropsFor<typeof InlineIcon>;
-
-type SectionControlButtonProps = {
-    icon: InlineIconProps;
-    onClick: () => unknown;
-    title: string;
-};
-
-export default class SectionControlButton extends React.Component<SectionControlButtonProps> {
-    render(): React.ReactNode {
-        const {icon, onClick, title} = this.props;
-
-        return (
-            <Clickable
-                className={
-                    "section-control-button " +
-                    "simple-button " +
-                    "simple-button--small "
-                }
-                onClick={(e) => {
-                    e.preventDefault();
-                    onClick();
-                }}
-                role="button"
-                hideDefaultFocusRing={true}
-                aria-label={title}
-                style={styles.button}
-            >
-                {({hovered, focused, pressed}) => <InlineIcon {...icon} />}
-            </Clickable>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    button: {
-        backgroundColor: Color.gold,
-        margin: 2,
-        paddingRight: 10,
-        paddingLeft: 10,
-        paddingBottom: 2,
-    },
-});

package/src/components/segment-count-selector.tsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-import _ from "underscore";
-
-const SegmentCountSelector = ({
-    numSegments = 1,
-    onChange,
-}: {
-    numSegments?: number;
-    onChange: (numSegments: number) => void;
-}) => (
-    <select
-        key="segment-select"
-        value={numSegments}
-        onChange={(e) => {
-            const num = +e.target.value;
-            onChange(num);
-        }}
-    >
-        {_.range(1, 7).map((n) => (
-            <option key={n} value={n}>
-                {`${n} segment${n > 1 ? "s" : ""}`}
-            </option>
-        ))}
-    </select>
-);
-
-export default SegmentCountSelector;

package/src/components/simple-button.tsx

@@ -1,85 +0,0 @@
-/**
- * Provides a simple styled button
- *
- */
-
-import {StyleSheet, css} from "aphrodite";
-import PropTypes from "prop-types";
-import * as React from "react";
-
-class SimpleButton extends React.Component<any> {
-    static propTypes = {
-        children: PropTypes.node,
-        color: PropTypes.oneOf(["orange", "green"]),
-        onClick: PropTypes.func,
-    };
-
-    static defaultProps: any = {
-        children: null,
-        color: "green",
-        onClick: () => {},
-    };
-
-    render(): React.ReactNode {
-        const {children, color, onClick, ...otherProps} = this.props;
-        return (
-            <div
-                className={css(
-                    styles.baseButton,
-                    color === "green" && styles.green,
-                    color === "orange" && styles.orange,
-                )}
-                onClick={onClick}
-                {...otherProps}
-            >
-                {children}
-            </div>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    baseButton: {
-        top: "0",
-        fontSize: "11px",
-        padding: "3px 10px",
-        backgroundRepeat: "repeat-x",
-        borderColor: `
-             rgba(0, 0, 0, 0.1)
-             rgba(0, 0, 0, 0.1)
-             rgba(0, 0, 0, 0.25)
-         `,
-        color: "#ffffff",
-        borderRadius: "3px",
-        lineHeight: "15px",
-        cursor: "pointer",
-        transition: "box-shadow ease-in-out 0.15s",
-        appearance: "none",
-        textDecoration: "none",
-        textAlign: "center",
-        ":hover": {
-            boxShadow: `0 1px 1px rgba(0, 0, 0, 0.35),
-                 inset 0 0 50px 5px rgba(255, 255, 255, 0.2)`,
-        },
-    },
-    green: {
-        border: "1px solid #7fab07",
-        backgroundColor: "#80ac07",
-        backgroundImage: "linear-gradient(to bottom, #8aba08, #719807)",
-        ":hover": {
-            borderBottomColor: "#547105",
-            backgroundColor: "#719807",
-        },
-    },
-    orange: {
-        border: "1px solid #d45704",
-        backgroundColor: "#d55704",
-        backgroundImage: "linear-gradient(to bottom, #e35d04, #c04f03)",
-        ":hover": {
-            borderBottomColor: "#983e03",
-            backgroundColor: "#c04f03",
-        },
-    },
-});
-
-export default SimpleButton;