From e66ed4709bff3cfbcace1f4255347bf26d0c092a Mon Sep 17 00:00:00 2001 From: Roman Date: Wed, 6 Oct 2021 16:33:07 +0300 Subject: [PATCH] fix: apply global editor settings from app preferences Signed-off-by: Roman --- src/common/user-store/preferences-helpers.ts | 19 ++++----- .../components/+preferences/editor.tsx | 42 ++++++++++++------- src/renderer/components/input/input.scss | 4 ++ .../monaco-editor/monaco-editor.tsx | 37 ++++++++-------- 4 files changed, 57 insertions(+), 45 deletions(-) diff --git a/src/common/user-store/preferences-helpers.ts b/src/common/user-store/preferences-helpers.ts index 3c36911949..559013e5cf 100644 --- a/src/common/user-store/preferences-helpers.ts +++ b/src/common/user-store/preferences-helpers.ts @@ -24,27 +24,26 @@ import path from "path"; import os from "os"; import { ThemeStore } from "../../renderer/theme.store"; import { ObservableToggleSet } from "../utils"; -import type * as monaco from "monaco-editor"; +import type { editor } from "monaco-editor"; import merge from "lodash/merge"; export interface KubeconfigSyncEntry extends KubeconfigSyncValue { filePath: string; } -export interface KubeconfigSyncValue { } - -export interface EditorConfiguration { - miniMap: monaco.editor.IEditorMinimapOptions; - lineNumbers: monaco.editor.LineNumbersType; - tabSize: number; +export interface KubeconfigSyncValue { } +export type EditorConfiguration = Pick; + export const defaultEditorConfig: EditorConfiguration = { + tabSize: 2, lineNumbers: "on", - miniMap: { - enabled: true + minimap: { + enabled: true, + side: "right", }, - tabSize: 2 }; interface PreferenceDescription { diff --git a/src/renderer/components/+preferences/editor.tsx b/src/renderer/components/+preferences/editor.tsx index e10ab79ea7..0960a5592d 100644 --- a/src/renderer/components/+preferences/editor.tsx +++ b/src/renderer/components/+preferences/editor.tsx @@ -20,12 +20,13 @@ */ import { observer } from "mobx-react"; import React from "react"; +import type { editor } from "monaco-editor"; import { UserStore } from "../../../common/user-store"; -import { FormSwitch, Switcher } from "../switch"; -import { SubTitle } from "../layout/sub-title"; -import { Input } from "../input"; -import { isNumber } from "../input/input_validators"; +import { Switcher } from "../switch"; import { Select } from "../select"; +import { SubTitle } from "../layout/sub-title"; +import { SubHeader } from "../layout/sub-header"; +import { Input, InputValidators } from "../input"; enum EditorLineNumbersStyles { on = "On", @@ -40,18 +41,29 @@ export const Editor = observer(() => { return (

Editor configuration

+ +
- +
+ Show minimap editorConfiguration.miniMap.enabled = checked} - name="minimap" + checked={editorConfiguration.minimap.enabled} + onChange={(evt, checked) => editorConfiguration.minimap.enabled = checked} /> - } - label="Show minimap" - /> +
+
+ Position + { themeName="lens" />
+
editorConfiguration.tabSize = Number(value)} /> diff --git a/src/renderer/components/input/input.scss b/src/renderer/components/input/input.scss index a14f6ee2e1..7455d6f8b9 100644 --- a/src/renderer/components/input/input.scss +++ b/src/renderer/components/input/input.scss @@ -63,6 +63,10 @@ } } + input[type=number]::-webkit-inner-spin-button { + -webkit-appearance: none; // hide browser controls (top/bottom arrows) + } + input, textarea { background: none; color: inherit; diff --git a/src/renderer/components/monaco-editor/monaco-editor.tsx b/src/renderer/components/monaco-editor/monaco-editor.tsx index d2adbc68ef..6c28026c16 100644 --- a/src/renderer/components/monaco-editor/monaco-editor.tsx +++ b/src/renderer/components/monaco-editor/monaco-editor.tsx @@ -36,7 +36,7 @@ export interface MonacoEditorProps { readOnly?: boolean; theme?: "vs" /* default, light theme */ | "vs-dark" | "hc-black" | string; language?: "yaml" | "json"; // configure bundled list of languages in via MonacoWebpackPlugin({languages: []}) - options?: editor.IStandaloneEditorConstructionOptions; // customize editor's initialization options + options?: Partial; // customize editor's initialization options onChange?: onChangeCallback; onError?: onErrorCallback; onDidLayoutChange?(info: editor.EditorLayoutInfo): void; @@ -55,10 +55,7 @@ export interface onErrorCallback { } export const defaultEditorProps: Partial = { - value: "", - options: {}, language: "yaml", - autoFocus: false, get theme(): MonacoEditorProps["theme"] { // theme for monaco-editor defined in `src/renderer/themes/lens-*.json` return ThemeStore.getInstance().activeTheme.monacoTheme; @@ -71,7 +68,7 @@ export class MonacoEditor extends React.Component { static viewStates = new WeakMap(); public staticId = `editor-id#${Math.round(1e7 * Math.random())}`; - public disposeOnUnmount = disposer(); + public dispose = disposer(); @observable.ref containerElem: HTMLElement; @observable.ref editor: editor.IStandaloneCodeEditor; @@ -83,6 +80,13 @@ export class MonacoEditor extends React.Component { makeObservable(this); } + @computed get options(): editor.IStandaloneEditorConstructionOptions { + return toJS({ + ...UserStore.getInstance().editorConfiguration, + ...(this.props.options ?? {}), + }); + } + /** * Monitor editor's dom container element box-size and sync with monaco's dimensions * @private @@ -135,21 +139,15 @@ export class MonacoEditor extends React.Component { } componentWillUnmount() { - try { - console.info(`[MONACO]: unmounting editor..`); - this.unmounting = true; - this.destroyEditor(); - } catch (error) { - console.error(`[MONACO]: unmounting error failed: ${String(error)}`, this, error); - } + this.unmounting = true; + this.destroy(); } private createEditor() { if (!this.containerElem || this.editor || this.unmounting) { return; } - const { language, theme, readOnly, value: defaultValue, options } = this.props; - const globalEditorOptions = toJS(UserStore.getInstance().editorConfiguration); + const { language, theme, readOnly, value: defaultValue } = this.props; this.editor = editor.create(this.containerElem, { model: this.model, @@ -157,8 +155,7 @@ export class MonacoEditor extends React.Component { language, theme, readOnly, - ...globalEditorOptions, - ...options, + ...this.options, }); console.info(`[MONACO]: editor created for language=${language}, theme=${theme}`); @@ -182,11 +179,11 @@ export class MonacoEditor extends React.Component { // console.info("[MONACO]: onDidContentSizeChange():", params) }); - this.disposeOnUnmount.push( + this.dispose.push( reaction(() => this.model, this.onModelChange), reaction(() => this.props.theme, editor.setTheme), reaction(() => this.props.value, value => this.setValue(value)), - reaction(() => toJS(this.props.options), opts => this.editor.updateOptions(opts)), + reaction(() => this.options, opts => this.editor.updateOptions(opts)), () => onDidLayoutChangeDisposer.dispose(), () => onValueChangeDisposer.dispose(), @@ -195,12 +192,12 @@ export class MonacoEditor extends React.Component { ); } - private destroyEditor(): void { + destroy(): void { if (!this.editor) return; + this.dispose(); this.editor.dispose(); this.editor = null; - this.disposeOnUnmount(); } @action