CodeMark - Powerful Bookmark Extension for VS Code

CodeMark is a feature-rich bookmark extension for Visual Studio Code and Cursor that allows you to mark important lines of code, add notes, and easily navigate through your codebase.

🚀 Quick Start

1. Add a bookmark: Press Cmd+Shift+B (Mac) or Ctrl+Shift+B (Windows/Linux) on any line
2. The bookmark is created instantly with a default title showing the filename and line number
3. Hover over the bookmarked line to see details and quick actions
4. Click "Edit" in the hover tooltip to open the inline editor panel with real form fields
5. Edit inline with actual text inputs and textarea - no more input boxes!
6. Click "Delete" in the hover tooltip or editor panel to remove the bookmark

That's it! Fast, simple, and non-intrusive with a beautiful inline editor.

Features

🔖 Add Bookmarks

• Quick add - Mark any line instantly with one keyboard shortcut
• Gutter context menu - Right-click on line numbers to add/toggle bookmarks
• Bookmarks are created with a default title (filename:lineNumber)
• Bookmarks are displayed with an icon in the left margin
• Bookmarked lines are subtly highlighted with visual styling
• Hover over bookmarked lines to see details and quick actions
• Customize title and notes via the interactive inline editor
• Track creation and update timestamps

📝 Manage Bookmarks

• Inline editor panel with real form fields for editing
• Edit bookmark title and notes with proper text inputs
• Character counters and validation
• Remove individual bookmarks
• Clear all bookmarks at once
• Bookmarks persist across VS Code sessions

🔍 Search and Navigate

• View all bookmarks in a dedicated sidebar
• Search bookmarks by title, notes, or filename
• Quick navigation to any bookmarked location
• Click on a bookmark to jump to its location

📊 Bookmark Information & Inline Editor

• Interactive hover tooltips - Hover over any bookmarked line to see full details
• Bookmarked lines are visually highlighted for easy identification
• Inline editor panel - Click "Edit" to open a beautiful web-based editor
• Real HTML form fields with character counters and validation
• Quick actions - Edit or delete bookmarks directly from the hover tooltip
• Keyboard shortcuts: Cmd/Ctrl+Enter to save, Esc to cancel
• See creation and update timestamps
• File path, line number, and description in sidebar

Usage

Adding Bookmarks

1. Using Keyboard Shortcut:

   • Mac: Cmd+Shift+B
   • Windows/Linux: Ctrl+Shift+B

2. Using Command Palette:

   • Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
   • Type "CodeMark: Add Bookmark"

3. Using Context Menu:

   • Right-click on any line in the editor
   • Select "CodeMark: Add Bookmark"

4. Using Gutter Context Menu (NEW!):

   • Right-click on the line number (left margin/gutter)
   • Select "CodeMark: Toggle Bookmark" to add/remove
   • Or select "CodeMark: Add Bookmark"

What happens when you add a bookmark:

• A bookmark is created instantly with a default title (filename:lineNumber)
• The line is highlighted with a subtle blue background
• The bookmark icon appears in the gutter
• To customize: Hover over the bookmarked line and click "Edit" to add a custom title and notes

Viewing Bookmarks

1. Sidebar View:

   • Click on the bookmark icon (🔖) in the Activity Bar
   • View all bookmarks organized by file
   • Click on any bookmark to navigate to its location

2. Quick Pick:

   • Use Command Palette: "CodeMark: Show All Bookmarks"
   • Search and filter bookmarks
   • Select a bookmark to navigate

3. Interactive Hover Tooltip:

   • Hover over the bookmarked line or the bookmark icon in the gutter
   • Bookmarked lines are subtly highlighted with a blue tint
   • See bookmark title, notes, and timestamps in a rich tooltip
   • Click "Edit" to open the inline editor panel beside your code
   • Click "Delete" button to quickly remove the bookmark
   • All details displayed at a glance with markdown formatting

Managing Bookmarks

