@khanacademy/perseus-editor 3.0.1 → 4.1.0

package/src/widgets/__stories__/image-editor.stories.tsx

@@ -0,0 +1,72 @@
+import {ApiOptions} from "@khanacademy/perseus";
+import {View} from "@khanacademy/wonder-blocks-core";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
+import {action} from "@storybook/addon-actions";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+import ImageEditor from "../image-editor";
+
+import type {PropsFor} from "@khanacademy/wonder-blocks-core";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Editor/Widgets/Image Editor",
+} as Story;
+
+const styles = StyleSheet.create({
+    wrapper: {
+        // The maximum width of a widget in the editor.
+        width: 338,
+        margin: 20,
+    },
+});
+
+const onChangeAction = action("onChange");
+
+const WithState = () => {
+    const widgetRef = React.useRef<ImageEditor>(null);
+    const [state, setState] = React.useState<
+        Partial<PropsFor<typeof ImageEditor>>
+    >({
+        backgroundImage: {
+            url: "https://ka-perseus-images.s3.amazonaws.com/2ee5fc32e35c5178373b39fd304b325b2994c913.png",
+        },
+    });
+
+    return (
+        <View style={styles.wrapper}>
+            <LabelSmall
+                style={{fontStyle: "italic", marginBottom: Spacing.small_12}}
+            >
+                <b>Note</b> that this editor has a known-issue where it does not
+                calculate the image dimensions initially if they aren't
+                provided. It does update the dimensions when you blur the 'Image
+                url:' field.
+            </LabelSmall>
+            <ImageEditor
+                {...state}
+                apiOptions={ApiOptions.defaults}
+                onChange={(props) => {
+                    onChangeAction(props);
+
+                    setState({
+                        ...widgetRef.current?.serialize(),
+                        ...props,
+                    });
+                }}
+                ref={widgetRef}
+            />
+        </View>
+    );
+};
+
+export const Default = (args: StoryArgs): React.ReactElement => {
+    return <WithState />;
+};

package/src/widgets/image-editor.tsx

@@ -6,17 +6,18 @@ import {
     EditorJsonify,
     Util,
 } from "@khanacademy/perseus";
-import createReactClass from "create-react-class";
 import * as React from "react";
 import _ from "underscore";
 
 import BlurInput from "../components/blur-input";
 import Editor from "../editor";
 
+import type {APIOptions, Range, Size} from "@khanacademy/perseus";
+
 const {InfoTip, InlineIcon, RangeInput} = components;
 
 const defaultBoxSize = 400;
