[cp article-align] Fix some small annoyances with the local article e…

…ditor Summary: The local article editor hasn't gotten any love in a while, so a bunch of things were needlessly annoying and bad. This improves a bunch of small things: - Makes the article editor not continually increase in height(!!!) - Causes the article preview to render immediately - Removes some unnecessary scroll bars from the page and preview iframes - Makes the "phone" view actual render what it looks like on a phone - Defaults to the "phone" view on load, just like the live site - Merges in D40017 to remove the annoying react warning that happened on load - Makes the "add a widget" and "insert template" dropdowns wrap, so they don't overflow into the previews Screenshot: {F936679} Test Plan: - Visit [this local article editor](http://localhost:9000/?article#content=%5B%7B%22content%22%3A%22Here%27s%20the%20type%20of%20problem%20you%20might%20see%20on%20the%20AP%20Statistics%20exam%20where%20you%20have%20to%20use%20the%20sampling%20distribution%20of%20a%20sample%20proportion.%22%2C%22images%22%3A%7B%7D%2C%22widgets%22%3A%7B%7D%7D%5D) - See that there's no react warning at load - See that there's no scroll bar on the page because it's not very tall - See that the "add a widget" and "insert template" dropdowns are wrapping because they're too large - See that we've defaulted to the "phone" preview - Compare to https://www.khanacademy.org/devadmin/content/articles/x828ca27e76c58fbc, see that the preview for the text actually looks like the live site phone preview - See that the editor doesn't continually grow every half a second - `make build` - Visit http://localhost:8081/devadmin/content/articles/x828ca27e76c58fbc, see that the article editor still works there Reviewers: alex, joshuan Reviewed By: alex Subscribers: tom, jared Differential Revision: https://phabricator.khanacademy.org/D40018
Khan · Oct 11, 2017 · c7b59c7 · c7b59c7
1 parent 8c7b1e9
commit c7b59c7
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 8 deletions.
diff --git a/react-components b/react-components
diff --git a/src/article-demo.jsx b/src/article-demo.jsx
@@ -119,7 +119,7 @@ const ArticleDemo = React.createClass({
                     <script src="lib/less.js"></script>
                 </head>
                 <body>
-                    <div id="content-container" style="height: 100%">
+                    <div id="content-container">
                     </div>
                     <script src="lib/babel-polyfills.min.js"></script>
                     <script src="lib/jquery.js"></script>

diff --git a/src/article-editor.jsx b/src/article-editor.jsx
@@ -91,7 +91,15 @@ const ArticleEditor = React.createClass({
         };
     },
 
+    componentDidMount: function() {
+        this._updatePreviewFrames();
+    },
+
     componentDidUpdate: function() {
+        this._updatePreviewFrames();
+    },
+
+    _updatePreviewFrames: function() {
         if (this.props.mode === "preview") {
             this.refs["frame-all"].sendNewData({
                 type: "article-all",

diff --git a/src/preview-frame.jsx b/src/preview-frame.jsx
@@ -111,10 +111,15 @@ const PreviewFrame = React.createClass({
 
     render: function() {
         if (this.state.data) {
-            const updatedData = Object.assign(this.state.data, {
+            const updatedData = {
+                ...this.state.data,
                 workAreaSelector: "#workarea",
                 hintsAreaSelector: "#hintsarea",
-            });
+                apiOptions: {
+                    ...this.state.data.apiOptions,
+                    isMobile: this.props.isMobile,
+                },
+            };
 
             const isExercise =
                 this.state.type === "question" || this.state.type === "hint";

diff --git a/src/stateful-article-editor.jsx b/src/stateful-article-editor.jsx
@@ -20,7 +20,7 @@ const StatefulArticleEditor = React.createClass({
             mode: "edit",
             onChange: this.handleChange,
             ref: "editor",
-            screen: "desktop",
+            screen: "phone",
         });
     },
 

diff --git a/stylesheets/local-only/khan-site.css b/stylesheets/local-only/khan-site.css
@@ -3650,9 +3650,6 @@ html,
 body {
   height: 100%;
 }
-body {
-  overflow-y: scroll;
-}
 body {
   font-family: 'Proxima Nova', 'Helvetica', 'Corbel', sans-serif;
   font-size: 14px;

diff --git a/stylesheets/perseus-admin-package/editor.less b/stylesheets/perseus-admin-package/editor.less
@@ -257,6 +257,7 @@
     border-top: 0;
     border-radius: 0 0 @editorBorderRadius @editorBorderRadius;
     display: flex;
+    flex-wrap: wrap;
     padding: @editorPadding/2;
 
     select {