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

Don't load monaco editor in fullscreen

Browse source
This commit is contained in:
Henning Dieterichs 2023-04-05 12:45:50 +02:00
parent 74fb36aa50
commit 842214b80e
No known key found for this signature in database
GPG key ID: 771381EFFDB9EC06
3 changed files with 111 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

18
website/src/monaco-loader.ts
View file

@ -21,12 +21,24 @@ export interface IMonacoSetup {
monacoTypesUrl: string | undefined; monacoTypesUrl: string | undefined;
} }
let loadMonacoPromise: Promise<typeof monaco> | undefined; let loading = false;
let resolve: (value: typeof monaco) => void;
let reject: (error: unknown) => void;
let loadMonacoPromise = new Promise<typeof monaco>((res, rej) => {
resolve = res;
reject = rej;
});
export async function waitForLoadedMonaco(): Promise<typeof monaco> {
return loadMonacoPromise;
}
export async function loadMonaco( export async function loadMonaco(
setup: IMonacoSetup = prodMonacoSetup setup: IMonacoSetup = prodMonacoSetup
): Promise<typeof monaco> { ): Promise<typeof monaco> {
if (!loadMonacoPromise) { if (!loading) {
loadMonacoPromise = _loadMonaco(setup); loading = true;
_loadMonaco(setup).then(resolve, reject);
} }
return loadMonacoPromise; return loadMonacoPromise;
} }

21
website/src/website/pages/playground/PlaygroundModel.ts
View file

@ -12,7 +12,11 @@ import {
reaction, reaction,
runInAction, runInAction,
} from "mobx"; } from "mobx";
import { IMonacoSetup, loadMonaco } from "../../../monaco-loader"; import {
IMonacoSetup,
loadMonaco,
waitForLoadedMonaco,
} from "../../../monaco-loader";
import { IPlaygroundProject, IPreviewState } from "../../../shared"; import { IPlaygroundProject, IPreviewState } from "../../../shared";
import { monacoEditorVersion } from "../../monacoEditorVersion"; import { monacoEditorVersion } from "../../monacoEditorVersion";
import { Debouncer } from "../../utils/Debouncer"; import { Debouncer } from "../../utils/Debouncer";
@ -62,6 +66,17 @@ export class PlaygroundModel {
private readonly _previewHandlers = new Set<IPreviewHandler>(); private readonly _previewHandlers = new Set<IPreviewHandler>();
private _wasEverNonFullScreen = false;
public get wasEverNonFullScreen() {
if (this._wasEverNonFullScreen) {
return true;
}
if (!this.settings.previewFullScreen) {
this._wasEverNonFullScreen = true;
}
return this._wasEverNonFullScreen;
}
@computed.struct @computed.struct
get monacoSetup(): IMonacoSetup { get monacoSetup(): IMonacoSetup {
const sourceOverride = this.serializer.sourceOverride; const sourceOverride = this.serializer.sourceOverride;
@ -142,10 +157,10 @@ export class PlaygroundModel {
), ),
}); });
const observablePromise = new ObservablePromise(loadMonaco()); const observablePromise = new ObservablePromise(waitForLoadedMonaco());
let disposable: Disposable | undefined = undefined; let disposable: Disposable | undefined = undefined;
loadMonaco().then((m) => { waitForLoadedMonaco().then((m) => {
const options = const options =
monaco.languages.typescript.javascriptDefaults.getCompilerOptions(); monaco.languages.typescript.javascriptDefaults.getCompilerOptions();
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions( monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions(

146
website/src/website/pages/playground/PlaygroundPageContent.tsx
View file

@ -37,77 +37,87 @@ export class PlaygroundPageContent extends React.Component<
className="h-100 g-2" className="h-100 g-2"
style={{ flexWrap: "wrap-reverse" }} style={{ flexWrap: "wrap-reverse" }}
> >
<Col {model.wasEverNonFullScreen && (
md <Col
className={ md
model.settings.previewFullScreen ? "d-none" : "" className={
} model.settings.previewFullScreen
> ? "d-none"
<Vertical> : ""
<div style={{ flex: 1 }}> }
<LabeledEditor >
label="JavaScript" <Vertical>
titleBarItems={ <div style={{ flex: 1 }}>
<div <LabeledEditor
className="hstack" label="JavaScript"
style={{ marginLeft: "auto" }} titleBarItems={
> <div
<span className="hstack"
style={{ marginRight: 8 }} style={{
marginLeft: "auto",
}}
> >
Example: <span
</span> style={{
<Select<PlaygroundExample> marginRight: 8,
values={getPlaygroundExamples().map( }}
(e) => ({ >
groupTitle: Example:
e.chapterTitle, </span>
items: e.examples, <Select<PlaygroundExample>
}) values={getPlaygroundExamples().map(
)} (e) => ({
value={ref( groupTitle:
model, e.chapterTitle,
"selectedExample" items: e.examples,
)} })
getLabel={(i) => i.title} )}
/> value={ref(
</div> model,
} "selectedExample"
> )}
<Editor getLabel={(i) =>
language={"javascript"} i.title
value={ref(model, "js")} }
/> />
</LabeledEditor> </div>
</div> }
>
<Editor
language={"javascript"}
value={ref(model, "js")}
/>
</LabeledEditor>
</div>
<div> <div>
<LabeledEditor label="HTML"> <LabeledEditor label="HTML">
<Editor <Editor
height={{ height={{
kind: "dynamic", kind: "dynamic",
maxHeight: 200, maxHeight: 200,
}} }}
language={"html"} language={"html"}
value={ref(model, "html")} value={ref(model, "html")}
/> />
</LabeledEditor> </LabeledEditor>
</div> </div>
<div> <div>
<LabeledEditor label="CSS"> <LabeledEditor label="CSS">
<Editor <Editor
height={{ height={{
kind: "dynamic", kind: "dynamic",
maxHeight: 200, maxHeight: 200,
}} }}
language={"css"} language={"css"}
value={ref(model, "css")} value={ref(model, "css")}
/> />
</LabeledEditor> </LabeledEditor>
</div> </div>
</Vertical> </Vertical>
</Col> </Col>
)}
<Col md> <Col md>
<LabeledEditor <LabeledEditor
label="Preview" label="Preview"