Extending hallo.js using Wagtail hooks

hallo-mirrorstage.coffee

((jQuery) ->
  jQuery.widget "IKS.mirrorstageeditor",
    boldElement: null

    options:
      uuid: ''
      editable: null

    _create: ->
      # Add any actions you want to run on plugin initialization
      # here

    populateToolbar: (toolbar) ->
      # Create an element for holding the button
      @boldElement = jQuery '<span></span>'

      # Use Hallo Button
      @boldElement.hallobutton
        uuid: @options.uuid
        editable: @options.editable
        label: 'Bold'
        # Icons come from Font Awesome
        icon: 'fa fa-space-shuttle'
        # Commands are used for execCommand and queryCommandState
        command: 'bold'

      # Append the button to toolbar
      toolbar.append @boldElement

)(jQuery)

wagtail_hooks.py

from django.utils.html import format_html, format_html_join
from django.conf import settings

from wagtail.wagtailadmin import hooks

def editor_js():
	js_files = [
		'mirrorstage/js/hallo-plugins/hallo-mirrorstage.js',
	]
	js_includes = format_html_join('\n', '<script src="{0}{1}"></script>',
		((settings.STATIC_URL, filename) for filename in js_files)
	)

	return js_includes + format_html(
		"""
		<script>
			console.log('Mirrorstage Editor JS Loaded!');
			registerHalloPlugin('mirrorstageeditor');
		</script>
		"""
	)

hooks.register('insert_editor_js', editor_js)


def editor_css():
	return format_html('<link rel="stylesheet" href="'+ settings.STATIC_URL + 'mirrorstage/css/vendor/font-awesome/css/font-awesome.min.css">')

hooks.register('insert_editor_css', editor_css)