Adding superscript to Draftail in Wagtail 2.0

Question

I'm trying to add superscript to the new editor in Wagtail.

I see the documentation here: http://docs.wagtail.io/en/v2.0/advanced_topics/customisation/extending_draftail.html

Where am I supposed to add the example code? And am I correct in assuming that I will be able to just change the example from feature_name = 'strikethrough' and type_ = 'STRIKETHROUGH' to superscript and it will work?

Once this is registered, do I have to modify each RichTextField that I have to include it in the features setting, or is there a way to add this to all RTF in my application?

Answer 1

I believe I have figured out how to do this, hopefully, someone will correct me if there is a better way!

1. Create a file in one of your registered (in INSTALLED_APPS) app directories called wagtail_hooks.py.

2. Put the following code in the file:

   import wagtail.admin.rich_text.editors.draftail.features as draftail_features
   from wagtail.admin.rich_text.converters.html_to_contentstate import InlineStyleElementHandler
   from wagtail.core import hooks
   
   @hooks.register('register_rich_text_features')
   def register_strikethrough_feature(features):
       feature_name = 'superscript'
       type_ = 'SUPERSCRIPT'
       tag = 'sup'
   
       control = {
           'type': type_,
           'label': '^',
           'description': 'Superscript',
       }
   
       features.register_editor_plugin(
           'draftail', feature_name, draftail_features.InlineStyleFeature(control)
       )
   
       db_conversion = {
           'from_database_format': {tag: InlineStyleElementHandler(type_)},
           'to_database_format': {'style_map': {type_: tag}},
       }
   
       features.default_features.append(feature_name)
       features.register_converter_rule('contentstate', feature_name, db_conversion)
   

3. The line features.default_features.append(feature_name) is what answers the last part of my question - and is missing from the docs (well, it's there, but not in this context). This adds the feature to all RichTextFields without having to add the features=[] setting to each existing and/or new RTF.

To modify this to work with another built in Draftail feature, modify the feature_name, type_, tag, label, and description fields. Draftail supports the following types:

• Block types: H1, H2, H3, H4, H5, H6, Blockquote, Code, UL, OL, P
• Inline styles: Bold, Italic, Underline, Code, Strikethrough, Mark, Keyboard, Superscript, Subscript
• And HR, BR

With bold, italic, h2, h3, h4, ul, ol, hr, and br already being in the Wagtail default set for a RichTextField.

Answer 2

As of Wagtail v2.5, superscript is a built-in format, disabled by default. To use it, all that's needed is to enable it. Either per-field, in the model definition:

    # [...]
    body = RichTextField(features=['superscript'])
    # [...]

Or for all editors on a site:

from wagtail.core import hooks

@hooks.register('register_rich_text_features')
def enable_superscript_feature(features):
    features.default_features.append('superscript')

Note that currently, while superscript will work as expected in the editor, it won’t be possible to copy-paste content with superscript from third-party sources (Google Docs, Word, web pages) and have the superscript formatting be preserved.