mirror of
https://github.com/danbulant/monaco-yaml
synced 2026-05-24 20:31:58 +00:00
162 lines
5 KiB
HTML
162 lines
5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
<link
|
|
rel="stylesheet"
|
|
data-name="vs/editor/editor.main"
|
|
href="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.css"
|
|
/>
|
|
</head>
|
|
|
|
<body>
|
|
<h2>Monaco Editor YAML test page</h2>
|
|
<code id="path"></code>
|
|
<div
|
|
id="container"
|
|
style="width:800px;height:600px;border:1px solid grey"
|
|
></div>
|
|
|
|
<style>
|
|
.x-highlight-range {
|
|
background-color: lightblue;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Loading basic-languages to get the YAML language definition
|
|
var paths = {
|
|
'vs/basic-languages': '../node_modules/monaco-languages/release/dev',
|
|
'vs/language/yaml': '../lib/dev',
|
|
vs: '../node_modules/monaco-editor-core/dev/vs',
|
|
prettier: '../node_modules/prettier',
|
|
};
|
|
if (document.location.protocol === 'http:') {
|
|
// Add support for running local http server
|
|
let testIndex = document.location.pathname.indexOf('/test/');
|
|
if (testIndex !== -1) {
|
|
let prefix = document.location.pathname.substr(0, testIndex);
|
|
paths['vs/language/yaml'] = prefix + '/lib/dev';
|
|
}
|
|
}
|
|
var require = {
|
|
paths: paths,
|
|
};
|
|
</script>
|
|
<script src="../node_modules/monaco-editor-core/dev/vs/loader.js"></script>
|
|
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.nls.js"></script>
|
|
<script src="../node_modules/monaco-editor-core/dev/vs/editor/editor.main.js"></script>
|
|
|
|
<script>
|
|
require([
|
|
'vs/basic-languages/monaco.contribution',
|
|
'vs/language/yaml/monaco.contribution',
|
|
'prettier/standalone',
|
|
'prettier/parser-yaml',
|
|
], function() {
|
|
const yaml = `p1: `;
|
|
const modelUri = monaco.Uri.parse('a://b/foo.json');
|
|
const editor = monaco.editor.create(
|
|
document.getElementById('container'),
|
|
{
|
|
language: 'yaml',
|
|
showFoldingControls: 'always',
|
|
model: monaco.editor.createModel(yaml, 'yaml', modelUri),
|
|
}
|
|
);
|
|
|
|
monaco.languages.yaml.yamlDefaults.setDiagnosticsOptions({
|
|
enableSchemaRequest: true,
|
|
hover: true,
|
|
completion: true,
|
|
validate: true,
|
|
format: true,
|
|
schemas: [
|
|
{
|
|
uri: 'http://myserver/foo-schema.json', // id of the first schema
|
|
fileMatch: [modelUri.toString()], // associate with our model
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
p1: {
|
|
enum: ['v1', 'v2'],
|
|
},
|
|
p2: {
|
|
$ref: 'http://myserver/bar-schema.json', // reference the second schema
|
|
},
|
|
},
|
|
},
|
|
},
|
|
{
|
|
uri: 'http://myserver/bar-schema.json', // id of the first schema
|
|
schema: {
|
|
type: 'object',
|
|
properties: {
|
|
q1: {
|
|
enum: ['x1', 'x2'],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
});
|
|
|
|
require(['vs/editor/contrib/quickOpen/quickOpen'], async quickOpen => {
|
|
const NEVER_CANCEL_TOKEN = {
|
|
isCancellationRequested: false,
|
|
onCancellationRequested: () => Event.NONE,
|
|
};
|
|
|
|
let oldDecorations = [];
|
|
|
|
async function _getSymbolForPosition(model, position) {
|
|
const symbols = await quickOpen.getDocumentSymbols(
|
|
model,
|
|
false,
|
|
NEVER_CANCEL_TOKEN
|
|
);
|
|
|
|
function _recur(symbol) {
|
|
let target = symbol;
|
|
if (symbol && symbol.children && symbol.children.length) {
|
|
target =
|
|
_recur(
|
|
symbol.children.find(child =>
|
|
child.range.containsPosition(position)
|
|
)
|
|
) || symbol;
|
|
}
|
|
|
|
return target;
|
|
}
|
|
|
|
return _recur({ children: symbols });
|
|
}
|
|
|
|
editor.onDidChangeCursorSelection(async ({ selection }) => {
|
|
const model = editor.getModel();
|
|
const position = selection.getPosition();
|
|
const symbol = await _getSymbolForPosition(model, position);
|
|
|
|
console.log(`${symbol.name}: ${symbol.range}`);
|
|
if (symbol && symbol.range) {
|
|
const decoration = {
|
|
range: symbol.range,
|
|
options: {
|
|
isWholeLine: false,
|
|
className: 'x-highlight-range',
|
|
},
|
|
};
|
|
|
|
oldDecorations = editor.deltaDecorations(
|
|
oldDecorations,
|
|
decoration ? [decoration] : []
|
|
);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|