mirror of
https://github.com/danbulant/monaco-yaml
synced 2026-05-25 12:52:23 +00:00
144 lines
4.3 KiB
HTML
144 lines
4.3 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': '../release/dev',
|
|
'vs': '../node_modules/monaco-editor-core/dev/vs'
|
|
}
|
|
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 + '/release/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'
|
|
], 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,
|
|
validate: 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>
|