[PR #18064] [CLOSED] feat: Add Footnote Reference Support to Markdown #24658

Closed
opened 2026-04-20 05:31:33 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/18064
Author: @danielaskdd
Created: 10/5/2025
Status: Closed

Base: devHead: footnode


📝 Commits (4)

  • 643f5aa Add footnote reference support to markdown renderer
  • 2bd7df4 Update TipTap bubble and floating menu extensions to v3.0.7
  • 21d1d21 Merge remote-tracking branch 'upstream/dev' into footnode
  • e529b5f Merge branch 'dev' into footnode

📊 Changes

6 files changed (+3982 additions, -3137 deletions)

View changed files

📝 package-lock.json (+3914 -3135)
📝 package.json (+2 -2)
📝 src/app.css (+20 -0)
📝 src/lib/components/chat/Messages/Markdown.svelte (+2 -0)
📝 src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte (+2 -0)
src/lib/utils/marked/footnote-extension.ts (+42 -0)

📄 Description

feat: Add Footnote Reference Support to Markdown

This PR is identical to #17924 which is closed by branch refactoring.

Overview

This PR adds support for footnote references in Markdown content using the syntax [^1], [^note], etc. Footnote references are rendered as superscript text that blends naturally with the surrounding content.

Footnote references are very common in RAG-generated content. Therefore, it is essential that Open-WebUI correctly renders these footnotes for improved readability and visual consistency.

Related Discussion : #17867

Feature Added

  • Adds support for footnote references in Markdown content using the syntax [^1], [^note]
  • Supported syntax :
This is text with a footnote[^1] and another[^note].
Multiple consecutive footnotes[^a][^b][^c] are properly spaced.

Rendering Behavior

  • Footnotes appear as superscript text
  • Inherit text color from surrounding content
  • Subtle hover effects for better UX
  • Proper spacing prevents visual crowding

Screenshots

image

Breaking Changes

n/a

Changes Made

New Extension (src/lib/utils/marked/footnote-extension.ts)

  • Created: New marked extension for parsing footnote reference syntax
  • Pattern: Supports [^identifier] where identifier can be alphanumeric, underscore, or hyphen
  • Security: Implements proper HTML escaping for all user content
  • Output: Generates clean superscript HTML with semantic CSS classes

Integration Updates

  • Markdown.svelte: Added footnote extension to the marked processing pipeline
  • MarkdownInlineTokens.svelte: Added rendering support for footnoteRef token type
  • Positioning: Footnote handling placed appropriately in the token processing flow

Styling (src/app.css)

  • Visual Design: Footnote references inherit parent text color and use normal font weight
  • Typography: Optimized superscript sizing (0.7em) and positioning (0.3em vertical-align)
  • User Experience: Subtle hover effect with opacity transition
  • Spacing: Proper margin (0.3em) between consecutive footnotes

Security

  • All user input is HTML-escaped
  • XSS protection through proper sanitization
  • Safe HTML generation using marked's renderer API

Testing Considerations

  • Footnote references render correctly as superscript
  • HTML escaping prevents XSS vulnerabilities
  • Multiple consecutive footnotes display with proper spacing
  • Hover effects work smoothly across different themes

Future Enhancements

RAG system( like LightRAG) provides a structured list of referenced documents alongside the LLM-generated response, enabling us to render footnote references as clickable HTTP links that open the original source webpages.

Contributor License Agreement

By submitting this pull request, I confirm that I have read and fully agree to the Contributor License Agreement (CLA), and I am providing my contributions under its terms.


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/18064 **Author:** [@danielaskdd](https://github.com/danielaskdd) **Created:** 10/5/2025 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `footnode` --- ### 📝 Commits (4) - [`643f5aa`](https://github.com/open-webui/open-webui/commit/643f5aa1b4f187796284391ad850e251f92f86c6) Add footnote reference support to markdown renderer - [`2bd7df4`](https://github.com/open-webui/open-webui/commit/2bd7df4c297989db9f1ad3b3e560f134c5b3c38f) Update TipTap bubble and floating menu extensions to v3.0.7 - [`21d1d21`](https://github.com/open-webui/open-webui/commit/21d1d215e512100d938985a868030f347ef449be) Merge remote-tracking branch 'upstream/dev' into footnode - [`e529b5f`](https://github.com/open-webui/open-webui/commit/e529b5f549b3bd2a90c36da199797dbfe3a1d879) Merge branch 'dev' into footnode ### 📊 Changes **6 files changed** (+3982 additions, -3137 deletions) <details> <summary>View changed files</summary> 📝 `package-lock.json` (+3914 -3135) 📝 `package.json` (+2 -2) 📝 `src/app.css` (+20 -0) 📝 `src/lib/components/chat/Messages/Markdown.svelte` (+2 -0) 📝 `src/lib/components/chat/Messages/Markdown/MarkdownInlineTokens.svelte` (+2 -0) ➕ `src/lib/utils/marked/footnote-extension.ts` (+42 -0) </details> ### 📄 Description ## feat: Add Footnote Reference Support to Markdown This PR is identical to #17924 which is closed by branch refactoring. ### Overview This PR adds support for footnote references in Markdown content using the syntax `[^1]`, `[^note]`, etc. Footnote references are rendered as superscript text that blends naturally with the surrounding content. Footnote references are very common in RAG-generated content. Therefore, it is essential that Open-WebUI correctly renders these footnotes for improved readability and visual consistency. **Related Discussion** : #17867 ### Feature Added * Adds support for footnote references in Markdown content using the syntax `[^1]`, `[^note]` * Supported syntax : ``` This is text with a footnote[^1] and another[^note]. Multiple consecutive footnotes[^a][^b][^c] are properly spaced. ``` ### Rendering Behavior - Footnotes appear as superscript text - Inherit text color from surrounding content - Subtle hover effects for better UX - Proper spacing prevents visual crowding ### Screenshots <img width="1083" height="777" alt="image" src="https://github.com/user-attachments/assets/1c9ba0af-9618-46d8-8fe0-dc5adcb886e9" /> ### Breaking Changes n/a ### Changes Made #### New Extension (`src/lib/utils/marked/footnote-extension.ts`) - **Created**: New marked extension for parsing footnote reference syntax - **Pattern**: Supports `[^identifier]` where identifier can be alphanumeric, underscore, or hyphen - **Security**: Implements proper HTML escaping for all user content - **Output**: Generates clean superscript HTML with semantic CSS classes #### Integration Updates - **Markdown.svelte**: Added footnote extension to the marked processing pipeline - **MarkdownInlineTokens.svelte**: Added rendering support for `footnoteRef` token type - **Positioning**: Footnote handling placed appropriately in the token processing flow #### Styling (`src/app.css`) - **Visual Design**: Footnote references inherit parent text color and use normal font weight - **Typography**: Optimized superscript sizing (0.7em) and positioning (0.3em vertical-align) - **User Experience**: Subtle hover effect with opacity transition - **Spacing**: Proper margin (0.3em) between consecutive footnotes ### Security - All user input is HTML-escaped - XSS protection through proper sanitization - Safe HTML generation using marked's renderer API ### Testing Considerations - Footnote references render correctly as superscript - HTML escaping prevents XSS vulnerabilities - Multiple consecutive footnotes display with proper spacing - Hover effects work smoothly across different themes ### Future Enhancements RAG system( like LightRAG) provides a structured list of referenced documents alongside the LLM-generated response, enabling us to render footnote references as clickable HTTP links that open the original source webpages. ### Contributor License Agreement By submitting this pull request, I confirm that I have read and fully agree to the [Contributor License Agreement (CLA)](https://github.com/open-webui/open-webui/blob/main/CONTRIBUTOR_LICENSE_AGREEMENT), and I am providing my contributions under its terms. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-20 05:31:33 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#24658