How to manage footnotes?

miketaylor · October 20, 2025, 9:23am

We have a project that requires the use of footnote references within the text, and I wondered if anyone had any examples of how they’ve tackled this?

I’m thinking of a block of footnotes at the bottom of a page, with any of the RTEs on a page being able to reference any of those footnotes (so, not a block at the bottom of each RTE - I think a TipTap extension can do that, but it’s not what I need).

I need to support multiple references to the same footnote, and one-way linking from the text down to the footnote (but not necessarily back again - tricky when there can be multiple references).

Anyone done any magic in the past on this? (Assume Umbraco v17 - it’s a next-year project).

mistyn8 · October 20, 2025, 11:19am

thinking outloud

have a footnote repository (content node, dictionary item, custom db table) then in the rte use the new insert block (old macros) with the relevant content picker/dictionary picker/custom db table entry picker)

Looks like a bit of faffing required to get tiptap to not inject extra p-tags and you could have a custom view too…

then when rendering

var rawContent = Model.GetProperty("instructionMessage")?.GetSourceValue();
RichTextPropertyEditorHelper.TryParseRichTextEditorValue(rawContent, _jsonSerializer, _logger, out RichTextEditorValue? richTextEditorValue);

You can override the default parsing of the rte-blocks to both construct a list of all the footnotes in use on the page (dedupe) and also add sequential glyphs?

Maybe manipulating the markup/object here and passing on to…
or some custom manipulation/overriding of the

github.com/umbraco/Umbraco-CMS

src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/RteBlockRenderingValueConverter.cs

main

// Copyright (c) Umbraco.
// See LICENSE for more details.

using System.Globalization;
using System.Text.RegularExpressions;
using HtmlAgilityPack;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;
using Umbraco.Cms.Core.Blocks;
using Umbraco.Cms.Core.Configuration.Models;
using Umbraco.Cms.Core.DeliveryApi;
using Umbraco.Cms.Core.Models.Blocks;
using Umbraco.Cms.Core.Models.DeliveryApi;
using Umbraco.Cms.Core.Models.PublishedContent;
using Umbraco.Cms.Core.PropertyEditors.DeliveryApi;
using Umbraco.Cms.Core.Serialization;
using Umbraco.Cms.Core.Strings;
using Umbraco.Cms.Core.Templates;
using Umbraco.Cms.Infrastructure.Extensions;
using Umbraco.Extensions;

This file has been truncated. show original

miketaylor · October 20, 2025, 11:37am

Hi Mike - this is great, thanks.

From a content editor’s perspective, they’re likely to want to add or link to these footnote references as they go, ie in their content editing context, rather than have to have them all in a separate repository. Might there be a solution where the footnotes are stored on the node, and then an inline block in the RTE allows users to either pick one or add a new one, without leaving the RTE?

mistyn8 · October 20, 2025, 11:47am

guess it’s 6 of 1, half dozen the other there… thought you wanted a central repository so that can be reused on any rte on any node..
If you store on the node then you’ll get duplication?

But you should be able to create a custom picker (instead of the block using the content picker) that you could have like collection view (aka old list view) that would allow inline infinite editing/creation? (indeed if the collection view can’t already be used as a prop editor in that way but think it’s only for child items.. you can’t pass a start node?)

Or maybe you could have a cutom propeditor for creation of footnote in the rte block if you can’t find one.. that would be a inline create node (prob reusing all existing objects easier there?)

That way you don’t leave the node you are actively working on …

mistyn8 · October 21, 2025, 7:37pm

Just discovered you can have <umb-rte-block /> vs <umb-rte-block-inline /> in the RTE.. controlled by a setting on the block.. (but also looks like you can mix and match when editing the html source)