Add telepath adapter for image chooser

client/src/entrypoints/images/image-chooser-telepath.js

@@ -0,0 +1,17 @@
+class ImageChooser {
+  constructor(html, idForLabel) {
+    this.html = html;
+    this.idForLabel = idForLabel;
+  }
+
+  render(placeholder, name, id, initialState) {
+    const html = this.html.replace(/__NAME__/g, name).replace(/__ID__/g, id);
+    // eslint-disable-next-line no-param-reassign
+    placeholder.outerHTML = html;
+    /* the chooser object returned by createImageChooser also serves as the JS widget representation */
+    // eslint-disable-next-line no-undef
+    const chooser = createImageChooser(id);
+    chooser.setState(initialState);
+  }
+}
+window.telepath.register('wagtail.images.widgets.ImageChooser', ImageChooser);

client/webpack.config.js

@@ -49,6 +49,7 @@ module.exports = function exports() {
     ],
     images: [
       'image-chooser',
+      'image-chooser-telepath',
     ],
     documents: [
       'document-chooser',

wagtail/images/blocks.py

@@ -16,7 +16,19 @@ class ImageChooserBlock(ChooserBlock):
     @cached_property
     def widget(self):
         from wagtail.images.widgets import AdminImageChooser
-        return AdminImageChooser
+        return AdminImageChooser()
+
+    def get_form_state(self, value):
+        value_data = self.widget.get_value_data(value)
+        if value_data is None:
+            return None
+        else:
+            return {
+                'id': value_data['id'],
+                'edit_link': value_data['edit_url'],
+                'title': value_data['title'],
+                'preview': value_data['preview'],
+            }
 
     def render_basic(self, value, context=None):
         if value:

wagtail/images/widgets.py

@@ -7,6 +7,8 @@ from django.utils.translation import gettext_lazy as _
 
 from wagtail.admin.staticfiles import versioned_static
 from wagtail.admin.widgets import AdminChooser
+from wagtail.core.telepath import register
+from wagtail.core.widget_adapters import WidgetAdapter
 from wagtail.images import get_image_model
 from wagtail.images.shortcuts import get_rendition_or_not_found
 
@@ -64,3 +66,21 @@ class AdminImageChooser(AdminChooser):
             versioned_static('wagtailimages/js/image-chooser-modal.js'),
             versioned_static('wagtailimages/js/image-chooser.js'),
         ])
+
+
+class ImageChooserAdapter(WidgetAdapter):
+    js_constructor = 'wagtail.images.widgets.ImageChooser'
+
+    def js_args(self, widget, context):
+        return [
+            widget.render_html('__NAME__', None, attrs={'id': '__ID__'}),
+            widget.id_for_label('__ID__'),
+        ]
+
+    class Media:
+        js = [
+            versioned_static('wagtailimages/js/image-chooser-telepath.js'),
+        ]
+
+
+register(ImageChooserAdapter(), AdminImageChooser)