@khanacademy/perseus-editor 2.17.0 → 3.0.0

package/dist/widgets/deprecated-standin-editor.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+type Props = {
+    onChange: (options: any) => void;
+};
+declare class DeprecatedStandinEditor extends React.Component<Props> {
+    static widgetName: "deprecated-standin";
+    serialize(): any;
+    render(): React.ReactNode;
+}
+export default DeprecatedStandinEditor;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.17.0",
+    "version": "3.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -25,7 +25,7 @@
         "@khanacademy/kas": "^0.3.7",
         "@khanacademy/kmath": "^0.1.8",
         "@khanacademy/math-input": "^16.5.0",
-        "@khanacademy/perseus": "^17.8.0",
+        "@khanacademy/perseus": "^18.0.0",
         "@khanacademy/perseus-core": "1.4.1"
     },
     "devDependencies": {

package/src/all-editors.ts

@@ -1,6 +1,7 @@
 import CategorizerEditor from "./widgets/categorizer-editor";
 import CSProgramEditor from "./widgets/cs-program-editor";
 import DefinitionEditor from "./widgets/definition-editor";
+import DeprecatedStandinEditor from "./widgets/deprecated-standin-editor";
 import DropdownEditor from "./widgets/dropdown-editor";
 import ExampleGraphieWidgetEditor from "./widgets/example-graphie-widget-editor";
 import ExampleWidgetEditor from "./widgets/example-widget-editor";
@@ -80,4 +81,5 @@ export default [
     UnitEditor,
     VideoEditor,
     RadioEditor,
+    DeprecatedStandinEditor,
 ];

package/src/components/widget-editor.tsx

@@ -10,33 +10,33 @@ import _ from "underscore";
 
 import SectionControlButton from "./section-control-button";
 
-import type {Alignment, WidgetInfo} from "@khanacademy/perseus";
+import type {Alignment, PerseusWidget} from "@khanacademy/perseus";
 
-const {InlineIcon, PropCheckBox} = components;
+const {InlineIcon} = components;
 const {iconChevronDown, iconChevronRight, iconTrash} = icons;
 
 type WidgetEditorProps = {
     // Unserialized props
     id: string;
     onChange: (
-        widgetInfo: WidgetInfo,
+        widgetInfo: PerseusWidget,
         cb?: () => unknown,
         silent?: boolean,
     ) => unknown;
     onRemove: () => unknown;
     apiOptions: any;
-} & WidgetInfo;
+} & PerseusWidget;
 
 type WidgetEditorState = {
     showWidget: boolean;
-    widgetInfo: WidgetInfo;
+    widgetInfo: PerseusWidget;
 };
 
-const _upgradeWidgetInfo = (props: WidgetEditorProps): React.ReactElement => {
+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 - TS2322 - Type 'PerseusWidget' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'. | TS2345 - Argument of type 'Partial<{ id: string; onChange: (widgetInfo: PerseusWidget, cb?: (() => unknown) | undefined, silent?: boolean | undefined) => unknown; onRemove: () => unknown; apiOptions: any; } & CategorizerWidget & { ...; }> | ... 38 more ... | Partial<...>' is not assignable to parameter of type 'PerseusWidget'.
+    // @ts-expect-error TS(2345) Type '"categorizer" | undefined' is not assignable to type '"deprecated-standin"'.
     return Widgets.upgradeWidgetInfoToLatestVersion(filteredProps);
 };
 
@@ -53,14 +53,12 @@ class WidgetEditor extends React.Component<
         super(props);
         this.state = {
             showWidget: false,
-            // @ts-expect-error - TS2322 - Type 'ReactElement<any, any> | null' is not assignable to type 'PerseusWidget'.
             widgetInfo: _upgradeWidgetInfo(props),
         };
     }
 
     // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps(nextProps: WidgetEditorProps) {
-        // @ts-expect-error - TS2322 - Type 'ReactElement<any, any> | null' is not assignable to type 'PerseusWidget'.
         this.setState({widgetInfo: _upgradeWidgetInfo(nextProps)});
     }
 
