Add test case for 2040
Alex Dima
5 years ago
parent
decded9610
commit
8316fef208
@ -0,0 +1,35 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dev-setup-control {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="container"></div>
|
||||||
|
<script src="../../metadata.js"></script>
|
||||||
|
<script src="../dev-setup.js"></script>
|
||||||
|
<script src="iframe.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
const init = () => {
|
||||||
|
loadEditor(function() {
|
||||||
|
// create the editor
|
||||||
|
const target = document.getElementById('container');
|
||||||
|
const editor = monaco.editor.create(target, { language: 'html' });
|
||||||
|
|
||||||
|
// load some sample data
|
||||||
|
(async () => {
|
||||||
|
const response = await fetch('https://microsoft.github.io/monaco-editor/');
|
||||||
|
const html = await response.text();
|
||||||
|
editor.getModel().setValue(html);
|
||||||
|
})();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('DOMContentLoaded', () => {
|
||||||
|
if (!window.innerWidth || !window.innerHeight) {
|
||||||
|
window.addEventListener('resize', init, { once: true });
|
||||||
|
} else {
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script type="module">
|
||||||
|
class MonacoEditorElement extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.style = 'display: block;';
|
||||||
|
const shadow = this.attachShadow({ mode: 'open' });
|
||||||
|
const iframe = document.createElement('iframe');
|
||||||
|
iframe.src = new URL('iframe.html?editor=src', import.meta.url).href;
|
||||||
|
iframe.style = `width: 100%; height: 100%;`;
|
||||||
|
shadow.appendChild(iframe);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('monaco-editor', MonacoEditorElement);
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
section {
|
||||||
|
margin: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe,
|
||||||
|
monaco-editor {
|
||||||
|
width: 640px;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section>
|
||||||
|
<h1>Monaco in a shadowRoot + iframe context</h1>
|
||||||
|
<monaco-editor></monaco-editor>
|
||||||
|
</section>
|
||||||
|
<hr>
|
||||||
|
<section>
|
||||||
|
<h1>Monaco in an iframe context</h1>
|
||||||
|
<iframe src="iframe.html?editor=src"></iframe>
|
||||||
|
</section>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue