EditorPage: Preview only desktop, but note phone and tablet checking using preview tab

Author: jeremywiebe

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

@@ -2,6 +2,7 @@ import {components, ApiOptions, ClassNames} from "@khanacademy/perseus";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import {spacing} from "@khanacademy/wonder-blocks-tokens";
+import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import * as React from "react";
 import invariant from "tiny-invariant";
 import _ from "underscore";
@@ -194,19 +195,21 @@ class EditorPage extends React.Component<Props, State> {
                 >
                     {this.props.developerMode && (
                         <Checkbox
+                            style={{width: 360, marginRight: 30}}
                             label="Developer JSON Mode"
                             checked={this.props.jsonMode}
                             onChange={this.toggleJsonMode}
                         />
                     )}
 
                     {!this.props.jsonMode && (
-                        <ViewportResizer
-                            deviceType={this.props.previewDevice}
-                            onViewportSizeChanged={
-                                this.props.onPreviewDeviceChange
-                            }
-                        />
+                        <View style={{paddingLeft: 15}}>
+                            <LabelSmall>
+                                <em>Note:</em> Please ensure this exercise looks
+                                correct on a phone and tablet by using the
+                                "Preview" tab.
+                            </LabelSmall>
+                        </View>
                     )}
 
                     {!this.props.jsonMode && (
@@ -247,7 +250,6 @@ class EditorPage extends React.Component<Props, State> {
                         onChange={this.handleChange}
                         wasAnswered={this.state.wasAnswered}
                         gradeMessage={this.state.gradeMessage}
-                        deviceType={this.props.previewDevice}
                         apiOptions={deviceBasedApiOptions}
                         previewURL={this.props.previewURL}
                     />

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

@@ -11,15 +11,13 @@ import type {
     APIOptions,
     ImageUploader,
     ChangeHandler,
-    DeviceType,
     PerseusRenderer,
 } from "@khanacademy/perseus";
 
 const ITEM_DATA_VERSION = itemDataVersion;
 
 type Props = {
     apiOptions?: APIOptions;
-    deviceType?: DeviceType;
     gradeMessage?: string;
     imageUploader?: ImageUploader;
     wasAnswered?: boolean;
@@ -107,28 +105,18 @@ class ItemEditor extends React.Component<Props> {
                     </div>
 
                     <div className="perseus-editor-right-cell">
-                        <div id="problemarea">
-                            <DeviceFramer
-                                deviceType={this.props.deviceType}
-                                nochrome={true}
-                            >
-                                <ContentRenderer
-                                    apiOptions={this.props.apiOptions}
-                                    question={this.props.question}
-                                    linterContext={{
-                                        contentType: "exercise",
-                                        highlightLint: true,
-                                        paths: [],
-                                        stack: [],
-                                    }}
-                                />
-                            </DeviceFramer>
-                            <div
-                                id="hintsarea"
-                                className="hintsarea"
-                                style={{display: "none"}}
+                        <DeviceFramer deviceType={"desktop"} nochrome={true}>
+                            <ContentRenderer
+                                apiOptions={this.props.apiOptions}
+                                question={this.props.question}
+                                linterContext={{
+                                    contentType: "exercise",
+                                    highlightLint: true,
+                                    paths: [],
+                                    stack: [],
+                                }}
                             />
-                        </div>
+                        </DeviceFramer>
                     </div>
                 </div>