@@ -77,7 +75,7 @@ class WidgetEditor extends React.Component<
         const newWidgetInfo = Object.assign(
             {},
             this.state.widgetInfo,
-        ) as 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'.
@@ -91,7 +89,7 @@ class WidgetEditor extends React.Component<
         e.preventDefault();
         const newWidgetInfo = Object.assign({}, this.state.widgetInfo, {
             static: !this.state.widgetInfo.static,
-        }) as WidgetInfo;
+        }) as PerseusWidget;
         this.props.onChange(newWidgetInfo);
     };
 
@@ -100,7 +98,7 @@ class WidgetEditor extends React.Component<
         const newWidgetInfo = Object.assign(
             {},
             this.state.widgetInfo,
-        ) as WidgetInfo;
+        ) as PerseusWidget;
         newWidgetInfo.alignment = newAlignment;
         this.props.onChange(newWidgetInfo);
     };
@@ -145,15 +143,6 @@ class WidgetEditor extends React.Component<
 
         const supportsStaticMode = Widgets.supportsStaticMode(widgetInfo.type);
 
-        const isUngradedEnabled = widgetInfo.type === "transformer";
-        const gradedPropBox = (
-            <PropCheckBox
-                label="Graded:"
-                graded={widgetInfo.graded}
-                onChange={this.props.onChange}
-            />
-        );
-
         return (
             <div className="perseus-widget-editor">
                 <div
@@ -214,7 +203,6 @@ class WidgetEditor extends React.Component<
                         (this.state.showWidget ? "enter" : "leave")
                     }
                 >
