@khanacademy/perseus-editor 4.1.4 → 4.1.6

package/src/widgets/label-image/marker.tsx

@@ -1,290 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable react/no-unsafe */
-/**
- * Controlled editor image marker on the question image.
- *
- * Allows to select which label choices are the answers for each marker, using
- * the dropdown component.
- */
-
-import {globalConstants, globalStyles} from "@khanacademy/perseus";
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import Option, {OptionGroup} from "../../components/dropdown-option";
-import FormWrappedTextField from "../../components/form-wrapped-text-field";
-
-import type {MarkerType} from "@khanacademy/perseus";
-
-const {colors, borderRadius} = globalStyles;
-
-type Props = MarkerType & {
-    // The list of possible answer choices.
-    choices: ReadonlyArray<string>;
-    // Callback for when any of the marker props are changed.
-    onChange: (marker: MarkerType) => void;
-    // Callback to remove marker from the question image.
-    onRemove: () => void;
-};
-
-type State = {
-    // Whether answer choices dropdown is shown, controlled by the user clicking
-    // on the marker icon.
-    showDropdown: boolean;
-};
-
-export default class Marker extends React.Component<Props, State> {
-    _marker: HTMLElement | null | undefined;
-
-    constructor(props: Props) {
-        super(props);
-
-        this.state = {
-            showDropdown: false,
-        };
-    }
-
-    componentDidMount() {
-        document.addEventListener("click", this.handleClick, true);
-    }
-
-    UNSAFE_componentWillReceiveProps(nextProps: Props) {
-        const {answers} = this.props;
-
-        // Exclude those answers that are no longer present in choices.
-        const filteredAnswers = answers.filter((answer) =>
-            nextProps.choices.includes(answer),
-        );
-
-        if (JSON.stringify(answers) !== JSON.stringify(filteredAnswers)) {
-            // Update marker on the next frame when these props take affect.
-            // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
-            // eslint-disable-next-line no-restricted-syntax
-            setTimeout(() => this.updateMarker({answers: filteredAnswers}));
-        }
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener("click", this.handleClick, true);
-    }
-
-    openDropdown() {
-        this.setState({showDropdown: true});
-    }
-
-    updateMarker(props: any) {
-        const {answers, label, onChange, x, y} = this.props;
-
-        onChange({
-            answers,
-            label,
-            x,
-            y,
-            // Overwrite with updated prop(s).
-            ...props,
-        });
-    }
-
-    handleClick: (e: MouseEvent) => void = (e: MouseEvent) => {
-        const {showDropdown} = this.state;
-
-        if (this._marker === e.target) {
-            this.setState({showDropdown: !showDropdown});
-        } else if (showDropdown) {
-            // Close dropdown if click event was registered anywhere outside it.
-            if (this._marker && !this._marker.contains(e.target as any)) {
-                // Ensure other listeners are not triggered on click event that
-                // closes the dropdown. A specific case this addresses is when
-                // user clicks on question image to close dropdown, a new marker
-                // will be created, this is bad for usability.
-                e.stopPropagation();
-
-                this.setState({showDropdown: false});
-            }
-        }
-    };
-
-    handleLabelChange: (e: React.ChangeEvent<HTMLInputElement>) => void = (
-        e,
-    ) => {
-        this.updateMarker({label: e.target.value});
-    };
-
-    handleSelectAnswer: (toggleAnswer: string) => void = (
-        toggleAnswer: string,
-    ) => {
-        let {answers} = this.props;
-
-        if (answers.includes(toggleAnswer)) {
-            answers = answers.filter((answer) => answer !== toggleAnswer);
-        } else {
-            answers = [...answers, toggleAnswer];
-        }
-
-        this.updateMarker({answers});
-    };
-
-    render(): React.ReactNode {
-        const {answers, choices, label, onRemove, x, y} = this.props;
-
-        const {showDropdown} = this.state;
-
-        return (
-            <div
-                className={css(
-                    styles.marker,
-                    answers.length > 0 && styles.markerWithAnswers,
-                    showDropdown && styles.markerSelected,
-                )}
-                ref={(node) => (this._marker = node)}
-                style={{
-                    left: `${x}%`,
-                    top: `${y}%`,
-                }}
-                title={
-                    "Click to select marker answers or to delete marker. " +
-                    "Repositioning marker is not implemented."
-                }
-            >
-                {showDropdown && (
-                    <div>
-                        <div
-                            className={css(
-                                styles.dropdownBody,
-                                styles.dropdownPositionWithArrow,
-                            )}
-                        >
-                            <Option value="" onClick={() => onRemove()}>
-                                Delete marker
-                            </Option>
-
-                            <hr className={css(styles.dividerHorizontal)} />
-
-                            <OptionGroup
-                                onSelected={this.handleSelectAnswer}
-                                // TODO(WB-1096): make selectedValues immutable in wonder-blocks
-                                // @ts-expect-error - TS2769 - No overload matches this call.
-                                selectedValues={answers}
-                            >
-                                {choices.map((choice) => (
-                                    <Option key={choice} value={choice}>
-                                        {choice}
-                                    </Option>
-                                ))}
-                            </OptionGroup>
-
-                            <div className={css(styles.labelContainer)}>
-                                <FormWrappedTextField
-                                    placeholder="ARIA label (for screen readers)"
-                                    onChange={this.handleLabelChange}
-                                    value={label}
-                                    width="100%"
-                                />
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </div>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    marker: {
-        position: "absolute",
-
-        boxSizing: "content-box",
-
-        width: 16,
-        height: 16,
-        marginLeft: -8,
-        marginTop: -8,
-
-        cursor: "pointer",
-
-        background:
-            "linear-gradient(to bottom, rgba(33, 36, 44, 0.2), rgba(33, 36, 44, 0.5))",
-
-        border: "solid 2px #ffffff",
-        borderRadius: 16,
-
-        boxShadow: "0 2px 10px 0 rgba(33, 36, 44, 0.1)",
-    },
-
-    markerSelected: {
-        width: 28,
-        height: 28,
-        marginLeft: -12,
-        marginTop: -12,
-
-        border: "none",
-        borderRadius: 28,
-
-        // Render selected marker border as inset.
-        "::before": {
-            content: "''",
-            display: "block",
-
-            width: 20,
-            height: 20,
-            marginLeft: 2,
-            marginTop: 2,
-
-            border: "solid 2px #ffffff",
-            borderRadius: 20,
-        },
-    },
-
-    markerWithAnswers: {
-        background: "#1865f2",
-    },
-
-    dropdownPositionWithArrow: {
-        // Position dropdown to the top right of the marker.
-        left: 46,
-        bottom: -12,
-
-        // With an arrow pointing left towards the marker.
-        "::before": {
-            content: "''",
-            display: "block",
-            position: "absolute",
-
-            width: 0,
-            height: 0,
-            left: -16,
-            bottom: 8,
-
-            borderRight: `solid 16px ${colors.gray98}`,
-            borderTop: "solid 16px transparent",
-            borderBottom: "solid 16px transparent",
-        },
-    },
-
-    labelContainer: {
-        padding: 4,
-    },
-
-    dividerHorizontal: {
-        height: 0,
-        margin: 0,
-
-        border: `solid ${colors.gray85}`,
-        borderWidth: "0 0 1px",
-
-        boxShadow: "none",
-    },
-
-    // TODO (josh): This should probably be its own component, rather than
-    // sharing styles this way.
-    dropdownBody: {
-        position: "absolute",
-        border: "solid 1px rgba(0, 0, 0, 0.1)",
-        zIndex: globalConstants.zindexDropdown,
-        color: colors.gray17,
-        backgroundColor: colors.gray98,
-        borderRadius: borderRadius,
-        maxHeight: 320,
-        cursor: "pointer",
-    },
-});

package/src/widgets/label-image/question-markers.tsx

@@ -1,176 +0,0 @@
-/**
- * Controlled component to display question image and create markers to
- * label image with answers from list of choices.
- */
-
-import {Util, Dependencies, globalStyles} from "@khanacademy/perseus";
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import Marker from "./marker";
-
-import type {MarkerType} from "@khanacademy/perseus";
-
-const {colors, typography} = globalStyles;
-
-type Props = {
-    // The list of possible answers in a specific order.
-    choices: ReadonlyArray<string>;
-    // The question image properties.
-    imageUrl: string;
-    imageWidth: number;
-    imageHeight: number;
-    // The list of markers placed on the question image.
-    markers: ReadonlyArray<MarkerType>;
-    // Callback for when any of markers change.
-    onChange: (markers: ReadonlyArray<MarkerType>) => void;
-};
-
-export default class QuestionMarkers extends React.Component<Props> {
-    _markers: Array<Marker | null | undefined> = [];
-
-    openDropdownForMarkerIndices(indices: ReadonlyArray<number>) {
-        // Open answer selection dropdown for each of the specified markers.
-        indices.forEach((index) => {
-            if (this._markers[index]) {
-                // @ts-expect-error - TS2533 - Object is possibly 'null' or 'undefined'.
-                this._markers[index].openDropdown();
-            }
-        });
-    }
-
-    handleImageDoubleClick: (e: React.MouseEvent) => void = (
-        e: React.MouseEvent,
-    ) => {
-        e.preventDefault();
-
-        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-
-        // Calculate marker position on the question image as percentage offset
-        // rounded to one decimal place.
-        const x =
-            Math.round(((e.clientX - rect.left) / rect.width) * 1000) / 10;
-        const y =
-            Math.round(((e.clientY - rect.top) / rect.height) * 1000) / 10;
-
-        const {markers, onChange} = this.props;
-
-        // Add the new marker to the end of the list.
-        onChange([
-            ...markers,
-            {
-                answers: [],
-                label: "",
-                x,
-                y,
-            },
-        ]);
-    };
-
-    render(): React.ReactNode {
-        const {choices, imageUrl, imageWidth, imageHeight, markers, onChange} =
-            this.props;
-
-        const staticUrl = Dependencies.getDependencies().staticUrl;
-
-        // TODO(michaelpolyak): If a Graphie image is specified, only its SVG
-        // layer will be rendered, as when rendering the full Graphie its
-        // dynamic content may overflow the widget editor, CP-253
-        return (
-            <div>
-                <div className={css(styles.title)}>Markers</div>
-
-                <div className={css(styles.subtitle)}>
-                    {imageUrl ? (
-                        <span>
-                            Double-click on the image to add a marker.
-                            <br />
-                            <br />
-                            Markers are read by screen readers in the order that
-                            you add them here, so add in a logical order for the
-                            learner (e.g. sequentially, clockwise). You can test
-                            order by using keyboard tabbing.
-                        </span>
-                    ) : (
-                        "Upload an image to place markers."
-                    )}
-                </div>
-
-                {imageUrl && (
-                    <div
-                        className={css(styles.markersCanvas)}
-                        style={{
-                            maxWidth: imageWidth,
-                            maxHeight: imageHeight,
-                        }}
-                    >
-                        <img
-                            alt=""
-                            className={css(styles.image)}
-                            src={staticUrl(Util.getRealImageUrl(imageUrl))}
-                            onDoubleClick={this.handleImageDoubleClick}
-                        />
-
-                        {markers.map((marker, index) => (
-                            <Marker
-                                {...marker}
-                                choices={choices}
-                                key={`${marker.x}.${marker.y}`}
-                                // Update marker in the list.
-                                onChange={(marker) =>
-                                    onChange([
-                                        ...markers.slice(0, index),
-                                        marker,
-                                        ...markers.slice(index + 1),
-                                    ])
-                                }
-                                // Remove marker from the list.
-                                onRemove={() =>
-                                    onChange([
-                                        ...markers.slice(0, index),
-                                        ...markers.slice(index + 1),
-                                    ])
-                                }
-                                ref={(node) => (this._markers[index] = node)}
-                            />
-                        ))}
-                    </div>
-                )}
-            </div>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    title: {
-        ...typography.bodyXsmallBold,
-
-        marginBottom: 6,
-
-        color: colors.gray17,
-    },
-
-    subtitle: {
-        ...typography.labelSmall,
-
-        marginBottom: 12,
-
-        color: colors.gray68,
-    },
-
-    markersCanvas: {
-        position: "relative",
-
-        border: "solid 1px rgba(33, 36, 44, 0.16)",
-    },
-
-    image: {
-        // This makes `markersCanvas` have the same height as the image,
-        // enabling to place markers precisely as they're positioned using
-        // percentage offsets.
-        display: "block",
-
-        // Contain question image to the widget editor.
-        maxWidth: "100%",
-    },
-});

package/src/widgets/label-image/select-image.tsx

@@ -1,81 +0,0 @@
-/**
- * Controlled component for selecting the question image, for answer labeling.
- */
-
-import {globalStyles} from "@khanacademy/perseus";
-import Button from "@khanacademy/wonder-blocks-button";
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import FormWrappedTextField from "../../components/form-wrapped-text-field";
-
-const {colors, typography} = globalStyles;
-
-type Props = {
-    // Callback for when image URL is changed.
-    onChange: (url: string) => void;
-    // The selected image URL.
-    url: string;
-};
-
-const SelectImage = ({onChange, url}: Props): React.ReactElement => (
-    <div>
-        <div className={css(styles.title)}>Image</div>
-
-        <div className={css(styles.components)}>
-            <FormWrappedTextField
-                placeholder="URL"
-                grow={1}
-                onChange={(e) => onChange(e.target.value)}
-                value={url}
-            />
-
-            <div className={css(styles.spacer)} />
-
-            <Button
-                // TODO(michaelpolyak): Design calls for uploading an image from
-                // the widget. This functionality already exists in
-                // `perseus-one-package/item-controls.jsx`, it's not obvious if
-                // it can be triggered from within the widget, or requires
-                // a similar implementation locally, in which case consider
-                // refactoring `perseus-admin-package/image-upload-dialog.jsx`
-                // as common utility, CP-118
-                disabled={!url}
-                aria-label={
-                    url
-                        ? ""
-                        : "Not implemented. Use the 'Add Image' button in " +
-                          "the editor to upload image, then copy the URL here."
-                }
-                onClick={() => onChange("")}
-                style={styles.btn}
-            >
-                {url ? "Remove" : "Upload"}
-            </Button>
-        </div>
-    </div>
-);
-
-const styles = StyleSheet.create({
-    title: {
-        ...typography.bodyXsmallBold,
-
-        marginBottom: 6,
-
-        color: colors.gray17,
-    },
-
-    components: {
-        display: "flex",
-    },
-
-    spacer: {
-        width: 16,
-    },
-
-    btn: {
-        minWidth: 90,
-    },
-});
-
-export default SelectImage;