-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
made all monaco instances share one iframe
needed to break out of the shadow dom so an iframe was needed, but previously each file had its own iframe, which made modelling a filesystem harder, so now there's one iframe that manages all editors
- Loading branch information
Showing
26 changed files
with
689 additions
and
658 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { css, html, LitElement, PropertyValues } from "lit"; | ||
| import { customElement, property } from "lit/decorators.js"; | ||
| import { Project } from "../state"; | ||
| @customElement("cmaj-monaco-container") export class MonacoContainer extends LitElement { | ||
| @property({ type: String }) focusedFileId?: string; | ||
| @property({ type: Object }) project!: Project; | ||
| static styles = css` | ||
| :host { | ||
| display: block; | ||
| flex:1; | ||
| height: 100%; | ||
| width: 100%; | ||
| border-top: none; | ||
| background-color: #232627; | ||
| } | ||
| iframe { | ||
| width: 100%; | ||
| height: 100%; | ||
| border: none; | ||
| } | ||
| `; | ||
| iframe!: HTMLIFrameElement; | ||
| iframeInitialized = false; | ||
| protected firstUpdated(_changedProperties: PropertyValues) { | ||
| super.firstUpdated(_changedProperties); | ||
| const iframe = this.iframe = this.shadowRoot!.querySelector('iframe')!; | ||
| iframe.onload = this.setupIframe; | ||
| iframe.src = './monaco.html'; | ||
| } | ||
| protected updated(_changedProperties: PropertyValues) { | ||
| if (!this.iframeInitialized) return; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| setupIframe = async () => { | ||
| const iframe = this.iframe; | ||
| this.iframeInitialized = false; | ||
| await new Promise<void>(resolve => iframe.contentWindow!.addEventListener('message', (e) => e.data == 'editorReady' && resolve())); | ||
| const connection: any = (this.iframe.contentWindow as any).connection; | ||
| connection.init(this.project); | ||
| this.iframeInitialized = true; | ||
| } | ||
| render = () => html`<iframe></iframe>` | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,57 @@ | ||
| import { css, html, render, unsafeCSS } from "lit"; | ||
| import { customElement } from "lit/decorators.js"; | ||
| import monaco from '@cmajor-playground/bunaco'; | ||
| import monacoCSS from "@cmajor-playground/bunaco/dist/monaco.css" with { type: 'text' }; | ||
| import { unsafeHTML } from "lit/directives/unsafe-html"; | ||
| import { FileEditorBase } from "./FileEditorBase"; | ||
| @customElement("cmaj-monaco-editor") export class MonacoEditor extends FileEditorBase { | ||
|
|
||
| static getLanguage = (extension?: string) => (monaco.languages.getLanguages().find(lang => lang.extensions?.includes('.' + extension) || lang.extensions?.includes(extension!)))?.id | ||
| static styles = css` | ||
| ${FileEditorBase.styles} | ||
| ${unsafeCSS(monacoCSS)} | ||
| :host { | ||
| overflow: hidden; | ||
| background-color: #232627; | ||
| position: relative; | ||
| height: 100%; | ||
| width: 100%; | ||
| } | ||
| #editor { | ||
| position: absolute; | ||
| inset: 6px; | ||
| display: none; | ||
| } | ||
| #editor::after { | ||
| content: ''; | ||
| position: absolute; | ||
| inset: 0; | ||
| // import { css, html, PropertyValues, render, unsafeCSS } from "lit"; | ||
| // import { customElement, property } from "lit/decorators.js"; | ||
| // import monaco from '@cmajor-playground/bunaco'; | ||
| // import monacoCSS from "@cmajor-playground/bunaco/dist/monaco.css" with { type: 'text' }; | ||
| // import { unsafeHTML } from "lit/directives/unsafe-html"; | ||
| // import { FileEditorBase } from "./FileEditorBase"; | ||
| // @customElement("cmaj-monaco-editor") export class MonacoEditor extends FileEditorBase { | ||
| // static getLanguage = (extension?: string) => (monaco.languages.getLanguages().find(lang => lang.extensions?.includes('.' + extension) || lang.extensions?.includes(extension!)))?.id | ||
| // static styles = css` | ||
| // ${FileEditorBase.styles} | ||
| // ${unsafeCSS(monacoCSS)} | ||
| // :host { | ||
| // overflow: hidden; | ||
| // background-color: #232627; | ||
| // position: relative; | ||
| // height: 100%; | ||
| // width: 100%; | ||
| // } | ||
| // #editor { | ||
| // position: absolute; | ||
| // inset: 6px; | ||
| // display: none; | ||
| // } | ||
| // #editor::after { | ||
| // content: ''; | ||
| // position: absolute; | ||
| // inset: 0; | ||
|
|
||
| pointer-events: none; | ||
| } | ||
| iframe { | ||
| width: 100%; | ||
| height: 100%; | ||
| border: none; | ||
| } | ||
| `; | ||
| protected async onFirstContentLoad() { | ||
| this.setAttribute('tabindex', '0'); | ||
| const iframe = this.shadowRoot!.querySelector('iframe')!; | ||
| iframe.src = './monaco.html'; | ||
| await new Promise(resolve => iframe.onload = resolve); | ||
| await new Promise<void>(resolve => iframe.contentWindow!.addEventListener('message', (e) => { | ||
| if (e.data == 'editorReady') resolve(); | ||
| })); | ||
| // pointer-events: none; | ||
| // } | ||
| // iframe { | ||
| // width: 100%; | ||
| // height: 100%; | ||
| // border: none; | ||
| // } | ||
| // `; | ||
| // protected async onFirstContentLoad() { | ||
| // this.setAttribute('tabindex', '0'); | ||
| // const iframe = this.shadowRoot!.querySelector('iframe')!; | ||
| // iframe.src = './monaco.html'; | ||
| // await new Promise(resolve => iframe.onload = resolve); | ||
| // await new Promise<void>(resolve => iframe.contentWindow!.addEventListener('message', (e) => { | ||
| // if (e.data == 'editorReady') resolve(); | ||
| // })); | ||
|
|
||
| (iframe.contentWindow as any).init(this.file, (content: string) => this.setEditorContent(content)); | ||
| iframe.contentDocument!.addEventListener('keydown', this.keydownHandler) | ||
| } | ||
| onDispose = () => (this.shadowRoot!.querySelector('iframe')!).src = ''; | ||
| render = () => html`<iframe></iframe><div id="editor" class="editor"></div>` | ||
| onContentUpdate = () => ((this.shadowRoot!.querySelector('iframe')!).contentWindow as any).setContent(this.editorContent as string ?? ''); | ||
| } | ||
| // (iframe.contentWindow as any).init(this.file, (content: string) => this.setEditorContent(content)); | ||
| // iframe.contentDocument!.addEventListener('keydown', this.keydownHandler) | ||
| // } | ||
| // protected updated(_changedProperties: PropertyValues): void { | ||
| // console.log('updated', _changedProperties); | ||
| // } | ||
| // onDispose = () => (this.shadowRoot!.querySelector('iframe')!).src = ''; | ||
| // render = () => html`<iframe></iframe><div id="editor" class="editor"></div>` | ||
| // onContentUpdate = () => ((this.shadowRoot!.querySelector('iframe')!).contentWindow as any).setContent(this.editorContent as string ?? ''); | ||
| // } | ||
|
|
||
| render(html`<style>${unsafeHTML(monacoCSS)}</style>`, document.body); | ||
| // render(html`<style>${unsafeHTML(monacoCSS)}</style>`, document.body); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.