Henning Dieterichs 2025-05-05 17:19:10 +02:00
parent 495d075be0
commit 1dbc86d8d9

View file

@ -19,7 +19,6 @@ import { Preview } from "./Preview";
import { SettingsDialog } from "./SettingsDialog"; import { SettingsDialog } from "./SettingsDialog";
import { getNpmVersionsSync } from "./getNpmVersionsSync"; import { getNpmVersionsSync } from "./getNpmVersionsSync";
import { PlaygroundExample, getPlaygroundExamples } from "./playgroundExamples"; import { PlaygroundExample, getPlaygroundExamples } from "./playgroundExamples";
import { getDefaultSettings, toLoaderConfig } from "./SettingsModel";
@hotComponent(module) @hotComponent(module)
@observer @observer
@ -85,6 +84,7 @@ export class PlaygroundPageContent extends React.Component<
} }
> >
<Editor <Editor
label="JavaScript Input"
language={"javascript"} language={"javascript"}
value={ref(model, "js")} value={ref(model, "js")}
/> />
@ -94,6 +94,7 @@ export class PlaygroundPageContent extends React.Component<
<div> <div>
<LabeledEditor label="HTML"> <LabeledEditor label="HTML">
<Editor <Editor
label="HTML Input"
height={{ height={{
kind: "dynamic", kind: "dynamic",
maxHeight: 200, maxHeight: 200,
@ -107,6 +108,7 @@ export class PlaygroundPageContent extends React.Component<
<div> <div>
<LabeledEditor label="CSS"> <LabeledEditor label="CSS">
<Editor <Editor
label="CSS Input"
height={{ height={{
kind: "dynamic", kind: "dynamic",
maxHeight: 200, maxHeight: 200,
@ -480,6 +482,7 @@ class Editor extends React.Component<{
language: string; language: string;
value: IReference<string>; value: IReference<string>;
height?: MonacoEditorHeight; height?: MonacoEditorHeight;
label: string;
}> { }> {
private editor: monaco.editor.IStandaloneCodeEditor | undefined = undefined; private editor: monaco.editor.IStandaloneCodeEditor | undefined = undefined;
private disposables: monaco.IDisposable[] = []; private disposables: monaco.IDisposable[] = [];
@ -504,6 +507,9 @@ class Editor extends React.Component<{
initializeEditor(editor: monaco.editor.IStandaloneCodeEditor) { initializeEditor(editor: monaco.editor.IStandaloneCodeEditor) {
this.editor = editor; this.editor = editor;
editor.updateOptions({
ariaLabel: this.props.label,
});
this.disposables.push(this.editor); this.disposables.push(this.editor);
this.disposables.push( this.disposables.push(
this.editor.onDidChangeModelContent((e) => { this.editor.onDidChangeModelContent((e) => {