mirror of
https://github.com/olehomelchenko/astrolabe-nvc.git
synced 2025-12-21 21:22:23 +00:00
Implement Phase 3: Complete Monaco Editor integration with enhanced features
This commit is contained in:
@@ -85,17 +85,24 @@ Astrolabe is a focused tool for managing, editing, and previewing Vega-Lite visu
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### **Phase 3: Monaco Editor Integration**
|
### **Phase 3: Monaco Editor Integration** ✅ **COMPLETE**
|
||||||
**Goal**: Working code editor with Vega-Lite schema
|
**Goal**: Working code editor with Vega-Lite schema
|
||||||
|
|
||||||
- [ ] Load Monaco Editor from CDN
|
- [x] Load Monaco Editor from CDN
|
||||||
- [ ] Initialize Monaco in the middle panel
|
- [x] Initialize Monaco in the middle panel
|
||||||
- [ ] Configure JSON mode with Vega-Lite schema URL for autocomplete
|
- [x] Configure JSON mode with Vega-Lite schema for autocomplete
|
||||||
- [ ] Add a test Vega-Lite spec as default content
|
- [x] Add a test Vega-Lite spec as default content
|
||||||
- [ ] Verify schema validation and autocomplete works
|
- [x] Verify schema validation and autocomplete works
|
||||||
|
|
||||||
**Deliverable**: Working editor with intellisense for Vega-Lite
|
**Deliverable**: Working editor with intellisense for Vega-Lite
|
||||||
|
|
||||||
|
**Enhancements Made**:
|
||||||
|
- Used specific Monaco version (0.47.0) for consistency
|
||||||
|
- Fetch actual Vega-Lite schema JSON for better validation
|
||||||
|
- Added formatOnPaste and formatOnType for better UX
|
||||||
|
- Implemented proper error handling for schema loading
|
||||||
|
- Sample bar chart spec loads by default
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### **Phase 4: Vega-Lite Rendering**
|
### **Phase 4: Vega-Lite Rendering**
|
||||||
@@ -268,5 +275,5 @@ Astrolabe is a focused tool for managing, editing, and previewing Vega-Lite visu
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**Current Phase**: Phase 2 - Resizable Panels
|
**Current Phase**: Phase 4 - Vega-Lite Rendering
|
||||||
**Status**: Ready to begin implementation
|
**Status**: Ready to begin implementation
|
||||||
82
index.html
82
index.html
@@ -6,6 +6,9 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Astrolabe - Vega-Lite Snippet Manager</title>
|
<title>Astrolabe - Vega-Lite Snippet Manager</title>
|
||||||
<link rel="stylesheet" href="src/styles.css">
|
<link rel="stylesheet" href="src/styles.css">
|
||||||
|
|
||||||
|
<!-- Monaco Editor -->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs/loader.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
@@ -70,14 +73,7 @@
|
|||||||
Editor
|
Editor
|
||||||
</div>
|
</div>
|
||||||
<div class="panel-content">
|
<div class="panel-content">
|
||||||
<div class="editor-placeholder">
|
<div id="monaco-editor" style="height: 100%; width: 100%;"></div>
|
||||||
<div class="placeholder">
|
|
||||||
Monaco Editor will load here
|
|
||||||
</div>
|
|
||||||
<div style="margin-top: 8px; font-size: 12px; color: #adb5bd;">
|
|
||||||
JSON schema validation • Autocomplete • Syntax highlighting
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -101,8 +97,76 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Basic toggle functionality (placeholder)
|
let editor; // Global editor instance
|
||||||
|
|
||||||
|
// Sample Vega-Lite specification
|
||||||
|
const sampleSpec = {
|
||||||
|
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
|
||||||
|
"description": "A simple bar chart with embedded data.",
|
||||||
|
"data": {
|
||||||
|
"values": [
|
||||||
|
{"category": "A", "value": 28},
|
||||||
|
{"category": "B", "value": 55},
|
||||||
|
{"category": "C", "value": 43},
|
||||||
|
{"category": "D", "value": 91},
|
||||||
|
{"category": "E", "value": 81},
|
||||||
|
{"category": "F", "value": 53},
|
||||||
|
{"category": "G", "value": 19},
|
||||||
|
{"category": "H", "value": 87}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"mark": "bar",
|
||||||
|
"encoding": {
|
||||||
|
"x": {"field": "category", "type": "nominal", "axis": {"labelAngle": 0}},
|
||||||
|
"y": {"field": "value", "type": "quantitative"}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function () {
|
document.addEventListener('DOMContentLoaded', function () {
|
||||||
|
// Initialize Monaco Editor
|
||||||
|
require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.47.0/min/vs' } });
|
||||||
|
require(['vs/editor/editor.main'], async function () {
|
||||||
|
// Fetch actual Vega-Lite schema JSON for better validation
|
||||||
|
let vegaLiteSchema;
|
||||||
|
try {
|
||||||
|
const response = await fetch('https://vega.github.io/schema/vega-lite/v5.json');
|
||||||
|
vegaLiteSchema = await response.json();
|
||||||
|
console.log('Vega-Lite schema loaded successfully');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to load Vega-Lite schema:', error);
|
||||||
|
vegaLiteSchema = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Configure JSON language with actual schema
|
||||||
|
if (vegaLiteSchema) {
|
||||||
|
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
|
||||||
|
validate: true,
|
||||||
|
schemas: [{
|
||||||
|
uri: "https://vega.github.io/schema/vega-lite/v5.json",
|
||||||
|
fileMatch: ["*"], // Associate with all files
|
||||||
|
schema: vegaLiteSchema
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create the editor with improved configuration
|
||||||
|
editor = monaco.editor.create(document.getElementById('monaco-editor'), {
|
||||||
|
value: JSON.stringify(sampleSpec, null, 2),
|
||||||
|
language: 'json',
|
||||||
|
theme: 'vs-light',
|
||||||
|
fontSize: 12,
|
||||||
|
minimap: { enabled: false },
|
||||||
|
scrollBeyondLastLine: false,
|
||||||
|
automaticLayout: true,
|
||||||
|
wordWrap: 'on',
|
||||||
|
formatOnPaste: true,
|
||||||
|
formatOnType: true
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('Monaco Editor initialized with enhanced Vega-Lite schema support');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Basic toggle functionality
|
||||||
const toggleButtons = document.querySelectorAll('.toggle-btn');
|
const toggleButtons = document.querySelectorAll('.toggle-btn');
|
||||||
const panels = {
|
const panels = {
|
||||||
'toggle-snippets': document.getElementById('snippet-panel'),
|
'toggle-snippets': document.getElementById('snippet-panel'),
|
||||||
|
|||||||
Reference in New Issue
Block a user