diff --git a/packages/perseus-editor/src/article-editor.tsx b/packages/perseus-editor/src/article-editor.tsx index 89fbcfbca1..5c9b812940 100644 --- a/packages/perseus-editor/src/article-editor.tsx +++ b/packages/perseus-editor/src/article-editor.tsx @@ -6,6 +6,7 @@ import {components, ApiOptions, iconTrash} from "@khanacademy/perseus"; import {Errors, PerseusError} from "@khanacademy/perseus-core"; +import Banner from "@khanacademy/wonder-blocks-banner"; import * as React from "react"; import _ from "underscore"; @@ -19,7 +20,10 @@ import { iconCircleArrowUp, iconPlus, } from "./styles/icon-paths"; -import {convertDeprecatedWidgets} from "./util/deprecated-widgets/modernize-widgets-utils"; +import { + convertDeprecatedWidgets, + conversionRequired, +} from "./util/deprecated-widgets/modernize-widgets-utils"; import type { APIOptions, @@ -51,6 +55,8 @@ type Props = DefaultProps & { type State = { highlightLint: boolean; json: JsonType; + // Whether the Editor should be warned that the JSON has been converted to modern widgets + conversionWarningRequired: boolean; }; export default class ArticleEditor extends React.Component { static defaultProps: DefaultProps = { @@ -64,11 +70,24 @@ export default class ArticleEditor extends React.Component { constructor(props: Props) { super(props); + + // Check if the json needs to be converted + const conversionWarningRequired = conversionRequired( + props.json as PerseusRenderer, + ); + let json = props.json; + + // Convert the json if needed + if (conversionWarningRequired) { + json = Array.isArray(props.json) + ? props.json.map(convertDeprecatedWidgets) + : convertDeprecatedWidgets(props.json as PerseusRenderer); + } + this.state = { highlightLint: true, - json: Array.isArray(props.json) - ? props.json.map(convertDeprecatedWidgets) - : convertDeprecatedWidgets(props.json as PerseusRenderer), + json, + conversionWarningRequired, }; } @@ -417,6 +436,15 @@ export default class ArticleEditor extends React.Component { render(): React.ReactNode { return (
+ {this.state.conversionWarningRequired && ( +
+ +
+ )} {this.props.mode === "edit" && this._renderEditor()} {this.props.mode === "preview" && this._renderPreviewMode()} diff --git a/packages/perseus-editor/src/editor-page.tsx b/packages/perseus-editor/src/editor-page.tsx index a46c3ca8cc..8c22d4f4e5 100644 --- a/packages/perseus-editor/src/editor-page.tsx +++ b/packages/perseus-editor/src/editor-page.tsx @@ -1,4 +1,5 @@ import {components, ApiOptions, ClassNames} from "@khanacademy/perseus"; +import Banner from "@khanacademy/wonder-blocks-banner"; import * as React from "react"; import _ from "underscore"; @@ -6,7 +7,10 @@ import JsonEditor from "./components/json-editor"; import ViewportResizer from "./components/viewport-resizer"; import CombinedHintsEditor from "./hint-editor"; import ItemEditor from "./item-editor"; -import {convertDeprecatedWidgets} from "./util/deprecated-widgets/modernize-widgets-utils"; +import { + convertDeprecatedWidgets, + conversionRequired, +} from "./util/deprecated-widgets/modernize-widgets-utils"; import type { APIOptions, @@ -59,6 +63,8 @@ type Props = { type State = { json: PerseusItem; + // Whether the Editor should be warned that the JSON has been converted to modern widgets + conversionWarningRequired: boolean; question: PerseusRenderer; gradeMessage: string; wasAnswered: boolean; @@ -88,8 +94,15 @@ class EditorPage extends React.Component { // Convert any widgets that need to be converted to newer widget types let convertedQuestionJson: PerseusRenderer = props.question; + let conversionWarningRequired = false; if (props.question) { - convertedQuestionJson = convertDeprecatedWidgets(props.question); + // Check if the question JSON needs to be converted + conversionWarningRequired = conversionRequired(props.question); + if (conversionWarningRequired) { + convertedQuestionJson = convertDeprecatedWidgets( + props.question, + ); + } } const json = { @@ -102,6 +115,7 @@ class EditorPage extends React.Component { this.state = { // @ts-expect-error - TS2322 - Type 'Pick & Readonly<{ children?: ReactNode; }>, "hints" | "question" | "answerArea" | "itemDataVersion">' is not assignable to type 'PerseusJson'. json: json, + conversionWarningRequired: conversionWarningRequired, gradeMessage: "", wasAnswered: false, highlightLint: true, @@ -246,6 +260,15 @@ class EditorPage extends React.Component { return (
+ {this.state.conversionWarningRequired && ( +
+ +
+ )}
{this.props.developerMode && ( diff --git a/packages/perseus-editor/src/util/deprecated-widgets/modernize-widgets-utils.ts b/packages/perseus-editor/src/util/deprecated-widgets/modernize-widgets-utils.ts index 8876e3f715..6459695403 100644 --- a/packages/perseus-editor/src/util/deprecated-widgets/modernize-widgets-utils.ts +++ b/packages/perseus-editor/src/util/deprecated-widgets/modernize-widgets-utils.ts @@ -14,17 +14,12 @@ const widgetRegExes = [/input-number \d+/]; // We can add more regexes here in t export const convertDeprecatedWidgets = ( json: PerseusRenderer, ): PerseusRenderer => { - // If there's no widgets that require conversion, return the original json - if (!conversionRequired(json)) { - return json; - } - // Currently we're only converting input-number to numeric-input, // But we can add more conversions here in the future return inputNumberToNumericInput(json); }; -const conversionRequired = (json: PerseusRenderer): boolean => { +export const conversionRequired = (json: PerseusRenderer): boolean => { // If there's no content, then there's no conversion required if (!json.content) { return false;