-const defaultRange = [0, 10];
+const defaultRange = [0, 10] as const;
 const defaultBackgroundImage = {
     url: null,
     width: 0,
@@ -53,46 +54,63 @@ const captionAlignments = [
     "above left",
 ];
 
-const ImageEditor: any = createReactClass({
-    displayName: "ImageEditor",
-
-    propTypes: {
-        ...Changeable.propTypes,
-    },
-
-    statics: {
-        widgetName: "image",
-    },
-
-    componentDidMount: function () {
+type Props = Changeable.ChangeableProps & {
+    apiOptions: APIOptions;
+
+    title: string;
+    range: [Readonly<Range>, Readonly<Range>];
+    box: Size;
+    backgroundImage: any;
+    labels: ReadonlyArray<string>;
+    alt: string;
+    caption: string;
+};
+
+type DefaultProps = {
+    title: NonNullable<Props["title"]>;
+    range: NonNullable<Props["range"]>;
+    box: NonNullable<Props["box"]>;
+    backgroundImage: NonNullable<Props["backgroundImage"]>;
+    labels: NonNullable<Props["labels"]>;
+    alt: NonNullable<Props["alt"]>;
+    caption: NonNullable<Props["caption"]>;
+};
+
+type State = {
+    backgroundImageError?: string;
+};
+
+class ImageEditor extends React.Component<Props> {
+    _isMounted = false;
+
+    static displayName = "ImageEditor";
+    static widgetName = "image";
+
+    static defaultProps: DefaultProps = {
+        title: "",
+        range: [defaultRange, defaultRange],
+        box: [defaultBoxSize, defaultBoxSize],
+        backgroundImage: defaultBackgroundImage,
+        labels: [],
+        alt: "",
+        caption: "",
+    };
+
+    state: State = {
+        backgroundImageError: "",
+    };
+
+    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;
-    },
+    }
 
-    componentWillUnmount: function () {
+    componentWillUnmount() {
         this._isMounted = false;
-    },
-
-    getDefaultProps: function () {
-        return {
-            title: "",
-            range: [defaultRange, defaultRange],
-            box: [defaultBoxSize, defaultBoxSize],
-            backgroundImage: defaultBackgroundImage,
-            labels: [],
-            alt: "",
-            caption: "",
-        };
-    },
-
-    getInitialState: function () {
-        return {
-            backgroundImageError: "",
-        };
-    },
-
-    render: function () {
+    }
+
+    render() {
         const backgroundImage = this.props.backgroundImage;
 
         const imageSettings = (
@@ -183,9 +201,9 @@ const ImageEditor: any = createReactClass({
                 {backgroundImage.url && imageSettings}
             </div>
         );
-    },
+    }
 
-    _renderRowForLabel: function (label, i) {
+    _renderRowForLabel(label, i) {
         return (
             <tr key={i}>
                 <td>
@@ -233,46 +251,46 @@ const ImageEditor: any = createReactClass({
                 </td>
             </tr>
         );
-    },
+    }
 
     change(...args) {
         return Changeable.change.apply(this, args);
-    },
+    }
 
-    removeLabel: function (labelIndex, e) {
+    removeLabel(labelIndex, e) {
         e.preventDefault();
-        const labels = _(this.props.labels).clone();
+        const labels = [...this.props.labels];
         labels.splice(labelIndex, 1);
         this.props.onChange({labels: labels});
-    },
+    }
 
-    onCoordinateChange: function (labelIndex, newCoordinates) {
+    onCoordinateChange(labelIndex, newCoordinates) {
         const labels = this.props.labels.slice();
         labels[labelIndex] = _.extend({}, labels[labelIndex], {
             coordinates: newCoordinates,
         });
         this.props.onChange({labels: labels});
-    },
+    }
 
-    onContentChange: function (labelIndex, e) {
+    onContentChange(labelIndex, e) {
         const newContent = e.target.value;
         const labels = this.props.labels.slice();
         labels[labelIndex] = _.extend({}, labels[labelIndex], {
             content: newContent,
         });
         this.props.onChange({labels: labels});
-    },
+    }
 
-    onAlignmentChange: function (labelIndex, e) {
+    onAlignmentChange(labelIndex, e) {
         const newAlignment = e.target.value;
         const labels = this.props.labels.slice();
         labels[labelIndex] = _.extend({}, labels[labelIndex], {
             alignment: newAlignment,
         });
         this.props.onChange({labels: labels});
-    },
+    }
 
-    setUrl: function (url, width, height, silent) {
+    setUrl(url, width, height, silent) {
         // Because this calls into WidgetEditor._handleWidgetChange, which
         // checks for this widget's ref to serialize it.
         //
@@ -295,15 +313,12 @@ const ImageEditor: any = createReactClass({
             null,
             silent,
         );
-    },
+    }
 
     // silently load the image when the component mounts
     // silently update url and sizes when the image loads
     // noisily load the image in response to the author changing it
-    onUrlChange: async function (
-        url: string | undefined | null,
-        silent: boolean,
-    ) {
+    async onUrlChange(url: string | undefined | null, silent: boolean) {
         // Check if we've been passed something that looks like a URL
         if (!url) {
             this.setUrl(url, 0, 0, silent);
@@ -336,17 +351,17 @@ const ImageEditor: any = createReactClass({
                 )}`,
             });
         }
-    },
+    }
 
-    onRangeChange: function (type, newRange) {
+    onRangeChange(type, newRange) {
         const range = this.props.range.slice();
         range[type] = newRange;
         this.props.onChange({range: range});
-    },
+    }
 
     serialize() {
         return EditorJsonify.serialize.call(this);
-    },
-});
+    }
+}
 
 export default ImageEditor;

package/src/widgets/interaction-editor/mathquill-input.tsx

@@ -46,7 +46,7 @@ export default function MathquillInput(props: Props) {
                                 props.onChange(value);
                             }
                         },
-                        upOutOf: (mathField) => {
+                        upOutOf: (mathField: MathFieldInterface) => {
                             // This handler is called when the user presses the up
                             // arrow key, but there is nowhere in the expression to go
                             // up to (no numerator or exponent). For ease of use,