@khanacademy/perseus-editor 1.1.0 → 2.0.0

package/src/{hint-editor.jsx → hint-editor.tsx}

@@ -1,5 +1,4 @@
 /* eslint-disable @babel/no-invalid-this */
-// @flow
 /**
  * Collection of classes for rendering the hint editor area,
  * hint editor boxes, and hint previews
@@ -8,9 +7,9 @@ import {components, icons} from "@khanacademy/perseus";
 import * as React from "react";
 import _ from "underscore";
 
-import DeviceFramer from "./components/device-framer.jsx";
-import Editor from "./editor.jsx";
-import IframeContentRenderer from "./iframe-content-renderer.jsx";
+import DeviceFramer from "./components/device-framer";
+import Editor from "./editor";
+import IframeContentRenderer from "./iframe-content-renderer";
 
 import type {
     APIOptions,
@@ -24,27 +23,30 @@ import type {
 const {InfoTip, InlineIcon} = components;
 const {iconCircleArrowDown, iconCircleArrowUp, iconPlus, iconTrash} = icons;
 
-type ImageUploader = (file: string, callback: (url: string) => mixed) => mixed;
-
-type HintEditorProps = {|
-    itemId?: string,
-    apiOptions?: APIOptions,
-    className: string,
-    imageUploader?: ImageUploader,
-    showMoveButtons?: boolean,
-    showRemoveButton?: boolean,
-    showTitle?: boolean,
-    content?: ?string,
-    replace?: ?boolean,
-    widgets?: ?WidgetDict,
-    images?: ?ImageDict,
-    isLast: boolean,
-    isFirst: boolean,
-    onMove: (direction: number) => mixed,
-    onRemove: () => mixed,
-    onChange: ChangeHandler,
-    __type?: "hint",
-|};
+type ImageUploader = (
+    file: string,
+    callback: (url: string) => unknown,
+) => unknown;
+
+type HintEditorProps = {
+    itemId?: string;
+    apiOptions?: APIOptions;
+    className: string;
+    imageUploader?: ImageUploader;
+    showMoveButtons?: boolean;
+    showRemoveButton?: boolean;
+    showTitle?: boolean;
+    content?: string | null | undefined;
+    replace?: boolean | null | undefined;
+    widgets?: WidgetDict | null | undefined;
+    images?: ImageDict | null | undefined;
+    isLast: boolean;
+    isFirst: boolean;
+    onMove: (direction: number) => unknown;
+    onRemove: () => unknown;
+    onChange: ChangeHandler;
+    __type?: "hint";
+};
 
 /* Renders a hint editor box
  *
@@ -55,14 +57,14 @@ type HintEditorProps = {|
  *  ~ the move hint up/down arrows
  */
 export class HintEditor extends React.Component<HintEditorProps> {
-    static defaultProps: {|
-        className: string,
-        content: string,
-        replace: boolean,
-        showMoveButtons: boolean,
-        showRemoveButton: boolean,
-        showTitle: boolean,
-    |} = {
+    static defaultProps: {
+        className: string;
+        content: string;
+        replace: boolean;
+        showMoveButtons: boolean;
+        showRemoveButton: boolean;
+        showTitle: boolean;
+    } = {
         className: "",
         content: "",
         replace: false,
@@ -71,28 +73,31 @@ export class HintEditor extends React.Component<HintEditorProps> {
         showRemoveButton: true,
     };
 
-    handleChange: (e: SyntheticInputEvent<>) => void = (
-        e: SyntheticInputEvent<>,
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void = (
+        e: React.ChangeEvent<HTMLInputElement>,
     ) => {
         this.props.onChange({replace: e.target.checked});
     };
 
     focus: () => void = () => {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
         this.refs.editor.focus();
     };
 
     getSaveWarnings: () => any = () => {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
         return this.refs.editor.getSaveWarnings();
     };
 
-    serialize: (options: any) => any = (options: $FlowFixMe) => {
+    serialize: (options?: any) => any = (options: any) => {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
         return this.refs.editor.serialize(options);
     };
 
-    render(): React.Element<"div"> {
+    render(): React.ReactNode {
         return (
             <div className={"perseus-hint-editor " + this.props.className}>
                 {this.props.showTitle && <div className="pod-title">Hint</div>}
@@ -141,6 +146,7 @@ export class HintEditor extends React.Component<HintEditorProps> {
                     )}
                     <input
                         type="checkbox"
+                        // @ts-expect-error [FEI-5003] - TS2322 - Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
                         checked={this.props.replace}
                         onChange={this.handleChange}
                     />
@@ -161,23 +167,23 @@ export class HintEditor extends React.Component<HintEditorProps> {
     }
 }
 
-type CombinedHintEditorProps = {|
-    itemId?: string,
-    apiOptions?: APIOptions,
-    deviceType: DeviceType,
-    imageUploader?: ImageUploader,
-    highlightLint?: boolean,
-    isLast: boolean,
-    isFirst: boolean,
-    hint: Hint,
-    pos: number, // position
-    contentPaths: $ReadOnlyArray<string>,
+type CombinedHintEditorProps = {
+    itemId?: string;
+    apiOptions?: APIOptions;
+    deviceType: DeviceType;
+    imageUploader?: ImageUploader;
+    highlightLint?: boolean;
+    isLast: boolean;
+    isFirst: boolean;
+    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,
-|};
+    previewURL: string;
+    onMove: (direction: number) => unknown;
+    onRemove: () => unknown;
+    onChange: ChangeHandler;
+};
 
 /* A single hint-row containing a hint editor and preview */
 class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
@@ -198,6 +204,7 @@ class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
             this.props.isLast && !/\*\*/.test(this.props.hint.content);
 
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'sendNewData' does not exist on type 'ReactInstance'.
         this.refs.frame.sendNewData({
             type: "hint",
             data: {
@@ -216,20 +223,23 @@ class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
 
     getSaveWarnings = () => {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
         return this.refs.editor.getSaveWarnings();
     };
 
-    serialize = (options: $FlowFixMe) => {
+    serialize = (options: any) => {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
         return this.refs.editor.serialize(options);
     };
 
     focus = () => {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
         this.refs.editor.focus();
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const isMobile =
             this.props.deviceType === "phone" ||
             this.props.deviceType === "tablet";
@@ -277,20 +287,19 @@ class CombinedHintEditor extends React.Component<CombinedHintEditorProps> {
     }
 }
 
-type CombinedHintsEditorProps = {|
-    apiOptions?: APIOptions,
-    deviceType: DeviceType,
-    imageUploader?: ImageUploader,
-    highlightLint?: boolean,
-    hints: $ReadOnlyArray<Hint>,
+type CombinedHintsEditorProps = {
+    apiOptions?: APIOptions;
+    deviceType: DeviceType;
+    imageUploader?: ImageUploader;
+    highlightLint?: boolean;
+    hints: ReadonlyArray<Hint>;
     // URL of the route to show on initial load of the preview frames.
-    previewURL: string,
-    onChange: ChangeHandler,
-
+    previewURL: string;
+    onChange: ChangeHandler;
     // The content ID of the AssessmentItem being edited. It may not be set
     // for non-content library exercise questions.
-    itemId?: string,
-|};
+    itemId?: string;
+};
 
 /* The entire hints editing/preview area
  *
@@ -302,11 +311,11 @@ type CombinedHintsEditorProps = {|
 class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
     static HintEditor: typeof HintEditor = HintEditor;
 
-    static defaultProps: {|
-        highlightLint: boolean,
-        hints: $ReadOnlyArray<any>,
-        onChange: () => void,
-    |} = {
+    static defaultProps: {
+        highlightLint: boolean;
+        hints: ReadonlyArray<any>;
+        onChange: () => void;
+    } = {
         onChange: () => {},
         hints: [],
         highlightLint: false,
@@ -315,12 +324,12 @@ class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
     handleHintChange: (
         i: number,
         newProps: CombinedHintsEditorProps,
-        cb: () => mixed,
+        cb: () => unknown,
         silent: boolean,
     ) => void = (
         i: number,
         newProps: CombinedHintsEditorProps,
-        cb: () => mixed,
+        cb: () => unknown,
         silent: boolean,
     ) => {
         // TODO(joel) - lens
@@ -331,12 +340,15 @@ class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
             newProps,
         );
 
+        // @ts-expect-error [FEI-5003] - TS2740 - Type 'Hint' is missing the following properties from type 'readonly Hint[]': length, concat, join, slice, and 18 more.
         this.props.onChange({hints: hints}, cb, silent);
     };
 
     handleHintRemove: (i: number) => void = (i: number) => {
         const hints = _(this.props.hints).clone();
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'splice' does not exist on type 'Hint'.
         hints.splice(i, 1);
+        // @ts-expect-error [FEI-5003] - TS2322 - Type 'Hint' is not assignable to type 'readonly Hint[]'.
         this.props.onChange({hints: hints});
     };
 
@@ -345,10 +357,14 @@ class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
         dir: number,
     ) => {
         const hints = _(this.props.hints).clone();
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'splice' does not exist on type 'Hint'.
         const hint = hints.splice(i, 1)[0];
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'splice' does not exist on type 'Hint'.
         hints.splice(i + dir, 0, hint);
+        // @ts-expect-error [FEI-5003] - TS2322 - Type 'Hint' is not assignable to type 'readonly Hint[]'.
         this.props.onChange({hints: hints}, () => {
             // eslint-disable-next-line react/no-string-refs
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
             this.refs["hintEditor" + (i + dir)].focus();
         });
     };
@@ -356,10 +372,12 @@ class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
     addHint: () => void = () => {
         const hints = _(this.props.hints)
             .clone()
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'concat' does not exist on type 'Hint'.
             .concat([{content: ""}]);
         this.props.onChange({hints: hints}, () => {
             const i = hints.length - 1;
             // eslint-disable-next-line react/no-string-refs
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
             this.refs["hintEditor" + i].focus();
         });
     };
@@ -369,6 +387,7 @@ class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
             .map((hint, i) => {
                 return _.map(
                     // eslint-disable-next-line react/no-string-refs
+                    // @ts-expect-error [FEI-5003] - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
                     this.refs["hintEditor" + i].getSaveWarnings(),
                     (issue) => "Hint " + (i + 1) + ": " + issue,
                 );
@@ -377,23 +396,22 @@ class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
             .value();
     };
 
-    serialize: (options: any) => $ReadOnlyArray<string> = (
-        options: $FlowFixMe,
-    ) => {
+    serialize: (options?: any) => ReadonlyArray<string> = (options: any) => {
         return this.props.hints.map((hint, i) => {
             return this.serializeHint(i, options);
         });
     };
 
-    serializeHint: (index: number, options: any) => string = (
+    serializeHint: (index: number, options?: any) => string = (
         index: number,
-        options: $FlowFixMe,
+        options: any,
     ): string => {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
         return this.refs["hintEditor" + index].serialize(options);
     };
 
-    render(): React.Element<"div"> {
+    render(): React.ReactNode {
         const {itemId, hints} = this.props;
         const hintElems = _.map(
             hints,
@@ -407,16 +425,24 @@ class CombinedHintsEditor extends React.Component<CombinedHintsEditorProps> {
                         itemId={itemId}
                         hint={hint}
                         pos={i}
+                        // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                         imageUploader={this.props.imageUploader}
                         // eslint-disable-next-line react/jsx-no-bind
+                        // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                         onChange={this.handleHintChange.bind(this, i)}
                         // eslint-disable-next-line react/jsx-no-bind
+                        // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                         onRemove={this.handleHintRemove.bind(this, i)}
                         // eslint-disable-next-line react/jsx-no-bind
+                        // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation. | TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                         onMove={this.handleHintMove.bind(this, i)}
+                        // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                         deviceType={this.props.deviceType}
+                        // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                         apiOptions={this.props.apiOptions}
+                        // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                         highlightLint={this.props.highlightLint}
+                        // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                         previewURL={this.props.previewURL}
                         // TODO(CP-4838): what should be passed here?
                         contentPaths={[]}

package/src/{i18n.jsx → i18n.ts}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * Functions for extracting data from items for use in i18n.
  */
@@ -9,7 +8,8 @@ const {findContentNodesInItem, findHintNodesInItem, inferItemShape} =
     MultiItems;
 
 // Takes a renderer content and parses the markdown for images
-function findImagesInContent(content, images) {
+function findImagesInContent(content: any, images: Array<any>) {
+    // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
     const parsed = PerseusMarkdown.parse(content);
 
     PerseusMarkdown.traverseContent(parsed, function (node) {
@@ -22,7 +22,7 @@ function findImagesInContent(content, images) {
 // Background images in some widgets are annoying to deal with because
 // sometimes the objects aren't full when there isn't an image. So, we do some
 // extra checking to make sure we don't cause an error or push an empty image.
-function handleBackgroundImage(graph, images) {
+function handleBackgroundImage(graph, images: Array<any>) {
     if (graph && graph.backgroundImage && graph.backgroundImage.url) {
         images.push(graph.backgroundImage.url);
     }
@@ -32,7 +32,7 @@ function handleBackgroundImage(graph, images) {
 // widget where they contain a renderer for images by calling
 // findImagesInContent. We don't have to recurse through child widgets, because
 // traverseRendererDeep does that for us.
-function widgetCallback(widgetInfo, images) {
+function widgetCallback(widgetInfo: any, images: Array<any>) {
     if (!widgetInfo.options) {
         return;
     }
@@ -115,13 +115,16 @@ function findImagesInRenderers(renderers) {
 
 // Calls findImagesInContent on all of the different content areas for
 // assessment items
-function findImagesInItemData(itemData: $FlowFixMe): $FlowFixMe {
+function findImagesInItemData(itemData: any): any {
     let renderers = [];
     if (itemData._multi) {
         const shape = inferItemShape(itemData);
+        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'ContentNode' is not assignable to parameter of type 'never'.
         findContentNodesInItem(itemData, shape, (node) => renderers.push(node));
+        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'HintNode' is not assignable to parameter of type 'never'.
         findHintNodesInItem(itemData, shape, (node) => renderers.push(node));
     } else {
+        // @ts-expect-error [FEI-5003] - TS2322 - Type 'any' is not assignable to type 'never'. | TS2322 - Type 'any' is not assignable to type 'never'.
         renderers = [itemData.question, ...itemData.hints];
     }
     return findImagesInRenderers(renderers);
@@ -129,7 +132,7 @@ function findImagesInItemData(itemData: $FlowFixMe): $FlowFixMe {
 
 // Calls findImagesInContent on all of the different content areas for
 // articles
-function findImagesInArticles(perseusContent: $FlowFixMe): $FlowFixMe {
+function findImagesInArticles(perseusContent: any): any {
     return findImagesInRenderers(perseusContent);
 }
 

package/src/{iframe-content-renderer.jsx → iframe-content-renderer.tsx}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * Displays the given content in an iframe, isolating it from the parent page
  *
@@ -16,8 +15,9 @@ import {Log} from "@khanacademy/perseus";
 import * as React from "react";
 
 let nextIframeID = 0;
-const requestIframeData = {};
-const updateIframeHeight = {};
+const requestIframeData: Record<string, any> = {};
+const updateIframeHeight: Record<string, any> = {};
+// @ts-expect-error [FEI-5003] - TS2339 - Property 'iframeDataStore' does not exist on type 'Window & typeof globalThis'.
 window.iframeDataStore = {};
 
 // This is called once after Perseus is loaded and the iframe
@@ -49,29 +49,29 @@ window.addEventListener("message", (event) => {
     }
 });
 
-type Props = {|
+type Props = {
     // The HTML content to render to the iframe
     // content?: string,
 
     // The URL that the iframe should load
-    url: string,
-
+    url: string;
     // The data-* suffix for passing information to the iframe's JS
-    datasetKey: string,
-
+    datasetKey: string;
     // The value of the data-* attribute
-    datasetValue: $FlowFixMe,
-
+    datasetValue: any;
     // Whether to make the iframe's height match its content's height,
     // used to prevent scrolling inside the iframe.
-    seamless: boolean,
-|};
+    seamless: boolean;
+};
 
 class IframeContentRenderer extends React.Component<Props> {
-    _frame: ?HTMLIFrameElement;
+    _frame: HTMLIFrameElement | null | undefined;
+    // @ts-expect-error [FEI-5003] - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
     _isMounted: boolean;
-    _lastData: $FlowFixMe;
+    _lastData: any;
+    // @ts-expect-error [FEI-5003] - TS2564 - Property '_lastHeight' has no initializer and is not definitely assigned in the constructor.
     _lastHeight: number;
+    // @ts-expect-error [FEI-5003] - TS2564 - Property 'iframeID' has no initializer and is not definitely assigned in the constructor.
     iframeID: number;
 
     componentDidMount() {
@@ -87,10 +87,11 @@ class IframeContentRenderer extends React.Component<Props> {
             this.sendNewData(this._lastData);
         };
 
-        updateIframeHeight[this.iframeID] = (height) => {
+        updateIframeHeight[this.iframeID] = (height: any) => {
             this._lastHeight = height;
             if (this._isMounted && this.props.seamless) {
                 // eslint-disable-next-line react/no-string-refs
+                // @ts-expect-error [FEI-5003] - TS2339 - Property 'style' does not exist on type 'ReactInstance'.
                 this.refs.container.style.height = height + "px";
             }
         };
@@ -106,9 +107,11 @@ class IframeContentRenderer extends React.Component<Props> {
     componentDidUpdate(prevProps: Props) {
         if (!this.props.seamless) {
             // eslint-disable-next-line react/no-string-refs
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'style' does not exist on type 'ReactInstance'.
             this.refs.container.style.height = "100%";
         } else {
             // eslint-disable-next-line react/no-string-refs
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'style' does not exist on type 'ReactInstance'.
             this.refs.container.style.height = this._lastHeight + "px";
         }
 
@@ -129,6 +132,7 @@ class IframeContentRenderer extends React.Component<Props> {
         // Don't initialize the iframe until the page has loaded
         if (this._frame) {
             // eslint-disable-next-line react/no-string-refs
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'removeChild' does not exist on type 'ReactInstance'.
             this.refs.container.removeChild(this._frame);
         }
 
@@ -156,12 +160,13 @@ class IframeContentRenderer extends React.Component<Props> {
         }
 
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'appendChild' does not exist on type 'ReactInstance'.
         this.refs.container.appendChild(frame);
 
         this._frame = frame;
     }
 
-    sendNewData(data: $FlowFixMe) {
+    sendNewData(data: any) {
         const frame = this._frame;
         if (this._isMounted && data && frame?.contentWindow) {
             this._lastData = data;
@@ -169,12 +174,13 @@ class IframeContentRenderer extends React.Component<Props> {
             // We can't use JSON.stringify/parse for this because the apiOptions
             // includes the functions GroupMetadataEditor, groupAnnotator,
             // onFocusChange, and onInputError.
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'iframeDataStore' does not exist on type 'Window & typeof globalThis'.
             window.iframeDataStore[this.iframeID] = data;
             frame.contentWindow.postMessage(this.iframeID, "*");
         }
     }
 
-    render(): React.Node {
+    render(): React.ReactNode {
         // eslint-disable-next-line react/no-string-refs
         return <div ref="container" style={{width: "100%", height: "100%"}} />;
     }

package/src/{index.js → index.ts}

@@ -1,24 +1,23 @@
-// @flow
-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";
-export {default as ArticleDiff} from "./diffs/article-diff.jsx";
-export {default as ItemDiff} from "./diffs/item-diff.jsx";
-export {default as StructuredItemDiff} from "./diffs/structured-item-diff.jsx";
-export {default as EditorPage} from "./editor-page.jsx";
-export {default as Editor} from "./editor.jsx";
-export {default as i18n} from "./i18n.jsx";
-export {default as IframeContentRenderer} from "./iframe-content-renderer.jsx";
-export {default as MultiRendererEditor} from "./multirenderer-editor.jsx";
-export {default as StatefulArticleEditor} from "./stateful-article-editor.jsx";
-export {default as StatefulEditorPage} from "./stateful-editor-page.jsx";
+export {default as ArticleEditor} from "./article-editor";
+export {default as DeviceFramer} from "./components/device-framer";
+export {default as ViewportResizer} from "./components/viewport-resizer";
+export {default as ArticleDiff} from "./diffs/article-diff";
+export {default as ItemDiff} from "./diffs/item-diff";
+export {default as StructuredItemDiff} from "./diffs/structured-item-diff";
+export {default as EditorPage} from "./editor-page";
+export {default as Editor} from "./editor";
+export {default as i18n} from "./i18n";
+export {default as IframeContentRenderer} from "./iframe-content-renderer";
+export {default as MultiRendererEditor} from "./multirenderer-editor";
+export {default as StatefulArticleEditor} from "./stateful-article-editor";
+export {default as StatefulEditorPage} from "./stateful-editor-page";
 
 import "./styles/perseus-editor.less";
 
 // eslint-disable-next-line import/order
 import {Widgets} from "@khanacademy/perseus";
-import AllEditors from "./all-editors.js";
-import AllWidgets from "./all-widgets.js";
+import AllEditors from "./all-editors";
+import AllWidgets from "./all-widgets";
 
 Widgets.registerEditors(AllEditors);
 Widgets.registerWidgets(AllWidgets);