fix: provide validation error to <InfoPanel/> via MonacoEditor.props.onError()

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/dock/create-resource.scss

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-.CreateResource {
-}

src/renderer/components/dock/create-resource.tsx

@@ -19,22 +19,20 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./create-resource.scss";
 import React from "react";
 import { GroupSelectOption, Select, SelectOption } from "../select";
 import jsYaml from "js-yaml";
 import { computed, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import { createResourceStore } from "./create-resource.store";
-import { InfoPanel } from "./info-panel";
+import { InfoPanel, InfoPanelProps } from "./info-panel";
 import { resourceApplierApi } from "../../../common/k8s-api/endpoints/resource-applier.api";
 import type { JsonApiErrorParsed } from "../../../common/k8s-api/json-api";
 import { Notifications } from "../notifications";
 import { TabKind } from "./dock.store";
-import type { DockTabContentProps } from "./dock-tab-content";
 import { dockViewsManager } from "./dock.views-manager";
 
-interface Props extends DockTabContentProps {
+interface Props extends InfoPanelProps {
 }
 
 type SelectOptionTemplate = SelectOption<SelectOptionTemplateValue>;
@@ -46,14 +44,14 @@ interface SelectOptionTemplateValue {
 }
 
 @observer
-export class CreateResource extends React.Component<Props> {
+export class CreateResourceInfoPanel extends React.Component<Props> {
   constructor(props: Props) {
     super(props);
     makeObservable(this);
   }
 
   get tabId() {
-    return this.props.tab.id;
+    return this.props.tabId;
   }
 
   get draft() {
@@ -136,21 +134,19 @@ export class CreateResource extends React.Component<Props> {
 
   render() {
     return (
-      <div className="CreateResource">
-        <InfoPanel
-          tabId={this.tabId}
-          controls={this.renderControls()}
-          submit={this.create}
-          submitLabel="Create"
-          showNotifications={false}
-        />
-      </div>
+      <InfoPanel
+        {...this.props}
+        controls={this.renderControls()}
+        submit={this.create}
+        submitLabel="Create"
+        showNotifications={false}
+      />
     );
   }
 }
 
 dockViewsManager.register(TabKind.CREATE_RESOURCE, {
-  Content: CreateResource,
+  InfoPanel: CreateResourceInfoPanel,
   editor: {
     getValue(tabId) {
       return createResourceStore.getData(tabId);

src/renderer/components/dock/dock-tab-content.tsx

@@ -21,12 +21,12 @@
 
 import "./dock-tab-content.scss";
 import React from "react";
-import { observer } from "mobx-react";
-import { computed, makeObservable } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { computed, makeObservable, observable, reaction } from "mobx";
 import type { DockTab, TabId } from "./dock.store";
 import { cssNames } from "../../utils";
 import { DockTabComponents, dockViewsManager } from "./dock.views-manager";
-import { MonacoEditor, onMonacoContentChangeCallback } from "../monaco-editor";
+import { MonacoEditor } from "../monaco-editor";
 
 export interface DockTabContentProps extends React.HTMLAttributes<any> {
   className?: string;
@@ -39,6 +39,10 @@ export class DockTabContent extends React.Component<DockTabContentProps> {
   constructor(props: DockTabContentProps) {
     super(props);
     makeObservable(this);
+
+    disposeOnUnmount(this, [
+      reaction(() => this.tabId, () => this.error = ""), // reset
+    ]);
   }
 
   @computed get tabId(): TabId {
@@ -49,46 +53,45 @@ export class DockTabContent extends React.Component<DockTabContentProps> {
     return dockViewsManager.get(this.props.tab.kind);
   }
 
+  @observable error = "";
+
   /**
    * Always keep editor in DOM while (while <Dock/> is open/rendered).
    * This allows to restore editor's model-view state (cursor pos, selection, etc.)
    * while switching between different tab.kind-s (e.g. "terminal" tab doesn't have editor)
    */
   renderEditor() {
-    const { tabId, tabComponents } = this;
-    const isHidden = !tabComponents.editor;
+    const { tabId, tabComponents: { editor } } = this;
+    const isHidden = !editor;
 
     return (
       <MonacoEditor
         id={tabId}
         className={cssNames({ hidden: isHidden })}
-        value={tabComponents.editor?.getValue(tabId)}
-        onChange={this.onEditorChange}
-        onError={this.onEditorError}
+        value={editor?.getValue(tabId) ?? ""}
+        onChange={value => {
+          this.error = "";
+          editor?.setValue(tabId, value);
+        }}
+        onError={error => {
+          this.error = isHidden ? "" : error;
+        }}
       />
     );
   }
 
-  onEditorChange: onMonacoContentChangeCallback = (value) => {
-    this.tabComponents.editor?.setValue(this.tabId, value);
-  };
-
-  onEditorError = (error: string) => {
-    this.tabComponents.editor?.onError?.(this.tabId, error);
-  };
-
-  // TODO: provide error to dock's info-panel
   render() {
-    const { children: bottomContent, bindContainerRef, className, tab } = this.props;
+    const { bindContainerRef, className, tab } = this.props;
 
     if (!tab) return null;
-    const { Content } = this.tabComponents;
+    const { InfoPanel, Content } = this.tabComponents;
 
     return (
       <div className={cssNames("DockTabContent flex column", className)} ref={bindContainerRef}>
+        {InfoPanel && <InfoPanel tabId={this.tabId} error={this.error}/>}
         {Content && <Content {...this.props}/>}
         {this.renderEditor()}
-        {bottomContent}
+        {this.props.children}
       </div>
     );
   }

src/renderer/components/dock/dock.views-manager.ts

@@ -23,13 +23,14 @@ import type React from "react";
 import { observable } from "mobx";
 import type { TabId, TabKind } from "./dock.store";
 import type { DockTabContentProps } from "./dock-tab-content";
+import type { InfoPanelProps } from "./info-panel";
 
 export interface DockTabComponents {
+  InfoPanel?: React.ComponentType<InfoPanelProps>;
   Content?: React.ComponentType<DockTabContentProps>;
   editor?: {
     getValue(tabId: TabId): string | undefined;
     setValue(tabId: TabId, value: string): void;
-    onError?(tabId: TabId, error: string | Error): void;
   }
 }
 

src/renderer/components/dock/edit-resource.scss

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-.EditResource {
-}

src/renderer/components/dock/edit-resource.tsx

@@ -19,27 +19,23 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./edit-resource.scss";
-
 import React from "react";
 import { observer } from "mobx-react";
 import jsYaml from "js-yaml";
 import { editResourceStore } from "./edit-resource.store";
-import { InfoPanel } from "./info-panel";
+import { InfoPanel, InfoPanelProps } from "./info-panel";
 import { Badge } from "../badge";
-import { Spinner } from "../spinner";
 import type { KubeObject } from "../../../common/k8s-api/kube-object";
-import type { DockTabContentProps } from "./dock-tab-content";
 import { TabKind } from "./dock.store";
 import { dockViewsManager } from "./dock.views-manager";
 
-interface Props extends DockTabContentProps {
+interface Props extends InfoPanelProps {
 }
 
 @observer
-export class EditResource extends React.Component<Props> {
+export class EditResourceInfoPanel extends React.Component<Props> {
   get tabId() {
-    return this.props.tab.id;
+    return this.props.tabId;
   }
 
   get resource(): KubeObject | undefined {
@@ -74,34 +70,30 @@ export class EditResource extends React.Component<Props> {
   };
 
   render() {
-    const { tabId, resource } = this;
+    const { resource } = this;
 
-    if (!editResourceStore.dataReady || !resource) {
-      return <Spinner center/>;
-    }
+    if (!resource) return null;
 
     return (
-      <div className="EditResource">
-        <InfoPanel
-          tabId={tabId}
-          submit={this.save}
-          submitLabel="Save"
-          submittingMessage="Applying.."
-          controls={(
-            <div className="resource-info flex gaps align-center">
-              <span>Kind:</span> <Badge label={resource.kind}/>
-              <span>Name:</span><Badge label={resource.getName()}/>
-              <span>Namespace:</span> <Badge label={resource.getNs() || "global"}/>
-            </div>
-          )}
-        />
-      </div>
+      <InfoPanel
+        {...this.props}
+        submit={this.save}
+        submitLabel="Save"
+        submittingMessage="Applying.."
+        controls={(
+          <div className="resource-info flex gaps align-center">
+            <span>Kind:</span> <Badge label={resource.kind}/>
+            <span>Name:</span><Badge label={resource.getName()}/>
+            <span>Namespace:</span> <Badge label={resource.getNs() || "global"}/>
+          </div>
+        )}
+      />
     );
   }
 }
 
 dockViewsManager.register(TabKind.EDIT_RESOURCE, {
-  Content: EditResource,
+  InfoPanel: EditResourceInfoPanel,
   editor: {
     getValue(tabId) {
       return editResourceStore.getData(tabId).draft;

src/renderer/components/dock/info-panel.tsx

@@ -20,9 +20,8 @@
  */
 
 import "./info-panel.scss";
-
 import React, { Component, ReactNode } from "react";
-import { computed, observable, reaction, makeObservable } from "mobx";
+import { makeObservable, observable, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { cssNames } from "../../utils";
 import { Button } from "../button";
@@ -31,14 +30,11 @@ import { Spinner } from "../spinner";
 import { dockStore, TabId } from "./dock.store";
 import { Notifications } from "../notifications";
 
-interface Props extends OptionalProps {
+export interface InfoPanelProps {
   tabId: TabId;
   submit?: () => Promise<ReactNode | string>;
-}
-
-interface OptionalProps {
   className?: string;
-  error?: string;
+  error?: React.ReactNode;
   controls?: ReactNode;
   submitLabel?: ReactNode;
   submittingMessage?: ReactNode;
@@ -50,22 +46,23 @@ interface OptionalProps {
   showStatusPanel?: boolean;
 }
 
-@observer
-export class InfoPanel extends Component<Props> {
-  static defaultProps: OptionalProps = {
-    submitLabel: "Submit",
-    submittingMessage: "Submitting..",
-    showButtons: true,
-    showSubmitClose: true,
-    showInlineInfo: true,
-    showNotifications: true,
-    showStatusPanel: true,
-  };
+const defaultProps: Partial<InfoPanelProps> = {
+  submitLabel: "Submit",
+  submittingMessage: "Submitting..",
+  showButtons: true,
+  showSubmitClose: true,
+  showInlineInfo: true,
+  showNotifications: true,
+  showStatusPanel: true,
+};
+
+@observer
+export class InfoPanel extends Component<InfoPanelProps> {
+  static defaultProps = defaultProps as object;
 
-  @observable error = "";
   @observable waiting = false;
 
-  constructor(props: Props) {
+  constructor(props: InfoPanelProps) {
     super(props);
     makeObservable(this);
   }
@@ -78,10 +75,6 @@ export class InfoPanel extends Component<Props> {
     ]);
   }
 
-  @computed get errorInfo() {
-    return this.props.error;
-  }
-
   submit = async () => {
     const { showNotifications } = this.props;
 
@@ -107,14 +100,16 @@ export class InfoPanel extends Component<Props> {
     dockStore.closeTab(this.props.tabId);
   };
 
-  renderErrorIcon() {
-    if (!this.props.showInlineInfo || !this.errorInfo) {
+  renderErrorIcon(): React.ReactNode {
+    const { error } = this.props;
+
+    if (!error || !this.props.showInlineInfo) {
       return null;
     }
 
     return (
       <div className="error">
-        <Icon material="error_outline" tooltip={this.errorInfo}/>
+        <Icon material="error_outline" tooltip={error}/>
       </div>
     );
   }

src/renderer/components/dock/install-chart.scss

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.InstallChart {
+.InstallChartInfoPanel {
   .Select {
     &.NamespaceSelect {
       min-width: 130px;

src/renderer/components/dock/install-chart.tsx

@@ -25,7 +25,7 @@ import React, { Component } from "react";
 import { computed, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import { dockStore, TabKind } from "./dock.store";
-import { InfoPanel } from "./info-panel";
+import { InfoPanel, InfoPanelProps } from "./info-panel";
 import { Badge } from "../badge";
 import { NamespaceSelect } from "../+namespaces/namespace-select";
 import { prevDefault } from "../../utils";
@@ -39,14 +39,13 @@ import { Select, SelectOption } from "../select";
 import { Input } from "../input";
 import { navigate } from "../../navigation";
 import { releaseURL } from "../../../common/routes";
-import type { DockTabContentProps } from "./dock-tab-content";
 import { dockViewsManager } from "./dock.views-manager";
 
-interface Props extends DockTabContentProps {
+interface Props extends InfoPanelProps {
 }
 
 @observer
-export class InstallChart extends Component<Props> {
+export class InstallChartInfoPanel extends Component<Props> {
   @observable showNotes = false;
 
   constructor(props: Props) {
@@ -55,7 +54,7 @@ export class InstallChart extends Component<Props> {
   }
 
   get tabId() {
-    return this.props.tab.id;
+    return this.props.tabId;
   }
 
   get chartData(): IChartInstallData | undefined {
@@ -160,7 +159,7 @@ export class InstallChart extends Component<Props> {
       return this.renderReleaseDetails();
     }
 
-    const { tabId, chartData, install, versions } = this;
+    const { chartData, install, versions } = this;
     const { repo, name, version, namespace, releaseName } = chartData;
 
     const panelControls = (
@@ -195,22 +194,21 @@ export class InstallChart extends Component<Props> {
     );
 
     return (
-      <div className="InstallChart">
-        <InfoPanel
-          tabId={tabId}
-          controls={panelControls}
-          submit={install}
-          submitLabel="Install"
-          submittingMessage="Installing..."
-          showSubmitClose={false}
-        />
-      </div>
+      <InfoPanel
+        {...this.props}
+        className="InstallChartInfoPanel"
+        controls={panelControls}
+        submit={install}
+        submitLabel="Install"
+        submittingMessage="Installing..."
+        showSubmitClose={false}
+      />
     );
   }
 }
 
 dockViewsManager.register(TabKind.INSTALL_CHART, {
-  Content: InstallChart,
+  InfoPanel: InstallChartInfoPanel,
   editor: {
     getValue(tabId) {
       return installChartStore.getData(tabId).values;

src/renderer/components/dock/logs.tsx

@@ -125,7 +125,7 @@ export class Logs extends React.Component<Props> {
 
     return (
       <InfoPanel
-        tabId={this.props.tab.id}
+        tabId={this.tabId}
         controls={controls}
         showSubmitClose={false}
         showButtons={false}

src/renderer/components/dock/upgrade-chart.scss

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-.UpgradeChart {
-}

src/renderer/components/dock/upgrade-chart.tsx

@@ -19,24 +19,20 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./upgrade-chart.scss";
-
 import React from "react";
 import { computed, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
-import { InfoPanel } from "./info-panel";
+import { InfoPanel, InfoPanelProps } from "./info-panel";
 import { upgradeChartStore } from "./upgrade-chart.store";
 import { releaseStore } from "../+apps-releases/release.store";
 import { Badge } from "../badge";
 import { Select, SelectOption } from "../select";
 import type { IChartVersion } from "../+apps-helm-charts/helm-chart.store";
 import type { HelmRelease } from "../../../common/k8s-api/endpoints/helm-releases.api";
-import type { DockTabContentProps } from "./dock-tab-content";
 import { TabKind } from "./dock.store";
 import { dockViewsManager } from "./dock.views-manager";
-import { Spinner } from "../spinner";
 
-interface Props extends DockTabContentProps {
+interface Props extends InfoPanelProps {
 }
 
 @observer
@@ -49,7 +45,7 @@ export class UpgradeChart extends React.Component<Props> {
   @observable selectedVersion: IChartVersion;
 
   get tabId() {
-    return this.props.tab.id;
+    return this.props.tabId;
   }
 
   get release(): HelmRelease | null {
@@ -90,46 +86,39 @@ export class UpgradeChart extends React.Component<Props> {
   };
 
   render() {
-    const { tabId, release, versions, selectedVersion } = this;
-
-    if (!release) {
-      return <Spinner center/>;
-    }
-
+    const { release, versions, selectedVersion } = this;
     const currentVersion = release.getVersion();
 
     return (
-      <div className="UpgradeChart">
-        <InfoPanel
-          tabId={tabId}
-          submit={this.upgrade}
-          submitLabel="Upgrade"
-          submittingMessage="Updating.."
-          controls={
-            <div className="upgrade flex gaps align-center">
-              <span>Release</span> <Badge label={release.getName()}/>
-              <span>Namespace</span> <Badge label={release.getNs()}/>
-              <span>Version</span> <Badge label={currentVersion}/>
-              <span>Upgrade version</span>
-              <Select
-                className="chart-version"
-                menuPlacement="top"
-                themeName="outlined"
-                value={selectedVersion ?? versions[0]}
-                options={versions}
-                formatOptionLabel={this.formatVersionLabel}
-                onChange={({ value }: SelectOption<IChartVersion>) => this.selectedVersion = value}
-              />
-            </div>
-          }
-        />
-      </div>
+      <InfoPanel
+        {...this.props}
+        submit={this.upgrade}
+        submitLabel="Upgrade"
+        submittingMessage="Updating.."
+        controls={
+          <div className="upgrade flex gaps align-center">
+            <span>Release</span> <Badge label={release.getName()}/>
+            <span>Namespace</span> <Badge label={release.getNs()}/>
+            <span>Version</span> <Badge label={currentVersion}/>
+            <span>Upgrade version</span>
+            <Select
+              className="chart-version"
+              menuPlacement="top"
+              themeName="outlined"
+              value={selectedVersion ?? versions[0]}
+              options={versions}
+              formatOptionLabel={this.formatVersionLabel}
+              onChange={({ value }: SelectOption<IChartVersion>) => this.selectedVersion = value}
+            />
+          </div>
+        }
+      />
     );
   }
 }
 
 dockViewsManager.register(TabKind.UPGRADE_CHART, {
-  Content: UpgradeChart,
+  InfoPanel: UpgradeChart,
   editor: {
     getValue(tabId): string {
       return upgradeChartStore.values.get(tabId);

src/renderer/components/monaco-editor/monaco-editor.tsx

@@ -39,24 +39,12 @@ export interface MonacoEditorProps {
   theme?: "vs" /* default, light theme */ | "vs-dark" | "hc-black" | string;
   language?: "yaml" | "json"; // configure bundled list of languages in via MonacoWebpackPlugin({languages: []})
   options?: Partial<editor.IStandaloneEditorConstructionOptions>; // customize editor's initialization options
-  onChange?: onMonacoContentChangeCallback;
-  onError?: onMonacoErrorCallback; // provide syntax validation errors, etc.
+  onChange?(value: string, evt: editor.IModelContentChangedEvent): void; // catch latest value updates
+  onError?(error?: string): void; // provide syntax validation errors, etc.
   onDidLayoutChange?(info: editor.EditorLayoutInfo): void;
   onDidContentSizeChange?(evt: editor.IContentSizeChangedEvent): void;
 }
 
-// `props.onChange` called via editor's api value changes / user input, but when `props.value` changes
-export interface onMonacoContentChangeCallback {
-  (value: string, data: {
-    model: editor.ITextModel, // current model
-    event: editor.IModelContentChangedEvent;
-  }): void;
-}
-
-export interface onMonacoErrorCallback {
-  (error: string): void; // TODO: provide validation or some another occurred error
-}
-
 export const defaultEditorProps: Partial<MonacoEditorProps> = {
   language: "yaml",
   get theme(): MonacoEditorProps["theme"] {
@@ -119,6 +107,7 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
     this.editor.restoreViewState(this.getViewState(model)); // restore cursor position, selection, etc.
     this.editor.layout();
     this.editor.focus(); // keep focus in editor, e.g. when clicking between dock-tabs
+    this.validateLazy();
   };
 
   @computed get editorId(): string {
@@ -132,13 +121,9 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
   componentDidMount() {
     try {
       this.createEditor();
-
-      if (this.props.autoFocus) {
-        this.editor.focus();
-      }
       console.info(`[MONACO]: editor did mounted`);
     } catch (error) {
-      console.error(`[MONACO]: mounting failed`, { error, editor, component: this });
+      console.error(`[MONACO]: mounting failed: ${error}`, this);
     }
   }
 
@@ -162,6 +147,11 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
       ...this.options,
     });
     console.info(`[MONACO]: editor created for language=${language}, theme=${theme}`);
+    this.validateLazy(); // validate initial value
+
+    if (this.props.autoFocus) {
+      this.editor.focus();
+    }
 
     const onDidLayoutChangeDisposer = this.editor.onDidLayoutChange(layoutInfo => {
       this.props.onDidLayoutChange?.(layoutInfo);
@@ -172,11 +162,8 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
       const value = this.editor.getValue();
       // console.info("[MONACO]: value changed", { value, event });
 
+      this.props.onChange?.(value, event);
       this.validateLazy(value);
-      this.props.onChange?.(value, {
-        model: this.model,
-        event,
-      });
     });
 
     const onContentSizeChangeDisposer = this.editor.onDidContentSizeChange((params) => {
@@ -244,18 +231,15 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
     if (value == this.getValue()) return;
 
     this.editor.setValue(value);
-    this.validateLazy(value);
+    this.validate(value);
   }
 
   getValue(opts?: { preserveBOM: boolean; lineEnding: string; }): string {
     return this.editor?.getValue(opts) ?? "";
   }
 
-  // avoid excessive validations during typing
-  validateLazy = debounce((value: string) => this.validate(value), 250);
-
   @action
-  async validate(value: string = this.getValue()): Promise<void> {
+  validate = async (value = this.getValue()): Promise<void> => {
     const { language } = this.props;
     const validators: MonacoValidator[] = [];
     const syntaxValidator: MonacoValidator = monacoValidators[language];
@@ -264,7 +248,8 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
       validators.push(syntaxValidator);
     }
 
-    this.validationErrors.clear();
+    // console.info('[MONACO]: validating', { value, validators });
+    this.validationErrors.clear(); // reset first
 
     for (const validate of validators) {
       try {
@@ -275,7 +260,10 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
         this.props.onError?.(error); // emit error outside via callback
       }
     }
-  }
+  };
+
+  // avoid excessive validations during typing
+  validateLazy = debounce(this.validate, 250);
 
   bindRef = (elem: HTMLElement) => this.containerElem = elem;
 

src/renderer/components/monaco-editor/monaco-validators.ts

@@ -24,21 +24,21 @@ export interface MonacoValidator {
   (value: string): Promise<void>;
 }
 
-export const yamlValidator: MonacoValidator = async (value: string) => {
+export async function yamlValidator(value: string) {
   try {
-    await yaml.safeLoad(value);
+    await yaml.load(value);
   } catch (error) {
     throw String(error as YAMLException);
   }
-};
+}
 
-export const jsonValidator: MonacoValidator = async (value: string) => {
+export async function jsonValidator(value: string) {
   try {
-    await yaml.safeLoad(value, { json: true });
+    JSON.parse(value);
   } catch (error) {
     throw String(error);
   }
-};
+}
 
 export const monacoValidators = {
   yaml: yamlValidator,