@khanacademy/perseus-editor 0.1.2 → 0.3.0

package/package.json

@@ -1,10 +1,19 @@
 {
+    "name": "@khanacademy/perseus-editor",
+    "description": "Perseus editors",
+    "author": "Khan Academy",
+    "license": "MIT",
+    "version": "0.3.0",
     "publishConfig": {
         "access": "public"
     },
-    "name": "@khanacademy/perseus-editor",
-    "version": "0.1.2",
-    "description": "Perseus editors",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Khan/perseus-editor.git"
+    },
+    "bugs": {
+        "url": "https://github.com/Khan/perseus/issues"
+    },
     "module": "dist/es/index.js",
     "main": "dist/index.js",
     "source": "src/index.js",
@@ -12,7 +21,7 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/perseus": "^0.2.1"
+        "@khanacademy/perseus": "^0.2.4"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-i18n": "^1.2.3",
@@ -37,6 +46,5 @@
         "react-dom": "16.14.0",
         "underscore": "^1.4.4"
     },
-    "author": "",
-    "license": "MIT"
+    "keywords": []
 }

package/src/article-editor.jsx

@@ -47,8 +47,9 @@ type DefaultProps = {|
 type PerseusArticleEditorProps = {|
     ...DefaultProps,
     apiOptions?: APIOptions,
-    frameSource: string,
     imageUploader?: (string, (string) => mixed) => mixed,
+    // URL of the route to show on initial load of the preview frames.
+    previewURL: string,
     ...Changeable.ChangeableProps,
 |};
 
@@ -285,10 +286,10 @@ export default class ArticleEditor extends React.Component<
                 <IframeContentRenderer
                     ref={"frame-" + i}
                     key={this.props.screen}
-                    content={this.props.frameSource}
                     datasetKey="mobile"
                     datasetValue={isMobile}
                     seamless={nochrome}
+                    url={this.props.previewURL}
                 />
             </DeviceFramer>
         );

package/src/components/link.jsx

@@ -8,13 +8,13 @@
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
+import type {CSSProperties} from "aphrodite";
+
 // TODO(diedra): This is terrible! If we don't have a href for a link, it should
 // be a button instead. We just need to make sure we override the default browser
 // button styling (backgroundColor, border, and padding).
 const DEFAULT_HREF = "javascript:void(0)";
 
