Add telepath adapter for snippet chooser

client/src/entrypoints/snippets/snippet-chooser-telepath.js

@@ -0,0 +1,18 @@
+class SnippetChooser {
+  constructor(html, idForLabel, model) {
+    this.html = html;
+    this.idForLabel = idForLabel;
+    this.model = model;
+  }
+
+  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 = createSnippetChooser(id, this.model);
+    chooser.setState(initialState);
+  }
+}
+window.telepath.register('wagtail.snippets.widgets.SnippetChooser', SnippetChooser);

client/webpack.config.js

@@ -57,6 +57,7 @@ module.exports = function exports() {
     ],
     snippets: [
       'snippet-chooser',
+      'snippet-chooser-telepath',
     ],
   };
 

wagtail/snippets/blocks.py

@@ -18,5 +18,16 @@ class SnippetChooserBlock(ChooserBlock):
         from wagtail.snippets.widgets import AdminSnippetChooser
         return AdminSnippetChooser(self.target_model)
 
+    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'],
+                'string': value_data['string'],
+            }
+
     class Meta:
         icon = "snippet"

wagtail/snippets/widgets.py

@@ -9,6 +9,8 @@ from django.utils.translation import gettext_lazy as _
 from wagtail.admin.staticfiles import versioned_static
 from wagtail.admin.widgets import AdminChooser
 from wagtail.admin.widgets.button import ListingButton
+from wagtail.core.telepath import register
+from wagtail.core.widget_adapters import WidgetAdapter
 
 
 class AdminSnippetChooser(AdminChooser):
@@ -55,14 +57,16 @@ class AdminSnippetChooser(AdminChooser):
             'edit_url': value_data.get('edit_url', ''),
         })
 
-    def render_js_init(self, id_, name, value_data):
+    @property
+    def model_string(self):
         model = self.target_model
+        return '{app}/{model}'.format(app=model._meta.app_label, model=model._meta.model_name)
 
+    def render_js_init(self, id_, name, value_data):
         return "createSnippetChooser({id}, {model});".format(
             id=json.dumps(id_),
-            model=json.dumps('{app}/{model}'.format(
-                app=model._meta.app_label,
-                model=model._meta.model_name)))
+            model=json.dumps(self.model_string)
+        )
 
     @property
     def media(self):
@@ -72,5 +76,23 @@ class AdminSnippetChooser(AdminChooser):
         ])
 
 
+class SnippetChooserAdapter(WidgetAdapter):
+    js_constructor = 'wagtail.snippets.widgets.SnippetChooser'
+
+    def js_args(self, widget, context):
+        return [
+            widget.render_html('__NAME__', None, attrs={'id': '__ID__'}),
+            widget.id_for_label('__ID__'), widget.model_string
+        ]
+
+    class Media:
+        js = [
+            versioned_static('wagtailsnippets/js/snippet-chooser-telepath.js'),
+        ]
+
+
+register(SnippetChooserAdapter(), AdminSnippetChooser)
+
+
 class SnippetListingButton(ListingButton):
     pass