jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-25 13:57:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to codemirror 6 (#8382)

Browse Source
This commit is contained in:
Bram Kragten 2021-02-24 19:16:54 +01:00 committed by GitHub
parent 0f574a765b
commit bde925a0e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 752 additions and 559 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
package.json
View File

@ -23,6 +23,14 @@
"license": "Apache-2.0",
"dependencies": {
"@braintree/sanitize-url": "^5.0.0",
"@codemirror/commands": "^0.17.2",
"@codemirror/gutter": "^0.17.2",
"@codemirror/highlight": "^0.17.2",
"@codemirror/legacy-modes": "^0.17.1",
"@codemirror/state": "^0.17.1",
"@codemirror/stream-parser": "^0.17.1",
"@codemirror/text": "^0.17.2",
"@codemirror/view": "^0.17.7",
"@formatjs/intl-getcanonicallocales": "^1.4.6",
"@formatjs/intl-pluralrules": "^3.4.10",
"@fullcalendar/common": "5.1.0",
@ -177,7 +185,7 @@
"eslint": "^6.8.0",
"eslint-config-airbnb-typescript": "^7.2.1",
"eslint-config-prettier": "^6.10.1",
"eslint-import-resolver-webpack": "^0.12.2",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-plugin-disable": "^2.0.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-lit": "^1.2.0",
@ -213,16 +221,16 @@
"sinon": "^7.3.1",
"source-map-url": "^0.4.0",
"systemjs": "^6.3.2",
"terser-webpack-plugin": "^5.0.0",
"terser-webpack-plugin": "^5.1.1",
"ts-lit-plugin": "^1.2.1",
"ts-mocha": "^7.0.0",
"typescript": "^4.0.3",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0",
"webpack": "5.1.3",
"webpack-cli": "4.1.0",
"webpack-dev-server": "^3.11.0",
"webpack-manifest-plugin": "~3.0.0",
"webpack": "^5.24.1",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2",
"webpack-manifest-plugin": "^3.0.0",
"workbox-build": "^5.1.3"
},
"_comment": "Polymer fixed to 3.1 because 3.2 throws on logbook page",

241
src/components/ha-code-editor.ts
View File

@ -1,4 +1,5 @@
import { Editor } from "codemirror";
import type { StreamLanguage } from "@codemirror/stream-parser";
import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
import {
customElement,
internalProperty,
@ -15,32 +16,40 @@ declare global {
}
}
const modeTag = Symbol("mode");
const readOnlyTag = Symbol("readOnly");
const saveKeyBinding: KeyBinding = {
key: "Mod-s",
run: (view: EditorView) => {
fireEvent(view.dom, "editor-save");
return true;
},
};
@customElement("ha-code-editor")
export class HaCodeEditor extends UpdatingElement {
public codemirror?: Editor;
public codemirror?: EditorView;
@property() public mode?: string;
@property() public mode = "yaml";
@property({ type: Boolean }) public autofocus = false;
@property({ type: Boolean }) public readOnly = false;
@property() public rtl = false;
@property() public error = false;
@internalProperty() private _value = "";
@internalProperty() private _langs?: Record<string, StreamLanguage<unknown>>;
public set value(value: string) {
this._value = value;
}
public get value(): string {
return this.codemirror ? this.codemirror.getValue() : this._value;
}
public get hasComments(): boolean {
return !!this.shadowRoot!.querySelector("span.cm-comment");
return this.codemirror ? this.codemirror.state.doc.toString() : this._value;
}
public connectedCallback() {
@ -48,7 +57,6 @@ export class HaCodeEditor extends UpdatingElement {
if (!this.codemirror) {
return;
}
this.codemirror.refresh();
if (this.autofocus !== false) {
this.codemirror.focus();
}
@ -62,17 +70,27 @@ export class HaCodeEditor extends UpdatingElement {
}
if (changedProps.has("mode")) {
this.codemirror.setOption("mode", this.mode);
this.codemirror.dispatch({
reconfigure: {
[modeTag]: this._mode,
},
});
}
if (changedProps.has("autofocus")) {
this.codemirror.setOption("autofocus", this.autofocus !== false);
if (changedProps.has("readOnly")) {
this.codemirror.dispatch({
reconfigure: {
[readOnlyTag]: !this.readOnly,
},
});
}
if (changedProps.has("_value") && this._value !== this.value) {
this.codemirror.setValue(this._value);
}
if (changedProps.has("rtl")) {
this.codemirror.setOption("gutters", this._calcGutters());
this._setScrollBarDirection();
this.codemirror.dispatch({
changes: {
from: 0,
to: this.codemirror.state.doc.length,
insert: this._value,
},
});
}
if (changedProps.has("error")) {
this.classList.toggle("error-state", this.error);
@ -85,159 +103,62 @@ export class HaCodeEditor extends UpdatingElement {
this._load();
}
private get _mode() {
return this._langs![this.mode];
}
private async _load(): Promise<void> {
const loaded = await loadCodeMirror();
const codeMirror = loaded.codeMirror;
this._langs = loaded.langs;
const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot!.innerHTML = `
<style>
${loaded.codeMirrorCss}
.CodeMirror {
height: var(--code-mirror-height, auto);
direction: var(--code-mirror-direction, ltr);
font-family: var(--code-font-family, monospace);
}
.CodeMirror-scroll {
max-height: var(--code-mirror-max-height, --code-mirror-height);
}
:host(.error-state) .CodeMirror-gutters {
shadowRoot!.innerHTML = `<style>
:host(.error-state) div.cm-wrap .cm-gutters {
border-color: var(--error-state-color, red);
}
.CodeMirror-focused .CodeMirror-gutters {
border-right: 2px solid var(--paper-input-container-focus-color, var(--primary-color));
}
.CodeMirror-linenumber {
color: var(--paper-dialog-color, var(--secondary-text-color));
}
.rtl .CodeMirror-vscrollbar {
right: auto;
left: 0px;
}
.rtl-gutter {
width: 20px;
}
.CodeMirror-gutters {
border-right: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
background-color: var(--paper-dialog-background-color, var(--primary-background-color));
transition: 0.2s ease border-right;
}
.cm-s-default.CodeMirror {
background-color: var(--code-editor-background-color, var(--card-background-color));
color: var(--primary-text-color);
}
.cm-s-default .CodeMirror-cursor {
border-left: 1px solid var(--secondary-text-color);
}
.cm-s-default div.CodeMirror-selected, .cm-s-default.CodeMirror-focused div.CodeMirror-selected {
background: rgba(var(--rgb-primary-color), 0.2);
}
.cm-s-default .CodeMirror-line::selection,
.cm-s-default .CodeMirror-line>span::selection,
.cm-s-default .CodeMirror-line>span>span::selection {
background: rgba(var(--rgb-primary-color), 0.2);
}
.cm-s-default .cm-keyword {
color: var(--codemirror-keyword, #6262FF);
}
.cm-s-default .cm-operator {
color: var(--codemirror-operator, #cda869);
}
.cm-s-default .cm-variable-2 {
color: var(--codemirror-variable-2, #690);
}
.cm-s-default .cm-builtin {
color: var(--codemirror-builtin, #9B7536);
}
.cm-s-default .cm-atom {
color: var(--codemirror-atom, #F90);
}
.cm-s-default .cm-number {
color: var(--codemirror-number, #ca7841);
}
.cm-s-default .cm-def {
color: var(--codemirror-def, #8DA6CE);
}
.cm-s-default .cm-string {
color: var(--codemirror-string, #07a);
}
.cm-s-default .cm-string-2 {
color: var(--codemirror-string-2, #bd6b18);
}
.cm-s-default .cm-comment {
color: var(--codemirror-comment, #777);
}
.cm-s-default .cm-variable {
color: var(--codemirror-variable, #07a);
}
.cm-s-default .cm-tag {
color: var(--codemirror-tag, #997643);
}
.cm-s-default .cm-meta {
color: var(--codemirror-meta, var(--primary-text-color));
}
.cm-s-default .cm-attribute {
color: var(--codemirror-attribute, #d6bb6d);
}
.cm-s-default .cm-property {
color: var(--codemirror-property, #905);
}
.cm-s-default .cm-qualifier {
color: var(--codemirror-qualifier, #690);
}
.cm-s-default .cm-variable-3 {
color: var(--codemirror-variable-3, #07a);
}
.cm-s-default .cm-type {
color: var(--codemirror-type, #07a);
}
</style>`;
this.codemirror = codeMirror(shadowRoot, {
value: this._value,
lineNumbers: true,
tabSize: 2,
mode: this.mode,
autofocus: this.autofocus !== false,
viewportMargin: Infinity,
readOnly: this.readOnly,
extraKeys: {
Tab: "indentMore",
"Shift-Tab": "indentLess",
},
gutters: this._calcGutters(),
const container = document.createElement("span");
shadowRoot.appendChild(container);
this.codemirror = new loaded.EditorView({
state: loaded.EditorState.create({
doc: this._value,
extensions: [
loaded.lineNumbers(),
loaded.keymap.of([
...loaded.defaultKeymap,
loaded.defaultTabBinding,
saveKeyBinding,
]),
loaded.tagExtension(modeTag, this._mode),
loaded.theme,
loaded.Prec.fallback(loaded.highlightStyle),
loaded.EditorView.updateListener.of((update) =>
this._onUpdate(update)
),
loaded.tagExtension(
readOnlyTag,
loaded.EditorView.editable.of(!this.readOnly)
),
],
}),
root: shadowRoot,
parent: container,
});
this._setScrollBarDirection();
this.codemirror!.on("changes", () => this._onChange());
}
private _blockKeyboardShortcuts() {
this.addEventListener("keydown", (ev) => ev.stopPropagation());
}
private _onChange(): void {
private _onUpdate(update: ViewUpdate): void {
if (!update.docChanged) {
return;
}
const newValue = this.value;
if (newValue === this._value) {
return;
@ -245,16 +166,6 @@ export class HaCodeEditor extends UpdatingElement {
this._value = newValue;
fireEvent(this, "value-changed", { value: this._value });
}
private _calcGutters(): string[] {
return this.rtl ? ["rtl-gutter", "CodeMirror-linenumbers"] : [];
}
private _setScrollBarDirection(): void {
if (this.codemirror) {
this.codemirror.getWrapperElement().classList.toggle("rtl", this.rtl);
}
}
}
declare global {

18
src/components/ha-yaml-editor.ts
View File

@ -5,20 +5,10 @@ import {
internalProperty,
LitElement,
property,
query,
TemplateResult,
} from "lit-element";
import { fireEvent } from "../common/dom/fire_event";
import { afterNextRender } from "../common/util/render-status";
import "./ha-code-editor";
import type { HaCodeEditor } from "./ha-code-editor";
declare global {
// for fire event
interface HASSDomEvents {
"editor-refreshed": undefined;
}
}
const isEmpty = (obj: Record<string, unknown>): boolean => {
if (typeof obj !== "object") {
@ -44,8 +34,6 @@ export class HaYamlEditor extends LitElement {
@internalProperty() private _yaml = "";
@query("ha-code-editor") private _editor?: HaCodeEditor;
public setValue(value): void {
try {
this._yaml = value && !isEmpty(value) ? safeDump(value) : "";
@ -54,12 +42,6 @@ export class HaYamlEditor extends LitElement {
console.error(err, value);
alert(`There was an error converting to YAML: ${err}`);
}
afterNextRender(() => {
if (this._editor?.codemirror) {
this._editor.codemirror.refresh();
}
afterNextRender(() => fireEvent(this, "editor-refreshed"));
});
}
protected firstUpdated(): void {

2
src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
View File

@ -282,7 +282,7 @@ export class HuiDialogEditCard extends LitElement
}
private _opened() {
this._cardEditorEl?.refreshYamlEditor();
this._cardEditorEl?.focusYamlEditor();
}
private get _canSave(): boolean {

4
src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
View File

@ -61,8 +61,8 @@ export class HuiConditionalCardEditor extends LitElement
this._config = config;
}
public refreshYamlEditor(focus) {
this._cardEditorEl?.refreshYamlEditor(focus);
public focusYamlEditor() {
this._cardEditorEl?.focusYamlEditor();
}
protected render(): TemplateResult {

4
src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
View File

@ -54,8 +54,8 @@ export class HuiStackCardEditor extends LitElement
this._config = config;
}
public refreshYamlEditor(focus) {
this._cardEditorEl?.refreshYamlEditor(focus);
public focusYamlEditor() {
this._cardEditorEl?.focusYamlEditor();
}
protected render(): TemplateResult {

13
src/panels/lovelace/editor/hui-element-editor.ts
View File

@ -157,17 +157,14 @@ export abstract class HuiElementEditor<T> extends LitElement {
this.GUImode = !this.GUImode;
}
public refreshYamlEditor(focus = false) {
if (this._configElement?.refreshYamlEditor) {
this._configElement.refreshYamlEditor(focus);
public focusYamlEditor() {
if (this._configElement?.focusYamlEditor) {
this._configElement.focusYamlEditor();
}
if (!this._yamlEditor?.codemirror) {
return;
}
this._yamlEditor.codemirror.refresh();
if (focus) {
this._yamlEditor.codemirror.focus();
}
this._yamlEditor.codemirror.focus();
}
protected async getConfigElement(): Promise<
@ -290,7 +287,7 @@ export abstract class HuiElementEditor<T> extends LitElement {
if (this._configElementType !== this.configElementType) {
// If the type has changed, we need to load a new GUI editor
this._guiSupported = false;
this._guiSupported = undefined;
this._configElement = undefined;
if (!this.configElementType) {

21
src/panels/lovelace/hui-editor.ts
View File

@ -47,8 +47,6 @@ class LovelaceFullConfigEditor extends LitElement {
@internalProperty() private _changed?: boolean;
private _generation = 1;
protected render(): TemplateResult | void {
return html`
<ha-app-layout>
@ -133,11 +131,7 @@ class LovelaceFullConfigEditor extends LitElement {
}
.content {
height: calc(100vh - 68px);
}
hui-code-editor {
height: 100%;
height: calc(100vh - var(--header-height));
}
.save-button {
@ -154,15 +148,11 @@ class LovelaceFullConfigEditor extends LitElement {
}
private _yamlChanged() {
this._changed = !this.yamlEditor
.codemirror!.getDoc()
.isClean(this._generation);
if (this._changed && !window.onbeforeunload) {
this._changed = true;
if (!window.onbeforeunload) {
window.onbeforeunload = () => {
return true;
};
} else if (!this._changed && window.onbeforeunload) {
window.onbeforeunload = null;
}
}
@ -224,7 +214,7 @@ class LovelaceFullConfigEditor extends LitElement {
return;
}
if (this.yamlEditor.hasComments) {
if (/^#|\s#/gm.test(value)) {
if (
!confirm(
this.hass.localize(
@ -281,9 +271,6 @@ class LovelaceFullConfigEditor extends LitElement {
),
});
}
this._generation = this.yamlEditor
.codemirror!.getDoc()
.changeGeneration(true);
window.onbeforeunload = null;
this._saving = false;
this._changed = false;

2
src/panels/lovelace/types.ts
View File

@ -86,5 +86,5 @@ export interface LovelaceGenericElementEditor extends HTMLElement {
hass?: HomeAssistant;
lovelace?: LovelaceConfig;
setConfig(config: any): void;
refreshYamlEditor?: (focus: boolean) => void;
focusYamlEditor?: () => void;
}

11
src/resources/codemirror.ondemand.ts
View File

@ -1,11 +1,8 @@
interface LoadedCodeMirror {
codeMirror: any;
codeMirrorCss: any;
}
let loaded: Promise<typeof import("./codemirror")>;
let loaded: Promise<LoadedCodeMirror>;
export const loadCodeMirror = async (): Promise<LoadedCodeMirror> => {
export const loadCodeMirror = async (): Promise<
typeof import("./codemirror")
> => {
if (!loaded) {
loaded = import("./codemirror");
}

132
src/resources/codemirror.ts
View File

@ -1,14 +1,122 @@
// @ts-ignore
import _CodeMirror, { Editor } from "codemirror";
// @ts-ignore
import _codeMirrorCss from "codemirror/lib/codemirror.css";
import "codemirror/mode/jinja2/jinja2";
import "codemirror/mode/yaml/yaml";
import { fireEvent } from "../common/dom/fire_event";
import { HighlightStyle, tags } from "@codemirror/highlight";
import { EditorView as CMEditorView } from "@codemirror/view";
import { StreamLanguage } from "@codemirror/stream-parser";
import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2";
import { yaml } from "@codemirror/legacy-modes/mode/yaml";
// @ts-ignore
_CodeMirror.commands.save = (cm: Editor) => {
fireEvent(cm.getWrapperElement(), "editor-save");
export { keymap } from "@codemirror/view";
export { CMEditorView as EditorView };
export { EditorState, Prec, tagExtension } from "@codemirror/state";
export { defaultKeymap, defaultTabBinding } from "@codemirror/commands";
export { lineNumbers } from "@codemirror/gutter";
export const langs = {
jinja2: StreamLanguage.define(jinja2),
yaml: StreamLanguage.define(yaml),
};
export const codeMirror: any = _CodeMirror;
export const codeMirrorCss: any = _codeMirrorCss;
export const theme = CMEditorView.theme({
$: {
color: "var(--primary-text-color)",
backgroundColor:
"var(--code-editor-background-color, var(--card-background-color))",
"& ::selection": { backgroundColor: "rgba(var(--rgb-primary-color), 0.2)" },
caretColor: "var(--secondary-text-color)",
height: "var(--code-mirror-height, auto)",
},
$$focused: { outline: "none" },
"$$focused $cursor": { borderLeftColor: "#var(--secondary-text-color)" },
"$$focused $selectionBackground, $selectionBackground": {
backgroundColor: "rgba(var(--rgb-primary-color), 0.2)",
},
$gutters: {
backgroundColor:
"var(--paper-dialog-background-color, var(--primary-background-color))",
color: "var(--paper-dialog-color, var(--secondary-text-color))",
border: "none",
borderRight:
"1px solid var(--paper-input-container-color, var(--secondary-text-color))",
},
"$$focused $gutters": {
borderRight:
"2px solid var(--paper-input-container-focus-color, var(--primary-color))",
},
"$gutterElementags.lineNumber": { color: "inherit" },
});
export const highlightStyle = HighlightStyle.define(
{ tag: tags.keyword, color: "var(--codemirror-keyword, #6262FF)" },
{
tag: [
tags.name,
tags.deleted,
tags.character,
tags.propertyName,
tags.macroName,
],
color: "var(--codemirror-property, #905)",
},
{
tag: [tags.function(tags.variableName), tags.labelName],
color: "var(--codemirror-variable, #07a)",
},
{
tag: [tags.color, tags.constant(tags.name), tags.standard(tags.name)],
color: "var(--codemirror-qualifier, #690)",
},
{
tag: [tags.definition(tags.name), tags.separator],
color: "var(--codemirror-def, #8DA6CE)",
},
{
tag: [
tags.typeName,
tags.className,
tags.number,
tags.changed,
tags.annotation,
tags.modifier,
tags.self,
tags.namespace,
],
color: "var(--codemirror-number, #ca7841)",
},
{
tag: [
tags.operator,
tags.operatorKeyword,
tags.url,
tags.escape,
tags.regexp,
tags.link,
tags.special(tags.string),
],
color: "var(--codemirror-operator, #cda869)",
},
{ tag: tags.comment, color: "var(--codemirror-comment, #777)" },
{
tag: tags.meta,
color: "var(--codemirror-meta, var(--primary-text-color))",
},
{ tag: tags.strong, fontWeight: "bold" },
{ tag: tags.emphasis, fontStyle: "italic" },
{
tag: tags.link,
color: "var(--primary-color)",
textDecoration: "underline",
},
{ tag: tags.heading, fontWeight: "bold" },
{ tag: tags.atom, color: "var(--codemirror-atom, #F90)" },
{ tag: tags.bool, color: "var(--codemirror-atom, #F90)" },
{
tag: tags.special(tags.variableName),
color: "var(--codemirror-variable-2, #690)",
},
{ tag: tags.processingInstruction, color: "var(--secondary-text-color)" },
{ tag: tags.string, color: "var(--codemirror-string, #07a)" },
{ tag: tags.inserted, color: "var(--codemirror-string2, #07a)" },
{ tag: tags.invalid, color: "var(--error-color)" }
);

2
src/translations/en.json
View File

@ -2652,7 +2652,7 @@
"confirm_remove_config_title": "Are you sure you want to remove your Lovelace UI configuration?",
"confirm_remove_config_text": "We will automatically generate your Lovelace UI views with your areas and devices if you remove your Lovelace UI configuration.",
"confirm_unsaved_changes": "You have unsaved changes, are you sure you want to exit?",
"confirm_unsaved_comments": "Your configuration contains comment(s), these will not be saved. Do you want to continue?",
"confirm_unsaved_comments": "Your configuration might contains comment(s), these will not be saved. Do you want to continue?",
"error_parse_yaml": "Unable to parse YAML: {error}",
"error_invalid_config": "Your configuration is not valid: {error}",
"error_save_yaml": "Unable to save YAML: {error}",

841
yarn.lock
View File

File diff suppressed because it is too large Load Diff