-type AphroditeStyle = any;
-
 type DefaultProps = {|
     element: string | React.AbstractComponent<any>,
     // Whether the link should appear in a 'highlighted' state. In
@@ -22,7 +22,7 @@ type DefaultProps = {|
     highlighted: boolean,
     href: string,
     // Pass through styles but also add our own to normalize
-    style: AphroditeStyle | Array<AphroditeStyle>,
+    style: CSSProperties | Array<CSSProperties>,
 |};
 
 type LinkProps = {|
@@ -70,7 +70,7 @@ class Link extends React.Component<LinkProps> {
     static defaultProps: DefaultProps = {
         highlighted: false,
         href: DEFAULT_HREF,
-        style: ([]: Array<AphroditeStyle>),
+        style: ([]: Array<CSSProperties>),
         element: "a",
     };
 

package/src/editor-page.jsx

@@ -63,6 +63,9 @@ type Props = {|
 
     // Initial value of the question being edited
     question?: $FlowFixMe,
+
+    // URL of the route to show on initial load of the preview frames.
+    previewURL: string,
 |};
 
 type PerseusJson = {|
@@ -325,7 +328,7 @@ class EditorPage extends React.Component<Props, State> {
                         gradeMessage={this.state.gradeMessage}
                         deviceType={this.props.previewDevice}
                         apiOptions={deviceBasedApiOptions}
-                        frameSource={this.props.frameSource}
+                        previewURL={this.props.previewURL}
                     />
                 )}
 
@@ -339,7 +342,7 @@ class EditorPage extends React.Component<Props, State> {
                         onChange={this.handleChange}
                         deviceType={this.props.previewDevice}
                         apiOptions={deviceBasedApiOptions}
-                        frameSource={this.props.frameSource}
+                        previewURL={this.props.previewURL}
                         highlightLint={this.state.highlightLint}
                     />
                 )}

package/src/hint-editor.jsx

@@ -165,7 +165,6 @@ type CombinedHintEditorProps = {|
     itemId?: string,
     apiOptions?: APIOptions,
     deviceType: DeviceType,
-    frameSource: string,
     imageUploader?: ImageUploader,
     highlightLint?: boolean,
     isLast: boolean,
@@ -173,6 +172,8 @@ type CombinedHintEditorProps = {|
     hint: Hint,
     pos: number, // position
     contentPaths: $ReadOnlyArray<string>,
+    // URL of the route to show on initial load of the preview frames.
+    previewURL: string,
     onMove: (direction: number) => mixed,
     onRemove: () => mixed,
     onChange: ChangeHandler,
@@ -264,10 +265,10 @@ class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
                         <IframeContentRenderer
                             // eslint-disable-next-line react/no-string-refs
                             ref="frame"
-                            content={this.props.frameSource}
                             datasetKey="mobile"
                             datasetValue={isMobile}
                             seamless={true}
+                            url={this.props.previewURL}
                         />
                     </DeviceFramer>
                 </div>
@@ -279,10 +280,11 @@ class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
 type CombinedHintsEditorProps = {|
     apiOptions?: APIOptions,
     deviceType: DeviceType,
-    frameSource: string,
     imageUploader?: ImageUploader,
     highlightLint?: boolean,
     hints: $ReadOnlyArray<Hint>,
+    // URL of the route to show on initial load of the preview frames.
+    previewURL: string,
     onChange: ChangeHandler,
 
     // The content ID of the AssessmentItem being edited. It may not be set
@@ -414,8 +416,8 @@ class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
                         onMove={this.handleHintMove.bind(this, i)}
                         deviceType={this.props.deviceType}
                         apiOptions={this.props.apiOptions}
-                        frameSource={this.props.frameSource}
                         highlightLint={this.props.highlightLint}
+                        previewURL={this.props.previewURL}
                         // TODO(CP-4838): what should be passed here?
                         contentPaths={[]}
                     />

package/src/iframe-content-renderer.jsx

@@ -12,10 +12,7 @@
  * its requestIframeData function in the parent, which triggers the parent to
  * send the current data.
  */
-
 import {Log} from "@khanacademy/perseus";
-import createReactClass from "create-react-class";
-import PropTypes from "prop-types";
 import * as React from "react";
 
 let nextIframeID = 0;
@@ -52,25 +49,32 @@ window.addEventListener("message", (event) => {
     }
 });
 
-const IframeContentRenderer: $FlowFixMe = createReactClass({
-    displayName: "IframeContentRenderer",
+type Props = {|
+    // The HTML content to render to the iframe
+    // content?: string,
+
+    // The URL that the iframe should load
+    url: string,
 
-    propTypes: {
-        // The HTML content to render to the iframe
-        content: PropTypes.string.isRequired,
+    // The data-* suffix for passing information to the iframe's JS
+    datasetKey: string,
 
-        // The data-* suffix for passing information to the iframe's JS
-        datasetKey: PropTypes.any,
+    // The value of the data-* attribute
+    datasetValue: $FlowFixMe,
 
-        // The value of the data-* attribute
-        datasetValue: PropTypes.any,
+    // Whether to make the iframe's height match its content's height,
+    // used to prevent scrolling inside the iframe.
+    seamless: boolean,
+|};
 
-        // Whether to make the iframe's height match its content's height,
-        // used to prevent scrolling inside the iframe.
-        seamless: PropTypes.bool,
-    },
+class IframeContentRenderer extends React.Component<Props> {
+    _frame: ?HTMLIFrameElement;
+    _isMounted: boolean;
+    _lastData: $FlowFixMe;
+    _lastHeight: number;
+    iframeID: number;
 
-    componentDidMount: function () {
+    componentDidMount() {
         // TODO(scottgrant): This is a hack to remove the deprecated call to
         // this.isMounted() but is still considered an anti-pattern.
         this._isMounted = true;
@@ -90,17 +94,16 @@ const IframeContentRenderer: $FlowFixMe = createReactClass({
                 this.refs.container.style.height = height + "px";
             }
         };
-    },
+    }
 
-    shouldComponentUpdate: function (nextProps) {
+    shouldComponentUpdate(nextProps: Props): boolean {
         return (
-            nextProps.content !== this.props.content ||
             nextProps.datasetValue !== this.props.datasetValue ||
             nextProps.seamless !== this.props.seamless
         );
-    },
+    }
 
-    componentDidUpdate: function (prevProps) {
+    componentDidUpdate(prevProps: Props) {
         if (!this.props.seamless) {
             // eslint-disable-next-line react/no-string-refs
             this.refs.container.style.height = "100%";
@@ -109,41 +112,38 @@ const IframeContentRenderer: $FlowFixMe = createReactClass({
             this.refs.container.style.height = this._lastHeight + "px";
         }
 
-        if (
-            prevProps.content !== this.props.content ||
-            prevProps.datasetValue !== this.props.datasetValue
-        ) {
+        if (prevProps.datasetValue !== this.props.datasetValue) {
             // Not just a change in seamless
             this._prepareFrame();
         }
-    },
+    }
 
-    componentWillUnmount: function () {
+    componentWillUnmount() {
         requestIframeData[this.iframeID] = null;
         updateIframeHeight[this.iframeID] = null;
 
         this._isMounted = false;
-    },
+    }
 
-    _prepareFrame: function () {
+    _prepareFrame() {
         // Don't initialize the iframe until the page has loaded
         if (this._frame) {
             // eslint-disable-next-line react/no-string-refs
             this.refs.container.removeChild(this._frame);
         }
 
-        this._frame = document.createElement("iframe");
-        this._frame.style.width = "100%";
-        this._frame.style.height = "100%";
+        const frame = document.createElement("iframe");
+        frame.style.width = "100%";
+        frame.style.height = "100%";
+        frame.src = this.props.url;
 
         if (this.props.datasetKey) {
             // If the user has specified a data-* attribute to place on the
             // iframe, we set it here. Right now, this is used to
             // communicate if the iframe should be enabling touch emulation.
-            this._frame.dataset[this.props.datasetKey] =
-                this.props.datasetValue;
+            frame.dataset[this.props.datasetKey] = this.props.datasetValue;
         }
-        this._frame.dataset.id = this.iframeID;
+        frame.dataset.id = String(this.iframeID);
 
         if (this.props.seamless) {
             // The seamless prop is the same as the "nochrome" prop that
@@ -152,50 +152,32 @@ const IframeContentRenderer: $FlowFixMe = createReactClass({
             // for lint indicators in the right margin. We use the dataset
             // as above to pass this information on to the perseus-frame
             // component inside the iframe
-            this._frame.dataset.lintGutter = "true";
+            frame.dataset.lintGutter = "true";
         }
 
-        // To make sure the value of location.href inside the iframe is the
-        // same as the location of the parent, we wait for the iframe to
-        // load before writing contents. Without the wait, the location
-        // inside the iframe becomes "about:blank", which causes problems
-        // with loading $LAB.
-        this._frame.onload = () => {
-            this._frame.onload = null;
-
-            // To prevent an issue with the contents of the iframe not being
-            // loaded properly, where the javascript inside the iframe is
-            // not executed, we push the content window write to the end
-            // of the event queue.
-            // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
-            // eslint-disable-next-line no-restricted-syntax
-            setTimeout(() => {
-                this._frame.contentWindow.document.open();
-                this._frame.contentWindow.document.write(this.props.content);
-                this._frame.contentWindow.document.close();
-            });
-        };
-
         // eslint-disable-next-line react/no-string-refs
-        this.refs.container.appendChild(this._frame);
-    },
+        this.refs.container.appendChild(frame);
+
+        this._frame = frame;
+    }
 
-    sendNewData: function (data) {
-        if (this._isMounted && data && this._frame.contentWindow) {
+    sendNewData(data: $FlowFixMe) {
+        const frame = this._frame;
+        if (this._isMounted && data && frame?.contentWindow) {
             this._lastData = data;
 
             // We can't use JSON.stringify/parse for this because the apiOptions
             // includes the functions GroupMetadataEditor, groupAnnotator,
             // onFocusChange, and onInputError.
             window.iframeDataStore[this.iframeID] = data;
-            this._frame.contentWindow.postMessage(this.iframeID, "*");
+            frame.contentWindow.postMessage(this.iframeID, "*");
         }
-    },
+    }
 
-    render: function () {
+    render(): React.Node {
         // eslint-disable-next-line react/no-string-refs
         return <div ref="container" style={{width: "100%", height: "100%"}} />;
-    },
-});
+    }
+}
 
 export default IframeContentRenderer;

package/src/index.js

@@ -1,6 +1,4 @@
 // @flow
-export * as Perseus from "@khanacademy/perseus";
-
 export {default as ArticleEditor} from "./article-editor.jsx";
 export {default as DeviceFramer} from "./components/device-framer.jsx";
 export {default as ViewportResizer} from "./components/viewport-resizer.jsx";

package/src/item-editor.jsx

@@ -19,12 +19,13 @@ const ITEM_DATA_VERSION = itemDataVersion;
 type Props = {|
     apiOptions?: APIOptions,
     deviceType?: string,
-    frameSource: string,
     gradeMessage?: string,
     imageUploader?: ImageUploader,
     wasAnswered?: boolean,
     question?: $FlowFixMe,
     answerArea?: $FlowFixMe,
+    // URL of the route to show on initial load of the preview frames.
+    previewURL: string,
     onChange: ChangeHandler,
 
     // The content ID of the AssessmentItem being edited. It may not be set
@@ -121,10 +122,10 @@ class ItemEditor extends React.Component<Props> {
                                     // eslint-disable-next-line react/no-string-refs
                                     ref="frame"
                                     key={this.props.deviceType}
-                                    content={this.props.frameSource}
                                     datasetKey="mobile"
                                     datasetValue={isMobile}
                                     seamless={true}
+                                    url={this.props.previewURL}
                                 />
                             </DeviceFramer>
                             <div