Enable superscript and blockquote rich text formatting options

[StephenAbbott]

The Open Ownership team is thinking about how we do footnotes in our HTML publications and would like to enable the superscript and blockquote rich text formatting options for all our rich text fields across the Open Ownership website:

https://docs.wagtail.org/en/stable/advanced_topics/customisation/page_editing_interface.html#limiting-features-in-a-rich-text-field

[StephenAbbott]

Question: if we follow the instructions in Wagtail documentation above, does this just add the formatting options to the Rich text streamfield blocks? Or does it also add them to Summary/highlight box, pull quote and details components? We'd like to be able to use superscript in all those types of blocks

[drcongo]

@StephenAbbott We can make them appear in any rich text field where you might want to use them, however I have a couple of things to add...

1. blockquote is disabled in the rich text editor field because it's better served by a dedicated block - we have the PullQuoteBlock in OO
2. Footnotes are notoriously hard to do in Wagtail because of the Streamfield, but we actually built a dedicated footnotes system for Global Witness which you can see in action here: https://www.globalwitness.org/en/campaigns/forests/deforestation-dividends/

I wrote up usage instructions for them, let me know if this sounds like a useful solution...

Footnotes are slightly complicated to use because of the way Wagtail handles data internally.

1. Add a Footnote block to a LongReadChapter page's streamfield. It doesn't matter where in the streamfield it appears, on the front end it will only ever render at the foot of the page.
2. In the body field, enter the content you want to appear at the foot of the page, as in the image above.
3. In the anchor field, put in a URL-safe, unique, memorable name for the footnote. This is not shown to the user, but is needed to be able to create the link from body copy to the footnote. By URL-safe, we mean replace special characters and spaces with a - character. For example: andys-footnote or andy-s-footnote, rather than Andy's Footnote

4. To add a link to the footnote you created, write the anchor you want to link to in the rich text, select it, and click the Link button. Linking to footnotes is only supported in Rich Text and Highlighted Content blocks

5. Choose Anchor Link as the link type, and put your anchor text as the value for both fields.

Important Note: At the point that we render the page, we re-write all the linked text to be [1], [2] etc. to match the footnote numbering at the bottom of the page. Using the anchor text for both means that you have an easy way to see in the editor which footnote you're linking to. It also allows you to link to the same footnote in multiple places in the body copy.

The anchor re-written as a numerical indicator

The footnotes rendered with their numbers at the foot of the page

[StephenAbbott]

Thanks @drcongo. Maybe let's park this then for now given your comments. I'll send your notes to the team to work out how this might impact on how we proceed

[drcongo]

If it's useful, I'd guess it would be between 2 and 4 hours to implement the footnotes system (it's a while since I wrote it so memory's a bit hazy)

[drcongo]

@StephenAbbott Footnotes is now added and deployed to staging. I've added an example one here just to check they're working.

[StephenAbbott]

Reopening issue to check/ask whether it is possible to enable superscript styling for these footnote numbers within the body of text on the Open Ownership website

[StephenAbbott]

Signed off ✅