Draftail getting started plugin not working in new Wagtail 4.1.1 project

Question

When working through the example of setting up a "Mark" button for the draftail as per the instructions on https://docs.wagtail.org/en/stable/extending/extending_draftail.html I find it does not work for Wagtail 4.1.1. This is like the simplest getting started example I can find. I followed the steps by creating a wagtail_hooks.py file in a new app folder and no button appears in the rich text editor nor along the side?

This is all I have in models.py

from django.db import models

from wagtail.models import Page
from wagtail.fields import RichTextField
from wagtail.admin.panels import FieldPanel


class HomePage(Page):
    body = RichTextField(null=True, blank=True)

    content_panels = Page.content_panels + [
        FieldPanel('body'),
    ]

that and the wagtail_hooks.py lifted straight from the documentation. Any ideas on why this isn't working?

Answer 1

You need to add mark to the feature list on your RichTextBlock. At the moment, without any feature declaration, it just loads the default features.

Maybe something like

body = RichTextField(null=True, blank=True, features= ['bold', 'italic', 'link', 'mark'])

Or whichever features you want to use.

I'd recommend adding the WAGTAILADMIN_RICH_TEXT_EDITORS settings to your base.py so you don't need to declare the full list each time. For example:

WAGTAILADMIN_RICH_TEXT_EDITORS = {
    'default': {
        'WIDGET': 'wagtail.admin.rich_text.DraftailRichTextArea',
        'OPTIONS': {
            'features': ['h2', 'h3', 'h4', 'bold', 'italic', 'link', 'ol', 'ul', 'hr']
        }
    },
    'full': {
        'WIDGET': 'wagtail.admin.rich_text.DraftailRichTextArea',
        'OPTIONS': {
            'features': ['h2', 'h3', 'h4', 'h5', 'h6', 'bold', 'italic', 'ol', 'ul',
                         'link', 'hr', 'code', 'document-link', 'blockquote']
        }
    },
    'minimal': {
        'WIDGET': 'wagtail.admin.rich_text.DraftailRichTextArea',
        'OPTIONS': {
            'features': ['bold', 'italic', 'link']
        }
    },
}

Then you can call RichTextBlock(editor='minimal') for the minimal feature set etc..

I found the draftail documentation really hard to work through. It skips a lot of vital info, and skims over others, giving code examples without any explanation.

Maybe these articles help explain a bit more