Add multi-tab support with keyboard shortcuts and per-tab exports

[Copilot]

Implementation Plan for Tab Functionality

Features to Implement:

• Create a tabs store to manage multiple markdown files/tabs
  • Each tab should have unique ID, title, and content
  • Store tabs in localStorage with proper serialization
  • Support creating, deleting, and switching tabs
• Create a sidebar component to display file/tab list
  • Show all open tabs with their titles
  • Allow clicking to switch between tabs
  • Show active tab indicator
  • Add button to create new tab
  • Add close button for each tab
• Update Home.vue to work with tab system
  • Load/save content for active tab only
  • Update editor to use active tab's content
• Add keyboard shortcuts
  • Cmd/Ctrl + T for new tab
  • Cmd/Ctrl + W for closing current tab
  • Cmd/Ctrl + 1-9 for switching to specific tab
• Update export functionality
  • All export operations (MD, HTML, PDF, Image) work with current active tab
  • Update filenames to use tab title
• Test and validate implementation
  • Verify tabs work correctly
  • Test keyboard shortcuts (Ctrl+T, Ctrl+1, Ctrl+2, Ctrl+W work)
  • Test close tab functionality
  • Test export functionality per tab (filenames use tab titles)
  • Test tab renaming (double-click to rename)
  • Build project successfully
  • Address code review feedback
  • Run security scan (CodeQL - 0 alerts)
  • Fix dependency vulnerabilities (html2pdf.js XSS)
  • Fix sidebar visibility issue
  • Remove unnecessary derivative state
  • Take screenshots of UI

Summary

Successfully implemented tab functionality for the Mark markdown editor with the following features:

✅ Implemented Features:

1. Tab Management System

   • Created a reactive tabs store (src/stores/tabs.js) that manages multiple markdown files
   • Each tab has a unique ID, title, and content (both raw markdown and rich editor state)
   • Tabs persist in localStorage across sessions
   • Migration support for existing single-file storage
   • Validates active tab ID exists in tabs array

2. Sidebar Component

   • File list sidebar showing all open tabs
   • Visual indicator for active tab
   • Double-click tab title to rename (with reliable input focusing using data attributes)
   • Close button for each tab (prevents closing the last tab)
   • New tab button (+) in sidebar header
   • Optimized to use reactive state directly without unnecessary derivative refs

3. Keyboard Shortcuts

   • Cmd/Ctrl + T: Create new tab
   • Cmd/Ctrl + W: Close current tab
   • Cmd/Ctrl + 1-9: Switch to specific tab by number

4. Per-Tab Export Functionality

   • All export operations (MD, HTML, PDF, Image) use active tab content
   • Export filenames default to tab title instead of generic "mark"
   • Each tab maintains its own content independently

Code Quality & Security:

• ✅ All code review feedback addressed
• ✅ Security scan passed (CodeQL - 0 alerts)
• ✅ Build successful with no errors
• ✅ Used modern JavaScript (slice instead of deprecated substr)
• ✅ Security Fix: Updated html2pdf.js from 0.10.1 to 0.14.0 to fix XSS vulnerability (GHSA)
• ✅ UI Fix: Fixed sidebar width collapse issue with flex-shrink: 0
• ✅ Code Quality: Removed unnecessary derivative state, watcher, and manual syncing

Screenshots:

• Before: https://github.com/user-attachments/assets/e9fa7643-a3f9-4d3b-b7a4-e721ddfbb70d
• After with sidebar visible: https://github.com/user-attachments/assets/22109967-0cda-4ca4-9097-04f97a1aa203
• Multiple tabs: https://github.com/user-attachments/assets/192cb605-b0ac-4e39-bae7-12eb045d2c6d
• Tab renamed: https://github.com/user-attachments/assets/d756f394-7fea-4a10-84b3-23f4e6ae81e2

Technical Implementation:

• Minimal changes: Modified only 4 files (2 new, 2 updated, 1 security update)
• No breaking changes: Existing functionality preserved
• Clean architecture: Reactive state management with Vue 3 composition API
• Robust validation: Active tab ID validation and reliable input focusing
• Secure dependencies: Fixed XSS vulnerability in html2pdf.js
• Optimized reactivity: Uses tabsState directly without unnecessary derivative state

Security Summary:

• ✅ Fixed html2pdf.js XSS vulnerability (CVE) by upgrading from 0.10.1 to 0.14.0
• ✅ No code-level security issues found (CodeQL scan clean)
• ⚠️ Remaining vulnerabilities are in dev dependencies (bumpp, tar) and do not affect production runtime

Original prompt

---

This section details on the original issue you should resolve

<issue_title>feature request, Tabs</issue_title>
<issue_description>

1. Add tab functionality - ability to create multiple tabs for different markdown files
2. Show a file list on the left - display all open tabs/files in a sidebar
3. Add keyboard shortcuts - for creating new tabs
4. Export individual tabs - extend the current export functionality to work per-tab</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes feature request, Tabs #39

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

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

Project	Deployment	Review	Updated (UTC)
mark	Error		Jan 29, 2026 4:35pm

[barelyhuman]

Tabs and Sidebar arent visible in the screenshot

@copilot

[Copilot]

Tabs and Sidebar arent visible in the screenshot

@copilot

Fixed in commit 7fff54f. The sidebar was collapsing to 1px width due to flex layout. Added flex-shrink: 0 and min-width: 250px to prevent the sidebar from being compressed.

Updated screenshots now show the sidebar clearly:

• With sidebar visible: https://github.com/user-attachments/assets/22109967-0cda-4ca4-9097-04f97a1aa203
• Multiple tabs: https://github.com/user-attachments/assets/192cb605-b0ac-4e39-bae7-12eb045d2c6d
• Tab renamed: https://github.com/user-attachments/assets/d756f394-7fea-4a10-84b3-23f4e6ae81e2

[barelyhuman]

@copilot is the additional derivative state needed?

[Copilot]

You're right - the derivative state wasn't needed. Removed the activeTabId ref, the watcher, and all manual syncing in commit 1c5bab8. Now using tabsState.activeTabId directly in the template, which is already reactive.