SystemSh0cker/monaco-editor
1
0
Fork 0
mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 13:55: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;
}
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(
setup: IMonacoSetup = prodMonacoSetup
): Promise<typeof monaco> {
if (!loadMonacoPromise) {
loadMonacoPromise = _loadMonaco(setup);
if (!loading) {
loading = true;
_loadMonaco(setup).then(resolve, reject);
}
return loadMonacoPromise;
}

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

@ -12,7 +12,11 @@ import {
reaction,
runInAction,
} from "mobx";
import { IMonacoSetup, loadMonaco } from "../../../monaco-loader";
import {
IMonacoSetup,
loadMonaco,
waitForLoadedMonaco,
} from "../../../monaco-loader";
import { IPlaygroundProject, IPreviewState } from "../../../shared";
import { monacoEditorVersion } from "../../monacoEditorVersion";
import { Debouncer } from "../../utils/Debouncer";
@ -62,6 +66,17 @@ export class PlaygroundModel {
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
get monacoSetup(): IMonacoSetup {
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;
loadMonaco().then((m) => {
waitForLoadedMonaco().then((m) => {
const options =
monaco.languages.typescript.javascriptDefaults.getCompilerOptions();
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"
style={{ flexWrap: "wrap-reverse" }}
>
<Col
md
className={
model.settings.previewFullScreen ? "d-none" : ""
}
>
<Vertical>
<div style={{ flex: 1 }}>
<LabeledEditor
label="JavaScript"
titleBarItems={
<div
className="hstack"
style={{ marginLeft: "auto" }}
>
<span
style={{ marginRight: 8 }}
{model.wasEverNonFullScreen && (
<Col
md
className={
model.settings.previewFullScreen
? "d-none"
: ""
}
>
<Vertical>
<div style={{ flex: 1 }}>
<LabeledEditor
label="JavaScript"
titleBarItems={
<div
className="hstack"
style={{
marginLeft: "auto",
}}
>
Example:
</span>
<Select<PlaygroundExample>
values={getPlaygroundExamples().map(
(e) => ({
groupTitle:
e.chapterTitle,
items: e.examples,
})
)}
value={ref(
model,
"selectedExample"
)}
getLabel={(i) => i.title}
/>
</div>
}
>
<Editor
language={"javascript"}
value={ref(model, "js")}
/>
</LabeledEditor>
</div>
<span
style={{
marginRight: 8,
}}
>
Example:
</span>
<Select<PlaygroundExample>
values={getPlaygroundExamples().map(
(e) => ({
groupTitle:
e.chapterTitle,
items: e.examples,
})
)}
value={ref(
model,
"selectedExample"
)}
getLabel={(i) =>
i.title
}
/>
</div>
}
>
<Editor
language={"javascript"}
value={ref(model, "js")}
/>
</LabeledEditor>
</div>
<div>
<LabeledEditor label="HTML">
<Editor
height={{
kind: "dynamic",
maxHeight: 200,
}}
language={"html"}
value={ref(model, "html")}
/>
</LabeledEditor>
</div>
<div>
<LabeledEditor label="HTML">
<Editor
height={{
kind: "dynamic",
maxHeight: 200,
}}
language={"html"}
value={ref(model, "html")}
/>
</LabeledEditor>
</div>
<div>
<LabeledEditor label="CSS">
<Editor
height={{
kind: "dynamic",
maxHeight: 200,
}}
language={"css"}
value={ref(model, "css")}
/>
</LabeledEditor>
</div>
</Vertical>
</Col>
<div>
<LabeledEditor label="CSS">
<Editor
height={{
kind: "dynamic",
maxHeight: 200,
}}
language={"css"}
value={ref(model, "css")}
/>
</LabeledEditor>
</div>
</Vertical>
</Col>
)}
<Col md>
<LabeledEditor
label="Preview"