From d76ffd343e3f8ef1a90d018f1aa5b557b596e0cd Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 28 Jan 2019 20:41:09 +0100 Subject: [PATCH] Rename to hui-yaml-editor --- package.json | 1 + ...{hui-code-editor.ts => hui-yaml-editor.ts} | 32 +++++++++++-------- .../editor/card-editor/hui-edit-card.ts | 24 ++++++++++---- src/panels/lovelace/hui-editor.ts | 23 +++++++------ yarn.lock | 16 +++++++++- 5 files changed, 63 insertions(+), 33 deletions(-) rename src/panels/lovelace/components/{hui-code-editor.ts => hui-yaml-editor.ts} (69%) 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"