How to install DraftJS plugins into a Wagtail site?

Question

I would like to install the draft-js-prism plugin into my Wagtail 5.0 site. Unfortunately, my knowledge of how Draft.js and React work could be inscribed on the head of a pin, so I cannot wrap my head around how to install a custom DraftJS plugin into Wagtail's Draftail system.

Wagtail's docs speak to "extending the Draftail editor", and I think the "block" type is likely what I want, since draft-js-prism seems to create a custom Code Block block. But how do I go from "not having any draftjs plugins in my project" to the point where I can follow Wagtail's docs on how to install the plugin into my Draftail editors? I have no idea how to even get the prism code into my codebase to tell Wagtail to use it, since my project doesn't currently use npm, and I have little experience with that entire ecosystem.

Any help for this JS newb would be greatly appreciated.

Answer 1

It would be much much easier to just create a 'code' block dedicated for this rather than integrating it into Draftail. You can get a custom JS and CSS tailored to your needs at https://prismjs.com/download.html. Select the theme and languages you want to use and any extras (the copy button for example).

You might use a ChoiceBlock for the languages (matching the options you selected for download):

class CodeChoiceBlock(ChoiceBlock):
    choices=[
        ('python', 'Python'),
        ('css', 'CSS'),
        ('html', 'HTML'),
        ('javascript', 'Javascript'),
        ('bash', 'Bash/Shell'),
        ('django', 'Django Template'),
        ('json', 'JSON'),
        ('sql', 'SQL'),
        ('xml', 'XML'),
        ('git', 'Git'),
        ('powershell', 'PowerShell'),
        ('r', 'R'),
    ]

Then your block just needs to be something like:

class BlogCodeBlock(StructBlock):
    language = CodeChoiceBlock()
    code = TextBlock()

    class Meta:
        template = "blocks/code_block.html"
        icon = "code"
        label = _("Code Block")

And template:

<div class="block-container">
    <pre><code class="prism-block language-{{ self.language }}">{{ self.code }}</code></pre>
</div>

You'll need to decide when and where to load your css/jss depending on how often you add a code block to your pages, which page types etc.