[benc/remove-json-mode-toggle] Remove JSON mode checkbox from EditorPage

Author: benchristel

packages/perseus-editor/src/__docs__/editor-page-with-storybook-preview.tsx

@@ -31,7 +31,7 @@ const onChangeAction = action("onChange");
 function EditorPageWithStorybookPreview(props: Props) {
     const [previewDevice, setPreviewDevice] =
         React.useState<DeviceType>("phone");
-    const [jsonMode, setJsonMode] = React.useState<boolean | undefined>(false);
+    const [jsonMode, setJsonMode] = React.useState(false);
     const [answerArea, setAnswerArea] = React.useState<
         PerseusAnswerArea | undefined | null
     >();
@@ -50,6 +50,14 @@ function EditorPageWithStorybookPreview(props: Props) {
 
     return (
         <View>
+            <label>
+                Developer JSON Mode:{" "}
+                <input
+                    type="checkbox"
+                    checked={jsonMode}
+                    onChange={(event) => setJsonMode(event.currentTarget.checked)}
+                />
+            </label>
             <EditorPage
                 apiOptions={apiOptions}
                 previewDevice={previewDevice}
@@ -66,9 +74,6 @@ function EditorPageWithStorybookPreview(props: Props) {
                 onChange={(props) => {
                     onChangeAction(props);
 
-                    if ("jsonMode" in props) {
-                        setJsonMode(props.jsonMode);
-                    }
                     if ("answerArea" in props) {
                         setAnswerArea(props.answerArea);
                     }

packages/perseus-editor/src/editor-page.tsx

@@ -132,19 +132,6 @@ class EditorPage extends React.Component<Props, State> {
         this._isMounted = false;
     }
 
-    toggleJsonMode: () => void = () => {
-        this.setState(
-            {
-                json: this.serialize({keepDeletedWidgets: true}),
-            },
-            () => {
-                this.props.onChange({
-                    jsonMode: !this.props.jsonMode,
-                });
-            },
-        );
-    };
-
     updateRenderer() {
         // Some widgets (namely the image widget) like to call onChange before
         // anything has actually been mounted, which causes problems here. We
@@ -237,20 +224,6 @@ class EditorPage extends React.Component<Props, State> {
         return (
             <div id="perseus" className={className}>
                 <div style={{marginBottom: 10}}>
-                    {this.props.developerMode && (
-                        <span>
-                            <label>
-                                {" "}
-                                Developer JSON Mode:{" "}
-                                <input
-                                    type="checkbox"
-                                    checked={this.props.jsonMode}
-                                    onChange={this.toggleJsonMode}
-                                />
-                            </label>{" "}
-                        </span>
-                    )}
-
                     {!this.props.jsonMode && (
                         <ViewportResizer
                             deviceType={this.props.previewDevice}