diff --git a/packages/perseus-editor/src/components/widget-editor.tsx b/packages/perseus-editor/src/components/widget-editor.tsx
index 5c4afc53ff..44f9822076 100644
--- a/packages/perseus-editor/src/components/widget-editor.tsx
+++ b/packages/perseus-editor/src/components/widget-editor.tsx
@@ -173,7 +173,10 @@ class WidgetEditor extends React.Component<
href="#"
onClick={this._toggleWidget}
>
- {this.props.id}
+ {this.props.id}{" "}
+ {this.props.id.split(" ")[0] === "input-number"
+ ? " (deprecated)"
+ : ""}
{this.state.showWidget ? (
) : (
diff --git a/packages/perseus-editor/src/widgets/numeric-input-editor.tsx b/packages/perseus-editor/src/widgets/numeric-input-editor.tsx
index aca3deb184..6723c6e6c4 100644
--- a/packages/perseus-editor/src/widgets/numeric-input-editor.tsx
+++ b/packages/perseus-editor/src/widgets/numeric-input-editor.tsx
@@ -121,8 +121,55 @@ class NumericInputEditor extends React.Component {
lastStatus: "wrong",
showOptions: _.map(this.props.answers, () => false),
};
+ const upgradedProps = this.propsUpgrade(this.props); // quickhack for input number
+ this.props.onChange({props, ...upgradedProps}); // upgrade the props
}
+ // Temporary function to upgrade props from the deprecated
+ // InputNumber widget to the new NumericInput widget. This can be removed
+ // once the deprecated InputNumber widget is removed from our content. This should
+ // happen naturally as Content Editors re-save and publish their content.
+ // SIDE NOTE: Ooo interesting, I wonder if we could build a script to auto re-publish all content somehow.
+ propsUpgrade = (initialProps: any): PerseusNumericInputWidgetOptions => {
+ console.log(initialProps);
+ if (initialProps.value) {
+ console.log("Upgrading props for input-number");
+ let provideAnswerForm = true;
+ if (
+ initialProps.value !== "number" &&
+ initialProps.value !== "rational"
+ ) {
+ provideAnswerForm = false;
+ }
+
+ const answers = [
+ {
+ value: initialProps.value,
+ simplify: initialProps.simplify,
+ answerForms: provideAnswerForm
+ ? [initialProps.answerType]
+ : undefined,
+ strict: initialProps.inexact,
+ maxError: initialProps.maxError,
+ status: "correct", // Input-number only allows correct answers
+ message: "",
+ },
+ ];
+
+ return {
+ answers,
+ size: initialProps.size,
+ coefficient: false, // input-number doesn't have a coefficient prop
+ labelText: "", // input-number doesn't have a labelText prop
+ static: false, // static is always false for numeric-input
+ };
+ } else {
+ // Otherwise simply return the initialProps as there's no differences
+ // between v0 and v1 for numeric-input
+ return initialProps;
+ }
+ };
+
change = (...args) => {
return Changeable.change.apply(this, args);
};
diff --git a/packages/perseus/src/widgets.ts b/packages/perseus/src/widgets.ts
index 77a8f4ce97..c807001aef 100644
--- a/packages/perseus/src/widgets.ts
+++ b/packages/perseus/src/widgets.ts
@@ -118,6 +118,8 @@ export const replaceDeprecatedEditors = () => {
replaceEditor("sequence", "deprecated-standin");
replaceEditor("simulator", "deprecated-standin");
replaceEditor("unit-input", "deprecated-standin");
+
+ replaceEditor("input-number", "numeric-input");
};
export const getWidget = (