Extending Hallojs in Django Wagtail With Edit Source Button

Question

I've been abel to add an an 'Edit Html' source button to my editor with the following hook:

@hooks.register('insert_editor_js')
def enable_source():
    return format_html(
        """
        <script>
            registerHalloPlugin('hallohtml');
        </script>
        """
    )

It adds a button, but I can't figure out how to add an icon - see screenshot below with no icon.

All buttons except no icon make the source editor work great. Thank you for your help.

Answer 1

Use the insert_editor_css hook to provide additional CSS files to the editor.

@hooks.register('insert_editor_css')
def editor_css():
    return format_html(
        '<link rel="stylesheet" href="{}">',
        static('demo/css/editor-overrides.css')
    )

In your hallohtml plugin JS, assign icon-hallohtml to the button and use the following CSS to style it with an H character:

.hallotoolbar .halloformat .ui-button-text .icon-hallohtml:before {
    content:'H';
}