Skip to content

feat: add code block copy button and popup markdown previewer with history#298

Open
harshvadhiya wants to merge 1 commit into
simov:mainfrom
harshvadhiya:main
Open

feat: add code block copy button and popup markdown previewer with history#298
harshvadhiya wants to merge 1 commit into
simov:mainfrom
harshvadhiya:main

Conversation

@harshvadhiya

Copy link
Copy Markdown

Add Code Block Copy Button & Popup Preview/History Features

Summary

This Pull Request introduces enhancements to improve the markdown rendering experience and add utility directly in the extension popup. It implements a copy button for rendered code blocks and adds a markdown editor tab inside the popup along with a preview history manager.


Changes

1. Code Block Copy Button

  • Appends a copy button in the top-right corner of all code blocks (excluding Mermaid diagrams) upon rendering.
  • Added smooth transitions and color-coded success/failure states that adapt seamlessly to light and dark modes.
  • Wired clipboard copying via navigator.clipboard.writeText with immediate visual feedback (displays checkmark ✔ for 2 seconds).

2. Popup Markdown Preview Tab

  • Added a Preview tab in the extension popup featuring a markdown editor (textarea) and a Clear button to wipe input.
  • Added a Preview button to render pasted Markdown. If the active tab is a new/empty tab page, it updates the tab directly to avoid creating duplicate preview pages.
  • Paste data is preserved in local storage so that it does not disappear if the popup closes.

3. Preview History Tab

  • Added a History tab in the popup containing a list of past preview items.
  • Automatically assigns a title from the first heading of the Markdown (or fallback snippet) and records the preview timestamp.
  • Actions:
    • Reopen: Open the past preview in a tab (updating the active tab if on a new-tab page).
    • Rename: Performs inline renaming of the entry by replacing the title label with an input box and Save (✔) / Discard (✖) controls.
    • Delete: Cleans up history entries and frees up extension local storage.
  • Entry history list is capped at 50 items.

4. Compatibility & Performance Fixes

  • Added "activeTab" permission to manifests to let the extension read active URLs for tab updates safely.
  • Rerouted Prism.js syntax and MathJax extension scripts to load via direct script elements inside internal extension pages, preventing background worker crashes on extension tabs where sender.tab is undefined.

Files Modified / Created

  • manifest.json, manifest.chrome.json, manifest.firefox.json - Added activeTab permission.
  • content/index.css - Styled copy buttons, layouts, and theme support.
  • content/index.js - Added copy button logic on rendering.
  • content/prism.js / content/mathjax.js - Dynamic script loading logic for internal extension pages.
  • content/preview.html / content/preview.js - [NEW] Setup the rendering template for preview pages.
  • popup/index.css - Formatted popup tabs, textarea grid, preview buttons, and history list.
  • popup/index.js - Added history/editing trackers, reopen tabs checks, inline editor renders, and storage binds.
  • background/messages.js - Guarded message handling routes.

Sample Images

image image

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.

1 participant