Add support for code tag in rich text editor

<code> tag is not a built-in plugin for wagtail. We use wagtail in-house for our website and would like to be able to write blog posts that include inline code as well as code blocks. I was surprised to find that <code> is not currently one of the tags available by default. I know that many users of wagtail are non-technical and may not need that particular button, but it would be cool to have out of the box for those of us who are.

[joonis]

For now I implemented a code-block by defining a custom PreformattedTextElementHandler that keeps all whitespace by temporarily changing the regular expression WHITESPACE_RE to match nothing. Not the best approach since it is a module wide constant, but it works:

import re

from wagtail.core import hooks
import wagtail.admin.rich_text.editors.draftail.features as draftail_features
from wagtail.admin.rich_text.converters import html_to_contentstate
from wagtail.admin.rich_text.converters.html_to_contentstate import (
    BlockElementHandler, KEEP_WHITESPACE, WHITESPACE_RE
)

# Regex that matches nothing
NOTHING_RE = re.compile('a^')

class PreformattedTextElementHandler(BlockElementHandler):
    """
    BlockElementHandler that preserves all whitespace.
    """
    def handle_starttag(self, name, attrs, state, contentstate):
        super().handle_starttag(name, attrs, state, contentstate)
        # Keep all whitespace while rendering this block
        html_to_contentstate.WHITESPACE_RE = NOTHING_RE
        state.leading_whitespace = KEEP_WHITESPACE

    def handle_endtag(self, name, state, contentstate):
        # Reset whitespace handling to normal behaviour
        html_to_contentstate.WHITESPACE_RE = WHITESPACE_RE
        super().handle_endtag(name, state, contentstate)


@hooks.register('register_rich_text_features')
def register_code_block_feature(features):
    """
    Register the `code-block` feature, which uses the
    `code-block` Draft.js block type and store it as
    HTML within a `<pre class="code">` tag.
    """
    feature_name = 'code-block'
    feature_type = 'code-block'

    control = {
        'type': feature_type,
        'label': '{}',
        'description': 'Code',
    }

    features.register_editor_plugin(
        'draftail', feature_name, draftail_features.BlockFeature(control)
    )
    
    features.register_converter_rule('contentstate', feature_name, {
        'from_database_format': {
            'pre': PreformattedTextElementHandler(feature_type),
        },
        'to_database_format': {
            'block_map': {
                feature_type: {
                    'element': 'pre',
                    'props': {'class': 'code'},
                },
            },
        },
    })

    features.default_features.append(feature_name)

[thibaudcolas]

As of #4562 / #5141, inline code support is now built-in. This will be released in Wagtail v2.5.

We haven’t added code-block, because the rich text processing does not currently preserve whitespace in <pre> tags – it collapses whitespace like with any other content, which is not suitable for code. I think this would be worth supporting, and this issue seems like the right place to keep track of that. Note that this isn’t just an issue for code, but basically any rich text block that uses a pre tag.

Here is an illustration of the problem. Thanks @jafacakes2011 for that!

---

Whether this is fixed in rich text or not, the recommended approach for code blocks is to use a StreamField block, like https://github.com/FlipperPA/wagtailcodeblock, so that block can have a UI that’s more appropriate to code editing, and is easier to render with syntax highlighting.

---

For a solution to this issue, the change will be similar to #5142. change the HTML to ContentState converter to better handle whitespace collapsing. In this case, that means not doing any collapsing for content that’s within a <pre> tag. This aligns with the HTML spec over at https://www.w3.org/TR/html4/struct/text.html#h-9.1.

Then, if we introduced built-in support for code-block, this would be a similar change to #5141 for blockquote.