@khanacademy/perseus-editor 1.1.0 → 2.0.0

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

@@ -1,4 +1,3 @@
-// @flow
 /**
  * Editor for a multi-item question.
  *
@@ -19,10 +18,10 @@ import lens from "hubble";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
-import JsonEditor from "./components/json-editor.jsx";
-import SimpleButton from "./components/simple-button.jsx";
-import Editor from "./editor.jsx";
-import {HintEditor} from "./hint-editor.jsx";
+import JsonEditor from "./components/json-editor";
+import SimpleButton from "./components/simple-button";
+import Editor from "./editor";
+import {HintEditor} from "./hint-editor";
 
 import type {
     APIOptions,
@@ -32,7 +31,7 @@ import type {
     // Multi-item item types
     Item,
     // ItemTree is used below, the linter is confused.
-    ItemTree, // eslint-disable-line no-unused-vars
+    ItemTree, // eslint-disable-line @typescript-eslint/no-unused-vars
     ItemObjectNode,
     ItemArrayNode,
     ContentNode,
@@ -53,14 +52,13 @@ const {iconChevronDown, iconTrash} = icons;
 const {MultiRenderer} = MultiItems;
 
 // TODO(CP-4849): figure out when $ReadOnlyArray<number> vs $ReadOnlyArray<string> should be used
-type Path = $ReadOnlyArray<$FlowFixMe>;
-
-type ModeDropdownProps = {|
-    currentMode: EditorMode,
+type Path = ReadonlyArray<any>;
 
+type ModeDropdownProps = {
+    currentMode: EditorMode;
     // A function that takes in a string signifying the mode (ex: "edit")
-    onChange: (mode: EditorMode) => mixed,
-|};
+    onChange: (mode: EditorMode) => unknown;
+};
 
 /**
  * Component that displays the mode dropdown.
@@ -69,17 +67,17 @@ type ModeDropdownProps = {|
  * switch between edit, preview, and dev-only JSON mode.
  */
 class ModeDropdown extends React.Component<ModeDropdownProps> {
-    _handleSelectMode = (event: SyntheticInputEvent<HTMLSelectElement>) => {
+    _handleSelectMode = (event: React.ChangeEvent<HTMLSelectElement>) => {
         if (this.props.onChange) {
             // event.target.value corresponds to the options' values below which
             // are limited to EditorMode, but flow doesn't know that so we have
             // to cast through any here.
-            const value = ((event.target.value: any): EditorMode);
+            const value = event.target.value as EditorMode;
             this.props.onChange(value);
         }
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <label>
                 Mode:{" "}
@@ -133,28 +131,31 @@ function pluralToSingular(str: string) {
  * `_multi` part at the beginning. This is a helper function which takes a path
  * and prepends that key.
  */
-function multiPath(path) {
+function multiPath(path: Path | Array<any>) {
     return ["_multi", ...path];
 }
 
 // Return an h1 if depth=0, h2 if depth=1, etc.
 // NOTE: This component accepts pass-through props.
 type HeaderProps = {
-    depth: number,
-    ...
+    depth: number;
 };
 
-const Header = ({depth, ...props}: HeaderProps) => {
+const Header: React.FC<HeaderProps> = ({
+    depth,
+    ...props
+}): React.ReactElement => {
     const headerLevel = Math.min(depth, 5) + 1;
     const HeaderTag = `h${headerLevel}`;
+    // @ts-expect-error [FEI-5003] - TS2559 - Type '{ children?: ReactNode; }' has no properties in common with type 'IntrinsicAttributes'.
     return <HeaderTag {...props} />;
 };
 
 // Actions is inexact so that we can pass an instance MultiRendererEditor.
 interface Actions {
     addArrayElement: (path: Path, shape: Shape) => void;
-    mergeValueAtPath: (path: Path, newValue: any) => void;
-    setValueAtPath: (path: Path, newValue: any) => void;
+    mergeValueAtPath: (path: Path, newValue?: any) => void;
+    setValueAtPath: (path: Path, newValue?: any) => void;
     moveArrayElementDown: (path: Path) => void;
     moveArrayElementUp: (path: Path) => void;
     removeArrayElement: (path: Path) => void;
@@ -163,19 +164,19 @@ interface Actions {
 // This type is used to define prop types for various nodes.  The S and D type
 // params should match when used, e.g. the prop types for `HintNodeContent` is
 // `NodePropTypes<HintShape, HintNode>`.
-type NodePropTypes<S = Shape, D = ItemTree> = {|
-    shape: S,
-    data: D,
-    path: Path,
-    actions: Actions,
-    apiOptions: APIOptions,
+type NodePropTypes<S = Shape, D = ItemTree> = {
+    shape: S;
+    data: D;
+    path: Path;
+    actions: Actions;
+    apiOptions: APIOptions;
     // For the left-hand column, we use edit mode and leave renderers empty.
     // For the right-hand column, we use preview mode and provide renderers
     // via a MultiRenderer.
     // TODO(CP-4850): figure out how to type this, it appears to be a tree where the
     // leaf nodes could be typed using RendererInterface.
-    renderers?: $FlowFixMe,
-|};
+    renderers?: any;
+};
 
 /**
  * Render a node in the editor tree, given the shape of the target
@@ -191,11 +192,12 @@ type NodePropTypes<S = Shape, D = ItemTree> = {|
  * content. Container nodes, like arrays and objects, render a header above
  * their content.
  */
-const NodeContainer = (props: {|
-    ...NodePropTypes<>,
-    controls?: $ReadOnlyArray<React.Node>,
-    name?: string,
-|}) => {
+const NodeContainer = (
+    props: NodePropTypes & {
+        controls?: ReadonlyArray<React.ReactNode>;
+        name?: string;
+    },
+) => {
     const {
         shape,
         data,
@@ -259,23 +261,24 @@ const NodeContainer = (props: {|
     );
 };
 
-type LeafContainerProps = {|
-    name: string,
-    controls?: React.Node,
-    children?: React.Node,
-    path: Path,
-    shape: Shape,
-|};
-const LeafContainer = ({
+type LeafContainerProps = {
+    name: string;
+    controls?: React.ReactNode;
+    children?: React.ReactNode;
+    path: Path;
+    shape: Shape;
+};
+const LeafContainer: React.FC<LeafContainerProps> = ({
     name,
     controls,
     children,
     path,
     shape,
-}: LeafContainerProps) => {
+}): React.ReactElement => {
     const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
     const previewHeading = hasPreviewHeading && (
         <div className={css(styles.containerHeader)}>
+            {/* @ts-expect-error [FEI-5003] - TS2322 - Type '{ children: string; depth: number; className: string; }' is not assignable to type 'IntrinsicAttributes & HeaderProps & { children?: ReactNode; }'. */}
             <Header depth={path.length} className={css(styles.containerTitle)}>
                 {capitalize(name)}
             </Header>
@@ -303,15 +306,17 @@ interface ArrayContainerActions {
     addArrayElement: (path: Path, shape: Shape) => void;
 }
 
-type ArrayContainerProps = {|
-    name: string,
-    controls?: React.Node,
-    children?: React.Node,
-    path: Path,
-    shape: ArrayShape,
-    actions: ArrayContainerActions,
-|};
-const ArrayContainer = (props: ArrayContainerProps) => {
+type ArrayContainerProps = {
+    name: string;
+    controls?: React.ReactNode;
+    children?: React.ReactNode;
+    path: Path;
+    shape: ArrayShape;
+    actions: ArrayContainerActions;
+};
+const ArrayContainer: React.FC<ArrayContainerProps> = (
+    props,
+): React.ReactElement => {
     const {name, controls, children, path, shape, actions} = props;
     return (
         <div className={css(styles.container)}>
@@ -336,20 +341,21 @@ const ArrayContainer = (props: ArrayContainerProps) => {
     );
 };
 
-type ObjectContainerProps = {|
-    name: string,
-    controls?: React.Node,
-    children?: React.Node,
-    path: Path,
-|};
-const ObjectContainer = ({
+type ObjectContainerProps = {
+    name: string;
+    controls?: React.ReactNode;
+    children?: React.ReactNode;
+    path: Path;
+};
+const ObjectContainer: React.FC<ObjectContainerProps> = ({
     name,
     controls,
     children,
     path,
-}: ObjectContainerProps) => {
+}): React.ReactElement => {
     const headingEditor = (
         <div className={css(styles.containerHeader)}>
+            {/* @ts-expect-error [FEI-5003] - TS2322 - Type '{ children: string; depth: number; className: string; }' is not assignable to type 'IntrinsicAttributes & HeaderProps & { children?: ReactNode; }'. */}
             <Header depth={path.length} className={css(styles.containerTitle)}>
                 {capitalize(name)}
             </Header>
@@ -363,6 +369,7 @@ const ObjectContainer = ({
                 styles.previewCollectionHeader,
             )}
         >
+            {/* @ts-expect-error [FEI-5003] - TS2322 - Type '{ children: string; depth: number; className: string; }' is not assignable to type 'IntrinsicAttributes & HeaderProps & { children?: ReactNode; }'. */}
             <Header depth={path.length} className={css(styles.containerTitle)}>
                 {capitalize(name)}
             </Header>
@@ -397,7 +404,7 @@ const ObjectContainer = ({
  * iterates over the child nodes, and outputs `NodeContainer` for
  * each of them. The two functions are mutually recursive.
  */
-const NodeContent = (props: NodePropTypes<>) => {
+const NodeContent = (props: NodePropTypes) => {
     const {shape, data, ...restProps} = props;
 
     // All uses of `data` have been cast through any which isn't safe. This was
@@ -409,7 +416,7 @@ const NodeContent = (props: NodePropTypes<>) => {
         return (
             <ItemNodeContent
                 shape={shape}
-                data={((data: any): ContentNode)}
+                data={data as ContentNode}
                 {...restProps}
             />
         );
@@ -418,7 +425,7 @@ const NodeContent = (props: NodePropTypes<>) => {
         return (
             <HintNodeContent
                 shape={shape}
-                data={((data: any): HintNode)}
+                data={data as HintNode}
                 {...restProps}
             />
         );
@@ -427,7 +434,7 @@ const NodeContent = (props: NodePropTypes<>) => {
         return (
             <TagsNodeContent
                 shape={shape}
-                data={((data: any): TagsNode)}
+                data={data as TagsNode}
                 {...restProps}
             />
         );
@@ -436,7 +443,7 @@ const NodeContent = (props: NodePropTypes<>) => {
         return (
             <ArrayNodeContent
                 shape={shape}
-                data={((data: any): ItemArrayNode)}
+                data={data as ItemArrayNode}
                 {...restProps}
             />
         );
@@ -445,7 +452,7 @@ const NodeContent = (props: NodePropTypes<>) => {
         return (
             <ObjectNodeContent
                 shape={shape}
-                data={((data: any): ItemObjectNode)}
+                data={data as ItemObjectNode}
                 {...restProps}
             />
         );
@@ -453,16 +460,11 @@ const NodeContent = (props: NodePropTypes<>) => {
     return null;
 };
 
-type WithStickinessProps = {|
-    sticky: boolean,
-|};
-
-type WithStickiness<T> = {|
-    ...$Exact<T>,
-    ...WithStickinessProps,
-|};
+type WithStickinessProps = {
+    sticky: boolean;
+};
 
-type WithoutStickiness<T> = $Exact<$Rest<T, WithStickinessProps>>;
+type WithStickiness<T> = T & WithStickinessProps;
 
 /**
  * HOC that adds a "sticky" prop to the wrapped component that is true
@@ -473,14 +475,17 @@ type WithoutStickiness<T> = $Exact<$Rest<T, WithStickinessProps>>;
  * It does so by polling the height and comparing it to the window height.
  */
 const withStickiness = <
-    Config: {...},
-    Component: React.ComponentType<WithStickiness<Config>>,
+    Config extends Record<any, any>,
+    Component extends React.ComponentType<WithStickiness<Config>>,
 >(
     WrappedComponent: Component,
-): React.ComponentType<WithoutStickiness<React.ElementConfig<Component>>> => {
-    type State = {|sticky: boolean|};
+): React.ComponentType<Config> => {
+    type State = {
+        sticky: boolean;
+    };
     return class StickyComponent extends React.Component<Config, State> {
-        stickynessTimer: IntervalID;
+        // @ts-expect-error [FEI-5003] - TS2564 - Property 'stickynessTimer' has no initializer and is not definitely assigned in the constructor.
+        stickynessTimer: number;
 
         state = {
             sticky: false,
@@ -489,6 +494,7 @@ const withStickiness = <
         componentDidMount() {
             // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
             // eslint-disable-next-line no-restricted-syntax
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'Timer' is not assignable to type 'number'.
             this.stickynessTimer = setInterval(this.updateStickiness, 1000);
             this.updateStickiness();
         }
@@ -501,8 +507,7 @@ const withStickiness = <
 
         updateStickiness = () => {
             const domNode = ReactDOM.findDOMNode(this);
-            // $FlowFixMe[prop-missing]
-            // $FlowFixMe[incompatible-use]: findDOMNode returns null | Text | Element
+            // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'offsetHeight' does not exist on type 'Element | Text'.
             const height = domNode.offsetHeight;
             const windowHeight = window.innerHeight;
             const sticky = height > windowHeight;
@@ -513,7 +518,7 @@ const withStickiness = <
             }
         };
 
-        render(): React.Node {
+        render(): React.ReactNode {
             return (
                 /**
                  * $FlowFixMe[incompatible-exact]
@@ -521,6 +526,7 @@ const withStickiness = <
                  * Cannot create WrappedComponent element because inexact props
                  * [1] is incompatible with exact WithStickiness [2].
                  */
+                // @ts-expect-error [FEI-5003] - TS2322 - Type 'Readonly<Config> & { sticky: boolean; children?: ReactNode; }' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes<Component, PropsWithChildren<WithStickiness<Config>>>'.
                 <WrappedComponent {...this.props} sticky={this.state.sticky} />
             );
         }
@@ -528,10 +534,7 @@ const withStickiness = <
 };
 
 const ItemNodeContent = withStickiness(
-    (props: {|
-        ...NodePropTypes<ContentShape, ContentNode>,
-        ...WithStickinessProps,
-    |}) => {
+    (props: NodePropTypes<ContentShape, ContentNode> & WithStickinessProps) => {
         const {data, path, actions, apiOptions, renderers, sticky} = props;
 
         const preview = (
@@ -548,6 +551,7 @@ const ItemNodeContent = withStickiness(
                                 // $FlowFixMe[incompatible-exact]: {...data} pass too many props
                                 // $FlowFixMe[incompatible-type]
                                 // $FlowFixMe[prop-missing]
+                                // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
                                 <Editor
                                     {...data}
                                     onChange={(newVal) =>
@@ -570,10 +574,7 @@ const ItemNodeContent = withStickiness(
 );
 
 const HintNodeContent = withStickiness(
-    (props: {|
-        ...NodePropTypes<HintShape, HintNode>,
-        ...WithStickinessProps,
-    |}) => {
+    (props: NodePropTypes<HintShape, HintNode> & WithStickinessProps) => {
         const {data, path, actions, apiOptions, renderers, sticky} = props;
 
         const preview = (
@@ -656,8 +657,6 @@ const ArrayNodeContent = (props: NodePropTypes<ArrayShape, ItemArrayNode>) => {
      * the type more before doing this work, or rework the `ArrayNodeContent`
      * component to be less permissive about the props it accepts.
      */
-    // $FlowFixMe[prop-missing]
-    // $FlowFixMe[not-a-function]
     const children = data.map((subdata, i) => {
         const subpath = path.concat(i);
         const controls = [
@@ -749,21 +748,19 @@ interface LayoutStatics {
     shape: Shape;
 }
 
-type MultiRendererEditorProps = {|
+type MultiRendererEditorProps = {
     // eslint-disable-next-line no-restricted-syntax
-    Layout: React.ComponentType<any> & LayoutStatics,
-    apiOptions: APIOptions,
-
-    item: Item,
-    editorMode: EditorMode,
-
-    onChange: ChangeHandler,
-|};
+    Layout: React.ComponentType<any> & LayoutStatics;
+    apiOptions: APIOptions;
+    item: Item;
+    editorMode: EditorMode;
+    onChange: ChangeHandler;
+};
 
 class MultiRendererEditor extends React.Component<MultiRendererEditorProps> {
-    layout: ?React.ElementRef<$FlowFixMe>;
+    layout: React.ElementRef<any> | null | undefined;
 
-    _renderLayout: () => React.Node = () => {
+    _renderLayout: () => React.ReactElement = () => {
         const {Layout, apiOptions, item} = this.props;
 
         return (
@@ -775,7 +772,7 @@ class MultiRendererEditor extends React.Component<MultiRendererEditorProps> {
         );
     };
 
-    _renderJson: () => React.Element<"div"> = () => {
+    _renderJson: () => React.ReactElement<React.ComponentProps<"div">> = () => {
         return (
             <div>
                 <ModeDropdown
@@ -791,21 +788,24 @@ class MultiRendererEditor extends React.Component<MultiRendererEditorProps> {
         );
     };
 
-    _renderPreview: () => React.Element<"div"> = () => {
-        return (
-            <div>
-                <ModeDropdown
-                    currentMode={this.props.editorMode}
-                    onChange={(editorMode) => this.props.onChange({editorMode})}
-                />
-                {this._renderLayout()}
-            </div>
-        );
-    };
+    _renderPreview: () => React.ReactElement<React.ComponentProps<"div">> =
+        () => {
+            return (
+                <div>
+                    <ModeDropdown
+                        currentMode={this.props.editorMode}
+                        onChange={(editorMode) =>
+                            this.props.onChange({editorMode})
+                        }
+                    />
+                    {this._renderLayout()}
+                </div>
+            );
+        };
 
-    mergeValueAtPath: (path: Path, newValue: any) => void = (
+    mergeValueAtPath: (path: Path, newValue?: any) => void = (
         path: Path,
-        newValue: mixed,
+        newValue: unknown,
     ) => {
         this.props.onChange({
             item: lens(this.props.item)
@@ -814,9 +814,9 @@ class MultiRendererEditor extends React.Component<MultiRendererEditorProps> {
         });
     };
 
-    setValueAtPath: (path: Path, newValue: any) => void = (
+    setValueAtPath: (path: Path, newValue?: any) => void = (
         path: Path,
-        newValue: mixed,
+        newValue: unknown,
     ) => {
         this.props.onChange({
             item: lens(this.props.item).set(multiPath(path), newValue).freeze(),
@@ -871,11 +871,11 @@ class MultiRendererEditor extends React.Component<MultiRendererEditorProps> {
         this.moveArrayElementDown(previousElementPath);
     };
 
-    _renderEdit: () => React.Element<"div"> = () => {
+    _renderEdit: () => React.ReactElement<React.ComponentProps<"div">> = () => {
         const apiOptions = {
             ...ApiOptions.defaults,
             ...this.props.apiOptions,
-        };
+        } as const;
 
         const {item} = this.props;
         const itemShape: Shape = this.props.Layout.shape;
@@ -907,25 +907,30 @@ class MultiRendererEditor extends React.Component<MultiRendererEditorProps> {
         );
     };
 
-    score: () => any | void = () => {
+    score: () => any | undefined = () => {
         if (this.layout) {
+            // @ts-expect-error [FEI-5003] - TS2571 - Object is of type 'unknown'.
             return this.layout.score();
         }
     };
 
-    getSerializedState: () => any | void = () => {
+    getSerializedState: () => any | undefined = () => {
         if (this.layout) {
+            // @ts-expect-error [FEI-5003] - TS2571 - Object is of type 'unknown'.
             return this.layout.getSerializedState();
         }
     };
 
-    restoreSerializedState: (state: any) => void = (state: $FlowFixMe) => {
+    restoreSerializedState: (state?: any) => void = (state: any) => {
         if (this.layout) {
+            // @ts-expect-error [FEI-5003] - TS2571 - Object is of type 'unknown'.
             this.layout.restoreSerializedState(state);
         }
     };
 
-    _renderContent: () => React.Element<"div"> | React.Node = () => {
+    _renderContent: () =>
+        | React.ReactElement<React.ComponentProps<"div">>
+        | React.ReactNode = () => {
         switch (this.props.editorMode) {
             case "json":
                 return this._renderJson();
@@ -947,7 +952,7 @@ class MultiRendererEditor extends React.Component<MultiRendererEditorProps> {
         }
     };
 
-    render(): React.Element<"div"> {
+    render(): React.ReactNode {
         return <div id="perseus">{this._renderContent()}</div>;
     }
 }

package/src/{section-control-button.jsx → section-control-button.tsx}

@@ -1,5 +1,3 @@
-// @flow
-
 import {components} from "@khanacademy/perseus";
 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import Color from "@khanacademy/wonder-blocks-color";
@@ -8,16 +6,19 @@ import * as React from "react";
 
 const {InlineIcon} = components;
 
-type InlineIconProps = React.ElementConfig<typeof InlineIcon>;
+type InlineIconProps = JSX.LibraryManagedAttributes<
+    typeof InlineIcon,
+    React.ComponentProps<typeof InlineIcon>
+>;
 
-type SectionControlButtonProps = {|
-    icon: InlineIconProps,
-    onClick: () => mixed,
-    title: string,
-|};
+type SectionControlButtonProps = {
+    icon: InlineIconProps;
+    onClick: () => unknown;
+    title: string;
+};
 
 export default class SectionControlButton extends React.Component<SectionControlButtonProps> {
-    render(): React$Element<typeof Clickable> {
+    render(): React.ReactNode {
         const {icon, onClick, title} = this.props;
 
         return (

package/src/{stateful-article-editor.jsx → stateful-article-editor.tsx}

@@ -1,6 +1,4 @@
 /* eslint-disable react/no-unsafe */
-// @flow
-
 /**
  * Renders an ArticleEditor as a non-controlled component.
  *
@@ -14,9 +12,8 @@ import createReactClass from "create-react-class";
 import * as React from "react";
 import _ from "underscore";
 
-import ArticleEditor from "./article-editor.jsx";
+import ArticleEditor from "./article-editor";
 
-// $FlowFixMe[signature-verification-failure]
 const StatefulArticleEditor = createReactClass({
     displayName: "StatefulArticleEditor",
 
@@ -171,6 +168,6 @@ const styles = {
     editor: {
         marginTop: -20,
     },
-};
+} as const;
 
 export default StatefulArticleEditor;

package/src/{stateful-editor-page.jsx → stateful-editor-page.tsx}

@@ -1,11 +1,10 @@
 /* eslint-disable react/no-unsafe, react/sort-comp */
-// @flow
 import createReactClass from "create-react-class";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import EditorPage from "./editor-page.jsx";
+import EditorPage from "./editor-page";
 
 /* Renders an EditorPage (or an ArticleEditor) as a non-controlled component.
  *
@@ -14,7 +13,6 @@ import EditorPage from "./editor-page.jsx";
  * changes. With StatefulEditorPage changes are stored in state so you can
  * query them with serialize.
  */
-// $FlowFixMe[signature-verification-failure]
 const StatefulEditorPage = createReactClass({
     displayName: "StatefulEditorPage",
 

package/src/{testing-widgets.js → testing-widgets.ts}

@@ -1,12 +1,11 @@
-// @flow
-import ExampleGraphieWidget from "./widgets/example-graphie-widget.jsx";
-import ExampleWidget from "./widgets/example-widget.jsx";
-import SimpleMarkdownTester from "./widgets/simple-markdown-tester.jsx";
+import ExampleGraphieWidget from "./widgets/example-graphie-widget";
+import ExampleWidget from "./widgets/example-widget";
+import SimpleMarkdownTester from "./widgets/simple-markdown-tester";
 
 import type {WidgetExports} from "@khanacademy/perseus";
 
-export default ([
+export default [
     ExampleGraphieWidget,
     ExampleWidget,
     SimpleMarkdownTester,
-]: $ReadOnlyArray<WidgetExports<>>);
+] as ReadonlyArray<WidgetExports>;

package/src/util/{register-all-widgets-and-editors-for-testing_test.js → register-all-widgets-and-editors-for-testing.test.ts}

@@ -1,7 +1,6 @@
-// @flow
 import {Widgets} from "@khanacademy/perseus";
 
-import {registerAllWidgetsAndEditorsForTesting} from "./register-all-widgets-and-editors-for-testing.js";
+import {registerAllWidgetsAndEditorsForTesting} from "./register-all-widgets-and-editors-for-testing";
 
 describe("Registering all widgets and editors", () => {
     it("should have an editor for every widget", () => {