@khanacademy/perseus-editor 4.1.5 → 4.1.6

package/src/components/sortable.tsx

@@ -1,187 +0,0 @@
-import createReactClass from "create-react-class";
-import PropTypes from "prop-types";
-import * as React from "react";
-import ReactDOM from "react-dom";
-
-const PT = PropTypes;
-
-// Takes an array of components to sort
-// eslint-disable-next-line react/no-unsafe
-const SortableArea = createReactClass({
-    propTypes: {
-        className: PT.string,
-        components: PT.arrayOf(PT.node).isRequired,
-        onReorder: PT.func.isRequired,
-        style: PT.any,
-        verify: PT.func,
-    },
-    getDefaultProps: function () {
-        return {verify: () => true};
-    },
-    getInitialState: function () {
-        return {
-            // index of the component being dragged
-            dragging: null,
-            components: this.props.components,
-        };
-    },
-    // Firefox refuses to drag an element unless you set data on it. Hackily
-    // add data each time an item is dragged.
-    componentDidMount: function () {
-        this._setDragEvents();
-    },
-    // eslint-disable-next-line react/no-unsafe
-    UNSAFE_componentWillReceiveProps: function (nextProps) {
-        this.setState({components: nextProps.components});
-    },
-    componentDidUpdate: function () {
-        this._setDragEvents();
-    },
-    // Alternatively send each handler to each component individually,
-    // partially applied
-    onDragStart: function (startIndex) {
-        this.setState({dragging: startIndex});
-    },
-    onDrop: function () {
-        // tell the parent component
-        this.setState({dragging: null});
-        this.props.onReorder(this.state.components);
-    },
-    onDragEnter: function (enterIndex) {
-        // When a label is first dragged it triggers a dragEnter with itself,
-        // which we don't care about.
-        if (this.state.dragging === enterIndex) {
-            return;
-        }
-
-        const newComponents = this.state.components.slice();
-
-        // splice the tab out of its old position
-        const removed = newComponents.splice(this.state.dragging, 1);
-        // ... and into its new position
-        newComponents.splice(enterIndex, 0, removed[0]);
-
-        const verified = this.props.verify(newComponents);
-        if (verified) {
-            this.setState({
-                dragging: enterIndex,
-                components: newComponents,
-            });
-        }
-        return verified;
-    },
-    _listenEvent: function (e) {
-        e.dataTransfer.setData("hackhackhack", "because browsers!");
-    },
-    _cancelEvent: function (e) {
-        // prevent the browser from redirecting to 'because browsers!'
-        e.preventDefault();
-    },
-    _setDragEvents: function () {
-        this._dragItems = this._dragItems || [];
-        const items =
-            // @ts-expect-error - TS2531 - Object is possibly 'null'
-            ReactDOM.findDOMNode(this).querySelectorAll("[draggable=true]");
-
-        const oldItems: Array<HTMLElement> = [];
-        const newItems: Array<HTMLElement> = [];
-
-        for (let i = 0; i < this._dragItems.length; i++) {
-            const item = this._dragItems[i];
-            if (items.indexOf(item) < 0) {
-                oldItems.push(item);
-            }
-        }
-
-        for (let i = 0; i < items.length; i++) {
-            const item = items[i];
-            if (this._dragItems.indexOf(item) < 0) {
-                newItems.push(item);
-            }
-        }
-
-        for (let i = 0; i < newItems.length; i++) {
-            const dragItem = newItems[i];
-            dragItem.addEventListener("dragstart", this._listenEvent);
-            dragItem.addEventListener("drop", this._cancelEvent);
-        }
-
-        for (let i = 0; i < oldItems.length; i++) {
-            const dragItem = oldItems[i];
-            dragItem.removeEventListener("dragstart", this._listenEvent);
-            dragItem.removeEventListener("drop", this._cancelEvent);
-        }
-    },
-    render: function () {
-        const sortables = this.state.components.map((component, index) => (
-            <SortableItem
-                index={index}
-                component={component}
-                area={this}
-                key={component.key}
-                draggable={component.props.draggable}
-                dragging={index === this.state.dragging}
-            />
-        ));
-        return (
-            <ol className={this.props.className} style={this.props.style}>
-                {sortables}
-            </ol>
-        );
-    },
-});
-
-// An individual sortable item
-const SortableItem = createReactClass({
-    propTypes: {
-        area: PT.shape({
-            onDragEnter: PT.func.isRequired,
-            onDragStart: PT.func.isRequired,
-            onDrop: PT.func.isRequired,
-        }),
-        component: PT.node.isRequired,
-        dragging: PT.bool.isRequired,
-        draggable: PT.bool.isRequired,
-        index: PT.number.isRequired,
-    },
-    handleDragStart: function (e) {
-        e.nativeEvent.dataTransfer.effectAllowed = "move";
-        this.props.area.onDragStart(this.props.index);
-    },
-    handleDrop: function () {
-        this.props.area.onDrop(this.props.index);
-    },
-    handleDragEnter: function (e) {
-        const verified = this.props.area.onDragEnter(this.props.index);
-        // Ideally this would change the cursor based on whether this is a
-        // valid place to drop.
-        e.nativeEvent.dataTransfer.effectAllowed = verified ? "move" : "none";
-    },
-    handleDragOver: function (e) {
-        // allow a drop by preventing default handling
-        e.preventDefault();
-    },
-    render: function () {
-        let dragState = "sortable-disabled";
-        if (this.props.dragging) {
-            dragState = "sortable-dragging";
-        } else if (this.props.draggable) {
-            dragState = "sortable-enabled";
-        }
-
-        return (
-            <li
-                draggable={this.props.draggable}
-                className={dragState}
-                onDragStart={this.handleDragStart}
-                onDrop={this.handleDrop}
-                onDragEnter={this.handleDragEnter}
-                onDragOver={this.handleDragOver}
-            >
-                {this.props.component}
-            </li>
-        );
-    },
-});
-
-export default SortableArea;

