Convert DraftailRichTextArea to template rendering

wagtail/admin/rich_text/editors/draftail/__init__.py

@@ -5,10 +5,11 @@ from django.forms import Media, widgets
 from wagtail.admin.edit_handlers import RichTextFieldPanel
 from wagtail.admin.rich_text.converters.contentstate import ContentstateConverter
 from wagtail.core.rich_text import features as feature_registry
-from wagtail.utils.widgets import WidgetWithScript
 
 
-class DraftailRichTextArea(WidgetWithScript, widgets.HiddenInput):
+class DraftailRichTextArea(widgets.HiddenInput):
+    template_name = 'wagtailadmin/widgets/draftail_rich_text_area.html'
+
     # this class's constructor accepts a 'features' kwarg
     accepts_features = True
 
@@ -39,6 +40,12 @@ class DraftailRichTextArea(WidgetWithScript, widgets.HiddenInput):
 
         self.converter = ContentstateConverter(self.features)
 
+        default_attrs = {'data-draftail-input': True}
+        attrs = kwargs.get('attrs')
+        if attrs:
+            default_attrs.update(attrs)
+        kwargs['attrs'] = default_attrs
+
         super().__init__(*args, **kwargs)
 
     def format_value(self, value):
@@ -51,17 +58,10 @@ class DraftailRichTextArea(WidgetWithScript, widgets.HiddenInput):
 
         return self.converter.from_database_format(value)
 
-    def render(self, name, value, attrs=None):
-        if attrs is None:
-            attrs = {}
-
-        attrs['data-draftail-input'] = True
-
-        return super().render(name, value, attrs)
-
-    def render_js_init(self, id_, name, value):
-        return "window.draftail.initEditor('#{id}', {opts}, document.currentScript)".format(
-            id=id_, opts=json.dumps(self.options))
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        context['widget']['options_json'] = json.dumps(self.options)
+        return context
 
     def value_from_datadict(self, data, files, name):
         original_value = super().value_from_datadict(data, files, name)

wagtail/admin/templates/wagtailadmin/widgets/draftail_rich_text_area.html

@@ -0,0 +1 @@
+{% include 'django/forms/widgets/hidden.html' %}<script>window.draftail.initEditor('#{{ widget.attrs.id|escapejs }}', {{ widget.options_json|safe }}, document.currentScript)</script>

wagtail/admin/tests/test_rich_text.py

@@ -126,7 +126,7 @@ class TestDefaultRichText(BaseRichTextEditHandlerTestCase, WagtailTestUtils):
         self.assertEqual(response.status_code, 200)
 
         # Check that draftail (default editor) initialisation is applied
-        self.assertContains(response, "window.draftail.initEditor('#__PREFIX__-value',")
+        self.assertContains(response, "window.draftail.initEditor('#__PREFIX__\\u002Dvalue',")
 
         # check that media for draftail is being imported
         self.assertContains(response, 'wagtailadmin/js/draftail.js')