Footnote improvements

aguingand · aguingand · commit 318cff23d1bc · 2026-07-10T18:34:56.000+02:00
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -9,6 +9,7 @@
 @source '../views/**/*.blade.php';
 @source '../js/**/*.vue';
 @source '../js/components/ui/**/*.ts';
+@source '../js/form/components/fields/editor/extensions/Footnotes.ts';
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/resources/js/form/components/fields/editor/Editor.vue b/resources/js/form/components/fields/editor/Editor.vue
@@ -363,7 +363,7 @@
                 </template>
 
                 <div :class="cn(
-                    'flex-1 grid grid-cols-1 overflow-y-auto overflow-x-clip',
+                    'flex-1 grid grid-cols-1 overflow-y-auto scroll-py-4 overflow-x-clip',
                         isFullscreen
                             ? 'lg:[scrollbar-gutter:stable]'
                             : ['min-h-20', {
@@ -419,11 +419,12 @@
                                 'group/editor content w-full rounded-b-md focus:outline-none px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
                                 '[&_.selection-highlight]:bg-[Highlight] [&_.selection-highlight]:py-0.5',
                                 '[&_.ProseMirror-selectednode]:outline-none! [&:focus_.ProseMirror-selectednode]:ring-1 [&_.ProseMirror-selectednode]:ring-primary',
-                                `[&_.footnote-ref]:before:content-['['] [&_.footnote-ref]:after:content-[']']`,
+                                `[&_.footnotes]:before:content-(--footnote-title) [&_.footnotes]:before:text-xs [&_.footnotes]:before:text-muted-foreground [&_.footnotes]:before:block [&_.footnotes]:before:ml-[-1.75em] [&_.footnotes]:before:mb-2 [&_.footnotes]:-mx-3 [&_.footnotes]:pt-2 [&_.footnotes]:pb-2 [&_.footnotes]:pr-3 [&_.footnotes]:pl-[calc(.75rem+1.75em)] [&_.footnotes>li]:relative [&_.footnotes>li]:pl-[1.25em] [&_.footnotes]:border-t [&_.footnote-ref]:underline [&_.footnote-ref]:underline-offset-4 [&_.footnote-ref]:decoration-foreground/20 [&_.footnote-ref]:hover:decoration-foreground [&_.footnote-ref]:before:content-['['] [&_.footnote-ref]:after:content-[']']`,
                                 {
                                     'content-lg max-w-3xl mx-auto py-6 px-4 sm:px-6 text-base min-h-max': isFullscreen,
                                 },
                             )"
+                            :style="{ '--footnote-title': `'${__('sharp::form.editor.footnotes.title')}'` }"
                             role="textbox"
                         />
                     </div>
diff --git a/resources/js/form/components/fields/editor/extensions/Footnotes.ts b/resources/js/form/components/fields/editor/extensions/Footnotes.ts
@@ -1,18 +1,62 @@
 import { Footnote, Footnotes as BaseFootnotes, FootnoteReference } from "tiptap-footnotes";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
-import { Extension } from "@tiptap/core";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { Extension, mergeAttributes, NodePos } from "@tiptap/core";
 
 export const Footnotes = Extension.create({
+    name: 'footnotesExtension',
     addExtensions() {
         return [
             BaseFootnotes,
             Footnote.extend({
+                addProseMirrorPlugins() {
+                    const editor = this.editor;
+                    return [
+                        new Plugin({
+                            key: new PluginKey('footnoteDecoration'),
+                            props: {
+                                decorations: (state) => {
+                                    const decorations: Decoration[] = [];
+                                    state.doc.descendants((node, pos) => {
+                                        if (node.type.name === 'footnote') {
+                                            const id = node.attrs.id;
+                                            const refId = id?.startsWith('fn:') ? id.replace('fn:', '') : id;
+                                            decorations.push(
+                                                Decoration.widget(pos + 1, () => {
+                                                    const sup = document.createElement('sup');
+                                                    const a = document.createElement('a');
+                                                    a.href = `#fnref:${refId}`;
+                                                    a.draggable = false;
+                                                    a.className = 'underline underline-offset-4 decoration-foreground/20 hover:decoration-foreground select-none';
+                                                    a.textContent = '[^]';
+                                                    sup.className = 'footnote-backref absolute left-[.125em] top-1.5'
+                                                    sup.appendChild(a);
+                                                    return sup;
+                                                })
+                                            );
+                                        }
+                                    });
+                                    return DecorationSet.create(state.doc, decorations);
+                                },
+                                handleClickOn(view, pos, node, nodePos, event) {
+                                    if((event.target as HTMLElement)?.closest('.footnote-backref')) {
+                                        event.preventDefault();
+                                        const id = (event.target as HTMLElement).closest('[data-id]').getAttribute('data-id');
+                                        setTimeout(() => editor.commands.focusFootnoteReference(id));
+                                        return true;
+                                    }
+                                },
+                            },
+                        }),
+                    ];
+                },
                 addCommands() {
                     return {
                         focusFootnote: (id: string) => ({ editor, chain }) => {
                             const matchedFootnote = editor.$node("footnote", {
                                 "data-id": id,
                             });
+
                             if (matchedFootnote) {
                                 // sets the text selection to the end of the footnote definition and scroll to it.
                                 chain()
@@ -32,6 +76,35 @@ export const Footnotes = Extension.create({
             }),
             FootnoteReference
                 .extend({
+                    addCommands() {
+                        return {
+                            ...this.parent(),
+                            focusFootnoteReference: (id: string) => ({ editor, chain }) => {
+                                let matchedFootnoteReference: { from: number } = null;
+                                editor.state.doc.descendants((node, pos) => {
+                                    if (node.type.name === 'footnoteReference' && node.attrs['data-id'] === id) {
+                                        matchedFootnoteReference = {
+                                            from: pos,
+                                        }
+                                        return false;
+                                    }
+                                });
+
+                                if (matchedFootnoteReference) {
+                                    chain()
+                                        .focus()
+                                        .setTextSelection(
+                                            matchedFootnoteReference.from,
+                                        )
+                                        .run();
+
+                                    editor.view.dom.querySelector(`.footnote-ref[data-id="${id}"]`).scrollIntoView({ block: 'nearest' });
+                                    return true;
+                                }
+                                return false;
+                            },
+                        };
+                    },
                     addProseMirrorPlugins() {
                         const editor = this.editor;
                         return [
@@ -41,16 +114,17 @@ export const Footnotes = Extension.create({
                                 props: {
                                     handleDOMEvents: {
                                         click(view, event) {
-                                            if(event.target?.closest('.footnote-ref')) {
+                                            if((event.target as HTMLElement)?.closest('.footnote-ref')) {
                                                 event.preventDefault();
                                             }
                                         }
                                     },
                                     handleClickOn(view, pos, node, nodePos, event) {
-                                        // event.stopImmediatePropagation();
-                                        const id = node.attrs["data-id"];
-                                        console.log(event);
-                                        setTimeout(() => editor.commands.focusFootnote(id));
+                                        if(node.type.name === 'footnoteReference') {
+                                            const id = node.attrs["data-id"];
+                                            setTimeout(() => editor.commands.focusFootnote(id));
+                                            return true;
+                                        }
                                     },
                                 },
                             }),
@@ -61,3 +135,16 @@ export const Footnotes = Extension.create({
         ];
     }
 })
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        extendedFootnoteReference: {
+            /**
+             * scrolls to & sets the text selection at the end of the footnote with the given id
+             * @param id the id of the footote (i.e. the `data-id` attribute value of the footnote)
+             * @example editor.commands.focusFootnote("a43956c1-1ab8-462f-96e4-be3a4b27fd50")
+             */
+            focusFootnoteReference: (id: string) => ReturnType;
+        };
+    }
+}
diff --git a/resources/js/form/components/fields/editor/extensions/TrailingNode.ts b/resources/js/form/components/fields/editor/extensions/TrailingNode.ts
@@ -0,0 +1,124 @@
+import { Extension } from '@tiptap/core'
+import type { Node, NodeType } from '@tiptap/pm/model'
+import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state'
+import { Footnotes } from "tiptap-footnotes";
+
+export const skipTrailingNodeMeta = 'skipTrailingNode'
+
+function nodeEqualsType({
+    types,
+    node,
+}: {
+    types: NodeType | NodeType[]
+    node: Node | null | undefined
+}) {
+    return (node && Array.isArray(types) && types.includes(node.type)) || node?.type === types
+}
+
+// New function that handles the footnote at the end
+function getLastNode(doc: Node) {
+    const { lastChild } = doc
+    if (lastChild?.type.name === Footnotes.name) {
+        return {
+            node: doc.content.child(doc.childCount - 2),
+            pos: doc.content.size - lastChild.nodeSize,
+        }
+    }
+    return {
+        node: lastChild,
+        pos: doc.content.size,
+    }
+}
+
+/**
+ * Extension based on:
+ * - https://github.com/ueberdosis/tiptap/blob/v1/packages/tiptap-extensions/src/extensions/TrailingNode.js
+ * - https://github.com/remirror/remirror/blob/e0f1bec4a1e8073ce8f5500d62193e52321155b9/packages/prosemirror-trailing-node/src/trailing-node-plugin.ts
+ */
+
+export interface TrailingNodeOptions {
+    /**
+     * The node type that should be inserted at the end of the document.
+     * @note the node will always be added to the `notAfter` lists to
+     * prevent an infinite loop.
+     * @default undefined
+     */
+    node?: string
+    /**
+     * The node types after which the trailing node should not be inserted.
+     * @default ['paragraph']
+     */
+    notAfter?: string | string[]
+}
+
+/**
+ * This extension allows you to add an extra node at the end of the document.
+ * @see https://www.tiptap.dev/api/extensions/trailing-node
+ */
+export const TrailingNode = Extension.create<TrailingNodeOptions>({
+    name: 'trailingNode',
+
+    addOptions() {
+        return {
+            node: undefined,
+            notAfter: [],
+        }
+    },
+
+    addProseMirrorPlugins() {
+        const plugin = new PluginKey(this.name)
+        const defaultNode =
+            this.options.node ||
+            this.editor.schema.topNodeType.contentMatch.defaultType?.name ||
+            'paragraph'
+
+        const disabledNodes = Object.entries(this.editor.schema.nodes)
+            .map(([, value]) => value)
+            .filter(node => (this.options.notAfter || []).concat(defaultNode).includes(node.name))
+
+        return [
+            new Plugin({
+                key: plugin,
+                appendTransaction: (transactions, __, state) => {
+                    const { doc, tr, schema } = state
+                    const shouldInsertNodeAtEnd = plugin.getState(state)
+                    const { pos: endPosition } = getLastNode(doc)
+                    const type = schema.nodes[defaultNode]
+
+                    if (transactions.some(transaction => transaction.getMeta(skipTrailingNodeMeta))) {
+                        return
+                    }
+
+                    if (!shouldInsertNodeAtEnd) {
+                        return
+                    }
+
+                    return tr.insert(endPosition, type.create())
+                },
+                state: {
+                    init: (_, state) => {
+                        const { node: lastNode } = getLastNode(state.tr.doc)
+                        console.log('lastNode', lastNode)
+
+                        return !nodeEqualsType({ node: lastNode, types: disabledNodes })
+                    },
+                    apply: (tr, value) => {
+                        if (!tr.docChanged) {
+                            return value
+                        }
+
+                        // Ignore transactions from UniqueID extension to prevent infinite loops
+                        // when UniqueID adds IDs to newly inserted trailing nodes
+                        if (tr.getMeta('__uniqueIDTransaction')) {
+                            return value
+                        }
+
+                        const { node: lastNode } = getLastNode(tr.doc)
+
+                        return !nodeEqualsType({ node: lastNode, types: disabledNodes })
+                    },
+                },
+            }),
+        ]
+    },
+})
diff --git a/resources/js/form/components/fields/editor/extensions/index.ts b/resources/js/form/components/fields/editor/extensions/index.ts
@@ -4,7 +4,7 @@ import { Text } from '@tiptap/extension-text';
 import { Paragraph } from '@tiptap/extension-paragraph';
 import { Blockquote } from '@tiptap/extension-blockquote';
 import { Bold } from '@tiptap/extension-bold';
-import { UndoRedo, Placeholder, Gapcursor, Dropcursor, CharacterCount, TrailingNode } from '@tiptap/extensions';
+import { UndoRedo, Placeholder, Gapcursor, Dropcursor, CharacterCount } from '@tiptap/extensions';
 import { BulletList } from '@tiptap/extension-bullet-list';
 import { Code } from '@tiptap/extension-code';
 import { Heading } from '@tiptap/extension-heading';
@@ -29,6 +29,7 @@ import { Small } from './Small';
 import { FormEditorFieldData, FormEditorToolbarButton } from "@/types";
 import { CodeBlock } from "@/form/components/fields/editor/extensions/CodeBlock";
 import { Footnotes } from "@/form/components/fields/editor/extensions/Footnotes";
+import { TrailingNode } from "@/form/components/fields/editor/extensions/TrailingNode";
 
 export function getExtensions(field: FormEditorFieldData) {
     const toolbarHas = (buttonName: FormEditorToolbarButton | FormEditorToolbarButton[]) =>
@@ -43,6 +44,7 @@ export function getExtensions(field: FormEditorFieldData) {
         toolbarHas('bold') && Bold,
         toolbarHas('bullet-list') && BulletList,
         Extension.create({
+            name: 'characterCountExtension',
             addExtensions() { // use addExtension to ensure unique state
                 return [
                     CharacterCount.configure(),
diff --git a/resources/js/form/components/fields/editor/utils/html.ts b/resources/js/form/components/fields/editor/utils/html.ts
@@ -1,9 +1,10 @@
 /**
  * trim empty paragraphs at the end
  */
-export function trimHTML(content, { inline }) {
+export function trimHTML(content: string, { inline }: { inline: boolean }) {
     if(inline) {
         return content.replace(/<\/?p>/g, '');
     }
-    return content.replace(/(<p>\s*<\/p>)+$/, '');
+    return content
+        .replace(/(?:<p>\s*<\/p>)+(<ol class="footnotes">.+?<\/ol>)?$/, '$1');
 }
diff --git a/resources/lang/en/form.php b/resources/lang/en/form.php
@@ -132,6 +132,9 @@
     'editor.toolbar.upload_image.title' => 'Insert image',
     'editor.toolbar.horizontal_rule.title' => 'Horizontal rule',
     'editor.toolbar.fullscreen.title' => 'Full screen',
+    'editor.toolbar.footnote.title' => 'Footnote',
     'editor.toolbar.undo.title' => 'Undo',
     'editor.toolbar.redo.title' => 'Redo',
+
+    'editor.footnotes.title' => 'Footnotes',
 ];
diff --git a/resources/lang/fr/form.php b/resources/lang/fr/form.php
@@ -135,6 +135,9 @@
     'editor.toolbar.upload_image.title' => 'Insérer une image',
     'editor.toolbar.horizontal_rule.title' => 'Séparateur',
     'editor.toolbar.fullscreen.title' => 'Plein écran',
+    'editor.toolbar.footnote.title' => 'Note de bas de page',
     'editor.toolbar.undo.title' => 'Annuler',
     'editor.toolbar.redo.title' => 'Rétablir',
+
+    'editor.footnotes.title' => 'Notes de bas de page',
 ];

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,10 @@`
`1`	`1`	`/**`
`2`	`2`	`* trim empty paragraphs at the end`
`3`	`3`	`*/`
`4`		`-export function trimHTML(content, { inline }) {`
	`4`	`+export function trimHTML(content: string, { inline }: { inline: boolean }) {`
`5`	`5`	`if(inline) {`
`6`	`6`	`return content.replace(/<\/?p>/g, '');`
`7`	`7`	`}`
`8`		`- return content.replace(/(<p>\s*<\/p>)+$/, '');`
	`8`	`+ return content`
	`9`	`+ .replace(/(?:<p>\s*<\/p>)+(<ol class="footnotes">.+?<\/ol>)?$/, '$1');`
`9`	`10`	`}`