59 lines
1.7 KiB
HTML
59 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
</head>
|
|
<body>
|
|
|
|
<h2>Monaco Editor Shadow DOM</h2>
|
|
|
|
<div style="clear:both"></div>
|
|
<div id="container" style="float:left;width:800px;height:450px;border: 1px solid grey"></div>
|
|
<div style="clear:both"></div>
|
|
|
|
<script src="../metadata.js"></script>
|
|
<script src="dev-setup.js"></script>
|
|
<script>
|
|
const container = document.getElementById('container');
|
|
const shadowRoot = container.attachShadow({
|
|
mode: "closed"
|
|
});
|
|
loadEditor(function() {
|
|
const innerContainer = document.createElement('div');
|
|
shadowRoot.appendChild(innerContainer);
|
|
innerContainer.style.width = '800px';
|
|
innerContainer.style.height = '450px';
|
|
|
|
// We must move all CSS inside the shadow root, pick only link tags relevant to the editor
|
|
const documentLinks = Array.prototype.slice.call(document.getElementsByTagName('link'), 0).filter((documentLink) => {
|
|
if (/vs\/(base|editor|platform)/.test(documentLink.getAttribute('href'))) {
|
|
return true;
|
|
}
|
|
console.log(`Not moving: `, documentLink);
|
|
return true;
|
|
});
|
|
documentLinks.forEach(documentLink => shadowRoot.appendChild(documentLink));
|
|
|
|
// We must define the font face outside the shadowroot
|
|
const codiconCSS = `@font-face { font-family: "codicon"; src: url("${getCodiconPath()}") format("truetype"); }`;
|
|
const style = document.createElement('style');
|
|
style.type = 'text/css';
|
|
style.media = 'screen';
|
|
document.getElementsByTagName('head')[0].appendChild(style);
|
|
style.innerHTML = codiconCSS;
|
|
|
|
monaco.editor.create(innerContainer, {
|
|
value: [
|
|
'function hello() {',
|
|
'\tconsole.log("hello world");',
|
|
'}',
|
|
''
|
|
].join('\n'),
|
|
language: 'javascript'
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|