diff --git a/package.json b/package.json
index b4b6d7e7f3..91464b3481 100644
--- a/package.json
+++ b/package.json
@@ -103,6 +103,7 @@
"@babel/preset-typescript": "^7.1.0",
"@gfx/zopfli": "^1.0.9",
"@types/chai": "^4.1.7",
+ "@types/codemirror": "^0.0.71",
"@types/mocha": "^5.2.5",
"babel-eslint": "^10",
"babel-loader": "^8.0.4",
diff --git a/src/panels/lovelace/components/hui-code-editor.ts b/src/panels/lovelace/components/hui-yaml-editor.ts
similarity index 69%
rename from src/panels/lovelace/components/hui-code-editor.ts
rename to src/panels/lovelace/components/hui-yaml-editor.ts
index 5b9149ef58..d1493f0dc4 100644
--- a/src/panels/lovelace/components/hui-code-editor.ts
+++ b/src/panels/lovelace/components/hui-yaml-editor.ts
@@ -3,24 +3,20 @@ import "codemirror/mode/yaml/yaml";
// tslint:disable-next-line
import codeMirrorCSS from "codemirror/lib/codemirror.css";
import { fireEvent } from "../../../common/dom/fire_event";
-
-let _this;
-
declare global {
interface HASSDomEvents {
- "code-changed": {
+ "yaml-changed": {
value: string;
};
}
}
-export class HuiCodeEditor extends HTMLElement {
- public codemirror;
- private _value;
+export class HuiYamlEditor extends HTMLElement {
+ public codemirror: CodeMirror;
+ private _value: string;
- constructor() {
+ public constructor() {
super();
- _this = this;
this._value = "";
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.innerHTML = `
@@ -43,27 +39,35 @@ export class HuiCodeEditor extends HTMLElement {
this._value = value;
}
- get value() {
+ get value(): string {
return this.codemirror.getValue();
}
- public connectedCallback() {
+ public connectedCallback(): void {
if (!this.codemirror) {
this.codemirror = CodeMirror(this.shadowRoot, {
value: this._value,
lineNumbers: true,
mode: "yaml",
tabSize: 2,
+ autofocus: true,
});
+ fireEvent(this, "yaml-changed", { value: this._value });
this.codemirror.on("changes", () => this._onChange());
} else {
this.codemirror.refresh();
}
}
- private _onChange() {
- fireEvent(this, "code-changed", { value: this.codemirror.getValue() });
+ private _onChange(): void {
+ fireEvent(this, "yaml-changed", { value: this.codemirror.getValue() });
}
}
-window.customElements.define("hui-code-editor", HuiCodeEditor);
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-yaml-editor": HuiYamlEditor;
+ }
+}
+
+window.customElements.define("hui-yaml-editor", HuiYamlEditor);
diff --git a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
index 669d2e3e3d..7693a9ac2a 100644
--- a/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-edit-card.ts
@@ -23,13 +23,16 @@ import { HomeAssistant } from "../../../../types";
import { LovelaceCardConfig } from "../../../../data/lovelace";
import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../components/hui-code-editor";
+import "../../components/hui-yaml-editor";
+// This is not a duplicate import, one is for types, one is for element.
+// tslint:disable-next-line
+import { HuiYamlEditor } from "../../components/hui-yaml-editor";
import "./hui-card-preview";
// This is not a duplicate import, one is for types, one is for element.
// tslint:disable-next-line
import { HuiCardPreview } from "./hui-card-preview";
import { LovelaceCardEditor, Lovelace } from "../../types";
-import { YamlChangedEvent, ConfigValue, ConfigError } from "../types";
+import { ConfigValue, ConfigError } from "../types";
import { EntityConfig } from "../../entity-rows/types";
import { getCardElementTag } from "../../common/get-card-element-tag";
import { addCard, replaceCard } from "../config-util";
@@ -115,10 +118,10 @@ export class HuiEditCard extends LitElement {
${this._uiEditor
? this._configElement
: html`
-
+ @yaml-changed="${this._handleYamlChanged}"
+ >
`}
`;
@@ -190,6 +193,9 @@ export class HuiEditCard extends LitElement {
await this.updateComplete;
this._loading = false;
this._resizeDialog();
+ if (!this._uiEditor) {
+ this.yamlEditor.codemirror.refresh();
+ }
}
private async _resizeDialog(): Promise {
@@ -256,7 +262,9 @@ export class HuiEditCard extends LitElement {
this._updatePreview(value);
}
- private _updatePreview(config: LovelaceCardConfig) {
+ private async _updatePreview(config: LovelaceCardConfig) {
+ await this.updateComplete;
+
if (!this._previewEl) {
return;
}
@@ -389,6 +397,10 @@ export class HuiEditCard extends LitElement {
}
}
+ private get yamlEditor(): HuiYamlEditor {
+ return this.shadowRoot!.querySelector("hui-yaml-editor")!;
+ }
+
static get styles(): CSSResult[] {
return [
haStyleDialog,
diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts
index 893251bf93..5260399b1f 100644
--- a/src/panels/lovelace/hui-editor.ts
+++ b/src/panels/lovelace/hui-editor.ts
@@ -14,10 +14,10 @@ import { Lovelace } from "./types";
import "../../components/ha-icon";
import { haStyle } from "../../resources/ha-style";
-import "./components/hui-code-editor";
+import "./components/hui-yaml-editor";
// This is not a duplicate import, one is for types, one is for element.
// tslint:disable-next-line
-import { HuiCodeEditor } from "./components/hui-code-editor";
+import { HuiYamlEditor } from "./components/hui-yaml-editor";
const lovelaceStruct = struct.interface({
title: "string?",
@@ -69,24 +69,23 @@ class LovelaceFullConfigEditor extends LitElement {
-
-
+
`;
}
protected firstUpdated() {
- const codeEditor = this.codeEditor;
- codeEditor.value = yaml.safeDump(this.lovelace!.config);
- codeEditor.addEventListener("keydown", (e) => {
+ const yamlEditor = this.yamlEditor;
+ yamlEditor.value = yaml.safeDump(this.lovelace!.config);
+ yamlEditor.addEventListener("keydown", (e) => {
if (e.keyCode === 51) {
this._hashAdded = true;
return;
}
});
- codeEditor.addEventListener("code-changed", (e) => {
- this._hash = this._hashAdded || this.codeEditor.value.includes("#");
+ yamlEditor.addEventListener("yaml-changed", (e) => {
+ this._hash = this._hashAdded || this.yamlEditor.value.includes("#");
if (this._changed) {
return;
}
@@ -169,7 +168,7 @@ class LovelaceFullConfigEditor extends LitElement {
let value;
try {
- value = yaml.safeLoad(this.codeEditor.value);
+ value = yaml.safeLoad(this.yamlEditor.value);
} catch (err) {
alert(`Unable to parse YAML: ${err}`);
this._saving = false;
@@ -192,8 +191,8 @@ class LovelaceFullConfigEditor extends LitElement {
this._hashAdded = false;
}
- private get codeEditor(): HuiCodeEditor {
- return this.shadowRoot!.querySelector("hui-code-editor")! as HuiCodeEditor;
+ private get yamlEditor(): HuiYamlEditor {
+ return this.shadowRoot!.querySelector("hui-yaml-editor")!;
}
}
diff --git a/yarn.lock b/yarn.lock
index 0facc9d04e..c054a8417e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1436,6 +1436,13 @@
resolved "https://registry.yarnpkg.com/@types/clone/-/clone-0.1.30.tgz#e7365648c1b42136a59c7d5040637b3b5c83b614"
integrity sha1-5zZWSMG0ITalnH1QQGN7O1yDthQ=
+"@types/codemirror@^0.0.71":
+ version "0.0.71"
+ resolved "https://registry.yarnpkg.com/@types/codemirror/-/codemirror-0.0.71.tgz#861f1bcb3100c0a064567c5400f2981cf4ae8ca7"
+ integrity sha512-b2oEEnno1LIGKMR7uBEsr40al1UijF1HEpRn0+Yf1xOLl24iQgB7DBpZVMM7y54G5wCNoclDrRO65E6KHPNO2w==
+ dependencies:
+ "@types/tern" "*"
+
"@types/compression@^0.0.33":
version "0.0.33"
resolved "https://registry.yarnpkg.com/@types/compression/-/compression-0.0.33.tgz#95dc733a2339aa846381d7f1377792d2553dc27d"
@@ -1477,7 +1484,7 @@
resolved "https://registry.yarnpkg.com/@types/escape-html/-/escape-html-0.0.20.tgz#cae698714dd61ebee5ab3f2aeb9a34ba1011735a"
integrity sha512-6dhZJLbA7aOwkYB2GDGdIqJ20wmHnkDzaxV9PJXe7O02I2dSFTERzRB6JrX6cWKaS+VqhhY7cQUMCbO5kloFUw==
-"@types/estree@0.0.39":
+"@types/estree@*", "@types/estree@0.0.39":
version "0.0.39"
resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
@@ -1850,6 +1857,13 @@
dependencies:
"@types/node" "*"
+"@types/tern@*":
+ version "0.22.1"
+ resolved "https://registry.yarnpkg.com/@types/tern/-/tern-0.22.1.tgz#d96467553128794f42fbe7ba8f60b520acffb817"
+ integrity sha512-CRzPRkg8hYLwunsj61r+rqPJQbiCIEQqlMMY/0k7krgIsoSaFgGg1ZH2f9qaR1YpenaMl6PnlTtUkCbNH/uo+A==
+ dependencies:
+ "@types/estree" "*"
+
"@types/through@*":
version "0.0.29"
resolved "https://registry.yarnpkg.com/@types/through/-/through-0.0.29.tgz#72943aac922e179339c651fa34a4428a4d722f93"