-                    {isUngradedEnabled && gradedPropBox}
                     {Ed && (
                         <Ed
                             // eslint-disable-next-line react/no-string-refs

package/src/editor.tsx

@@ -25,7 +25,7 @@ import WidgetEditor from "./components/widget-editor";
 import WidgetSelect from "./components/widget-select";
 import TexErrorView from "./tex-error-view";
 
-import type {ChangeHandler, WidgetInfo} from "@khanacademy/perseus";
+import type {ChangeHandler, PerseusWidget} from "@khanacademy/perseus";
 
 // like [[snowman input-number 1]]
 const widgetPlaceholder = "[[\u2603 {id}]]";
@@ -114,7 +114,7 @@ type Props = Readonly<{
     replace?: any;
     placeholder: string;
     widgets: {
-        [name: string]: WidgetInfo;
+        [name: string]: PerseusWidget;
     };
     images: any;
     disabled: boolean;
@@ -141,7 +141,7 @@ type DefaultProps = {
     warnNoWidgets: boolean;
     widgetEnabled: boolean;
     widgets: {
-        [name: string]: WidgetInfo;
+        [name: string]: PerseusWidget;
     };
 };
 
@@ -245,37 +245,35 @@ class Editor extends React.Component<Props, State> {
         clearTimeout(this.deferredChange);
     }
 
-    getWidgetEditor: (id: string, type: string) => undefined | React.ReactNode =
-        (id: string, type: string) => {
-            if (!Widgets.getEditor(type)) {
-                return;
-            }
-            return (
-                <WidgetEditor
-                    // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
-                    key={id}
-                    ref={id}
-                    id={id}
-                    // @ts-expect-error - TS2783 - 'type' is specified more than once, so this usage will be overwritten.
-                    type={type}
-                    // eslint-disable-next-line react/jsx-no-bind
-                    onChange={this._handleWidgetEditorChange.bind(this, id)}
-                    // eslint-disable-next-line react/jsx-no-bind
-                    onRemove={this._handleWidgetEditorRemove.bind(this, id)}
-                    apiOptions={this.props.apiOptions}
-                    {...this.props.widgets[id]}
-                />
-            );
-        };
+    getWidgetEditor(
+        id: string,
+        type: PerseusWidget["type"],
+    ): undefined | React.ReactNode {
+        if (!Widgets.getEditor(type)) {
+            return;
+        }
+        return (
+            <WidgetEditor
+                ref={id}
+                id={id}
+                // eslint-disable-next-line react/jsx-no-bind
+                onChange={this._handleWidgetEditorChange.bind(this, id)}
+                // eslint-disable-next-line react/jsx-no-bind
+                onRemove={this._handleWidgetEditorRemove.bind(this, id)}
+                apiOptions={this.props.apiOptions}
+                {...this.props.widgets[id]}
+            />
+        );
+    }
 
     _handleWidgetEditorChange: (
         id: string,
-        newWidgetInfo: WidgetInfo,
+        newWidgetInfo: PerseusWidget,
         cb?: () => unknown,
         silent?: boolean,
     ) => void = (
         id: string,
-        newWidgetInfo: WidgetInfo,
+        newWidgetInfo: PerseusWidget,
         cb?: () => unknown,
         silent?: boolean,
     ) => {
@@ -685,14 +683,13 @@ class Editor extends React.Component<Props, State> {
         const newContent = newPrelude + widgetContent + newPostlude;
 
         const newWidgets = _.clone(this.props.widgets);
+        // @ts-expect-error TS(2345) Type '"categorizer" | undefined' is not assignable to type '"deprecated-standin"'.
         newWidgets[id] = {
             options: Widgets.getEditor(widgetType)?.defaultProps,
-            // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"'.
-            type: widgetType,
+            type: widgetType as PerseusWidget["type"],
             // Track widget version on creation, so that a widget editor
             // without a valid version prop can only possibly refer to a
             // pre-versioning creation time.
-            // @ts-expect-error - TS2322 - Type 'Version | null | undefined' is not assignable to type 'Version | undefined'.
             version: Widgets.getVersion(widgetType),
         };
 
@@ -940,7 +937,7 @@ class Editor extends React.Component<Props, State> {
                     const match = Util.rWidgetParts.exec(pieces[i]);
                     if (match != null) {
                         const id = match[1];
-                        const type = match[2];
+                        const type = match[2] as PerseusWidget["type"];
 
                         const selected = false;
                         // TODO(alpert):

package/src/index.ts

@@ -24,4 +24,8 @@ import AllWidgets from "./all-widgets";
 Widgets.registerEditors(AllEditors);
 Widgets.registerWidgets(AllWidgets);
 
+// When it's time to ship transformer's deprecation uncomment
+// Widgets.replaceEditor("transformer", "deprecated-standin");
+// Widgets.replaceWidget("transformer", "deprecatd-standin");
+
 export {AllEditors, AllWidgets};

package/src/util/register-all-widgets-and-editors-for-testing.ts

@@ -11,4 +11,8 @@ import allWidgets from "../all-widgets";
 export const registerAllWidgetsAndEditorsForTesting = () => {
     Widgets.registerWidgets(allWidgets);
     Widgets.registerEditors(allEditors);
+
+    // When it's time to ship transformer's deprecation uncomment
+    // Widgets.replaceEditor("transformer", "deprecated-standin");
+    // Widgets.replaceWidget("transformer", "deprecatd-standin");
 };

package/src/widgets/deprecated-standin-editor.tsx

@@ -0,0 +1,29 @@
+import {EditorJsonify} from "@khanacademy/perseus";
+import * as React from "react";
+
+type Props = {
+    // Callback for when a widget prop is changed.
+    onChange: (options: any) => void;
+};
+
+class DeprecatedStandinEditor extends React.Component<Props> {
+    static widgetName = "deprecated-standin" as const;
+
+    serialize(): any {
+        return EditorJsonify.serialize.call(this);
+    }
+
+    render(): React.ReactNode {
+        return (
+            <div>
+                <p>This widget has been deprecated and removed</p>
+                <p>
+                    Learners will see a message and they will not be graded on
+                    this part. Please replace this widget with a supported one.
+                </p>
+            </div>
+        );
+    }
+}
+
+export default DeprecatedStandinEditor;