oleh/astrolabe
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe.git synced 2025-12-21 21:22:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: integrate Monaco editor for enhanced comment editing in modal

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-01-25 21:22:37 +02:00
parent dd56d4adc2
commit 10896146cf
4 changed files with 39 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

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

12
src/UIManager.js
View File

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

11
src/main.js
View File

@@ -17,6 +17,17 @@ require(['vs/editor/editor.main'], async function () {
formatOnType: true 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 // Fetch JSON schemas
const vegaSchema = await fetch('https://vega.github.io/schema/vega/v5.json').then(response => response.json()); 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()); const vegaLiteSchema = await fetch('https://vega.github.io/schema/vega-lite/v5.json').then(response => response.json());

19
src/styles.css
View File

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