From 6e181fb0ef17609e084a295484d2e119d29234bc Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 25 Sep 2024 10:27:33 +0200 Subject: [PATCH 1/3] Use YAML editor in card/badge editor --- .../lovelace/editor/hui-element-editor.ts | 42 ++++--------------- 1 file changed, 9 insertions(+), 33 deletions(-) diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts index af75a557b9e8..77f576374eb8 100644 --- a/src/panels/lovelace/editor/hui-element-editor.ts +++ b/src/panels/lovelace/editor/hui-element-editor.ts @@ -1,4 +1,3 @@ -import { dump, load } from "js-yaml"; import { CSSResultGroup, LitElement, @@ -56,8 +55,6 @@ export abstract class HuiElementEditor< @property({ attribute: false }) public context?: C; - @state() private _yaml?: string; - @state() private _config?: T; @state() private _configElement?: LovelaceGenericElementEditor; @@ -74,25 +71,7 @@ export abstract class HuiElementEditor< @state() private _loading = false; - @query("ha-code-editor") _yamlEditor?: HaCodeEditor; - - public get yaml(): string { - if (!this._yaml) { - this._yaml = dump(this._config); - } - return this._yaml || ""; - } - - public set yaml(_yaml: string) { - this._yaml = _yaml; - try { - this._config = load(this.yaml) as any; - this._errors = undefined; - } catch (err: any) { - this._errors = [err.message]; - } - this._setConfig(); - } + @query("ha-yaml-editor") _yamlEditor?: HaCodeEditor; public get value(): T | undefined { return this._config; @@ -103,7 +82,6 @@ export abstract class HuiElementEditor< return; } this._config = config; - this._yaml = undefined; this._errors = undefined; this._setConfig(); } @@ -202,18 +180,14 @@ export abstract class HuiElementEditor< ` : html`
- + >
`} ${this._guiSupported === false && this._loading === false @@ -296,9 +270,11 @@ export abstract class HuiElementEditor< private _handleYAMLChanged(ev: CustomEvent) { ev.stopPropagation(); - const newYaml = ev.detail.value; - if (newYaml !== this.yaml) { - this.yaml = newYaml; + const config = ev.detail.value; + if (ev.detail.isValid) { + this._config = config; + this._errors = undefined; + this._setConfig(); } } From 05b53a40f4ee4e721e41f8869a654342a2f3d5e8 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 25 Sep 2024 10:40:41 +0200 Subject: [PATCH 2/3] Fix focus --- src/components/ha-yaml-editor.ts | 11 ++++++++++- src/panels/lovelace/editor/hui-element-editor.ts | 10 +++++----- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/ha-yaml-editor.ts b/src/components/ha-yaml-editor.ts index 0d9d2c4b85c3..f13aa2617677 100644 --- a/src/components/ha-yaml-editor.ts +++ b/src/components/ha-yaml-editor.ts @@ -7,13 +7,14 @@ import { nothing, PropertyValues, } from "lit"; -import { customElement, property, state } from "lit/decorators"; +import { customElement, property, query, state } from "lit/decorators"; import { fireEvent } from "../common/dom/fire_event"; import type { HomeAssistant } from "../types"; import { haStyle } from "../resources/styles"; import "./ha-code-editor"; import { showToast } from "../util/toast"; import { copyToClipboard } from "../common/util/copy-clipboard"; +import type { HaCodeEditor } from "./ha-code-editor"; const isEmpty = (obj: Record): boolean => { if (typeof obj !== "object") { @@ -53,6 +54,8 @@ export class HaYamlEditor extends LitElement { @state() private _yaml = ""; + @query("ha-code-editor") _codeEditor?: HaCodeEditor; + public setValue(value): void { try { this._yaml = @@ -83,6 +86,12 @@ export class HaYamlEditor extends LitElement { } } + public focus(): void { + if (this._codeEditor?.codemirror) { + this._codeEditor?.codemirror.focus(); + } + } + protected render() { if (this._yaml === undefined) { return nothing; diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts index 77f576374eb8..9548b9b4ecad 100644 --- a/src/panels/lovelace/editor/hui-element-editor.ts +++ b/src/panels/lovelace/editor/hui-element-editor.ts @@ -13,8 +13,8 @@ import { handleStructError } from "../../../common/structs/handle-errors"; import { deepEqual } from "../../../common/util/deep-equal"; import "../../../components/ha-alert"; import "../../../components/ha-circular-progress"; -import "../../../components/ha-code-editor"; -import type { HaCodeEditor } from "../../../components/ha-code-editor"; +import "../../../components/ha-yaml-editor"; +import type { HaYamlEditor } from "../../../components/ha-yaml-editor"; import { LovelaceConfig } from "../../../data/lovelace/config/types"; import type { HomeAssistant } from "../../../types"; import type { @@ -71,7 +71,7 @@ export abstract class HuiElementEditor< @state() private _loading = false; - @query("ha-yaml-editor") _yamlEditor?: HaCodeEditor; + @query("ha-yaml-editor") _yamlEditor?: HaYamlEditor; public get value(): T | undefined { return this._config; @@ -142,10 +142,10 @@ export abstract class HuiElementEditor< if (this._configElement?.focusYamlEditor) { this._configElement.focusYamlEditor(); } - if (!this._yamlEditor?.codemirror) { + if (!this._yamlEditor) { return; } - this._yamlEditor.codemirror.focus(); + this._yamlEditor.focus(); } protected async getConfigElement(): Promise< From e3a3feecc83f04fbfde73fe81e07bdfcf5f23940 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 25 Sep 2024 10:42:13 +0200 Subject: [PATCH 3/3] Clean code --- src/components/ha-yaml-editor.ts | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/components/ha-yaml-editor.ts b/src/components/ha-yaml-editor.ts index f13aa2617677..1eb94c0aeab9 100644 --- a/src/components/ha-yaml-editor.ts +++ b/src/components/ha-yaml-editor.ts @@ -15,6 +15,7 @@ import "./ha-code-editor"; import { showToast } from "../util/toast"; import { copyToClipboard } from "../common/util/copy-clipboard"; import type { HaCodeEditor } from "./ha-code-editor"; +import "./ha-button"; const isEmpty = (obj: Record): boolean => { if (typeof obj !== "object") { @@ -99,7 +100,7 @@ export class HaYamlEditor extends LitElement { return html` ${this.label ? html`

${this.label}${this.required ? " *" : ""}

` - : ""} + : nothing} ${this.copyClipboard || this.hasExtraActions - ? html`
- ${this.copyClipboard - ? html` - ${this.hass.localize( - "ui.components.yaml-editor.copy_to_clipboard" - )} - ` - : nothing} - -
` + ? html` +
+ ${this.copyClipboard + ? html` + + ${this.hass.localize( + "ui.components.yaml-editor.copy_to_clipboard" + )} + + ` + : nothing} + +
+ ` : nothing} `; }