Add wagtail-footnotes

cfgov/ask_cfpb/migrations/0008_add_footnotes.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.2.11 on 2024-07-02 17:02
+
+from django.db import migrations
+import v1.blocks
+import wagtail.blocks
+import wagtail.contrib.typed_table_block.blocks
+import wagtail.fields
+import wagtail.images.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('ask_cfpb', '0007_move_tip_to_ask'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='answerpage',
+            name='answer_content',
+            field=wagtail.fields.StreamField([('text', wagtail.blocks.StructBlock([('anchor_tag', wagtail.blocks.CharBlock(help_text="Add an optional anchor link tag to allow linking directly to this block. Tag should be unique and use dashes or underscores for separation instead of spaces (ie, 'block-one-tag')", label='Anchor tag', required=False)), ('content', wagtail.blocks.RichTextBlock(features=['bold', 'italic', 'h2', 'h3', 'link', 'ol', 'ul', 'document-link', 'image', 'embed'], label='Text'))])), ('table', wagtail.blocks.StructBlock([('heading', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock(required=False)), ('level', wagtail.blocks.ChoiceBlock(choices=[('h2', 'H2'), ('h3', 'H3'), ('h4', 'H4'), ('h5', 'H5')])), ('icon', wagtail.blocks.CharBlock(help_text='Input the name of an icon to appear to the left of the heading. E.g., approved, help-round, etc. <a href="https://cfpb.github.io/design-system/foundation/iconography">See full list of icons</a>', required=False))], required=False)), ('text_introduction', wagtail.blocks.CharBlock(required=False)), ('options', wagtail.blocks.MultipleChoiceBlock(choices=[('is_full_width', 'Display the table at full width'), ('stack_on_mobile', 'Stack the table columns on mobile')], required=False)), ('data', wagtail.contrib.typed_table_block.blocks.TypedTableBlock([('text', wagtail.blocks.CharBlock()), ('numeric', wagtail.blocks.FloatBlock()), ('rich_text', wagtail.blocks.RichTextBlock(features=['bold', 'italic', 'ol', 'ul', 'link', 'document-link', 'superscript'])), ('rich_text_with_footnotes', v1.blocks.RichTextBlockWithFootnotes(features=['bold', 'italic', 'ol', 'ul', 'link', 'document-link', 'superscript', 'footnotes']))]))])), ('tip', wagtail.blocks.StructBlock([('content', wagtail.blocks.RichTextBlock(features=['link', 'document-link'], label='Tip'))], label='Tip (floats right)')), ('video_player', wagtail.blocks.StructBlock([('video_id', wagtail.blocks.RegexBlock(error_messages={'invalid': 'The YouTube video ID is in the wrong format.'}, help_text='Enter the YouTube video ID, which is located at the end of the video URL, after "v=". For example, the video ID for https://www.youtube.com/watch?v=1V0Ax9OIc84 is 1V0Ax9OIc84.', label='YouTube video ID', regex='^[\\w-]{11}$', required=False)), ('thumbnail_image', wagtail.images.blocks.ImageChooserBlock(help_text='Optional thumbnail image to show before and after the video plays. If the thumbnail image is not set here, the video player will default to showing the thumbnail that was set in (or automatically chosen by) YouTube.', required=False))])), ('how_to_schema', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(label='Title of How To section', max_length=500)), ('title_tag', wagtail.blocks.ChoiceBlock(choices=[('h2', 'H2'), ('h3', 'H3'), ('h4', 'H4')], help_text='Choose a tag for the title of the How To section.', label='Tag for How To section title')), ('show_title', wagtail.blocks.BooleanBlock(default=True, help_text='The How To schema requires a title to let search engines understand what it is about. If you do not want the title to be displayed in the page, uncheck this box and the title content will only be made available to crawlers and screen readers.', label='Show How To section title', required=False)), ('description', wagtail.blocks.RichTextBlock(blank=True, features=['ol', 'ul', 'bold', 'italic', 'link', 'document-link'], required=False)), ('step_title_tag', wagtail.blocks.ChoiceBlock(choices=[('h2', 'H2'), ('h3', 'H3'), ('h4', 'H4'), ('b', 'Bold'), ('p', 'Paragraph')], help_text='Choose a tag for the title of each HowTo step.', label='Tag for step titles')), ('has_numbers', wagtail.blocks.BooleanBlock(default=False, help_text='Check this box to display numbers before step titles. ', label='Show numbers for steps', required=False)), ('steps', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('anchor_tag', wagtail.blocks.CharBlock(blank=True, help_text="Add an optional anchor link tag to allow linking directly to this step. Tag should be unique and use dashes or underscores for separation instead of spaces (ie, 'step-one-tag').", max_length=500, required=False)), ('title', wagtail.blocks.CharBlock(help_text='Enter a title for this HowTo step. You do not need to include a number in the title -- numbers will be added automatically in the template if the show numbers checkbox is checked.', max_length=500)), ('step_content', wagtail.blocks.StreamBlock([('text', wagtail.blocks.StructBlock([('content', wagtail.blocks.RichTextBlock(features=['bold', 'italic', 'h3', 'h4', 'link', 'ol', 'ul', 'document-link', 'image', 'embed'], label='Text'))])), ('table', wagtail.blocks.StructBlock([('heading', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock(required=False)), ('level', wagtail.blocks.ChoiceBlock(choices=[('h2', 'H2'), ('h3', 'H3'), ('h4', 'H4'), ('h5', 'H5')])), ('icon', wagtail.blocks.CharBlock(help_text='Input the name of an icon to appear to the left of the heading. E.g., approved, help-round, etc. <a href="https://cfpb.github.io/design-system/foundation/iconography">See full list of icons</a>', required=False))], required=False)), ('text_introduction', wagtail.blocks.CharBlock(required=False)), ('options', wagtail.blocks.MultipleChoiceBlock(choices=[('is_full_width', 'Display the table at full width'), ('stack_on_mobile', 'Stack the table columns on mobile')], required=False)), ('data', wagtail.contrib.typed_table_block.blocks.TypedTableBlock([('text', wagtail.blocks.CharBlock()), ('numeric', wagtail.blocks.FloatBlock()), ('rich_text', wagtail.blocks.RichTextBlock(features=['bold', 'italic', 'ol', 'ul', 'link', 'document-link', 'superscript'])), ('rich_text_with_footnotes', v1.blocks.RichTextBlockWithFootnotes(features=['bold', 'italic', 'ol', 'ul', 'link', 'document-link', 'superscript', 'footnotes']))]))])), ('video_player', wagtail.blocks.StructBlock([('video_id', wagtail.blocks.RegexBlock(error_messages={'invalid': 'The YouTube video ID is in the wrong format.'}, help_text='Enter the YouTube video ID, which is located at the end of the video URL, after "v=". For example, the video ID for https://www.youtube.com/watch?v=1V0Ax9OIc84 is 1V0Ax9OIc84.', label='YouTube video ID', regex='^[\\w-]{11}$', required=False)), ('thumbnail_image', wagtail.images.blocks.ImageChooserBlock(help_text='Optional thumbnail image to show before and after the video plays. If the thumbnail image is not set here, the video player will default to showing the thumbnail that was set in (or automatically chosen by) YouTube.', required=False))]))]))])))], label='Google Schema - How To')), ('faq_schema', wagtail.blocks.StructBlock([('description', wagtail.blocks.RichTextBlock(blank=True, features=['ol', 'ul', 'bold', 'italic', 'link', 'document-link'], required=False)), ('questions', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('anchor_tag', wagtail.blocks.CharBlock(blank=True, help_text="Add an optional anchor link tag for this question. Tag should be unique and use dashes or underscores for separation instead of spaces (ie, 'question-one-tag')", max_length=500, required=False)), ('question', wagtail.blocks.CharBlock(max_length=500)), ('answer_content', wagtail.blocks.StreamBlock([('text', wagtail.blocks.StructBlock([('content', wagtail.blocks.RichTextBlock(features=['bold', 'italic', 'h3', 'h4', 'link', 'ol', 'ul', 'document-link', 'image', 'embed'], label='Text'))])), ('table', wagtail.blocks.StructBlock([('heading', wagtail.blocks.StructBlock([('text', wagtail.blocks.CharBlock(required=False)), ('level', wagtail.blocks.ChoiceBlock(choices=[('h2', 'H2'), ('h3', 'H3'), ('h4', 'H4'), ('h5', 'H5')])), ('icon', wagtail.blocks.CharBlock(help_text='Input the name of an icon to appear to the left of the heading. E.g., approved, help-round, etc. <a href="https://cfpb.github.io/design-system/foundation/iconography">See full list of icons</a>', required=False))], required=False)), ('text_introduction', wagtail.blocks.CharBlock(required=False)), ('options', wagtail.blocks.MultipleChoiceBlock(choices=[('is_full_width', 'Display the table at full width'), ('stack_on_mobile', 'Stack the table columns on mobile')], required=False)), ('data', wagtail.contrib.typed_table_block.blocks.TypedTableBlock([('text', wagtail.blocks.CharBlock()), ('numeric', wagtail.blocks.FloatBlock()), ('rich_text', wagtail.blocks.RichTextBlock(features=['bold', 'italic', 'ol', 'ul', 'link', 'document-link', 'superscript'])), ('rich_text_with_footnotes', v1.blocks.RichTextBlockWithFootnotes(features=['bold', 'italic', 'ol', 'ul', 'link', 'document-link', 'superscript', 'footnotes']))]))])), ('video_player', wagtail.blocks.StructBlock([('video_id', wagtail.blocks.RegexBlock(error_messages={'invalid': 'The YouTube video ID is in the wrong format.'}, help_text='Enter the YouTube video ID, which is located at the end of the video URL, after "v=". For example, the video ID for https://www.youtube.com/watch?v=1V0Ax9OIc84 is 1V0Ax9OIc84.', label='YouTube video ID', regex='^[\\w-]{11}$', required=False)), ('thumbnail_image', wagtail.images.blocks.ImageChooserBlock(help_text='Optional thumbnail image to show before and after the video plays. If the thumbnail image is not set here, the video player will default to showing the thumbnail that was set in (or automatically chosen by) YouTube.', required=False))]))]))])))], label='Google Schema - FAQ'))], blank=True, verbose_name='Answer'),
+        ),
+    ]

