Panda Markdown Review

Panda Markdown Review is a VS Code extension for reviewing Markdown with an interactive preview panel, inline review markers, and Azure DevOps pull request comment integration.

What It Does

• Opens a dedicated review preview for Markdown files.
• Keeps editor and preview scroll positions synchronized.
• Renders Mermaid diagrams and lets you zoom/export preview output.
• Supports inline review markers and comment editing in local Markdown files.
• Supports Azure DevOps PR comment workflows directly from preview.

Commands

• Markdown Review
• Markdown Review: Open Pull Request File

You can run these from Command Palette, editor context menu, and explorer context menu for markdown files.

Key Features

Review-Oriented Preview UX

• Sticky toolbar with zoom controls and HTML export.
• Document index panel (heading-based navigation).
• Comments panel with clickable comment list.
• One-click jump to target line with layout-shift correction.

Scroll Sync

• Preview scroll updates the source editor location.
• Source editor scrolling updates preview location.
• Sync avoids forcing source file open when editor is not visible.

Local Markdown Review Comments

• Right-click in preview to add a comment from selection or target line.
• Marker token inserted at source location, for example: [[CM-...]] or [[CR-...]].
• Comment entry is maintained under a Code Review Comments section.
• Existing comments can be viewed, edited, and deleted from preview.

Azure DevOps PR Review Mode

Open a PR markdown file URL and review comments in-place without modifying local source.

• Fetches markdown content from PR revisions.
• Creates PR thread comments from preview selection.
• Supports update, reply, close/reopen, and delete reply actions.
• Auto-refreshes PR comments in background.
• Shows VS Code notifications for incoming new threads/replies.
• Notification action Open Comments focuses the matching thread in preview.
• Comments list metadata includes author and posted/updated time.

Settings

• pandamarkdownreview.azureDevOpsPat
• Azure DevOps PAT fallback for API operations.
• pandamarkdownreview.prNotifyOnIncomingComments
• Enable/disable incoming PR comment notifications.
• pandamarkdownreview.prAutoRefreshIntervalSeconds
• Background PR comment refresh interval (minimum 5 seconds).

Authentication Behavior

PR mode authorization order:

1. Git credential store (for organization URL).
2. Stored PAT (VS Code secret/config).
3. Prompt for PAT if needed.

How To Use

Local Markdown Review

1. Open a markdown file.
2. Run Markdown Review.
3. Use index/comments panels to navigate.
4. Right-click preview to add comments.
5. Optionally export rendered HTML.

PR Markdown Review (Azure DevOps)

1. Run Markdown Review: Open Pull Request File.
2. Paste a PR file URL, for example: https://microsoft.visualstudio.com/CDP/_git/W365A-Sandbox/pullrequest/16053963?_a=files&path=/docs/dev/design/image/image-design-cycle3.md
3. Provide credential/PAT if prompted.
4. Review, reply, and manage PR comment threads from preview.

Visual Walkthrough

flowchart LR
 A[Open Markdown File] --> B[Run Markdown Review]
 B --> C[Preview Panel Opens]
 C --> D[Index Panel Jump to Section]
 C --> E[Comments Panel Jump to Thread]
 C --> F[Right Click to Add Comment]
 F --> G[Marker Inserted and Comment Stored]
 C --> H[Open PR URL Mode]
 H --> I[Load PR Threads]
 I --> J[Reply/Update/Close Thread]
 I --> K[Incoming Change Notification]
 K --> L[Open Comments and Focus Thread]

Suggested Screenshots/GIFs

Replace the placeholder images below with your real PNG/GIF files using the same filenames.

1. Open preview from editor context menu.

2. Index click scrolling to target heading.

3. Comments panel click opening thread modal.

4. Right-click add comment flow.

5. PR incoming notification with Open Comments action.

6. PR thread author/time metadata in comments list.

Troubleshooting PR Comment Visibility

Use the diagnostic script in scripts/test-pr-comments.ps1 to verify what Azure DevOps returns for a PR/file.

Example:

./scripts/test-pr-comments.ps1 -Project "CDP" -Repository "W365A-Sandbox" -PullRequestId 16077425 -FilePath "/docs/dev/design/aci/proxymanagement/aci-proxy-management-phase1.md" -ShowRaw

The script:

• Calls PR threads API with paging.
• Filters by file path.
• Reports status/path/comment visibility reasons.
• Can validate a specific discussionId.

Development

Prerequisites:

• Node.js 18+
• npm
• VS Code 1.90+

Commands:

• npm install
• npm run compile
• npm run watch
• npm test

Packaging

• npm run package
• npm run release:package

Latest packaged version: 0.1.3

Release Notes

0.1.3

• Fixed PR comment retrieval edge cases (paged thread fetch, left/right anchor handling).
• Improved PR comment list reliability by using PR snapshot as list source of truth.
• Added discussionId-aware thread matching for PR URL workflows.
• Added PR comment diagnostics script for backend validation.
• Added comment-list metadata display (author/time).

0.1.2

• Added PR notifications for incoming new comments/replies.
• Added settings for PR notification toggle and auto-refresh interval.
• Improved TOC jump behavior stability for large/reflowing content.

0.0.4

• Refactored extension into modular architecture.
• Fixed Mermaid rendering and preview context-menu behavior.
• Fixed comment update regressions.

0.0.3

• Added Copy action in preview context menu.
• Improved preview/editor pane behavior and lifecycle.
• Improved scroll sync behavior.

Project Structure

• src/extension.ts: activation and registration entry point.
• src/commands.ts: command handlers and PR workflow orchestration.
• src/html.ts: webview UI, interaction wiring, and panels.
• src/prApi.ts: Azure DevOps API integration.
• scripts/test-pr-comments.ps1: PR comment diagnostics helper.

License

UNLICENSED