Convert HalloRichTextArea to template rendering

wagtail/admin/rich_text/editors/hallo.py

@@ -6,7 +6,6 @@ from django.forms import Media, widgets
 from wagtail.admin.edit_handlers import RichTextFieldPanel
 from wagtail.admin.rich_text.converters.editor_html import EditorHTMLConverter
 from wagtail.core.rich_text import features
-from wagtail.utils.widgets import WidgetWithScript
 
 
 class HalloPlugin:
@@ -78,7 +77,9 @@ CORE_HALLO_PLUGINS = [
 ]
 
 
-class HalloRichTextArea(WidgetWithScript, widgets.Textarea):
+class HalloRichTextArea(widgets.Textarea):
+    template_name = 'wagtailadmin/widgets/hallo_rich_text_area.html'
+
     # this class's constructor accepts a 'features' kwarg
     accepts_features = True
 
@@ -114,7 +115,9 @@ class HalloRichTextArea(WidgetWithScript, widgets.Textarea):
 
         return self.converter.from_database_format(value)
 
-    def render_js_init(self, id_, name, value):
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+
         if self.options is not None and 'plugins' in self.options:
             # explicit 'plugins' config passed in options, so use that
             plugin_data = self.options['plugins']
@@ -122,10 +125,9 @@ class HalloRichTextArea(WidgetWithScript, widgets.Textarea):
             plugin_data = OrderedDict()
             for plugin in self.plugins:
                 plugin.construct_plugins_list(plugin_data)
+        context['widget']['plugins_json'] = json.dumps(plugin_data)
 
-        return "makeHalloRichTextEditable({0}, {1});".format(
-            json.dumps(id_), json.dumps(plugin_data)
-        )
+        return context
 
     def value_from_datadict(self, data, files, name):
         original_value = super().value_from_datadict(data, files, name)

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

@@ -0,0 +1 @@
+{% include 'django/forms/widgets/textarea.html' %}<script>makeHalloRichTextEditable("{{ widget.attrs.id|escapejs }}", {{ widget.plugins_json|safe }});</script>

wagtail/admin/tests/test_rich_text.py

@@ -174,7 +174,7 @@ class TestHalloRichText(BaseRichTextEditHandlerTestCase, WagtailTestUtils):
         self.assertEqual(response.status_code, 200)
 
         # Check that hallo (default editor now) initialisation is applied
-        self.assertContains(response, 'makeHalloRichTextEditable("__PREFIX__-value",')
+        self.assertContains(response, 'makeHalloRichTextEditable("__PREFIX__\\u002Dvalue",')
 
         # check that media for the default hallo features (but not others) is being imported
         self.assertContains(response, 'wagtaildocs/js/hallo-plugins/hallo-wagtaildoclink.js')
@@ -564,12 +564,12 @@ class TestHalloJsHeadingOrder(BaseRichTextEditHandlerTestCase, WagtailTestUtils)
         feature_registry.default_features.extend(['h1', 'h5', 'h6'])
 
         widget = HalloRichTextArea()
-        js_init = widget.render_js_init('the_id', 'the_name', '<p>the value</p>')
+        html = widget.render('the_name', '<p>the value</p>', attrs={'id': 'the_id'})
 
         expected_options = (
             '"halloheadings": {"formatBlocks": ["p", "h1", "h2", "h3", "h4", "h5", "h6"]}'
         )
-        self.assertIn(expected_options, js_init)
+        self.assertIn(expected_options, html)
 
 
 class TestWidgetWhitelisting(TestCase, WagtailTestUtils):