cfgov/ask_cfpb/models/answer_page.py

@@ -7,6 +7,7 @@
 
 from wagtail.admin.panels import (
     FieldPanel,
+    InlinePanel,
     MultiFieldPanel,
     ObjectList,
     TabbedInterface,
@@ -234,6 +235,7 @@ class AnswerPage(CFGOVPage):
             heading="Consumer Tools topics",
             classname="collapsible collapsed",
         ),
+        InlinePanel("footnotes", label="Footnotes"),
     ]
 
     sidebar = StreamField(

cfgov/cfgov/settings/base.py

@@ -116,6 +116,7 @@
     "wagtail_content_audit",
     "mozilla_django_oidc",
     "draftail_icons",
+    "wagtail_footnotes",
 )
 
 MIDDLEWARE = (
@@ -289,7 +290,6 @@
 TAGGIT_CASE_INSENSITIVE = True
 WAGTAIL_USER_CREATION_FORM = "login.forms.UserCreationForm"
 WAGTAIL_USER_EDIT_FORM = "login.forms.UserEditForm"
-
 WAGTAILDOCS_SERVE_METHOD = "direct"
 
 # This is used for easy autocomplete search behavior in the Wagtail admin.
@@ -299,6 +299,10 @@
     }
 }
 
+# This is the name of the template that will render a footnote citaiton
+# inline in rich text.
+WAGTAIL_FOOTNOTES_REFERENCE_TEMPLATE = "v1/includes/rich-text/footnote-reference.html"
+
 # LEGACY APPS
 MAPBOX_ACCESS_TOKEN = os.environ.get("MAPBOX_ACCESS_TOKEN")
 

