feat: integrate Monaco editor for enhanced comment editing in modal

index.html

@@ -65,8 +65,8 @@
     </div>
     <div id="comment-modal-background" class="comment-modal-background"></div>
     <div id="comment-modal" class="comment-modal">
-        <h2>Comment Content Editor</h2>
-        <textarea id="comment-textarea" placeholder="Add your comment here..."></textarea>
+        <h2 id="comment-modal-title">Comment Content Editor</h2>
+        <div id="comment-editor" style="height: calc(100% - 2rem);"></div>
     </div>
     <script type="module" src="src/main.js"></script>
 </body>

src/UIManager.js

@@ -14,7 +14,8 @@ export class UIManager {
         this.setupEventListener('export-snippets', 'onclick', () => this.snippetManager.storageManager.exportSnippets());
         this.setupEventListener('import-snippets', 'onclick', () => document.getElementById('import-file').click());
         this.setupEventListener('import-file', 'onchange', (e) => this.handleImport(e));
-        this.setupEventListener('comment-modal-background', 'onclick', () => this.closeCommentModal());
+        this.setupEventListener('comment-modal-background', 'onclick', () => this.saveComment());
+        this.setupEventListener('save-comment', 'onclick', () => this.saveComment());
     }
 
     setupEventListener(elementId, event, handler) {
@@ -105,18 +106,19 @@ export class UIManager {
         const snippet = this.snippetManager.snippets.find(s => s.id === snippetId);
         if (!snippet) return;
 
-        const commentTextarea = document.getElementById('comment-textarea');
-        commentTextarea.value = snippet.comment || '';
+        const commentEditor = window.commentEditor;
+        commentEditor.setValue(snippet.comment || '');
         document.getElementById('comment-modal').style.display = 'block';
         document.getElementById('comment-modal-background').style.display = 'block';
+        document.getElementById('comment-modal-title').textContent = `Edit comment for snippet: ${snippet.name}`;
         this.currentCommentSnippetId = snippetId;
     }
 
     saveComment() {
-        const commentTextarea = document.getElementById('comment-textarea');
+        const commentEditor = window.commentEditor;
         const snippet = this.snippetManager.snippets.find(s => s.id === this.currentCommentSnippetId);
         if (snippet) {
-            snippet.comment = commentTextarea.value;
+            snippet.comment = commentEditor.getValue();
             this.snippetManager.saveSnippetsAndUpdateUI();
         }
         document.getElementById('comment-modal').style.display = 'none';

src/main.js

@@ -17,6 +17,17 @@ require(['vs/editor/editor.main'], async function () {
         formatOnType: true
     });
 
+    // Initialize Monaco editor for comment modal
+    window.commentEditor = monaco.editor.create(document.getElementById('comment-editor'), {
+        language: 'markdown',
+        theme: 'vs-light',
+        wordWrap: 'on',
+        minimap: { enabled: false },
+        automaticLayout: true,
+        formatOnPaste: true,
+        formatOnType: true
+    });
+
     // Fetch JSON schemas
     const vegaSchema = await fetch('https://vega.github.io/schema/vega/v5.json').then(response => response.json());
     const vegaLiteSchema = await fetch('https://vega.github.io/schema/vega-lite/v5.json').then(response => response.json());

src/styles.css

@@ -269,17 +269,30 @@
     border-radius: 4px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     z-index: 1001;
+    font-family: var(--ui-font);
+}
+
+.comment-modal h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 1rem;
 }
 
 .comment-modal textarea {
     width: 100%;
     height: calc(100% - 2rem);
     margin-bottom: 1rem;
+    font-family: var(--ui-font);
+    font-size: 1rem;
+    padding: 0.5rem;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
 }
 
 .comment-modal .button {
     display: block;
     margin: 0 auto;
+    font-family: var(--ui-font);
 }
 
 .comment-modal-background {
@@ -333,4 +346,10 @@
     border: 1px solid #e0e0e0;
     border-radius: 4px;
     font-size: 1rem;
+}
+
+#comment-editor {
+    width: 100%;
+    height: calc(100% - 2rem);
+    margin-bottom: 1rem;
 }