mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 12:45:39 +01:00
9b018b7916
- Add json-interpolation to dev-setup.js module loading - Create standalone test page that works with CDN Monaco - Test page demonstrates syntax highlighting, completions, hover info, comments, and trailing comma support
105 lines
2.9 KiB
HTML
105 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
<link rel="stylesheet" href="../index.css" />
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
}
|
|
.info {
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
background: #f5f5f5;
|
|
border-radius: 4px;
|
|
}
|
|
.info h3 {
|
|
margin: 0 0 10px 0;
|
|
}
|
|
.info ul {
|
|
margin: 5px 0;
|
|
padding-left: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a class="loading-opts" href="../index2.html">[Back to main]</a>
|
|
<h2>JSON with Interpolation Test</h2>
|
|
|
|
<div class="info">
|
|
<h3>Features to test:</h3>
|
|
<ul>
|
|
<li><strong>Syntax highlighting</strong>: Notice ${...} interpolations have JavaScript highlighting</li>
|
|
<li><strong>Completions</strong>: Type inside ${} to see JavaScript completions</li>
|
|
<li><strong>Hover</strong>: Hover over variables inside ${} for type info</li>
|
|
<li><strong>Comments</strong>: // and /* */ comments are supported</li>
|
|
<li><strong>Trailing commas</strong>: Trailing commas are allowed</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div
|
|
id="container"
|
|
style="width: 800px; height: 400px; border: 1px solid grey"
|
|
></div>
|
|
|
|
<script src="../dev-setup.js"></script>
|
|
<script>
|
|
loadEditor(function () {
|
|
// Set up JavaScript extra libs so the JS worker knows about these variables
|
|
monaco.languages.typescript.javascriptDefaults.setExtraLibs([
|
|
{
|
|
content: `
|
|
declare const name: string;
|
|
declare const env: string;
|
|
declare const config: { debug: boolean; port: number };
|
|
declare const API_URL: string;
|
|
declare const VERSION: string;
|
|
|
|
// Example functions
|
|
declare function formatDate(date: Date): string;
|
|
declare function capitalize(str: string): string;
|
|
`,
|
|
filePath: 'file:///globals.d.ts'
|
|
}
|
|
]);
|
|
|
|
// Sample JSON with interpolation
|
|
var sampleContent = [
|
|
'{',
|
|
' // This is a JSON file with interpolation support',
|
|
' "greeting": "Hello, ${name}!",',
|
|
' "environment": "${env}",',
|
|
' "apiEndpoint": "${API_URL}/users",',
|
|
' "version": "${VERSION}",',
|
|
'',
|
|
' /* Multi-line comment support */',
|
|
' "settings": {',
|
|
' "debug": ${config.debug},',
|
|
' "port": ${config.port}',
|
|
' },',
|
|
'',
|
|
' // Try typing inside ${} to see JavaScript completions',
|
|
' "computed": "${capitalize(name)}",',
|
|
'',
|
|
' // Trailing commas are allowed',
|
|
' "items": [1, 2, 3,],',
|
|
'}'
|
|
].join('\n');
|
|
|
|
// Create the editor
|
|
var editor = monaco.editor.create(document.getElementById('container'), {
|
|
value: sampleContent,
|
|
language: 'json-interpolation',
|
|
theme: 'vs-dark',
|
|
minimap: { enabled: false },
|
|
automaticLayout: true,
|
|
fontSize: 14,
|
|
tabSize: 2
|
|
});
|
|
|
|
console.log('JSON Interpolation editor initialized');
|
|
console.log('Available languages:', monaco.languages.getLanguages().map(l => l.id));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|