@khanacademy/perseus-editor 1.1.1 → 2.0.0

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

@@ -1,4 +1,3 @@
-// @flow
 import {
     components,
     icons,
@@ -13,15 +12,15 @@ import {
     WIDGET_PROP_DENYLIST,
 } from "@khanacademy/perseus";
 import $ from "jquery";
-// eslint-disable-next-line import/no-unresolved
-import typeof katex from "katex";
+// eslint-disable-next-line import/no-unresolved, import/no-extraneous-dependencies
+import katex from "katex";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import _ from "underscore";
 
-import DragTarget from "./components/drag-target.jsx";
-import KatexErrorView from "./katex-error-view.jsx";
-import SectionControlButton from "./section-control-button.jsx";
+import DragTarget from "./components/drag-target";
+import KatexErrorView from "./katex-error-view";
+import SectionControlButton from "./section-control-button";
 
 import type {Alignment, ChangeHandler, WidgetInfo} from "@khanacademy/perseus";
 
@@ -42,14 +41,14 @@ const ENDS_WITH_A_PARAGRAPH = /(?:\n{2,}|^\n*)$/;
 const TRAILING_NEWLINES = /(\n*)$/;
 const LEADING_NEWLINES = /^(\n*)/;
 
-const commafyInteger = (n) => {
+const commafyInteger = (n: number) => {
     let str = n.toString();
     if (str.length >= 5) {
         str = str.replace(/(\d)(?=(\d{3})+$)/g, "$1{,}");
     }
     return str;
 };
-const makeEndWithAParagraphIfNecessary = (content) => {
+const makeEndWithAParagraphIfNecessary = (content: string) => {
     if (!ENDS_WITH_A_PARAGRAPH.test(content)) {
         const match = TRAILING_NEWLINES.exec(content);
         if (match) {
@@ -68,16 +67,16 @@ const makeStartWithAParagraphAlways = (content) => {
     return "\n\n".slice(0, 2 - newlines.length) + content;
 };
 
-type WidgetSelectProps = {|
-    onChange?: (widgetType: string) => mixed,
-|};
+type WidgetSelectProps = {
+    onChange?: (widgetType: string) => unknown;
+};
 
 class WidgetSelect extends React.Component<WidgetSelectProps> {
     shouldComponentUpdate() {
         return false;
     }
 
-    handleChange = (e: SyntheticEvent<HTMLSelectElement>) => {
+    handleChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {
         const widgetType = e.currentTarget.value;
         if (widgetType === "") {
             // TODO(alpert): Not sure if change will trigger here
@@ -89,7 +88,7 @@ class WidgetSelect extends React.Component<WidgetSelectProps> {
         }
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const widgets = Widgets.getPublicWidgets();
         const orderedWidgetNames = _.sortBy(_.keys(widgets), (name) => {
             return widgets[name].displayName;
@@ -111,29 +110,30 @@ class WidgetSelect extends React.Component<WidgetSelectProps> {
     }
 }
 
-type WidgetEditorProps = {|
+type WidgetEditorProps = {
     // Unserialized props
-    id: string,
+    id: string;
     onChange: (
         widgetInfo: WidgetInfo,
-        cb?: () => mixed,
+        cb?: () => unknown,
         silent?: boolean,
-    ) => mixed,
-    onRemove: () => mixed,
-    apiOptions: any,
-
-    ...WidgetInfo,
-|};
-
-type WidgetEditorState = {|
-    showWidget: boolean,
-    widgetInfo: WidgetInfo,
-|};
+    ) => unknown;
+    onRemove: () => unknown;
+    apiOptions: any;
+} & WidgetInfo;
+
+type WidgetEditorState = {
+    showWidget: boolean;
+    widgetInfo: WidgetInfo;
+};
 
-const _upgradeWidgetInfo = (props: WidgetEditorProps): WidgetInfo => {
+const _upgradeWidgetInfo: React.FC<WidgetEditorProps> = (
+    props,
+): 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);
+    // @ts-expect-error [FEI-5003] - TS2322 - Type 'PerseusWidget' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'. | TS2345 - Argument of type 'Partial<{ id: string; onChange: (widgetInfo: PerseusWidget, cb?: (() => unknown) | undefined, silent?: boolean | undefined) => unknown; onRemove: () => unknown; apiOptions: any; } & CategorizerWidget & { ...; }> | ... 38 more ... | Partial<...>' is not assignable to parameter of type 'PerseusWidget'.
     return Widgets.upgradeWidgetInfoToLatestVersion(filteredProps);
 };
 
@@ -144,36 +144,39 @@ const _upgradeWidgetInfo = (props: WidgetEditorProps): WidgetInfo => {
 // eslint-disable-next-line react/no-unsafe
 class WidgetEditor extends React.Component<
     WidgetEditorProps,
-    WidgetEditorState,
+    WidgetEditorState
 > {
     constructor(props: WidgetEditorProps) {
         super(props);
         this.state = {
             showWidget: false,
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'ReactElement<any, any> | null' is not assignable to type 'PerseusWidget'.
             widgetInfo: _upgradeWidgetInfo(props),
         };
     }
 
     UNSAFE_componentWillReceiveProps(nextProps: WidgetEditorProps) {
+        // @ts-expect-error [FEI-5003] - TS2322 - Type 'ReactElement<any, any> | null' is not assignable to type 'PerseusWidget'.
         this.setState({widgetInfo: _upgradeWidgetInfo(nextProps)});
     }
 
-    _toggleWidget = (e: SyntheticEvent<>) => {
+    _toggleWidget = (e: React.SyntheticEvent) => {
         e.preventDefault();
         this.setState({showWidget: !this.state.showWidget});
     };
 
     _handleWidgetChange = (
         newProps: WidgetEditorProps,
-        cb: () => mixed,
+        cb: () => unknown,
         silent: boolean,
     ) => {
-        const newWidgetInfo = ((Object.assign(
+        const newWidgetInfo = Object.assign(
             {},
             this.state.widgetInfo,
-        ): any): WidgetInfo);
+        ) as WidgetInfo;
         newWidgetInfo.options = Object.assign(
             // eslint-disable-next-line react/no-string-refs
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
             this.refs.widget.serialize(),
             newProps,
         );
@@ -182,24 +185,25 @@ class WidgetEditor extends React.Component<
 
     _toggleStatic = (e: Event) => {
         e.preventDefault();
-        const newWidgetInfo = ((Object.assign({}, this.state.widgetInfo, {
+        const newWidgetInfo = Object.assign({}, this.state.widgetInfo, {
             static: !this.state.widgetInfo.static,
-        }): any): WidgetInfo);
+        }) as WidgetInfo;
         this.props.onChange(newWidgetInfo);
     };
 
-    _handleAlignmentChange = (e: SyntheticEvent<HTMLSelectElement>) => {
-        const newAlignment = ((e.currentTarget.value: any): Alignment);
-        const newWidgetInfo = ((Object.assign(
+    _handleAlignmentChange = (e: React.SyntheticEvent<HTMLSelectElement>) => {
+        const newAlignment = e.currentTarget.value as Alignment;
+        const newWidgetInfo = Object.assign(
             {},
             this.state.widgetInfo,
-        ): any): WidgetInfo);
+        ) as WidgetInfo;
         newWidgetInfo.alignment = newAlignment;
         this.props.onChange(newWidgetInfo);
     };
 
     getSaveWarnings = () => {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
         const issuesFunc = this.refs.widget.getSaveWarnings;
         return issuesFunc ? issuesFunc() : [];
     };
@@ -215,16 +219,17 @@ class WidgetEditor extends React.Component<
             static: widgetInfo.static,
             graded: widgetInfo.graded,
             // eslint-disable-next-line react/no-string-refs
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
             options: this.refs.widget.serialize(),
             version: widgetInfo.version,
         };
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const widgetInfo = this.state.widgetInfo;
 
         const Ed = Widgets.getEditor(widgetInfo.type);
-        let supportedAlignments: $ReadOnlyArray<Alignment>;
+        let supportedAlignments: ReadonlyArray<Alignment>;
         if (this.props.apiOptions.showAlignmentOptions) {
             supportedAlignments = Widgets.getSupportedAlignments(
                 widgetInfo.type,
@@ -270,6 +275,7 @@ class WidgetEditor extends React.Component<
                     {supportsStaticMode && (
                         <input
                             type="button"
+                            // @ts-expect-error [FEI-5003] - TS2322 - Type '(e: Event) => void' is not assignable to type 'MouseEventHandler<HTMLInputElement>'.
                             onClick={this._toggleStatic}
                             className="simple-button--small"
                             value={
@@ -340,8 +346,9 @@ const IMAGE_REGEX = /!\[[^\]]*\]\(([^\s)]+)[^)]*\)/g;
  * Note: Returns an array of the capture objects, whereas String::match
  * ignores captures. If you don't need captures, use String::match
  */
-const allMatches = function (regex, str) {
-    const result = [];
+const allMatches = function (regex: RegExp, str: string) {
+    // @ts-expect-error [FEI-5003] - TS2702 - 'RegExp' only refers to a type, but is being used as a namespace here.
+    const result: Array<any | RegExp.matchResult> = [];
     // eslint-disable-next-line no-constant-condition
     while (true) {
         const match = regex.exec(str);
@@ -357,52 +364,59 @@ const allMatches = function (regex, str) {
  * Return an array of URLs of all the images in the given renderer
  * markdown.
  */
-const imageUrlsFromContent = function (content) {
+const imageUrlsFromContent = function (content: string) {
     return _.map(allMatches(IMAGE_REGEX, content), (capture) => capture[1]);
 };
 
-type EditorProps = $ReadOnly<{|
-    apiOptions: any,
-    className?: string,
-    content: string,
-    replace?: any,
-    placeholder: string,
-    widgets: {|[name: string]: WidgetInfo|},
-    images: any,
-    disabled: boolean,
-    widgetEnabled: boolean,
-    immutableWidgets: boolean,
-    showWordCount: boolean,
-    warnNoPrompt: boolean,
-    warnNoWidgets: boolean,
-    imageUploader?: (file: string, callback: (url: string) => mixed) => mixed,
-    onChange: ChangeHandler,
-|}>;
-
-type DeafultProps = {|
-    content: string,
-    disabled: boolean,
-    images: {...},
-    immutableWidgets: boolean,
-    placeholder: string,
-    showWordCount: boolean,
-    warnNoPrompt: boolean,
-    warnNoWidgets: boolean,
-    widgetEnabled: boolean,
-    widgets: {|[name: string]: WidgetInfo|},
-|};
-
-type EditorState = {|
-    showKatexErrors: boolean,
-    textAreaValue: string,
-    katex?: katex,
-|};
+type EditorProps = Readonly<{
+    apiOptions: any;
+    className?: string;
+    content: string;
+    replace?: any;
+    placeholder: string;
+    widgets: {
+        [name: string]: WidgetInfo;
+    };
+    images: any;
+    disabled: boolean;
+    widgetEnabled: boolean;
+    immutableWidgets: boolean;
+    showWordCount: boolean;
+    warnNoPrompt: boolean;
+    warnNoWidgets: boolean;
+    imageUploader?: (
+        file: string,
+        callback: (url: string) => unknown,
+    ) => unknown;
+    onChange: ChangeHandler;
+}>;
+
+type DeafultProps = {
+    content: string;
+    disabled: boolean;
+    images: Record<any, any>;
+    immutableWidgets: boolean;
+    placeholder: string;
+    showWordCount: boolean;
+    warnNoPrompt: boolean;
+    warnNoWidgets: boolean;
+    widgetEnabled: boolean;
+    widgets: {
+        [name: string]: WidgetInfo;
+    };
+};
+
+type EditorState = {
+    showKatexErrors: boolean;
+    textAreaValue: string;
+    katex?: katex;
+};
 
 // eslint-disable-next-line react/no-unsafe
 class Editor extends React.Component<EditorProps, EditorState> {
-    lastUserValue: ?string;
-    deferredChange: ?any;
-    widgetIds: ?any;
+    lastUserValue: string | null | undefined;
+    deferredChange: any | null | undefined;
+    widgetIds: any | null | undefined;
 
     static defaultProps: DeafultProps = {
         content: "",
@@ -433,7 +447,9 @@ class Editor extends React.Component<EditorProps, EditorState> {
         // setState
         this._sizeImages(this.props);
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
         $(ReactDOM.findDOMNode(this.refs.textarea))
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'on' does not exist on type 'JQueryStatic'.
             .on("copy cut", this._maybeCopyWidgets)
             .on("paste", this._maybePasteWidgets);
 
@@ -471,13 +487,13 @@ class Editor extends React.Component<EditorProps, EditorState> {
              * textarea should be refined with an instanceof check to
              * HTMLTextAreaElement so that these props are available.
              */
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
             textarea.focus();
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'value' does not exist on type 'Element | Text'.
             textarea.value = this.lastUserValue;
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'.
             textarea.selectionStart = 0;
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'select' does not exist on type 'Element | Text'.
             textarea.select(0, prevProps.content.length);
             if (
                 document.execCommand(
@@ -488,7 +504,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
             ) {
                 // This command is not implemented. Fall back to setting `value`
                 // directly.
-                // $FlowFixMe[prop-missing]
+                // @ts-expect-error [FEI-5003] - TS2339 - Property 'value' does not exist on type 'Element | Text'.
                 textarea.value = this.props.content;
             }
             this.lastUserValue = null;
@@ -507,38 +523,38 @@ class Editor extends React.Component<EditorProps, EditorState> {
         clearTimeout(this.deferredChange);
     }
 
-    getWidgetEditor: (id: string, type: string) => void | React.Node = (
-        id: string,
-        type: string,
-    ) => {
-        if (!Widgets.getEditor(type)) {
-            return;
-        }
-        return (
-            <WidgetEditor
-                key={id}
-                ref={id}
-                id={id}
-                type={type}
-                // eslint-disable-next-line react/jsx-no-bind
-                onChange={this._handleWidgetEditorChange.bind(this, id)}
-                // eslint-disable-next-line react/jsx-no-bind
-                onRemove={this._handleWidgetEditorRemove.bind(this, id)}
-                apiOptions={this.props.apiOptions}
-                {...this.props.widgets[id]}
-            />
-        );
-    };
+    getWidgetEditor: (id: string, type: string) => undefined | React.ReactNode =
+        (id: string, type: string) => {
+            if (!Widgets.getEditor(type)) {
+                return;
+            }
+            return (
+                <WidgetEditor
+                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'string' is not assignable to type 'number | undefined'.
+                    key={id}
+                    ref={id}
+                    id={id}
+                    // @ts-expect-error [FEI-5003] - TS2783 - 'type' is specified more than once, so this usage will be overwritten.
+                    type={type}
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onChange={this._handleWidgetEditorChange.bind(this, id)}
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onRemove={this._handleWidgetEditorRemove.bind(this, id)}
+                    apiOptions={this.props.apiOptions}
+                    {...this.props.widgets[id]}
+                />
+            );
+        };
 
     _handleWidgetEditorChange: (
         id: string,
         newWidgetInfo: WidgetInfo,
-        cb?: () => mixed,
+        cb?: () => unknown,
         silent?: boolean,
     ) => void = (
         id: string,
         newWidgetInfo: WidgetInfo,
-        cb?: () => mixed,
+        cb?: () => unknown,
         silent?: boolean,
     ) => {
         const widgets = Object.assign({}, this.props.widgets);
@@ -550,6 +566,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
         // eslint-disable-next-line react/no-string-refs
         const textarea = this.refs.textarea;
         const re = new RegExp(widgetRegExp.replace("{id}", id), "gm");
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'value' does not exist on type 'ReactInstance'.
         this.props.onChange({content: textarea.value.replace(re, "")});
     };
 
@@ -589,6 +606,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
                     {
                         images: _.clone(images),
                     },
+                    // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'null' is not assignable to parameter of type '(() => unknown) | undefined'.
                     null, // callback
                     true, // silent
                 );
@@ -664,11 +682,13 @@ class Editor extends React.Component<EditorProps, EditorState> {
                 this.props.onChange({content: content});
             })
             .each((fileAndSentinel) => {
+                // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2345 - Argument of type 'File' is not assignable to parameter of type 'string'.
                 imageUploader(fileAndSentinel.file, (url) => {
                     // See componentDidUpdate() for how this flag is used
                     this.lastUserValue = origContent;
                     this.props.onChange({
                         content: this.state.textAreaValue.replace(
+                            // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
                             fileAndSentinel.sentinel,
                             url,
                         ),
@@ -677,8 +697,8 @@ class Editor extends React.Component<EditorProps, EditorState> {
             });
     };
 
-    handleChange: (e: SyntheticEvent<HTMLTextAreaElement>) => void = (
-        e: SyntheticEvent<HTMLTextAreaElement>,
+    handleChange: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void = (
+        e: React.SyntheticEvent<HTMLTextAreaElement>,
     ) => {
         // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
         // eslint-disable-next-line no-restricted-syntax
@@ -693,8 +713,8 @@ class Editor extends React.Component<EditorProps, EditorState> {
         }, this.props.apiOptions.editorChangeDelay);
     };
 
-    _handleKeyDown: (e: SyntheticKeyboardEvent<HTMLTextAreaElement>) => void = (
-        e: SyntheticKeyboardEvent<HTMLTextAreaElement>,
+    _handleKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void = (
+        e: React.KeyboardEvent<HTMLTextAreaElement>,
     ) => {
         e.stopPropagation();
         // Tab-completion of widgets. For example, to insert an image:
@@ -704,7 +724,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
             const textarea = ReactDOM.findDOMNode(this.refs.textarea);
 
             // findDOMNode can also return Text, but we know it's an element.
-            // $FlowFixMe[incompatible-call]
+            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLTextAreaElement'.
             const word = Util.textarea.getWordBeforeCursor(textarea);
             const matches = word.string.toLowerCase().match(shortcutRegexp);
 
@@ -730,165 +750,169 @@ class Editor extends React.Component<EditorProps, EditorState> {
         }
     };
 
-    _maybeCopyWidgets: (e: SyntheticEvent<HTMLTextAreaElement>) => void = (
-        e: SyntheticEvent<HTMLTextAreaElement>,
-    ) => {
-        // If there are widgets being cut/copied, put the widget JSON in
-        // localStorage.perseusLastCopiedWidgets to allow copy-pasting of
-        // widgets between Editors. Also store the text to be pasted in
-        // localStorage.perseusLastCopiedText since we want to know if the user
-        // is actually pasting something originally from Perseus later.
-        const textarea = e.currentTarget;
-        const selectedText = textarea.value.substring(
-            textarea.selectionStart,
-            textarea.selectionEnd,
-        );
+    _maybeCopyWidgets: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void =
+        (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
+            // If there are widgets being cut/copied, put the widget JSON in
+            // localStorage.perseusLastCopiedWidgets to allow copy-pasting of
+            // widgets between Editors. Also store the text to be pasted in
+            // localStorage.perseusLastCopiedText since we want to know if the user
+            // is actually pasting something originally from Perseus later.
+            const textarea = e.currentTarget;
+            const selectedText = textarea.value.substring(
+                textarea.selectionStart,
+                textarea.selectionEnd,
+            );
 
-        const widgetNames = _.map(
-            selectedText.match(rWidgetSplit),
-            (syntax) => {
-                // $FlowFixMe[incompatible-use] exec could return null.
-                return Util.rWidgetParts.exec(syntax)[1];
-            },
-        );
+            const widgetNames = _.map(
+                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'RegExpMatchArray | null' is not assignable to parameter of type 'Collection<any>'.
+                selectedText.match(rWidgetSplit),
+                (syntax) => {
+                    // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
+                    return Util.rWidgetParts.exec(syntax)[1];
+                },
+            );
 
-        const widgetData = _.pick(this.serialize().widgets, widgetNames);
+            const widgetData = _.pick(this.serialize().widgets, widgetNames);
 
-        // $FlowIgnore[prop-missing] localStorage can be used as an object
-        localStorage.perseusLastCopiedText = selectedText;
-        // $FlowIgnore[prop-missing] localStorage can be used as an object
-        localStorage.perseusLastCopiedWidgets = JSON.stringify(widgetData);
+            localStorage.perseusLastCopiedText = selectedText;
+            localStorage.perseusLastCopiedWidgets = JSON.stringify(widgetData);
 
-        Log.log(`Widgets copied: ${localStorage.perseusLastCopiedWidgets}`);
-    };
+            Log.log(`Widgets copied: ${localStorage.perseusLastCopiedWidgets}`);
+        };
 
-    _maybePasteWidgets: (e: SyntheticEvent<HTMLTextAreaElement>) => void = (
-        e: SyntheticEvent<HTMLTextAreaElement>,
-    ) => {
-        // Use the data from localStorage to paste any widgets we copied
-        // before. Avoid name conflicts by renumbering pasted widgets so that
-        // their numbers are always higher than the highest numbered widget of
-        // their type.
-        // TODO(sam): Fix widget numbering in the widget editor titles
-
-        // $FlowIgnore[prop-missing] localStorage can be used as an object
-        const widgetJSON = localStorage.perseusLastCopiedWidgets;
-        // $FlowIgnore[prop-missing] localStorage can be used as an object
-        const lastCopiedText = localStorage.perseusLastCopiedText;
-        // $FlowIgnore[prop-missing] Unknown originalEvent
-        const textToBePasted = e.originalEvent.clipboardData.getData("text");
-
-        // Only intercept if we have widget data to paste and the user is
-        // pasting something originally from Perseus.
-        // TODO(sam/aria/alex): Make it so that you can paste arbitrary text
-        // (e.g. from a text editor) instead of exactly what was copied, and
-        // let the widgetJSON match up with it. This would let you copy text
-        // into a buffer, perform complex operations on it, then paste it back.
-        if (widgetJSON && lastCopiedText === textToBePasted) {
-            e.preventDefault();
-
-            const widgetData = JSON.parse(widgetJSON);
-            const safeWidgetMapping = this._safeWidgetNameMapping(widgetData);
-
-            // Use safe widget name map to construct the new widget data
-            // TODO(aria/alex): Don't use `rWidgetSplit` or other piecemeal
-            // regexes directly; abstract this out so that we don't have to
-            // worry about potential edge cases.
-            const safeWidgetData = {};
-            for (const [key, data] of Object.entries(widgetData)) {
-                safeWidgetData[safeWidgetMapping[key]] = data;
-            }
-            const newWidgets = _.extend(safeWidgetData, this.props.widgets);
-
-            // Use safe widget name map to construct new text
-            const safeText = lastCopiedText.replace(rWidgetSplit, (syntax) => {
-                const match = Util.rWidgetParts.exec(syntax);
-                // $FlowFixMe[incompatible-use] exec could return null.
-                const completeWidget = match[0];
-                // $FlowFixMe[incompatible-use] exec could return null.
-                const widget = match[1];
-                return completeWidget.replace(
-                    widget,
-                    safeWidgetMapping[widget],
+    _maybePasteWidgets: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void =
+        (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
+            // Use the data from localStorage to paste any widgets we copied
+            // before. Avoid name conflicts by renumbering pasted widgets so that
+            // their numbers are always higher than the highest numbered widget of
+            // their type.
+            // TODO(sam): Fix widget numbering in the widget editor titles
+
+            const widgetJSON = localStorage.perseusLastCopiedWidgets;
+            const lastCopiedText = localStorage.perseusLastCopiedText;
+            const textToBePasted =
+                // @ts-expect-error [FEI-5003] - TS2339 - Property 'originalEvent' does not exist on type 'SyntheticEvent<HTMLTextAreaElement, Event>'.
+                e.originalEvent.clipboardData.getData("text");
+
+            // Only intercept if we have widget data to paste and the user is
+            // pasting something originally from Perseus.
+            // TODO(sam/aria/alex): Make it so that you can paste arbitrary text
+            // (e.g. from a text editor) instead of exactly what was copied, and
+            // let the widgetJSON match up with it. This would let you copy text
+            // into a buffer, perform complex operations on it, then paste it back.
+            if (widgetJSON && lastCopiedText === textToBePasted) {
+                e.preventDefault();
+
+                const widgetData = JSON.parse(widgetJSON);
+                const safeWidgetMapping =
+                    this._safeWidgetNameMapping(widgetData);
+
+                // Use safe widget name map to construct the new widget data
+                // TODO(aria/alex): Don't use `rWidgetSplit` or other piecemeal
+                // regexes directly; abstract this out so that we don't have to
+                // worry about potential edge cases.
+                const safeWidgetData: Record<string, any> = {};
+                for (const [key, data] of Object.entries(widgetData)) {
+                    safeWidgetData[safeWidgetMapping[key]] = data;
+                }
+                const newWidgets = _.extend(safeWidgetData, this.props.widgets);
+
+                // Use safe widget name map to construct new text
+                const safeText = lastCopiedText.replace(
+                    rWidgetSplit,
+                    (syntax) => {
+                        const match = Util.rWidgetParts.exec(syntax);
+                        // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
+                        const completeWidget = match[0];
+                        // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
+                        const widget = match[1];
+                        return completeWidget.replace(
+                            widget,
+                            safeWidgetMapping[widget],
+                        );
+                    },
                 );
-            });
 
-            // Add pasted text to previous content, replacing selected text to
-            // replicate normal paste behavior.
-            const textarea = e.currentTarget;
-            const selectionStart = textarea.selectionStart;
-            const newContent =
-                this.state.textAreaValue.substr(0, selectionStart) +
-                safeText +
-                this.state.textAreaValue.substr(textarea.selectionEnd);
-
-            // See componentDidUpdate() for how this flag is used
-            this.lastUserValue = this.state.textAreaValue;
-            this.props.onChange(
-                {content: newContent, widgets: newWidgets},
-                () => {
-                    const expectedCursorPosition =
-                        selectionStart + safeText.length;
-                    Util.textarea.moveCursor(textarea, expectedCursorPosition);
-                },
-            );
-        }
-    };
+                // Add pasted text to previous content, replacing selected text to
+                // replicate normal paste behavior.
+                const textarea = e.currentTarget;
+                const selectionStart = textarea.selectionStart;
+                const newContent =
+                    this.state.textAreaValue.substr(0, selectionStart) +
+                    safeText +
+                    this.state.textAreaValue.substr(textarea.selectionEnd);
 
-    _safeWidgetNameMapping: (widgetData: {[name: string]: any, ...}) => {...} =
-        (widgetData: {[name: string]: any, ...}) => {
-            // Helper function for _maybePasteWidgets.
-            // For each widget about to be pasted, construct a mapping from
-            // old widget name to a new widget name that doesn't have conflicts
-            // with widgets already in the editor.
-            // eg. If there is an "image 2" already present in the editor and we're
-            // about to paste in two new images, return
-            // { "image 1": "image 3", "image 2": "image 4" }
-
-            // List of widgets about to be pasted as [[name, number], ...]
-            const widgets = _.keys(widgetData).map((name) => name.split(" "));
-            const widgetTypes = _.uniq(widgets.map((widget) => widget[0]));
-
-            // List of existing widgets as [[name, number], ...]
-            const existingWidgets = _.keys(this.props.widgets).map((name) =>
-                name.split(" "),
-            );
+                // See componentDidUpdate() for how this flag is used
+                this.lastUserValue = this.state.textAreaValue;
+                this.props.onChange(
+                    {content: newContent, widgets: newWidgets},
+                    () => {
+                        const expectedCursorPosition =
+                            selectionStart + safeText.length;
+                        Util.textarea.moveCursor(
+                            textarea,
+                            expectedCursorPosition,
+                        );
+                    },
+                );
+            }
+        };
 
-            // Mapping of widget type to a safe (non-conflicting) number
-            // eg. { "image": 2, "dropdown": 1 }
-            const safeWidgetNums = {};
-            _.each(widgetTypes, (type) => {
-                safeWidgetNums[type] = _.chain(existingWidgets)
-                    .filter((existingWidget) => existingWidget[0] === type)
-                    .map((existingWidget) => +existingWidget[1] + 1)
-                    .max()
-                    .value();
-                // If there are no existing widgets _.max returns -Infinity
-                safeWidgetNums[type] = Math.max(safeWidgetNums[type], 1);
-            });
+    _safeWidgetNameMapping: (widgetData: {
+        [name: string]: any;
+    }) => Record<any, any> = (widgetData: {[name: string]: any}) => {
+        // Helper function for _maybePasteWidgets.
+        // For each widget about to be pasted, construct a mapping from
+        // old widget name to a new widget name that doesn't have conflicts
+        // with widgets already in the editor.
+        // eg. If there is an "image 2" already present in the editor and we're
+        // about to paste in two new images, return
+        // { "image 1": "image 3", "image 2": "image 4" }
+
+        // List of widgets about to be pasted as [[name, number], ...]
+        const widgets = _.keys(widgetData).map((name) => name.split(" "));
+        const widgetTypes = _.uniq(widgets.map((widget) => widget[0]));
+
+        // List of existing widgets as [[name, number], ...]
+        const existingWidgets = _.keys(this.props.widgets).map((name) =>
+            name.split(" "),
+        );
 
-            // Construct mapping, incrementing the vals in safeWidgetNums as we go
-            const safeWidgetMapping = {};
-            _.each(widgets, (widget) => {
-                const widgetName = widget.join(" ");
-                const widgetType = widget[0];
+        // Mapping of widget type to a safe (non-conflicting) number
+        // eg. { "image": 2, "dropdown": 1 }
+        const safeWidgetNums: Record<string, any> = {};
+        _.each(widgetTypes, (type) => {
+            safeWidgetNums[type] = _.chain(existingWidgets)
+                .filter((existingWidget) => existingWidget[0] === type)
+                .map((existingWidget) => +existingWidget[1] + 1)
+                .max()
+                .value();
+            // If there are no existing widgets _.max returns -Infinity
+            safeWidgetNums[type] = Math.max(safeWidgetNums[type], 1);
+        });
 
-                safeWidgetMapping[
-                    widgetName
-                ] = `${widgetType} ${safeWidgetNums[widgetType]}`;
-                safeWidgetNums[widgetType]++;
-            });
+        // Construct mapping, incrementing the vals in safeWidgetNums as we go
+        const safeWidgetMapping: Record<string, any> = {};
+        _.each(widgets, (widget) => {
+            const widgetName = widget.join(" ");
+            const widgetType = widget[0];
 
-            return safeWidgetMapping;
-        };
+            safeWidgetMapping[
+                widgetName
+            ] = `${widgetType} ${safeWidgetNums[widgetType]}`;
+            safeWidgetNums[widgetType]++;
+        });
+
+        return safeWidgetMapping;
+    };
 
     _addWidgetToContent: (
         oldContent: string,
-        cursorRange: $ReadOnlyArray<number>,
+        cursorRange: ReadonlyArray<number>,
         widgetType: string,
     ) => void = (
         oldContent: string,
-        cursorRange: $ReadOnlyArray<number>,
+        cursorRange: ReadonlyArray<number>,
         widgetType: string,
     ) => {
         // eslint-disable-next-line react/no-string-refs
@@ -897,11 +921,12 @@ class Editor extends React.Component<EditorProps, EditorState> {
         // Note: we have to use _.map here instead of Array::map
         // because the results of a .match might be null if no
         // widgets were found.
+        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'RegExpMatchArray | null' is not assignable to parameter of type 'Collection<any>'.
         const allWidgetIds = _.map(oldContent.match(rWidgetSplit), (syntax) => {
             const match = Util.rWidgetParts.exec(syntax);
-            // $FlowFixMe[incompatible-use] exec could return null.
+            // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
             const type = match[2];
-            // $FlowFixMe[incompatible-use] exec could return null.
+            // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
             const num = +match[3];
             return [type, num];
         });
@@ -939,10 +964,12 @@ class Editor extends React.Component<EditorProps, EditorState> {
         const newWidgets = _.clone(this.props.widgets);
         newWidgets[id] = {
             options: Widgets.getEditor(widgetType)?.defaultProps,
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'string' is not assignable to type '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"'.
             type: widgetType,
             // Track widget version on creation, so that a widget editor
             // without a valid version prop can only possibly refer to a
             // pre-versioning creation time.
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'Version | null | undefined' is not assignable to type 'Version | undefined'.
             version: Widgets.getVersion(widgetType),
         };
 
@@ -957,6 +984,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
                 Util.textarea.moveCursor(
                     // findDOMNode can return Text but we know this is Element
                     // $FlowFixMe[incompatible-call]
+                    // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'HTMLTextAreaElement'.
                     textarea,
                     // We want to put the cursor after the widget
                     // and after any added newlines
@@ -972,14 +1000,16 @@ class Editor extends React.Component<EditorProps, EditorState> {
 
         this._addWidgetToContent(
             this.props.content,
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'selectionStart' does not exist on type 'ReactInstance'. | TS2339 - Property 'selectionEnd' does not exist on type 'ReactInstance'.
             [textarea.selectionStart, textarea.selectionEnd],
             widgetType,
         );
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
         textarea.focus();
     };
 
-    addTemplate: (e: SyntheticEvent<HTMLTextAreaElement>) => void = (
-        e: SyntheticEvent<HTMLTextAreaElement>,
+    addTemplate: (e: React.SyntheticEvent<HTMLTextAreaElement>) => void = (
+        e: React.SyntheticEvent<HTMLTextAreaElement>,
     ) => {
         const templateType = e.currentTarget.value;
         if (templateType === "") {
@@ -1049,6 +1079,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
             .chain()
             .map((id) => {
                 // eslint-disable-next-line react/no-string-refs
+                // @ts-expect-error [FEI-5003] - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
                 const issuesFunc = this.refs[id].getSaveWarnings;
                 const issues = issuesFunc ? issuesFunc() : [];
                 return _.map(issues, (issue) => id + ": " + issue);
@@ -1068,7 +1099,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
              * textarea should be refined with an instanceof check to
              * HTMLTextAreaElement so that these props are available.
              */
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
             textarea.focus();
         }
     };
@@ -1083,27 +1114,28 @@ class Editor extends React.Component<EditorProps, EditorState> {
              * textarea should be refined with an instanceof check to
              * HTMLTextAreaElement so that these props are available.
              */
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
             textarea.selectionStart = textarea.value.length;
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'selectionEnd' does not exist on type 'Element | Text'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
             textarea.selectionEnd = textarea.value.length;
         }
     };
 
-    serialize: (options: any) => {|
-        content: string,
-        images: any,
-        replace: any | void,
-        widgets: {...},
-    |} = (options: any) => {
+    serialize: (options?: any) => {
+        content: string;
+        images: any;
+        replace: any | undefined;
+        widgets: Record<any, any>;
+    } = (options: any) => {
         // need to serialize the widgets since the state might not be
         // completely represented in props. ahem //transformer// (and
         // interactive-graph and plotter).
-        const widgets = {};
+        const widgets: Record<string, any> = {};
         // eslint-disable-next-line react/no-string-refs
         const widgetIds = _.intersection(this.widgetIds, _.keys(this.refs));
         _.each(widgetIds, (id) => {
             // eslint-disable-next-line react/no-string-refs
+            // @ts-expect-error [FEI-5003] - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
             widgets[id] = this.refs[id].serialize();
         });
 
@@ -1131,7 +1163,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
         };
     };
 
-    render(): React.Element<"div"> {
+    render(): React.ReactNode {
         let pieces;
         let widgets;
         let underlayPieces;
@@ -1139,7 +1171,10 @@ class Editor extends React.Component<EditorProps, EditorState> {
         let templatesDropDown;
         let widgetsAndTemplates;
         let wordCountDisplay;
-        const katexErrorList = [];
+        const katexErrorList: Array<{
+            math: string;
+            message: never;
+        }> = [];
 
         if (this.props.showWordCount) {
             const numChars = PerseusMarkdown.characterCount(this.props.content);
@@ -1172,6 +1207,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
                     // Normal text
                     underlayPieces.push(pieces[i]);
 
+                    // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
                     const ast = PerseusMarkdown.parse(pieces[i]);
 
                     PerseusMarkdown.traverseContent(ast, (node) => {
@@ -1181,9 +1217,10 @@ class Editor extends React.Component<EditorProps, EditorState> {
                                 katex.renderToString(content, {
                                     colorIsTextColor: true,
                                 });
-                            } catch (e) {
+                            } catch (e: any) {
                                 katexErrorList.push({
                                     math: content,
+                                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'any' is not assignable to type 'never'.
                                     message: e.message,
                                 });
                             }
@@ -1242,6 +1279,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
 
             const insertTemplateString = "Insert template\u2026";
             templatesDropDown = (
+                // @ts-expect-error [FEI-5003] - TS2322 - Type '(e: SyntheticEvent<HTMLTextAreaElement, Event>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
                 <select onChange={this.addTemplate}>
                     <option value="">{insertTemplateString}</option>
                     <option disabled>--</option>
@@ -1257,7 +1295,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
             );
 
             if (!this.props.immutableWidgets) {
-                const widgetNodes = ((Object.values(widgets): any): React.Node);
+                const widgetNodes = Object.values(widgets) as React.ReactNode;
                 widgetsAndTemplates = (
                     <div className="perseus-editor-widgets">
                         <div className="perseus-editor-widgets-selectors">
@@ -1329,7 +1367,7 @@ class Editor extends React.Component<EditorProps, EditorState> {
             borderTop: "none",
             padding: 4,
             backgroundColor: "pink",
-        };
+        } as const;
 
         return (
             <div