package/src/components/util.ts

@@ -1,38 +0,0 @@
-export function focusWithChromeStickyFocusBugWorkaround(element: Element) {
-    // NOTE(marksandstrom) Chrome sticky focus bug.
-    //
-    // There is a bug in Chrome related to sticky positioning and
-    // focus: When a child of an element with sticky positioning is
-    // focused with the focus() method, the scrollable area
-    // containing that element will scroll to the top (even though
-    // the element is already visble on the page). For a dropdown
-    // this means that the area will be scrolled to the top when
-    // the user interacts with the dropdown (since we actively
-    // manage dropdown header and option focus for keyboard users).
-    //
-    // To work around this bug the `preventScroll` focus option is
-    // used.
-    //
-    // Using `focusOptions` is an experimental browser feature
-    // "that should not be used in production code". However, since
-    // Chrome is the only browser we support that exhibits this
-    // buggy behavior and using `focusOptions` works around the
-    // bug, it is perfectly reasonable to use the feature in this
-    // case. We are not relying on the effect of the
-    // `preventScroll` option otherwise.
-    //
-    // focusOptions documentation:
-    //
-    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
-    //
-    // Note that there could be cases where we want default focus() behavior.
-    // One that comes to mind is a dropdown with a long list of options that
-    // might be rendered off screen when opened. With this workaround the
-    // selected option would not be scrolled into view if the option is near
-    // the end of the list. We're not aware of any uses of the dropdown where
-    // this is an issue, however, so there isn't currently a way to out of the
-    // `preventScroll` behavior.
-
-    // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element'.
-    element.focus({preventScroll: true});
-}

package/src/components/viewport-resizer.tsx

@@ -1,72 +0,0 @@
-/**
- * A component that displays controls for choosing a viewport size.
- * Renders three buttons: "Phone", "Tablet", and "Desktop".
- */
-import {components, constants, icons} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-
-import type {DeviceType} from "@khanacademy/perseus";
-
-const {ButtonGroup, InlineIcon} = components;
-const {devices} = constants;
-const {iconDesktop, iconMobilePhone, iconTablet} = icons;
-
-type Props = {
-    deviceType: DeviceType;
-    onViewportSizeChanged: (arg1: DeviceType) => unknown;
-};
-
-class ViewportResizer extends React.Component<Props> {
-    static propTypes = {
-        // The current device type that is selected.
-        deviceType: PropTypes.string.isRequired,
-        // A callback that is passed (width, height) as the dimensions of the
-        // viewport to resize to.
-        onViewportSizeChanged: PropTypes.func.isRequired,
-    };
-
-    handleChange: (value: DeviceType) => void = (value: DeviceType) => {
-        this.props.onViewportSizeChanged(value);
-    };
-
-    render(): React.ReactNode {
-        const phoneButtonContents = (
-            <span>
-                <InlineIcon {...iconMobilePhone} /> Phone
-            </span>
-        );
-        const tabletButtonContents = (
-            <span>
-                <InlineIcon {...iconTablet} /> Tablet
-            </span>
-        );
-        const desktopButtonContents = (
-            <span>
-                <InlineIcon {...iconDesktop} /> Desktop
-            </span>
-        );
-
-        // TODO(david): Allow input of custom viewport sizes.
-        return (
-            <span className="viewport-resizer">
-                Viewport:{" "}
-                <ButtonGroup
-                    value={this.props.deviceType}
-                    allowEmpty={false}
-                    buttons={[
-                        {value: devices.PHONE, content: phoneButtonContents},
-                        {value: devices.TABLET, content: tabletButtonContents},
-                        {
-                            value: devices.DESKTOP,
-                            content: desktopButtonContents,
-                        },
-                    ]}
-                    onChange={this.handleChange}
-                />
-            </span>
-        );
-    }
-}
-
-export default ViewportResizer;

