| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Monaco Comment Test</title> |
| <style> |
| body { |
| font-family: |
| -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, |
| Arial, sans-serif; |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 2rem; |
| } |
| |
| h1 { |
| color: #333; |
| margin-bottom: 2rem; |
| } |
| |
| .test-container { |
| border: 2px solid #ddd; |
| border-radius: 4px; |
| padding: 20px; |
| margin: 20px 0; |
| height: 400px; |
| } |
| |
| .event-log { |
| background: #f5f5f5; |
| border: 1px solid #ccc; |
| border-radius: 4px; |
| padding: 10px; |
| margin: 20px 0; |
| max-height: 200px; |
| overflow-y: auto; |
| font-family: monospace; |
| font-size: 12px; |
| } |
| |
| .event-log .event { |
| margin-bottom: 5px; |
| padding: 2px 0; |
| border-bottom: 1px solid #eee; |
| } |
| |
| .instruction { |
| background: #e8f4f8; |
| border: 1px solid #bee5eb; |
| border-radius: 4px; |
| padding: 10px; |
| margin: 10px 0; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Monaco Comment Test</h1> |
| |
| <div class="instruction"> |
| <strong>Instructions:</strong> |
| <ol> |
| <li>Hover over a line to see the comment glyph (💬) appear</li> |
| <li>Click on the glyph to open a comment box for that line</li> |
| <li> |
| Try clicking and dragging from one glyph to another to select multiple |
| lines |
| </li> |
| <li> |
| <strong>NEW:</strong> Make a text selection in the editor, then click |
| a glyph - it will use your selection instead of the line |
| </li> |
| <li>Fill out the comment and click "Add" to test the event dispatch</li> |
| </ol> |
| </div> |
| |
| <div class="test-container"> |
| <sketch-monaco-view id="testEditor"></sketch-monaco-view> |
| </div> |
| |
| <div class="event-log" id="eventLog"> |
| <strong>Event Log:</strong> |
| </div> |
| |
| <script type="module"> |
| // Load the Monaco component |
| import "../../dist/web-components/sketch-monaco-view.js"; |
| |
| document.addEventListener("DOMContentLoaded", () => { |
| const editor = document.getElementById("testEditor"); |
| const eventLog = document.getElementById("eventLog"); |
| |
| // Set up test content |
| editor.originalCode = `function calculateTotal(items) { |
| return items |
| .map(item => item.price * item.quantity) |
| .reduce((a, b) => a + b, 0); |
| }`; |
| |
| editor.modifiedCode = `function calculateTotal(items) { |
| // Apply discount if available |
| return items |
| .map(item => { |
| const price = item.discount ? |
| item.price * (1 - item.discount) : |
| item.price; |
| return price * item.quantity; |
| }) |
| .reduce((a, b) => a + b, 0); |
| }`; |
| |
| editor.originalFilename = "original.js"; |
| editor.modifiedFilename = "modified.js"; |
| |
| // Log events |
| function logEvent(message) { |
| const eventDiv = document.createElement("div"); |
| eventDiv.className = "event"; |
| eventDiv.textContent = `${new Date().toLocaleTimeString()}: ${message}`; |
| eventLog.appendChild(eventDiv); |
| eventLog.scrollTop = eventLog.scrollHeight; |
| } |
| |
| // Listen for comment events |
| editor.addEventListener("monaco-comment", (event) => { |
| logEvent("Monaco comment event received"); |
| logEvent(`File: ${event.detail.fileContext}`); |
| logEvent(`Editor: ${event.detail.activeEditor}`); |
| logEvent( |
| `Lines: ${event.detail.selectionRange.startLineNumber}-${event.detail.selectionRange.endLineNumber}`, |
| ); |
| logEvent( |
| `Selected text: ${event.detail.selectedText.substring(0, 50)}...`, |
| ); |
| logEvent(`Comment: ${event.detail.commentText}`); |
| console.log("Full comment event:", event.detail); |
| }); |
| |
| logEvent("Test page loaded. Monaco component initialized."); |
| }); |
| </script> |
| </body> |
| </html> |