zotero/chrome/content/scaffold/monaco/monaco.html

78 lines
No EOL
1.9 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monaco</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container" style="width: 100%; height: 100%"></div>
<script src="resource://zotero/vs/loader.js"></script>
<script>
/**
* @param {Object} [params = {}]
* @return {Promise<void>}
*/
function loadMonaco(params = {}) {
let container = document.getElementById('container');
require.config({ paths: { vs: 'resource://zotero/vs' } });
let proxy = URL.createObjectURL(
new Blob(
[`
self.MonacoEnvironment = {
baseUrl: 'resource://zotero/'
};
importScripts('resource://zotero/vs/base/worker/workerMain.js');
`],
{ type: "text/javascript" }
)
);
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
return new Promise(resolve => require(['vs/editor/editor.main'], function () {
globalEditor = monaco;
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES6,
allowNonTsExtensions: true // needed for peeking definitions from in-memory models to work
});
editor = monaco.editor.create(container, {
theme: 'vs-dark',
language: 'javascript',
scrollBeyondLastLine: false,
minimap: { enabled: false },
// Clicking links doesn't actually work, so disable them (for now)
links: false,
insertSpaces: false,
detectIndentation: false,
...params
});
editor.getModel().setEOL(monaco.editor.EndOfLineSequence.LF);
window.onresize = function () {
editor.layout();
};
resolve({ monaco, editor });
}));
}
</script>
</body>
</html>