package/src/components/widget-editor.tsx

@@ -1,222 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-import {
-    components,
-    icons,
-    Widgets,
-    WIDGET_PROP_DENYLIST,
-} from "@khanacademy/perseus";
-import * as React from "react";
-import _ from "underscore";
-
-import SectionControlButton from "./section-control-button";
-
-import type {Alignment, PerseusWidget} from "@khanacademy/perseus";
-
-const {InlineIcon} = components;
-const {iconChevronDown, iconChevronRight, iconTrash} = icons;
-
-type WidgetEditorProps = {
-    // Unserialized props
-    id: string;
-    onChange: (
-        widgetInfo: PerseusWidget,
-        cb?: () => unknown,
-        silent?: boolean,
-    ) => unknown;
-    onRemove: () => unknown;
-    apiOptions: any;
-} & PerseusWidget;
-
-type WidgetEditorState = {
-    showWidget: boolean;
-    widgetInfo: PerseusWidget;
-};
-
-const _upgradeWidgetInfo = (props: WidgetEditorProps): PerseusWidget => {
-    // We can't call serialize here because this.refs.widget
-    // doesn't exist before this component is mounted.
-    const filteredProps = _.omit(props, WIDGET_PROP_DENYLIST);
-    // @ts-expect-error TS(2345) Type '"categorizer" | undefined' is not assignable to type '"deprecated-standin"'.
-    return Widgets.upgradeWidgetInfoToLatestVersion(filteredProps);
-};
-
-// This component handles upgading widget editor props via prop
-// upgrade transforms. Widget editors will always be rendered
-// with all available transforms applied, but the results of those
-// transforms will not be propogated upwards until serialization.
-// eslint-disable-next-line react/no-unsafe
-class WidgetEditor extends React.Component<
-    WidgetEditorProps,
-    WidgetEditorState
-> {
-    constructor(props: WidgetEditorProps) {
-        super(props);
-        this.state = {
-            showWidget: false,
-            widgetInfo: _upgradeWidgetInfo(props),
-        };
-    }
-
-    // eslint-disable-next-line react/no-unsafe
-    UNSAFE_componentWillReceiveProps(nextProps: WidgetEditorProps) {
-        this.setState({widgetInfo: _upgradeWidgetInfo(nextProps)});
-    }
-
-    _toggleWidget = (e: React.SyntheticEvent) => {
-        e.preventDefault();
-        this.setState({showWidget: !this.state.showWidget});
-    };
-
-    _handleWidgetChange = (
-        newProps: WidgetEditorProps,
-        cb: () => unknown,
-        silent: boolean,
-    ) => {
-        const newWidgetInfo = Object.assign(
-            {},
-            this.state.widgetInfo,
-        ) as PerseusWidget;
-        newWidgetInfo.options = Object.assign(
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-            this.refs.widget.serialize(),
-            newProps,
-        );
-        this.props.onChange(newWidgetInfo, cb, silent);
-    };
-
-    _toggleStatic = (e: Event) => {
-        e.preventDefault();
-        const newWidgetInfo = Object.assign({}, this.state.widgetInfo, {
-            static: !this.state.widgetInfo.static,
-        }) as PerseusWidget;
-        this.props.onChange(newWidgetInfo);
-    };
-
-    _handleAlignmentChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {
-        const newAlignment = e.currentTarget.value as Alignment;
-        const newWidgetInfo = Object.assign(
-            {},
-            this.state.widgetInfo,
-        ) as PerseusWidget;
-        newWidgetInfo.alignment = newAlignment;
-        this.props.onChange(newWidgetInfo);
-    };
-
-    getSaveWarnings = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
-        const issuesFunc = this.refs.widget.getSaveWarnings;
-        return issuesFunc ? issuesFunc() : [];
-    };
-
-    serialize = () => {
-        // TODO(alex): Make this properly handle the case where we load json
-        // with a more recent widget version than this instance of Perseus
-        // knows how to handle.
-        const widgetInfo = this.state.widgetInfo;
-        return {
-            type: widgetInfo.type,
-            alignment: widgetInfo.alignment,
-            static: widgetInfo.static,
-            graded: widgetInfo.graded,
-            // eslint-disable-next-line react/no-string-refs
-            // @ts-expect-error - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
-            options: this.refs.widget.serialize(),
-            version: widgetInfo.version,
-        };
-    };
-
-    render(): React.ReactNode {
-        const widgetInfo = this.state.widgetInfo;
-
-        const Ed = Widgets.getEditor(widgetInfo.type);
-        let supportedAlignments: ReadonlyArray<Alignment>;
-        if (this.props.apiOptions.showAlignmentOptions) {
-            supportedAlignments = Widgets.getSupportedAlignments(
-                widgetInfo.type,
-            );
-        } else {
-            // NOTE(kevinb): "default" is not one in `validAlignments` in widgets.js.
-            supportedAlignments = ["default"];
-        }
-
-        const supportsStaticMode = Widgets.supportsStaticMode(widgetInfo.type);
-
-        return (
-            <div className="perseus-widget-editor">
-                <div
-                    className={
-                        "perseus-widget-editor-title " +
-                        (this.state.showWidget ? "open" : "closed")
-                    }
-                >
-                    {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-                    <a
-                        className="perseus-widget-editor-title-id"
-                        href="#"
-                        onClick={this._toggleWidget}
-                    >
-                        {this.props.id}
-                        {this.state.showWidget ? (
-                            <InlineIcon {...iconChevronDown} />
-                        ) : (
-                            <InlineIcon {...iconChevronRight} />
-                        )}
-                    </a>
-
-                    {supportsStaticMode && (
-                        <input
-                            type="button"
-                            // @ts-expect-error - TS2322 - Type '(e: Event) => void' is not assignable to type 'MouseEventHandler<HTMLInputElement>'.
-                            onClick={this._toggleStatic}
-                            className="simple-button--small"
-                            value={
-                                widgetInfo.static
-                                    ? "Unset as static"
-                                    : "Set as static"
-                            }
-                        />
-                    )}
-                    {supportedAlignments.length > 1 && (
-                        <select
-                            className="alignment"
-                            value={widgetInfo.alignment}
-                            onChange={this._handleAlignmentChange}
-                        >
-                            {supportedAlignments.map((alignment) => (
-                                <option key={alignment}>{alignment}</option>
-                            ))}
-                        </select>
-                    )}
-                    <SectionControlButton
-                        icon={iconTrash}
-                        onClick={() => {
-                            this.props.onRemove();
-                        }}
-                        title="Remove image widget"
-                    />
-                </div>
-                <div
-                    className={
-                        "perseus-widget-editor-content " +
-                        (this.state.showWidget ? "enter" : "leave")
-                    }
-                >
-                    {Ed && (
-                        <Ed
-                            // eslint-disable-next-line react/no-string-refs
-                            ref="widget"
-                            onChange={this._handleWidgetChange}
-                            static={widgetInfo.static}
-                            apiOptions={this.props.apiOptions}
-                            {...widgetInfo.options}
-                        />
-                    )}
-                </div>
-            </div>
-        );
-    }
-}
-
-export default WidgetEditor;

