Wagtail hook for richtext editor

Question

I created a wagtail hook for adding a code block from the Richtext editor. The hook is working but I have the problem. The hook supposed to work like as follows,

<div class="code">
content line one 
content line two
</div>

But when I apply the block from editor , it is applying each line with the code like,

<div class="code">content line one </div>
<div class="code">content line two </div>

This was supposed to be one line, The wagtail editor is applying multiple divs for each of the lines instead of one div for the selected block

My hook code is as follows,

@hooks.register('register_rich_text_features')
def register_py_code_block_feature(features):
    """
    Registering for adding python code block
    """
    feature_name = 'py-code-block'
    type_ = 'py-code-block'

    control = {
        'type': type_,
        'label': 'PY',
        'description': 'Python Code Block',        
        # Optionally, we can tell Draftail what element to use when displaying those blocks in the editor.
        'element': 'div',
        'style': {
            "display": "block",
        },
    }

    db_conversion = {
        'from_database_format': {'div': BlockElementHandler(type_)},
        'to_database_format': {'block_map': {type_: {
                                                        'element': 'div',
                                                        'props': {
                                                            'class': 'code blog_code language-python'
                                                            }
                                                    }
                                            }
                                },
        }

    features.register_editor_plugin('draftail', feature_name, draftail_features.BlockFeature(control)) 
    features.register_converter_rule('contentstate', feature_name, db_conversion)
    features.default_features.append('py-code-block')

Can some one point me the right direction

score 0 · Answer 1 · answered Aug 16 '23 at 05:44

I use a code block for this with prism to do the formatting. Makes a nice job. Select the languages and features you want, download the js & css files and load those in the template for the page type where you use this block.

The block is just a language choice, code and option to remove padding from the end of the block (useful when you want the code a bit tighter with surrounding text).

The choices should correspond to the languages you selected on the prism page.

class CodeChoiceBlock(ChoiceBlock):
    choices=[
        ('python', 'Python'),
        ('css', 'CSS'),
        ('html', 'HTML'),
        ('javascript', 'Javascript'),
        ('django', 'Django Template'),
        ('json', 'JSON'),
        ('sql', 'SQL'),
        ('xml', 'XML'),
    ]

class BlogCodeBlock(StructBlock):
    language = CodeChoiceBlock()
    code = TextBlock()
    bottom_padding = BooleanBlock(
        label=_("Include extra space beneath code block?"),
        required=False,
        default=True
        )

    translatable_fields = []

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

Template:

<div class="block-container{% if self.bottom_padding %} pb-2{% endif %}">
    <pre><code class="prism-block language-{{ self.language }}" id="code-block-{{ block.id }}">{{ self.code }}</code></pre>
</div>
{% if self.language == "django" %}
    <script>
        element = document.getElementById("code-block-{{ block.id }}");
        element.innerHTML = element.innerHTML
            .replace(/({%)(?!\s)/g, "$1 ")
            .replace(/({{)(?!\s)/g, "$1 ")
            .replace(/(?<!\s)(%})/g, " $1")
            .replace(/(?<!\s)(}})/g, " $1");
    </script>
{% endif %}

The script is only needed if you're using the django template prism class. Prism can strip out spaces next to {%, %}, {{ & }}. This script adds those spaces back if so.

The same used with wagtailcodeblock , Thanks – sherin Aug 16 '23 at 07:31 — sherin, Aug 16 '23 at 07:31

score 0 · Answer 2 · answered Aug 16 '23 at 07:31

I used the wagtail plugin wagtailcodeblock and used the body as a StreasFiled

body = StreamField([
        # ('heading', blocks.CharBlock(form_classname="title")),  
        ('paragraph', blocks.RichTextBlock()),
        ('code', CodeBlock(label='Code')),
    ], use_json_field=True)

Wagtail hook for richtext editor

2 Answers2