mirror of
https://github.com/zebrajr/react.git
synced 2025-12-07 12:20:38 +01:00
0eebd37041
Fixed two small issues with the config panel in the compiler playground: 1. Object descriptions were being confined in the config box and most of it would not be visible upon hover 2. Changed it so that "Applied Configs" would only display a valid set of configs, rather than switching between "Invalid Configs" and the set of options. This would be less visually jarring for users as the Output panel already displays errors. Additionally, if users want to see the list of config options but have a currently broken config, they would previously not know how to fix it. Object hover before: <img width="702" height="481" alt="Screenshot 2025-09-26 at 10 41 03 AM" src="https://github.com/user-attachments/assets/b2ddec2f-16ba-41a1-be1f-96211f46764c" /> Hover after: <img width="702" height="481" alt="Screenshot 2025-09-26 at 10 40 37 AM" src="https://github.com/user-attachments/assets/dc713a22-4710-46a8-a5d7-485060cc9074" /> Applied Configs always displays the last valid set of configs: https://github.com/user-attachments/assets/2fb9232f-7388-4488-9b7a-bb48bf09e4ca
46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
/**
|
|
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
import type {EditorProps} from '@monaco-editor/react';
|
|
|
|
export const monacoOptions: Partial<EditorProps['options']> = {
|
|
fontSize: 14,
|
|
padding: {top: 8},
|
|
scrollbar: {
|
|
verticalScrollbarSize: 10,
|
|
alwaysConsumeMouseWheel: false,
|
|
},
|
|
minimap: {
|
|
enabled: false,
|
|
},
|
|
formatOnPaste: true,
|
|
formatOnType: true,
|
|
fontFamily: '"Source Code Pro", monospace',
|
|
glyphMargin: true,
|
|
|
|
autoClosingBrackets: 'languageDefined',
|
|
autoClosingDelete: 'always',
|
|
autoClosingOvertype: 'always',
|
|
|
|
automaticLayout: true,
|
|
wordWrap: 'on',
|
|
wrappingIndent: 'same',
|
|
|
|
tabSize: 2,
|
|
};
|
|
|
|
export const monacoConfigOptions: Partial<EditorProps['options']> = {
|
|
...monacoOptions,
|
|
lineNumbers: 'off',
|
|
renderLineHighlight: 'none',
|
|
overviewRulerBorder: false,
|
|
overviewRulerLanes: 0,
|
|
fontSize: 12,
|
|
scrollBeyondLastLine: false,
|
|
glyphMargin: false,
|
|
};
|