cfgov/cfgov/urls.py

@@ -15,6 +15,7 @@
 
 from flags.urls import flagged_re_path
 from flags.views import FlaggedTemplateView
+from wagtail_footnotes import urls as footnotes_urls
 from wagtailautocomplete.urls.admin import (
     urlpatterns as autocomplete_admin_urls,
 )
@@ -417,6 +418,8 @@ def empty_200_response(request, *args, **kwargs):
     path("documents/", include(wagtaildocs_urls)),
     # Health check
     re_path(r"^ht/", include("health_check.urls")),
+    # wagtail-footnotes
+    re_path(r"^footnotes/", include(footnotes_urls)),
 ]
 
 # Ask CFPB category and subcategory redirects

cfgov/draftail_icons/static/draftail_icons/js/draftail_icons.js

@@ -1,6 +1,4 @@
-const React = window.React;
-
-class EntityIconSource extends React.Component {
+class EntityIconSource extends window.React.Component {
   componentDidMount() {
     const { editorState, entityType, onComplete } = this.props;
     const icon_name = window.prompt("Icon identifier:");
@@ -54,7 +52,7 @@ const Icon = (props) => {
   // the editor.
   var icon_name = data["icon-name"];
   var icon_url = `/static/icons/${icon_name}.svg`;
-  return React.createElement(
+  return window.React.createElement(
     'img',
     {
       "src": icon_url,