Skip to content

Modal-based link/reference/image insertion with consistent UX#86

Merged
ThisIs-Developer merged 5 commits intomainfrom
copilot/update-link-reference-image-button-modal
May 5, 2026
Merged

Modal-based link/reference/image insertion with consistent UX#86
ThisIs-Developer merged 5 commits intomainfrom
copilot/update-link-reference-image-button-modal

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented May 5, 2026

  • Update reference button icon and widen link/reference/image modal layouts
  • Adjust reference insertion formatting and preview rendering for bracketed markers with tighter styling
  • Switch image uploads to object URLs without base64 conversion
  • Sync desktop resources and rerun build/test

Copilot AI and others added 3 commits May 5, 2026 17:20
Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/b2788a61-05c8-4f0f-a5d0-8ecd315db97a

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/b2788a61-05c8-4f0f-a5d0-8ecd315db97a

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/b2788a61-05c8-4f0f-a5d0-8ecd315db97a

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

vercel Bot commented May 5, 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 5, 2026 6:15pm

Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/0b1640e1-7932-428f-8aa1-ded4211f4d36

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

cloudflare-workers-and-pages Bot commented May 5, 2026

Deploying markdown-viewer with  Cloudflare Pages  Cloudflare Pages

Latest commit: c3d3980
Status: ✅  Deploy successful!
Preview URL: https://5ea562bc.markdown-viewer.pages.dev
Branch Preview URL: https://copilot-update-link-referenc.markdown-viewer.pages.dev

View logs

@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented May 5, 2026

Deploying markdownviewer with  Cloudflare Pages  Cloudflare Pages

Latest commit: c3d3980
Status: ✅  Deploy successful!
Preview URL: https://182bf43d.markdownviewer.pages.dev
Branch Preview URL: https://copilot-update-link-referenc.markdownviewer.pages.dev

View logs

Agent-Logs-Url: https://github.com/ThisIs-Developer/Markdown-Viewer/sessions/0b1640e1-7932-428f-8aa1-ded4211f4d36

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
Copilot AI requested a review from ThisIs-Developer May 5, 2026 17:52
@ThisIs-Developer ThisIs-Developer marked this pull request as ready for review May 5, 2026 18:18
Copilot AI review requested due to automatic review settings May 5, 2026 18:18
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 replaces prompt-based link/image insertion with modal dialogs, adds a new reference/citation insertion flow (including preview styling for bracketed reference markers), and changes uploaded image handling to use object URLs. It also mirrors these UI/logic updates into the duplicated desktop-app resources.

Changes:

  • Added modal UIs for inserting links, references, and images; replaced the toolbar “anchor” action with a “reference” action.
  • Added reference-definition insertion logic plus preview post-processing/styling for bracketed reference markers.
  • Switched uploaded image insertion to URL.createObjectURL() and added cleanup for revoked object URLs.

Reviewed changes

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

Show a summary per file
File Description
styles.css Adds styling for reference links, reference toolbar icon, and shared modal form-field layout utilities.
script.js Implements link/image/reference modals, reference numbering helpers, reference preview styling, and object URL lifecycle management.
index.html Updates toolbar button and adds new link/reference/image modal markup.
desktop-app/resources/styles.css Syncs the same styling changes into the desktop resource copy.
desktop-app/resources/js/script.js Syncs the same modal/reference/object URL logic into the desktop resource copy.
desktop-app/resources/index.html Syncs the same toolbar/modal markup into the desktop resource copy.

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

Comment thread index.html
Comment on lines +352 to +354
<div id="reference-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="reference-modal-title" style="display:none;">
<div class="reset-modal-box">
<p id="reference-modal-title" class="reset-modal-message">Insert reference</p>
Comment thread index.html
Comment on lines +374 to +377
<!-- Image Modal -->
<div id="image-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="image-modal-title" style="display:none;">
<div class="reset-modal-box">
<p id="image-modal-title" class="reset-modal-message">Insert image</p>
Comment thread script.js
Comment on lines +2026 to +2028
const objectUrl = URL.createObjectURL(file);
imageObjectUrls.add(objectUrl);
insertImage(objectUrl);
Comment on lines +355 to +357
<div id="reference-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="reference-modal-title" style="display:none;">
<div class="reset-modal-box">
<p id="reference-modal-title" class="reset-modal-message">Insert reference</p>
Comment on lines +377 to +380
<!-- Image Modal -->
<div id="image-modal" class="reset-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="image-modal-title" style="display:none;">
<div class="reset-modal-box">
<p id="image-modal-title" class="reset-modal-message">Insert image</p>
Comment on lines +2026 to +2028
const objectUrl = URL.createObjectURL(file);
imageObjectUrls.add(objectUrl);
insertImage(objectUrl);
Comment thread script.js

function getUsedReferenceNumbers(text) {
const used = new Set();
const regex = /^\[(\d+)\]:/gm;

function getUsedReferenceNumbers(text) {
const used = new Set();
const regex = /^\[(\d+)\]:/gm;
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