Skip to content

Commit

Permalink
Use YAML editor in card/badge editor (#22075)
Browse files Browse the repository at this point in the history
  • Loading branch information
piitaya authored Sep 25, 2024
1 parent e77508b commit c6e2e07
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 49 deletions.
38 changes: 26 additions & 12 deletions src/components/ha-yaml-editor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,15 @@ 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";
import "./ha-button";

const isEmpty = (obj: Record<string, unknown>): boolean => {
if (typeof obj !== "object") {
Expand Down Expand Up @@ -53,6 +55,8 @@ export class HaYamlEditor extends LitElement {

@state() private _yaml = "";

@query("ha-code-editor") _codeEditor?: HaCodeEditor;

public setValue(value): void {
try {
this._yaml =
Expand Down Expand Up @@ -83,14 +87,20 @@ export class HaYamlEditor extends LitElement {
}
}

public focus(): void {
if (this._codeEditor?.codemirror) {
this._codeEditor?.codemirror.focus();
}
}

protected render() {
if (this._yaml === undefined) {
return nothing;
}
return html`
${this.label
? html`<p>${this.label}${this.required ? " *" : ""}</p>`
: ""}
: nothing}
<ha-code-editor
.hass=${this.hass}
.value=${this._yaml}
Expand All @@ -103,16 +113,20 @@ export class HaYamlEditor extends LitElement {
dir="ltr"
></ha-code-editor>
${this.copyClipboard || this.hasExtraActions
? html`<div class="card-actions">
${this.copyClipboard
? html` <mwc-button @click=${this._copyYaml}>
${this.hass.localize(
"ui.components.yaml-editor.copy_to_clipboard"
)}
</mwc-button>`
: nothing}
<slot name="extra-actions"></slot>
</div>`
? html`
<div class="card-actions">
${this.copyClipboard
? html`
<ha-button @click=${this._copyYaml}>
${this.hass.localize(
"ui.components.yaml-editor.copy_to_clipboard"
)}
</ha-button>
`
: nothing}
<slot name="extra-actions"></slot>
</div>
`
: nothing}
`;
}
Expand Down
50 changes: 13 additions & 37 deletions src/panels/lovelace/editor/hui-element-editor.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { dump, load } from "js-yaml";
import {
CSSResultGroup,
LitElement,
Expand All @@ -14,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 {
Expand Down Expand Up @@ -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;
Expand All @@ -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?: HaYamlEditor;

public get value(): T | undefined {
return this._config;
Expand All @@ -103,7 +82,6 @@ export abstract class HuiElementEditor<
return;
}
this._config = config;
this._yaml = undefined;
this._errors = undefined;
this._setConfig();
}
Expand Down Expand Up @@ -164,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<
Expand Down Expand Up @@ -202,18 +180,14 @@ export abstract class HuiElementEditor<
`
: html`
<div class="yaml-editor">
<ha-code-editor
mode="yaml"
<ha-yaml-editor
.defaultValue=${this._config}
autofocus
autocomplete-entities
autocomplete-icons
.hass=${this.hass}
.value=${this.yaml}
.error=${Boolean(this._errors)}
@value-changed=${this._handleYAMLChanged}
@keydown=${this._ignoreKeydown}
dir="ltr"
></ha-code-editor>
></ha-yaml-editor>
</div>
`}
${this._guiSupported === false && this._loading === false
Expand Down Expand Up @@ -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();
}
}

Expand Down

0 comments on commit c6e2e07

Please sign in to comment.