package/src/components/widget-select.tsx

@@ -1,48 +0,0 @@
-import {Widgets} from "@khanacademy/perseus";
-import * as React from "react";
-import _ from "underscore";
-
-type WidgetSelectProps = {
-    onChange?: (widgetType: string) => unknown;
-};
-
-class WidgetSelect extends React.Component<WidgetSelectProps> {
-    shouldComponentUpdate() {
-        return false;
-    }
-
-    handleChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {
-        const widgetType = e.currentTarget.value;
-        if (widgetType === "") {
-            // TODO(alpert): Not sure if change will trigger here
-            // but might as well be safe
-            return;
-        }
-        if (this.props.onChange) {
-            this.props.onChange(widgetType);
-        }
-    };
-
-    render(): React.ReactNode {
-        const widgets = Widgets.getPublicWidgets();
-        const orderedWidgetNames = _.sortBy(_.keys(widgets), (name) => {
-            return widgets[name].displayName;
-        });
-        const addWidgetString = "Add a widget\u2026";
-        return (
-            <select value="" onChange={this.handleChange}>
-                <option value="">{addWidgetString}</option>
-                <option disabled>--</option>
-                {_.map(orderedWidgetNames, (name) => {
-                    return (
-                        <option key={name} value={name}>
-                            {widgets[name].displayName}
-                        </option>
-                    );
-                })}
-            </select>
-        );
-    }
-}
-
-export default WidgetSelect;

package/src/diffs/__stories__/perseus-diff-wrapper.tsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-
-type Props = {
-    children: React.ReactNode;
-};
-
-const Wrapper = ({children}: Props): React.ReactElement => {
-    return <div className="perseus-diff">{children}</div>;
-};
-
-export default Wrapper;