From fec5158ba946d9d080b82348ee9f8812fb2d581b Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Mon, 17 Jun 2024 15:56:05 -0700 Subject: [PATCH 1/7] Spruce up the editor --- .../kbn-monaco/src/esql/lib/esql_theme.ts | 65 ++++++++++++++----- .../kbn-text-based-editor/src/overwrite.scss | 11 ++-- .../src/text_based_languages_editor.styles.ts | 4 +- .../src/text_based_languages_editor.tsx | 54 ++++++++------- .../query_string_input/query_bar_top_row.tsx | 4 +- 5 files changed, 85 insertions(+), 53 deletions(-) diff --git a/packages/kbn-monaco/src/esql/lib/esql_theme.ts b/packages/kbn-monaco/src/esql/lib/esql_theme.ts index f9ed8c6849acc..b7477c1e44ad4 100644 --- a/packages/kbn-monaco/src/esql/lib/esql_theme.ts +++ b/packages/kbn-monaco/src/esql/lib/esql_theme.ts @@ -12,15 +12,6 @@ import { ESQL_TOKEN_POSTFIX } from './constants'; import { monaco } from '../../monaco_imports'; const buildRuleGroup = themeRuleGroupBuilderFactory(ESQL_TOKEN_POSTFIX); -const COMMANDS_COLORS = { - dark: '#a68ac5', - light: '#765b96', -}; - -const FUNCTIONS_COLORS = { - dark: '#d97797', - light: '#a34a68', -}; export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({ base: darkMode ? 'vs-dark' : 'vs', @@ -55,10 +46,16 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({ euiThemeVars.euiTextColor ), + // source commands + ...buildRuleGroup( + ['from', 'row', 'show'], + euiThemeVars.euiColorPrimaryText, + true // isBold + ), + // commands ...buildRuleGroup( [ - 'from', 'metrics', 'metadata', 'mv_expand', @@ -80,8 +77,6 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({ 'in', 'as', 'expr_ws', - 'row', - 'show', 'meta', 'limit', 'nulls_ordering_direction', @@ -90,17 +85,37 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({ 'enrich', 'on', 'with', + 'asc', + 'desc', ], - darkMode ? COMMANDS_COLORS.dark : COMMANDS_COLORS.light + euiThemeVars.euiColorAccentText, + true // isBold ), // functions - ...buildRuleGroup(['functions'], darkMode ? FUNCTIONS_COLORS.dark : FUNCTIONS_COLORS.light), + ...buildRuleGroup(['functions'], euiThemeVars.euiColorPrimaryText), // operators ...buildRuleGroup( - ['or', 'and', 'rp', 'lp', 'plus', 'minus', 'asterisk', 'slash'], - euiThemeVars.euiTextSubduedColor + [ + 'or', + 'and', + 'rp', // ')' + 'lp', // '(' + 'eq', // '==' + 'cieq', // '=~' + 'neq', // '!=' + 'lt', // '<' + 'lte', // '<=' + 'gt', // '>' + 'gte', // '>=' + 'plus', // '+' + 'minus', // '-' + 'asterisk', // '*' + 'slash', // '/' + 'percent', // '%' + ], + euiThemeVars.euiColorPrimaryText ), // comments @@ -113,8 +128,22 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({ 'src_line_comment', 'src_multiline_comment', ], - darkMode ? euiThemeVars.euiColorDarkestShade : euiThemeVars.euiColorMediumShade + euiThemeVars.euiColorDisabledText + ), + + // values + ...buildRuleGroup( + ['quoted_string', 'integer_literal', 'decimal_literal'], + euiThemeVars.euiColorSuccessText ), ], - colors: {}, + colors: { + 'editor.foreground': euiThemeVars.euiTextColor, + 'editor.background': euiThemeVars.euiColorEmptyShade, + 'editor.lineHighlightBackground': euiThemeVars.euiColorLightestShade, + 'editor.lineHighlightBorder': euiThemeVars.euiColorLightestShade, + 'editor.selectionHighlightBackground': euiThemeVars.euiColorLightestShade, + 'editor.selectionHighlightBorder': euiThemeVars.euiColorLightShade, + 'editorSuggestWidget.selectedBackground': euiThemeVars.euiColorAccent, + }, }); diff --git a/packages/kbn-text-based-editor/src/overwrite.scss b/packages/kbn-text-based-editor/src/overwrite.scss index e24fd604d7268..d2ba7d247934a 100644 --- a/packages/kbn-text-based-editor/src/overwrite.scss +++ b/packages/kbn-text-based-editor/src/overwrite.scss @@ -1,6 +1,6 @@ .TextBasedLangEditor .monaco-editor { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; + border-top-left-radius: $euiBorderRadius; + border-bottom-left-radius: $euiBorderRadius; } .TextBasedLangEditor .monaco-editor .monaco-hover { @@ -12,8 +12,8 @@ } .TextBasedLangEditor .monaco-editor .margin { - border-top-left-radius: 6px; - border-bottom-left-radius: 6px; + border-top-left-radius: $euiBorderRadius; + border-bottom-left-radius: $euiBorderRadius; } .TextBasedLangEditor--compact .monaco-editor { @@ -24,7 +24,6 @@ .TextBasedLangEditor--compact .monaco-editor .margin { border-top-left-radius: 0; border-bottom-left-radius: 0; - background-color: $euiColorLightestShade; color: $euiColorDisabledText; } @@ -37,7 +36,7 @@ } .TextBasedLangEditor--compact .monaco-editor .monaco-scrollable-element { - margin-left: 4px; + margin-left: $euiSizeS; } .TextBasedLangEditor_errorMessage { diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.styles.ts b/packages/kbn-text-based-editor/src/text_based_languages_editor.styles.ts index 39a02a35516ab..2dd9f6af880bd 100644 --- a/packages/kbn-text-based-editor/src/text_based_languages_editor.styles.ts +++ b/packages/kbn-text-based-editor/src/text_based_languages_editor.styles.ts @@ -119,8 +119,8 @@ export const textBasedLanguageEditorStyles = ( borderTopLeftRadius: editorIsInline ? 0 : euiTheme.border.radius.medium, borderTopRightRadius: editorIsInline ? 0 : euiTheme.border.radius.medium, backgroundColor: euiTheme.colors.lightestShade, - paddingLeft: euiTheme.size.xs, - paddingRight: euiTheme.size.xs, + paddingLeft: euiTheme.size.s, + paddingRight: euiTheme.size.s, paddingTop: showHeader ? euiTheme.size.s : euiTheme.size.xs, paddingBottom: showHeader ? euiTheme.size.s : euiTheme.size.xs, width: '100%', diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx index dac1f609430b6..8141f5e51b2b8 100644 --- a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx +++ b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx @@ -666,40 +666,44 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({ }, [language, documentationSections]); const codeEditorOptions: CodeEditorProps['options'] = { - automaticLayout: true, accessibilitySupport: 'off', + autoIndent: 'none', + automaticLayout: true, folding: false, fontSize: 14, - padding: { - top: 8, - bottom: 8, - }, - scrollBeyondLastLine: false, - quickSuggestions: true, - minimap: { enabled: false }, - wordWrap: 'on', - lineNumbers: showLineNumbers ? 'on' : 'off', - theme: language === 'esql' ? ESQL_THEME_ID : isDark ? 'vs-dark' : 'vs', - lineDecorationsWidth: 12, - autoIndent: 'none', - wrappingIndent: 'none', - lineNumbersMinChars: 3, - overviewRulerLanes: 0, + fontFamily: 'Inter', hideCursorInOverviewRuler: true, - scrollbar: { - horizontal: 'hidden', - vertical: 'auto', - }, - overviewRulerBorder: false, // this becomes confusing with multiple markers, so quick fixes // will be proposed only within the tooltip lightbulb: { enabled: false, }, + lineDecorationsWidth: 12, + lineHeight: !isCodeEditorExpanded ? 21 : 24, + lineNumbers: showLineNumbers ? 'on' : 'off', + lineNumbersMinChars: 3, + minimap: { enabled: false }, + overviewRulerLanes: 0, + overviewRulerBorder: false, + padding: { + top: 8, + bottom: 8, + }, + quickSuggestions: true, readOnly: isLoading || isDisabled || Boolean(!isCompactFocused && codeOneLiner && codeOneLiner.includes('...')), + renderLineHighlight: !isCodeEditorExpanded ? 'none' : 'line', + renderLineHighlightOnlyWhenFocus: true, + scrollbar: { + horizontal: 'hidden', + vertical: 'auto', + }, + scrollBeyondLastLine: false, + theme: language === 'esql' ? ESQL_THEME_ID : isDark ? 'vs-dark' : 'vs', + wordWrap: 'on', + wrappingIndent: 'none', }; if (isCompactFocused) { @@ -741,7 +745,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({ {!Boolean(hideMinimizeButton) && ( - + { expandCodeEditor(false); updateLinesFromModel = false; diff --git a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx b/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx index 892144d07fb06..941040dfd30f8 100644 --- a/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx +++ b/src/plugins/unified_search/public/query_string_input/query_bar_top_row.tsx @@ -566,7 +566,7 @@ export const QueryBarTopRow = React.memo( : strings.getRefreshQueryLabel(); const buttonLabelRun = textBasedRunShortcut; - const iconDirty = Boolean(isQueryLangSelected) ? 'play' : 'kqlFunction'; + const iconDirty = Boolean(isQueryLangSelected) ? 'playFilled' : 'kqlFunction'; const tooltipDirty = Boolean(isQueryLangSelected) ? buttonLabelRun : buttonLabelUpdate; const isDirtyButtonLabel = Boolean(isQueryLangSelected) @@ -588,7 +588,7 @@ export const QueryBarTopRow = React.memo( onClick={onClickSubmitButton} size={shouldShowDatePickerAsBadge() ? 's' : 'm'} color={props.isDirty ? 'success' : 'primary'} - fill={props.isDirty} + fill={false} needsUpdate={props.isDirty} data-test-subj="querySubmitButton" toolTipProps={{ From 78aa0a02a0a20291f54806c48ae148a1bb4a73ba Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Tue, 18 Jun 2024 09:34:07 -0700 Subject: [PATCH 2/7] Suggest styles, a few UI bugs --- .../kbn-monaco/src/esql/lib/esql_theme.ts | 9 ++-- .../src/editor_footer.tsx | 1 - .../kbn-text-based-editor/src/overwrite.scss | 53 +++++++++++-------- .../src/text_based_languages_editor.tsx | 2 + 4 files changed, 39 insertions(+), 26 deletions(-) diff --git a/packages/kbn-monaco/src/esql/lib/esql_theme.ts b/packages/kbn-monaco/src/esql/lib/esql_theme.ts index b7477c1e44ad4..02ce6dd05bee3 100644 --- a/packages/kbn-monaco/src/esql/lib/esql_theme.ts +++ b/packages/kbn-monaco/src/esql/lib/esql_theme.ts @@ -48,7 +48,7 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({ // source commands ...buildRuleGroup( - ['from', 'row', 'show'], + ['from', 'row', 'show', 'meta'], euiThemeVars.euiColorPrimaryText, true // isBold ), @@ -77,7 +77,6 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({ 'in', 'as', 'expr_ws', - 'meta', 'limit', 'nulls_ordering_direction', 'nulls_ordering', @@ -144,6 +143,10 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({ 'editor.lineHighlightBorder': euiThemeVars.euiColorLightestShade, 'editor.selectionHighlightBackground': euiThemeVars.euiColorLightestShade, 'editor.selectionHighlightBorder': euiThemeVars.euiColorLightShade, - 'editorSuggestWidget.selectedBackground': euiThemeVars.euiColorAccent, + 'editorSuggestWidget.background': euiThemeVars.euiColorEmptyShade, + 'editorSuggestWidget.border': euiThemeVars.euiColorEmptyShade, + 'editorSuggestWidget.foreground': euiThemeVars.euiTextSubduedColor, + 'editorSuggestWidget.selectedBackground': euiThemeVars.euiColorPrimary, + 'editorSuggestWidget.selectedForeground': euiThemeVars.euiColorEmptyShade, }, }); diff --git a/packages/kbn-text-based-editor/src/editor_footer.tsx b/packages/kbn-text-based-editor/src/editor_footer.tsx index 697563ebc404c..b617a5f3aedcc 100644 --- a/packages/kbn-text-based-editor/src/editor_footer.tsx +++ b/packages/kbn-text-based-editor/src/editor_footer.tsx @@ -173,7 +173,6 @@ export const EditorFooter = memo(function EditorFooter({ direction="column" css={css` width: 100%; - box-shadow: ${shadowStyle}; `} > diff --git a/packages/kbn-text-based-editor/src/overwrite.scss b/packages/kbn-text-based-editor/src/overwrite.scss index d2ba7d247934a..4a7bdb1f43db4 100644 --- a/packages/kbn-text-based-editor/src/overwrite.scss +++ b/packages/kbn-text-based-editor/src/overwrite.scss @@ -1,4 +1,8 @@ -.TextBasedLangEditor .monaco-editor { +/* Editor styles for any layout mode */ +/* NOTE: Much of this is overriding Monaco styles so the specificity is intentional */ + +// Radius for both the main container and the margin (container for line numbers) +.TextBasedLangEditor .monaco-editor, .TextBasedLangEditor .monaco-editor .margin { border-top-left-radius: $euiBorderRadius; border-bottom-left-radius: $euiBorderRadius; } @@ -7,38 +11,43 @@ display: none !important; } -.TextBasedLangEditor--expanded .monaco-editor .monaco-hover { - display: block !important; -} - -.TextBasedLangEditor .monaco-editor .margin { - border-top-left-radius: $euiBorderRadius; - border-bottom-left-radius: $euiBorderRadius; +.TextBasedLangEditor .monaco-editor .margin-view-overlays .line-numbers { + color: $euiColorDisabledText; } -.TextBasedLangEditor--compact .monaco-editor { - border-top-left-radius: 0; - border-bottom-left-radius: 0; +// Currently focused line(s) +.TextBasedLangEditor .monaco-editor .current-line ~ .line-numbers { + color: $euiTextSubduedColor; } -.TextBasedLangEditor--compact .monaco-editor .margin { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - color: $euiColorDisabledText; +// Suggest (autocomplete) menu +.TextBasedLangEditor .monaco-editor .suggest-widget { + @include euiBottomShadow; + border-radius: $euiBorderRadius; } -.TextBasedLangEditor .monaco-editor .margin-view-overlays .line-numbers { - color: $euiColorDisabledText; +.TextBasedLangEditor_errorMessage { + @include euiTextBreakWord; } -.TextBasedLangEditor .monaco-editor .current-line ~ .line-numbers { - color: $euiTextSubduedColor; -} +/* For compact mode */ +// All scrollable containers (e.g. main container and suggest menu) .TextBasedLangEditor--compact .monaco-editor .monaco-scrollable-element { margin-left: $euiSizeS; } -.TextBasedLangEditor_errorMessage { - @include euiTextBreakWord; +// Suggest menu in compact mode +.TextBasedLangEditor--compact .monaco-editor .monaco-list .monaco-scrollable-element { + margin-left: 0; + + .monaco-list-row.focused { + border-radius: $euiBorderRadius; + } +} + +/* For expanded mode */ + +.TextBasedLangEditor--expanded .monaco-editor .monaco-hover { + display: block !important; } diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx index 8141f5e51b2b8..356583fbf9b14 100644 --- a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx +++ b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx @@ -1017,6 +1017,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({ borderRadius: 0, backgroundColor: isDark ? euiTheme.colors.lightestShade : '#e9edf3', border: '1px solid rgb(17 43 134 / 10%) !important', + transform: 'none !important', }, }} /> @@ -1046,6 +1047,7 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({ backgroundColor: isDark ? euiTheme.colors.lightestShade : '#e9edf3', border: '1px solid rgb(17 43 134 / 10%) !important', borderLeft: 'transparent !important', + transform: 'none !important', }} /> From 25dac896f563925e6e742efc132d20c0240e1fc0 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Tue, 18 Jun 2024 12:52:05 -0700 Subject: [PATCH 3/7] Fix error, tweak border styles --- packages/kbn-text-based-editor/src/editor_footer.tsx | 5 ----- packages/kbn-text-based-editor/src/overwrite.scss | 7 ++++++- packages/kbn-text-based-editor/src/query_history.tsx | 2 ++ .../src/text_based_languages_editor.styles.ts | 2 +- 4 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/kbn-text-based-editor/src/editor_footer.tsx b/packages/kbn-text-based-editor/src/editor_footer.tsx index b617a5f3aedcc..27a6ffbeabbdb 100644 --- a/packages/kbn-text-based-editor/src/editor_footer.tsx +++ b/packages/kbn-text-based-editor/src/editor_footer.tsx @@ -145,7 +145,6 @@ export const EditorFooter = memo(function EditorFooter({ queryHasChanged, measuredContainerWidth, }: EditorFooterProps) { - const { euiTheme } = useEuiTheme(); const [isErrorPopoverOpen, setIsErrorPopoverOpen] = useState(false); const [isWarningPopoverOpen, setIsWarningPopoverOpen] = useState(false); const onUpdateAndSubmit = useCallback( @@ -162,10 +161,6 @@ export const EditorFooter = memo(function EditorFooter({ [runQuery, updateQuery] ); - const shadowStyle = isInCompactMode - ? `inset 0 0px 0, inset 0 -1px 0 ${euiTheme.border.color}` - : 'none'; - return ( Date: Tue, 18 Jun 2024 14:48:43 -0700 Subject: [PATCH 4/7] Styles for suggest details menu --- packages/kbn-monaco/src/esql/lib/esql_theme.ts | 2 +- packages/kbn-text-based-editor/src/overwrite.scss | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/kbn-monaco/src/esql/lib/esql_theme.ts b/packages/kbn-monaco/src/esql/lib/esql_theme.ts index 02ce6dd05bee3..c88a8fc02b26d 100644 --- a/packages/kbn-monaco/src/esql/lib/esql_theme.ts +++ b/packages/kbn-monaco/src/esql/lib/esql_theme.ts @@ -145,7 +145,7 @@ export const buildESQlTheme = (): monaco.editor.IStandaloneThemeData => ({ 'editor.selectionHighlightBorder': euiThemeVars.euiColorLightShade, 'editorSuggestWidget.background': euiThemeVars.euiColorEmptyShade, 'editorSuggestWidget.border': euiThemeVars.euiColorEmptyShade, - 'editorSuggestWidget.foreground': euiThemeVars.euiTextSubduedColor, + 'editorSuggestWidget.foreground': euiThemeVars.euiTextColor, 'editorSuggestWidget.selectedBackground': euiThemeVars.euiColorPrimary, 'editorSuggestWidget.selectedForeground': euiThemeVars.euiColorEmptyShade, }, diff --git a/packages/kbn-text-based-editor/src/overwrite.scss b/packages/kbn-text-based-editor/src/overwrite.scss index 9cbac431a3d30..1c8f2892d28bd 100644 --- a/packages/kbn-text-based-editor/src/overwrite.scss +++ b/packages/kbn-text-based-editor/src/overwrite.scss @@ -21,11 +21,15 @@ } // Suggest (autocomplete) menu -.TextBasedLangEditor .monaco-editor .suggest-widget { +.TextBasedLangEditor .monaco-editor .suggest-widget, .TextBasedLangEditor .monaco-editor .suggest-details-container { @include euiBottomShadow; border-radius: $euiBorderRadius; } +.TextBasedLangEditor .monaco-editor .suggest-details-container { + background-color: $euiColorEmptyShade; +} + .TextBasedLangEditor_errorMessage { @include euiTextBreakWord; } From 5250c93b405b60ebe2fad5dd78d427923cb731ef Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Tue, 18 Jun 2024 14:59:54 -0700 Subject: [PATCH 5/7] Make suggest details typography less heinous --- packages/kbn-text-based-editor/src/overwrite.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/kbn-text-based-editor/src/overwrite.scss b/packages/kbn-text-based-editor/src/overwrite.scss index 1c8f2892d28bd..7c66fe96e36cb 100644 --- a/packages/kbn-text-based-editor/src/overwrite.scss +++ b/packages/kbn-text-based-editor/src/overwrite.scss @@ -28,6 +28,7 @@ .TextBasedLangEditor .monaco-editor .suggest-details-container { background-color: $euiColorEmptyShade; + line-height: 1.5rem; } .TextBasedLangEditor_errorMessage { From 87036f1dbce3fc4d178f651542ee73dd5fbd62b2 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Tue, 18 Jun 2024 15:34:09 -0700 Subject: [PATCH 6/7] Revert to monospace font for readability --- .../kbn-text-based-editor/src/text_based_languages_editor.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx index 67c2302441b1e..1065586de0d49 100644 --- a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx +++ b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx @@ -673,7 +673,6 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({ fixedOverflowWidgets: true, folding: false, fontSize: 14, - fontFamily: 'Inter', hideCursorInOverviewRuler: true, // this becomes confusing with multiple markers, so quick fixes // will be proposed only within the tooltip From b52ea6d7daa9ff534904b640c5ee2962dd7ed5b9 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Tue, 18 Jun 2024 16:07:33 -0700 Subject: [PATCH 7/7] The end. Less line height needed with monospace font. --- .../kbn-text-based-editor/src/text_based_languages_editor.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx index 1065586de0d49..b33d8125bfd25 100644 --- a/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx +++ b/packages/kbn-text-based-editor/src/text_based_languages_editor.tsx @@ -680,7 +680,6 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({ enabled: false, }, lineDecorationsWidth: 12, - lineHeight: !isCodeEditorExpanded ? 21 : 24, lineNumbers: showLineNumbers ? 'on' : 'off', lineNumbersMinChars: 3, minimap: { enabled: false },