Skip to content

Render reference links as superscripts and widen link/image/reference modals#87

Merged
ThisIs-Developer merged 6 commits intomainfrom
copilot/fix-reference-btn-icon-and-width
May 6, 2026
Merged

Render reference links as superscripts and widen link/image/reference modals#87
ThisIs-Developer merged 6 commits intomainfrom
copilot/fix-reference-btn-icon-and-width

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented May 6, 2026

Preview rendering was showing reference definitions inline and not styling reference markers as small superscripts. Link/reference/image modals were too narrow, and uploaded images using blob URLs were not reliably rendered.

  • Reference parsing & rendering
    • Strip [n]: ... definitions from preview content and reuse them to rewrite inline [n] markers as clickable, superscript-style links.
    • Safeguard link creation by validating allowed URL schemes.
  • Preview sanitizer compatibility
    • Allow blob: URLs in preview to render device-uploaded images.
  • Modal sizing + styling
    • Widen link/reference/image modals and adjust reference link typography for a smaller, subtle superscript appearance.

Example (preview output for a reference definition):

[1]
[1]: https://chat.openai.com/chat "ChatGPT"

Renders as a compact superscript-style [1] link, without showing the definition line in preview.

Copilot AI and others added 6 commits May 6, 2026 03:15
Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/99943a44-4124-43de-bc07-de65731f16a0

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/99943a44-4124-43de-bc07-de65731f16a0

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/99943a44-4124-43de-bc07-de65731f16a0

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/99943a44-4124-43de-bc07-de65731f16a0

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/99943a44-4124-43de-bc07-de65731f16a0

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/99943a44-4124-43de-bc07-de65731f16a0

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 6, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
markdown-viwer Ready Ready Preview, Comment May 6, 2026 3:26am

@ThisIs-Developer ThisIs-Developer marked this pull request as ready for review May 6, 2026 03:28
Copilot AI review requested due to automatic review settings May 6, 2026 03:28
@ThisIs-Developer ThisIs-Developer merged commit a6c1909 into main May 6, 2026
7 checks passed
@ThisIs-Developer ThisIs-Developer deleted the copilot/fix-reference-btn-icon-and-width branch May 6, 2026 03:29
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR improves how numeric Markdown reference links are rendered in the live preview (superscript-style markers, with reference definition lines removed), widens several modals, and updates preview sanitization to support blob: URLs so device-uploaded images render reliably.

Changes:

  • Extract numeric reference definitions ([n]: ...) from markdown prior to preview rendering and rewrite inline [n] markers into clickable superscript-style links.
  • Allow blob: URLs through the preview sanitizer configuration to support locally uploaded images.
  • Increase modal width via a shared “wide” modal class and refine reference link typography.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
styles.css Styles reference links as superscripts and increases the “wide modal” max width.
script.js Extracts reference definitions, rewrites reference markers into links, and relaxes DOMPurify URI rules to allow blob:.
index.html Applies the wide modal class to the reference and image modals.
desktop-app/resources/styles.css Keeps desktop CSS in sync for reference link styling and modal widths.
desktop-app/resources/js/script.js Keeps desktop JS in sync for reference parsing/linking and DOMPurify config.
desktop-app/resources/index.html Keeps desktop HTML in sync for modal width changes.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread script.js
Comment on lines +1874 to +1886
const definitionRegex = /^\[(\d+)\]:\s*(?:<([^>\s]+)>|(\S+))(?:\s+(?:"([^"]*)"|'([^']*)'|\(([^)]+)\)))?\s*$/gm;
const cleanedMarkdown = markdown.replace(
definitionRegex,
function(match, numberText, angleUrl, plainUrl, titleDouble, titleSingle, titleParen) {
const number = parseInt(numberText, 10);
if (Number.isNaN(number)) return match;
const url = (angleUrl || plainUrl || '').trim();
if (!url) return match;
const title = titleDouble || titleSingle || titleParen || '';
definitions.set(number, { url: url, title: title });
return '';
}
);
Comment thread script.js
Comment on lines +1873 to +1875
// Matches reference definitions: [1]: <url> "title", [1]: url 'title', or [1]: url (title)
const definitionRegex = /^\[(\d+)\]:\s*(?:<([^>\s]+)>|(\S+))(?:\s+(?:"([^"]*)"|'([^']*)'|\(([^)]+)\)))?\s*$/gm;
const cleanedMarkdown = markdown.replace(
Comment thread script.js
Comment on lines 1931 to +1943
@@ -1891,10 +1938,50 @@ This is a fully client-side application. Your content never leaves your browser
const match = text.match(/^\[(\d+)\]$/);
if (match) number = parseInt(match[1], 10);
}
if (number && usedNumbers.has(number)) {
link.textContent = '[' + number + ']';
link.classList.add('reference-link');
if (number && referenceDefinitions.has(number)) {
applyReferenceStyle(link, number);
}
Comment on lines +1874 to +1886
const definitionRegex = /^\[(\d+)\]:\s*(?:<([^>\s]+)>|(\S+))(?:\s+(?:"([^"]*)"|'([^']*)'|\(([^)]+)\)))?\s*$/gm;
const cleanedMarkdown = markdown.replace(
definitionRegex,
function(match, numberText, angleUrl, plainUrl, titleDouble, titleSingle, titleParen) {
const number = parseInt(numberText, 10);
if (Number.isNaN(number)) return match;
const url = (angleUrl || plainUrl || '').trim();
if (!url) return match;
const title = titleDouble || titleSingle || titleParen || '';
definitions.set(number, { url: url, title: title });
return '';
}
);
Comment on lines +1873 to +1875
// Matches reference definitions: [1]: <url> "title", [1]: url 'title', or [1]: url (title)
const definitionRegex = /^\[(\d+)\]:\s*(?:<([^>\s]+)>|(\S+))(?:\s+(?:"([^"]*)"|'([^']*)'|\(([^)]+)\)))?\s*$/gm;
const cleanedMarkdown = markdown.replace(
Comment on lines 1931 to +1943
@@ -1891,10 +1938,50 @@ This is a fully client-side application. Your content never leaves your browser
const match = text.match(/^\[(\d+)\]$/);
if (match) number = parseInt(match[1], 10);
}
if (number && usedNumbers.has(number)) {
link.textContent = '[' + number + ']';
link.classList.add('reference-link');
if (number && referenceDefinitions.has(number)) {
applyReferenceStyle(link, number);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants