Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate to codemirror 6 #8382

Merged
merged 9 commits into from
Feb 24, 2021
Merged

Migrate to codemirror 6 #8382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ed06668
Migrate to codemirror 6
bramkragten Feb 12, 2021
fbd01dc
Bump webpack
bramkragten Feb 24, 2021
da96a32
Update
bramkragten Feb 24, 2021
a3daac7
Restore on demand load
bramkragten Feb 24, 2021
25c828d
Seems to behave the same as the old with RTL...
bramkragten Feb 24, 2021
fdba354
lint
bramkragten Feb 24, 2021
43c4169
Add read only mode back
bramkragten Feb 24, 2021
d2259f0
lint
bramkragten Feb 24, 2021
63e225b
Comment
bramkragten Feb 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 14 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
241 changes: 76 additions & 165 deletions src/components/ha-code-editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -15,40 +16,47 @@ 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() {
super.connectedCallback();
if (!this.codemirror) {
return;
}
this.codemirror.refresh();
if (this.autofocus !== false) {
this.codemirror.focus();
}
Expand All @@ -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);
Expand All @@ -85,176 +103,69 @@ 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;
}
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 {
Expand Down
Loading