@khanacademy/perseus-editor 2.0.2 → 2.1.0

package/dist/section-control-button.d.ts

@@ -1,5 +1,11 @@
 import * as React from "react";
-declare const InlineIcon: React.FC<import("../../perseus/src/components/inline-icon").InlineIconProps>;
+declare const InlineIcon: ({ path, width, height, style, title, }: {
+    path: string;
+    height: number;
+    width: number;
+    style?: React.CSSProperties | undefined;
+    title?: string | undefined;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 type InlineIconProps = JSX.LibraryManagedAttributes<typeof InlineIcon, React.ComponentProps<typeof InlineIcon>>;
 type SectionControlButtonProps = {
     icon: InlineIconProps;

package/dist/section-control-button.js.flow

@@ -4,9 +4,14 @@
  * Flowgen v1.21.0
  * @flow
  */
-import * as $Flowgen$Import$_2e__2e__2f__2e__2e__2f_perseus_2f_src_2f_components_2f_inline_2d_icon from "../../perseus/src/components/inline-icon";
 import * as React from "react";
-declare var InlineIcon: React.StatelessFunctionalComponent<$Flowgen$Import$_2e__2e__2f__2e__2e__2f_perseus_2f_src_2f_components_2f_inline_2d_icon.InlineIconProps>;
+declare var InlineIcon: (x: {|
+  path: string,
+  height: number,
+  width: number,
+  style?: React.CSSProperties | void,
+  title?: string | void,
+|}) => React.Element<any, string | React.JSXElementConstructor<any>>;
 declare type InlineIconProps = React.ElementConfig<typeof InlineIcon>;
 declare type SectionControlButtonProps = {|
   icon: InlineIconProps,

package/dist/widgets/label-image/answer-choices.d.ts

@@ -9,5 +9,5 @@ type AnswerChoicesProps = {
 /**
  * The list of choices, handles adding, removing and reording of answers.
  */
-declare const AnswerChoices: React.FC<AnswerChoicesProps>;
+declare const AnswerChoices: ({ choices, onChange, }: AnswerChoicesProps) => React.ReactElement;
 export default AnswerChoices;

package/dist/widgets/label-image/answer-choices.js.flow

@@ -12,5 +12,5 @@ declare type AnswerChoicesProps = {|
 /**
  * The list of choices, handles adding, removing and reording of answers.
  */
-declare var AnswerChoices: React.StatelessFunctionalComponent<AnswerChoicesProps>;
+declare var AnswerChoices: (x: AnswerChoicesProps) => React.Element<any>;
 declare export default typeof AnswerChoices;

package/dist/widgets/label-image/behavior.d.ts

@@ -2,7 +2,7 @@
  * Controlled component to display and change widget options.
  */
 import * as React from "react";
-type BehaviorProps = {
+type Props = {
     multipleAnswers: boolean;
     hideChoicesFromInstructions: boolean;
     onChange: (options: {
@@ -10,5 +10,5 @@ type BehaviorProps = {
         hideChoicesFromInstructions?: boolean;
     }) => void;
 };
-declare const Behavior: React.FC<BehaviorProps>;
+declare const Behavior: ({ multipleAnswers, hideChoicesFromInstructions, onChange, }: Props) => React.ReactElement;
 export default Behavior;

package/dist/widgets/label-image/behavior.js.flow

@@ -5,7 +5,7 @@
  * @flow
  */
 import * as React from "react";
-declare type BehaviorProps = {|
+declare type Props = {|
   multipleAnswers: boolean,
   hideChoicesFromInstructions: boolean,
   onChange: (options: {|
@@ -13,5 +13,5 @@ declare type BehaviorProps = {|
     hideChoicesFromInstructions?: boolean,
   |}) => void,
 |};
-declare var Behavior: React.StatelessFunctionalComponent<BehaviorProps>;
+declare var Behavior: (x: Props) => React.Element<any>;
 declare export default typeof Behavior;

package/dist/widgets/label-image/marker.d.ts

@@ -6,19 +6,19 @@
  */
 import * as React from "react";
 import type { MarkerType } from "@khanacademy/perseus";
-type MarkerProps = MarkerType & {
+type Props = MarkerType & {
     choices: ReadonlyArray<string>;
     onChange: (marker: MarkerType) => void;
     onRemove: () => void;
 };
-type MarkerState = {
+type State = {
     showDropdown: boolean;
 };
-export default class Marker extends React.Component<MarkerProps, MarkerState> {
+export default class Marker extends React.Component<Props, State> {
     _marker: HTMLElement | null | undefined;
-    constructor(props: MarkerProps);
+    constructor(props: Props);
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: MarkerProps): void;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     componentWillUnmount(): void;
     openDropdown(): void;
     updateMarker(props: any): void;

package/dist/widgets/label-image/marker.js.flow

@@ -6,7 +6,7 @@
  */
 import * as React from "react";
 import type { MarkerType } from "@khanacademy/perseus";
-declare type MarkerProps = {|
+declare type Props = {|
   ...MarkerType,
   ...{|
     choices: $ReadOnlyArray<string>,
@@ -14,16 +14,14 @@ declare type MarkerProps = {|
     onRemove: () => void,
   |},
 |};
-declare type MarkerState = {|
+declare type State = {|
   showDropdown: boolean,
 |};
-declare export default class Marker
-  extends React.Component<MarkerProps, MarkerState>
-{
+declare export default class Marker extends React.Component<Props, State> {
   _marker: HTMLElement | null | void;
-  constructor(props: MarkerProps): this;
+  constructor(props: Props): this;
   componentDidMount(): void;
-  UNSAFE_componentWillReceiveProps(nextProps: MarkerProps): void;
+  UNSAFE_componentWillReceiveProps(nextProps: Props): void;
   componentWillUnmount(): void;
   openDropdown(): void;
   updateMarker(props: any): void;

package/dist/widgets/label-image/question-markers.d.ts

@@ -5,7 +5,7 @@
 import * as React from "react";
 import Marker from "./marker";
 import type { MarkerType } from "@khanacademy/perseus";
-type QuestionMarkersProps = {
+type Props = {
     choices: ReadonlyArray<string>;
     imageUrl: string;
     imageWidth: number;
@@ -13,7 +13,7 @@ type QuestionMarkersProps = {
     markers: ReadonlyArray<MarkerType>;
     onChange: (markers: ReadonlyArray<MarkerType>) => void;
 };
-export default class QuestionMarkers extends React.Component<QuestionMarkersProps> {
+export default class QuestionMarkers extends React.Component<Props> {
     _markers: Array<Marker | null | undefined>;
     openDropdownForMarkerIndices(indices: ReadonlyArray<number>): void;
     handleImageDoubleClick: (e: React.MouseEvent) => void;

package/dist/widgets/label-image/question-markers.js.flow

@@ -7,7 +7,7 @@
 import * as React from "react";
 import Marker from "./marker";
 import type { MarkerType } from "@khanacademy/perseus";
-declare type QuestionMarkersProps = {|
+declare type Props = {|
   choices: $ReadOnlyArray<string>,
   imageUrl: string,
   imageWidth: number,
@@ -15,9 +15,7 @@ declare type QuestionMarkersProps = {|
   markers: $ReadOnlyArray<MarkerType>,
   onChange: (markers: $ReadOnlyArray<MarkerType>) => void,
 |};
-declare export default class QuestionMarkers
-  extends React.Component<QuestionMarkersProps>
-{
+declare export default class QuestionMarkers extends React.Component<Props> {
   _markers: Array<Marker | null | void>;
   openDropdownForMarkerIndices(indices: $ReadOnlyArray<number>): void;
   handleImageDoubleClick: (e: SyntheticMouseEvent<>) => void;

package/dist/widgets/label-image/select-image.d.ts

@@ -2,9 +2,9 @@
  * Controlled component for selecting the question image, for answer labeling.
  */
 import * as React from "react";
-type SelectImageProps = {
+type Props = {
     onChange: (url: string) => void;
     url: string;
 };
-declare const SelectImage: React.FC<SelectImageProps>;
+declare const SelectImage: ({ onChange, url }: Props) => React.ReactElement;
 export default SelectImage;

package/dist/widgets/label-image/select-image.js.flow

@@ -5,9 +5,9 @@
  * @flow
  */
 import * as React from "react";
-declare type SelectImageProps = {|
+declare type Props = {|
   onChange: (url: string) => void,
   url: string,
 |};
-declare var SelectImage: React.StatelessFunctionalComponent<SelectImageProps>;
+declare var SelectImage: (x: Props) => React.Element<any>;
 declare export default typeof SelectImage;

package/dist/widgets/label-image-editor.d.ts

@@ -8,7 +8,7 @@
 import * as React from "react";
 import QuestionMarkers from "./label-image/question-markers";
 import type { MarkerType } from "@khanacademy/perseus";
-type LabelImageEditorProps = {
+type Props = {
     choices: ReadonlyArray<string>;
     imageAlt: string;
     imageUrl: string;
@@ -19,7 +19,7 @@ type LabelImageEditorProps = {
     hideChoicesFromInstructions: boolean;
     onChange: (options: any) => void;
 };
-declare class LabelImageEditor extends React.Component<LabelImageEditorProps> {
+declare class LabelImageEditor extends React.Component<Props> {
     _questionMarkers: QuestionMarkers | null | undefined;
     static defaultProps: {
         choices: ReadonlyArray<any>;
@@ -32,7 +32,7 @@ declare class LabelImageEditor extends React.Component<LabelImageEditorProps> {
         multipleAnswers: boolean;
     };
     static widgetName: "label-image";
-    componentDidUpdate(prevProps: LabelImageEditorProps): void;
+    componentDidUpdate(prevProps: Props): void;
     getSaveWarnings: () => ReadonlyArray<any | string>;
     serialize(): any;
     handleImageChange: (url: string) => void;

package/dist/widgets/label-image-editor.js.flow

@@ -7,7 +7,7 @@
 import * as React from "react";
 import QuestionMarkers from "./label-image/question-markers";
 import type { MarkerType } from "@khanacademy/perseus";
-declare type LabelImageEditorProps = {|
+declare type Props = {|
   choices: $ReadOnlyArray<string>,
   imageAlt: string,
   imageUrl: string,
@@ -18,7 +18,7 @@ declare type LabelImageEditorProps = {|
   hideChoicesFromInstructions: boolean,
   onChange: (options: any) => void,
 |};
-declare class LabelImageEditor extends React.Component<LabelImageEditorProps> {
+declare class LabelImageEditor extends React.Component<Props> {
   _questionMarkers: QuestionMarkers | null | void;
   static defaultProps: {|
     choices: $ReadOnlyArray<any>,
@@ -31,7 +31,7 @@ declare class LabelImageEditor extends React.Component<LabelImageEditorProps> {
     multipleAnswers: boolean,
   |};
   static widgetName: "label-image";
-  componentDidUpdate(prevProps: LabelImageEditorProps): void;
+  componentDidUpdate(prevProps: Props): void;
   getSaveWarnings: () => $ReadOnlyArray<any | string>;
   serialize(): any;
   handleImageChange: (url: string) => void;

package/dist/widgets/unit-editor.d.ts

@@ -11,7 +11,7 @@ declare class UnitInputEditor extends React.Component<UnitInputEditorProps> {
     static propTypes: {
         value: PropTypes.Requireable<string>;
         acceptingUnits: PropTypes.Requireable<(string | null | undefined)[]>;
-        accepting: PropTypes.Requireable<"all" | "some">;
+        accepting: PropTypes.Requireable<"some" | "all">;
         sigfigs: PropTypes.Requireable<number>;
         onChange: PropTypes.Validator<(...args: any[]) => any>;
     };

package/dist/widgets/unit-editor.js.flow

@@ -17,7 +17,7 @@ declare class UnitInputEditor extends React.Component<UnitInputEditorProps> {
   static propTypes: {|
     value: PropTypes.Requireable<string>,
     acceptingUnits: PropTypes.Requireable<(string | null | void)[]>,
-    accepting: PropTypes.Requireable<"all" | "some">,
+    accepting: PropTypes.Requireable<"some" | "all">,
     sigfigs: PropTypes.Requireable<number>,
     onChange: PropTypes.Validator<(...args: any[]) => any>,
   |};

package/package.json

@@ -3,7 +3,7 @@
     "description": "Perseus editors",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "2.0.2",
+    "version": "2.1.0",
     "publishConfig": {
         "access": "public"
     },
@@ -23,7 +23,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.1",
-        "@khanacademy/perseus": "^4.0.2"
+        "@khanacademy/perseus": "^6.0.0"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-button": "^4.0.8",

package/src/__stories__/editor.stories.tsx

@@ -1,4 +1,4 @@
-import {ApiOptions, Dependencies} from "@khanacademy/perseus";
+import {ApiOptions} from "@khanacademy/perseus";
 import * as React from "react";
 
 import {question1} from "../__testdata__/input-number.testdata";
@@ -11,7 +11,6 @@ export default {
 
 export const Rational = (): React.ReactElement => {
     registerAllWidgetsAndEditorsForTesting();
-    Dependencies.getDependencies().shouldUseFutureKaTeX(false);
 
     return (
         <Editor

package/src/__stories__/section-control-button.stories.tsx

@@ -13,9 +13,9 @@ export default {
     title: "Perseus Editor/Widgets/Section Control Button",
 } as Story;
 
-export const ButtonForEditingSectionsOfContentWithInArticleEditor: React.FC<
-    StoryArgs
-> = (args): React.ReactElement => {
+export const ButtonForEditingSectionsOfContentWithInArticleEditor = (
+    args: StoryArgs,
+): React.ReactElement => {
     return (
         <SectionControlButton
             icon={icons.iconTrash}

package/src/__tests__/editor.test.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import "@testing-library/jest-dom"; // Imports custom mathers
 
 import {testDependencies} from "../../../../testing/test-dependencies";
+import {wait} from "../../../../testing/wait";
 import {question1} from "../__testdata__/input-number.testdata";
 import Editor from "../editor";
 
@@ -23,11 +24,11 @@ describe("Editor", () => {
             ]);
             Widgets.registerWidgets([InputNumberWidget]);
             Widgets.registerEditors([InputNumberEditor]);
+            jest.useRealTimers();
         });
 
         test("clicking on the widget editor should open it", async () => {
             // Arrange
-            testDependencies.shouldUseFutureKaTeX(false);
             render(
                 <Editor
                     apiOptions={ApiOptions.defaults}
@@ -44,7 +45,7 @@ describe("Editor", () => {
                     onChange={(props) => {}}
                 />,
             );
-            await testDependencies.getKaTeX();
+            await wait();
 
             // Act
             const widgetDisclosure = screen.getByRole("link", {
@@ -60,7 +61,6 @@ describe("Editor", () => {
         it("should update values", async () => {
             // Arrange
             const changeFn = jest.fn();
-            testDependencies.shouldUseFutureKaTeX(false);
             render(
                 <Editor
                     apiOptions={ApiOptions.defaults}
@@ -77,7 +77,7 @@ describe("Editor", () => {
                     onChange={changeFn}
                 />,
             );
-            await testDependencies.getKaTeX();
+            await wait();
 
             // Act
             const widgetDisclosure = screen.getByRole("link", {

package/src/article-editor.tsx

@@ -9,7 +9,6 @@ import {
     icons,
     ApiOptions,
     Changeable,
-    Dependencies,
     Errors,
     PerseusError,
 } from "@khanacademy/perseus";
@@ -44,7 +43,7 @@ type DefaultProps = {
     ) => React.ReactElement<React.ComponentProps<"span">>;
     useNewStyles: boolean;
 };
-type PerseusArticleEditorProps = DefaultProps & {
+type Props = DefaultProps & {
     apiOptions?: APIOptions;
     imageUploader?: (arg1: string, arg2: (arg1: string) => unknown) => unknown;
     // URL of the route to show on initial load of the preview frames.
@@ -54,10 +53,7 @@ type PerseusArticleEditorProps = DefaultProps & {
 type State = {
     highlightLint: boolean;
 };
-export default class ArticleEditor extends React.Component<
-    PerseusArticleEditorProps,
-    State
-> {
+export default class ArticleEditor extends React.Component<Props, State> {
     static defaultProps: DefaultProps = {
         contentPaths: [],
         json: [{}],
@@ -144,8 +140,6 @@ export default class ArticleEditor extends React.Component<
             isArticle: true,
         } as const;
 
-        const {KatexProvider} = Dependencies.getDependencies();
-
         const sections = this._sections();
 
         return (
@@ -212,19 +206,17 @@ export default class ArticleEditor extends React.Component<
                                         />
                                     </div>
                                 </div>
-                                <KatexProvider>
-                                    <Editor
-                                        {...section}
-                                        apiOptions={apiOptions}
-                                        imageUploader={imageUploader}
-                                        onChange={_.partial(
-                                            this._handleEditorChange,
-                                            i,
-                                        )}
-                                        placeholder="Type your section text here..."
-                                        ref={"editor" + i}
-                                    />
-                                </KatexProvider>
+                                <Editor
+                                    {...section}
+                                    apiOptions={apiOptions}
+                                    imageUploader={imageUploader}
+                                    onChange={_.partial(
+                                        this._handleEditorChange,
+                                        i,
+                                    )}
+                                    placeholder="Type your section text here..."
+                                    ref={"editor" + i}
+                                />
                             </div>
 
                             <div className="editor-preview">

package/src/components/dropdown-option.tsx

@@ -31,7 +31,7 @@ const findAndFocusElement = (component?: Element | null) => {
     }
 };
 
-type OptionProps = {
+type Props = {
     // The value to use when the option is selected
     value: string;
     // The display of the option
@@ -65,7 +65,7 @@ const check = `M10,3.8C10,4,9.9,4.2,9.8,4.3L5.1,8.9L4.3,9.8C4.2,9.9,4,10,3.8,10
 
 export const optionHeight = 30;
 
-class Option extends React.Component<OptionProps> {
+class Option extends React.Component<Props> {
     // @ts-expect-error [FEI-5003] - TS2564 - Property 'node' has no initializer and is not definitely assigned in the constructor.
     node: HTMLDivElement;
 

package/src/components/link.ts

@@ -24,7 +24,7 @@ type DefaultProps = {
     style: CSSProperties | Array<CSSProperties>;
 };
 
-type LinkProps = DefaultProps & {
+type Props = DefaultProps & {
     children?: React.ReactNode;
     // An additional class name to add. This is supported so-as to allow
     // Perseus to add class-based styles to links when using this
@@ -66,7 +66,7 @@ type LinkProps = DefaultProps & {
 /**
  * A wrapper that creates an anchor tag with normalized styles
  */
-class Link extends React.Component<LinkProps> {
+class Link extends React.Component<Props> {
     static defaultProps: DefaultProps = {
         highlighted: false,
         href: DEFAULT_HREF,

package/src/diffs/__stories__/perseus-diff-wrapper.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
 
-const Wrapper: React.FC<{
+type Props = {
     children: React.ReactNode;
-}> = ({children}): React.ReactElement => {
+};
+
+const Wrapper = ({children}: Props): React.ReactElement => {
     return <div className="perseus-diff">{children}</div>;
 };
 

package/src/diffs/__stories__/structured-item-diff.stories.tsx

@@ -33,7 +33,7 @@ const tags = {
     c: "c tag",
 } as const;
 
-export const ContentAdded: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const ContentAdded = (args: StoryArgs): React.ReactElement => {
     const props = {
         before: {
             _multi: {
@@ -175,8 +175,8 @@ export const ContentAdded: React.FC<StoryArgs> = (args): React.ReactElement => {
 };
 
 // second instance
-export const ContentAddedRemovedAndChanged: React.FC<StoryArgs> = (
-    args,
+export const ContentAddedRemovedAndChanged = (
+    args: StoryArgs,
 ): React.ReactElement => {
     const props = {
         before: {
@@ -383,9 +383,7 @@ export const ContentAddedRemovedAndChanged: React.FC<StoryArgs> = (
 };
 
 // third instance
-export const MiscContentChanges: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MiscContentChanges = (args: StoryArgs): React.ReactElement => {
     const props = {
         before: {
             _multi: {
@@ -681,9 +679,7 @@ export const MiscContentChanges: React.FC<StoryArgs> = (
 };
 
 // fourth
-export const ContentRemoved: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ContentRemoved = (args: StoryArgs): React.ReactElement => {
     const props = {
         before: {
             _multi: {

package/src/diffs/__stories__/tags-diff.stories.tsx

@@ -24,7 +24,7 @@ export default {
     ],
 } as Story;
 
-export const Example: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Example = (args: StoryArgs): React.ReactElement => {
     return (
         <TagsDiff
             title="tags"

package/src/diffs/__stories__/text-diff.stories.tsx

@@ -24,7 +24,7 @@ export default {
     ],
 } as Story;
 
-export const Example: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Example = (args: StoryArgs): React.ReactElement => {
     return (
         <TextDiff
             title="A day in the life of a text diff"

package/src/editor.tsx

@@ -2,7 +2,6 @@ import {
     components,
     icons,
     preprocessTex,
-    Dependencies,
     Errors,
     Log,
     PerseusError,
@@ -127,9 +126,7 @@ type WidgetEditorState = {
     widgetInfo: WidgetInfo;
 };
 
-const _upgradeWidgetInfo: React.FC<WidgetEditorProps> = (
-    props,
-): React.ReactElement => {
+const _upgradeWidgetInfo = (props: WidgetEditorProps): React.ReactElement => {
     // We can't call serialize here because this.refs.widget
     // doesn't exist before this component is mounted.
     const filteredProps = _.omit(props, WIDGET_PROP_DENYLIST);
@@ -368,7 +365,7 @@ const imageUrlsFromContent = function (content: string) {
     return _.map(allMatches(IMAGE_REGEX, content), (capture) => capture[1]);
 };
 
-type EditorProps = Readonly<{
+type Props = Readonly<{
     apiOptions: any;
     className?: string;
     content: string;
@@ -406,14 +403,12 @@ type DeafultProps = {
     };
 };
 
-type EditorState = {
-    showKatexErrors: boolean;
+type State = {
     textAreaValue: string;
-    katex?: katex;
 };
 
 // eslint-disable-next-line react/no-unsafe
-class Editor extends React.Component<EditorProps, EditorState> {
+class Editor extends React.Component<Props, State> {
     lastUserValue: string | null | undefined;
     deferredChange: any | null | undefined;
     widgetIds: any | null | undefined;
@@ -431,9 +426,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
         warnNoWidgets: false,
     };
 
-    state: EditorState = {
-        katex: undefined,
-        showKatexErrors: false,
+    state: State = {
         textAreaValue: this.props.content,
     };
 
@@ -452,24 +445,16 @@ class Editor extends React.Component<EditorProps, EditorState> {
             // @ts-expect-error [FEI-5003] - TS2339 - Property 'on' does not exist on type 'JQueryStatic'.
             .on("copy cut", this._maybeCopyWidgets)
             .on("paste", this._maybePasteWidgets);
-
-        Dependencies.getDependencies()
-            .getKaTeX()
-            .then((katex) => {
-                this.setState({
-                    katex,
-                });
-            });
     }
 
     // TODO(arun): This is a deprecated method, use the appropriate replacement
-    UNSAFE_componentWillReceiveProps(nextProps: EditorProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         if (this.props.content !== nextProps.content) {
             this.setState({textAreaValue: nextProps.content});
         }
     }
 
-    componentDidUpdate(prevProps: EditorProps) {
+    componentDidUpdate(prevProps: Props) {
         // TODO(alpert): Maybe fix React so this isn't necessary
         // eslint-disable-next-line react/no-string-refs
         const textarea = ReactDOM.findDOMNode(this.refs.textarea);
@@ -574,7 +559,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
      * Calculate the size of all the images in props.content, and send
      * those sizes to this.props.images using props.onChange.
      */
-    _sizeImages: (props: EditorProps) => void = (props: EditorProps) => {
+    _sizeImages: (props: Props) => void = (props: Props) => {
         const imageUrls = imageUrlsFromContent(props.content);
 
         // Discard any images in our dimension table that no
@@ -1194,9 +1179,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
             );
         }
 
-        const {katex} = this.state;
-
-        if (this.props.widgetEnabled && katex) {
+        if (this.props.widgetEnabled) {
             pieces = Util.split(this.props.content, rWidgetSplit);
             widgets = {};
             underlayPieces = [];