Edit Bookmark:

• Quick way: Hover over the bookmarked line and click the "Edit" button
• Opens a beautiful inline editor panel with:
  • Real text input fields (no more dialog boxes!)
  • Character counters (100 for title, 500 for notes)
  • Auto-focus and pre-filled values
  • Keyboard shortcuts: Cmd/Ctrl+Enter to save, Esc to cancel
  • Delete button right in the editor
• Alternatively: Right-click on a bookmark and select "CodeMark: Edit Bookmark"

Remove Bookmark:

• Quick way: Hover over the bookmarked line and click the "Delete" button
• Gutter menu: Right-click on the line number and select "CodeMark: Toggle Bookmark" or "Remove Bookmark"
• Shortcut: Cmd+Shift+R / Ctrl+Shift+R
• Or right-click in the editor and select "CodeMark: Remove Bookmark"

Clear All Bookmarks:

• Command Palette: "CodeMark: Clear All Bookmarks"
• Confirms before clearing

Inline Editor Features

When you click "Edit" on any bookmark, a beautiful inline editor panel opens with:

✨ Real Form Fields

• Actual HTML text inputs (not dialog boxes!)
• Multi-line textarea for notes
• Smooth, native typing experience

📊 Smart Features

• Character counters with visual warnings
• Auto-focus on title input
• Pre-filled with current values
• Real-time validation

⌨️ Keyboard Shortcuts

• Cmd/Ctrl + Enter - Save changes
• Escape - Cancel editing
• Tab navigation between fields

🎨 Beautiful Design

• Follows VS Code theme colors
• Professional layout with metadata display
• Shows creation and update timestamps
• Integrated delete button

Keyboard Shortcuts

Command	Mac	Windows/Linux
Add Bookmark	Cmd+Shift+B	Ctrl+Shift+B
Remove Bookmark	Cmd+Shift+R	Ctrl+Shift+R

Commands

All commands are available through the Command Palette (Cmd+Shift+P / Ctrl+Shift+P):

• CodeMark: Add Bookmark - Add a bookmark at the current line
• CodeMark: Toggle Bookmark - Add or remove bookmark (smart toggle)
• CodeMark: Remove Bookmark - Remove bookmark from current line
• CodeMark: Edit Bookmark - Edit bookmark title and notes
• CodeMark: Show All Bookmarks - Show searchable list of all bookmarks
• CodeMark: Navigate to Bookmark - Jump to a specific bookmark
• CodeMark: Clear All Bookmarks - Remove all bookmarks
• CodeMark: Refresh Bookmarks - Refresh the bookmark view

Extension Settings

Currently, CodeMark works out of the box with no configuration required. Future versions may include customizable settings for:

• Bookmark icon appearance
• Default bookmark behavior
• Export/import bookmarks

Known Issues

None at the moment. Please report issues on our GitHub repository.

Release Notes

0.1.0

Initial release of CodeMark with the following features:

• Add bookmarks with optional title and notes
• Visual bookmark indicators in the editor margin
• Dedicated sidebar view for all bookmarks
• Search functionality
• Navigation to bookmarks
• Edit and remove bookmarks
• Persistent storage across sessions
• Keyboard shortcuts for common operations

Development

Building the Extension

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Watch for changes
npm run watch

Running the Extension

1. Open the project in VS Code
2. Press F5 to open a new Extension Development Host window
3. Test the extension in the new window

Packaging

# Install vsce
npm install -g @vscode/vsce

# Package the extension
vsce package

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

Development

Building & Packaging

See VERSIONING.md for complete guide on:

• Version management
• Creating .vsix packages
• Publishing to VS Code Marketplace

Quick commands:

npm run package:patch   # Increment version & package
npm run publish:patch   # Increment version & publish

License

MIT License - See LICENSE file for details

Acknowledgments

Built with ❤️ for the VS Code community.

---

Enjoy bookmarking with CodeMark! 🔖