Converted draftailmodelchoosers.js to tsx. Added some draft js typing…

…s that I know about.

wagtailmodelchoosers/client/DefaultDecorator.tsx

@@ -1,9 +1,10 @@
+import { ContentState } from "draft-js";
 import React from "react";
 
 type Props = {
-    entityKey: string;
-    contentState: any;
-    children: React.ReactNode;
+    entityKey?: string;
+    contentState: ContentState;
+    children?: React.ReactNode;
 };
 
 const DefaultDecorator = (entityData: any, props: Props) => {

wagtailmodelchoosers/client/draftailmodelchoosers.tsx

@@ -0,0 +1,54 @@
+import ModelSource from "./sources/ModelSource";
+import DefaultDecorator from "./DefaultDecorator";
+
+const WrapDecorator =
+    (entityData, decorator) =>
+    (...args) =>
+        decorator(entityData, ...args);
+
+type Props = {
+    modelChooserEntityTypes: any[];
+    draftailOptions: any;
+    widgetAttrIds: any;
+};
+
+const modelChooserDraftailInit = ({
+    modelChooserEntityTypes,
+    draftailOptions,
+    widgetAttrIds,
+}: Props) => {
+    // Save entities for decorators to use.  Doing this because I can't find a way to get entity type
+    // data from within a decorator without saving it to contentstate, which ends up getting saved
+    // to DB, which is unnecessary and breaks historical data.
+
+    // Typescript doesn't know about .fromEntries, but it has been polyfilled for IE.
+    // @ts-ignore
+    const modelChooserDraftailEntities = Object.fromEntries(
+        draftailOptions.entityTypes
+            .filter((et) => modelChooserEntityTypes.includes(et.type))
+            .map((et) => [et.type, et])
+    );
+
+    // Register all modelchooser entity plugins.
+    modelChooserEntityTypes.forEach((entityType) => {
+        const decorators = (window as any).draftailDecorators || {};
+        const decorator = decorators[entityType] || DefaultDecorator;
+        const plugin = {
+            type: entityType,
+            source: ModelSource,
+            decorator: WrapDecorator(
+                modelChooserDraftailEntities[entityType],
+                decorator
+            ),
+        };
+        (window as any).draftail.registerPlugin(plugin);
+    });
+
+    (window as any).draftail.initEditor(
+        widgetAttrIds,
+        draftailOptions,
+        document.currentScript
+    );
+};
+
+(window as any).modelChooserDraftailInit = modelChooserDraftailInit;

wagtailmodelchoosers/client/sources/ModelSource.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import "../polyfills";
-import { Modifier, EditorState } from "draft-js";
+import { Modifier, EditorState, Entity } from "draft-js";
 import ModelPicker from "../components/ModelPicker";
 
 const API_BASE_URL = "/admin/modelchoosers/api/v1";
 
 type Props = {
-    editorState: any;
+    editorState: EditorState;
     options: any;
-    entity?: any;
+    entity?: Entity;
     onClose: () => void;
     onUpdate: () => void;
     onComplete: (nextState: any) => void;

wagtailmodelchoosers/client/webpack.config.dev.js

@@ -9,7 +9,7 @@ module.exports = {
     wagtailmodelchoosers:
       "./wagtailmodelchoosers/client/wagtailmodelchoosers.tsx",
     draftailmodelchoosers:
-      "./wagtailmodelchoosers/client/draftailmodelchoosers.js",
+      "./wagtailmodelchoosers/client/draftailmodelchoosers.tsx",
     polyfills: "./wagtailmodelchoosers/client/polyfills.js",
   },
   output: {