SystemSh0cker/monaco-editor
1
0
Fork 0
mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 15:05:39 +01:00
Code Issues Projects Releases Packages Activity

Add shadow dom test page

Browse source
This commit is contained in:
Alex Dima 2020-01-20 11:00:47 +01:00
parent 01a31541c7
commit 45f731f75a
No known key found for this signature in database
GPG key ID: 6E58D7B045760DA0
3 changed files with 69 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
test/dev-setup.js
View file

@ -149,6 +149,12 @@
} }
})(); })();
self.getCodiconPath = function(PATH_PREFIX) {
PATH_PREFIX = PATH_PREFIX || '';
const result = RESOLVED_CORE.getResolvedPath(PATH_PREFIX);
return `${result}/base/browser/ui/codiconLabel/codicon/codicon.ttf`;
};
self.loadEditor = function(callback, PATH_PREFIX) { self.loadEditor = function(callback, PATH_PREFIX) {
PATH_PREFIX = PATH_PREFIX || ''; PATH_PREFIX = PATH_PREFIX || '';

4
test/index.html
View file

@ -16,7 +16,9 @@ Jump to:
 |   | 
<a class="loading-opts" href="./mouse-scrollable-body.html">[scrollable body]</a> <a class="loading-opts" href="./mouse-scrollable-body.html">[scrollable body]</a>
&#160;|&#160; &#160;|&#160;
<a class="loading-opts" href="./mouse-scrollable-element.html">[scrollable element]</a> <a class="loading-opts" href="./mouse-scrollable-element.html">[scrollable element]</a><br/>
&#160;|&#160;
<a class="loading-opts" href="./shadow-dom.html">[Shadow DOM]</a>
&#160;|&#160; &#160;|&#160;
<a class="loading-opts" href="./colorize.html">[colorize element]</a> <a class="loading-opts" href="./colorize.html">[colorize element]</a>
&#160;|&#160; &#160;|&#160;

59
test/shadow-dom.html Normal file
View file

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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>