mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Rename to hui-yaml-editor
This commit is contained in:
parent
20ecfffb9c
commit
d76ffd343e
@ -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",
|
||||
|
@ -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);
|
@ -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`
|
||||
<hui-code-editor
|
||||
<hui-yaml-editor
|
||||
.value="${this._configValue!.value}"
|
||||
@code-changed="${this._handleYamlChanged}"
|
||||
></hui-code-editor>
|
||||
@yaml-changed="${this._handleYamlChanged}"
|
||||
></hui-yaml-editor>
|
||||
`}
|
||||
</div>
|
||||
`;
|
||||
@ -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<void> {
|
||||
@ -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,
|
||||
|
@ -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 {
|
||||
</app-toolbar>
|
||||
</app-header>
|
||||
<div class="content">
|
||||
<hui-code-editor @code-changed="${this._yamlChanged}">
|
||||
</hui-code-editor>
|
||||
<hui-yaml-editor> </hui-yaml-editor>
|
||||
</div>
|
||||
</app-header-layout>
|
||||
`;
|
||||
}
|
||||
|
||||
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")!;
|
||||
}
|
||||
}
|
||||
|
||||
|
16
yarn.lock
16
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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user