Examples: #19

lemanschik · 2022-12-05T17:43:33Z

Loading Monaco from lemanschik.com

<html><head><!-- Note: as of time of writing every single line here exempt the scriptName 
logging is meaning full this solves quircs between the contexts. -->
<meta name="viewport" content="width=device-width">
<!-- the absolute path to assets needs to end with / -->
<base href="https://github.lemanschik.com/monaco-editor/node_modules/monaco-editor/" />
<!-- the absolute path to assets relative to that js needs to start relaive eg no / -->
<script>globalThis.require = { paths: { vs: 'min/vs/' } };
const monacoLoaded = new ReadableStream({ start: (controller) => 
  (observer = new MutationObserver((mutationsList, observer) => 
    globalThis.monaco && [ controller.enqueue(globalThis.monaco),
     observer.disconnect(), controller.close() ]
  )).observe(document, { attributes: false, childList: true, subtree: true })
});
const loadedScripts = new ReadableStream({ start: (controller) => 
  new MutationObserver((mutationsList, observer) => {
    for (const mutation of mutationsList) {
      (mutation.type === 'childList') &&
         Array.from (mutation.addedNodes)
           .filter (node => node.tagName === 'SCRIPT')
           .forEach (script => script.addEventListener ('load', () => 
              controller.enqueue(script.src)));};
  }).observe(document, { attributes: false, childList: true, subtree: true })
});
</script><script type="module">
//window.define = (d) => console.log({d}) window.AMDLoader = { global: window }
window.addEventListener('DOMContentLoaded', (_event) => {});

loadedScripts.pipeTo(new WritableStream({ write: (scriptName) =>
  console.log(scriptName)
}));

monacoLoaded.pipeTo(new WritableStream({ write: (monaco) => {
  console.log('Loaded: ',{ monaco });
  customElements.define('line-parser',
    class extends HTMLDivElement { connectedCallback() {
      Object.assign(this.style, { height: "100vh", width: "100vw" })
      this.editor = monaco.editor.create(this, {
        value: `// First line
function hello() {
  alert('Hello world!');
}
// Last line`,
        language: 'javascript',
        lineNumbers: 'on',
        roundedSelection: false,
        scrollBeyondLastLine: false,
        readOnly: false,
        theme: 'vs-dark'
      });
      //editor.updateOptions({ lineNumbers: 'on' });
      this.resize = addEventListener("resize", (event) => { this.editor?.layout()});
    } // Needs div explicitly
  }, {extends: "div"});
}}));
</script><script 
  src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"
	integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
	crossorigin="anonymous"
> </script><script
  src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js"
	integrity="sha256-u+l2mGjpmGK/mFgUncmMcFKdMijvV+J3odlDJZSNUu8="
	crossorigin="anonymous"
> </script>
<script src="min/vs/loader.js"></script>
<script src="min/vs/editor/editor.main.nls.js"></script>
<script src="min/vs/editor/editor.main.js"></script></head>
<body><div is="line-parser" style="height: 200px;"></div></body>
  <p>HTML Based Web Installer for @unlicensed-code/editor<p>
  <p>Install Chromium Extension<p>
  <p>Install PWA<p>
  <p>Install Standalone via fileAccess API<p>
</html>

lemanschik assigned frank-dspeed and lemanschik Dec 5, 2022

lemanschik added the documentation Improvements or additions to documentation label Dec 5, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Examples: #19

Examples: #19

lemanschik commented Dec 5, 2022

Examples: #19

Examples: #19

Comments

lemanschik commented Dec 5, 2022

Loading Monaco from lemanschik.com