Bump @codemirror packages to version 6.x (#14969)

home-assistant · Jan 4, 2023 · 616bced · 616bced
1 parent 1585c6b
commit 616bced
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 218 deletions.
diff --git a/package.json b/package.json
@@ -25,18 +25,13 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.0",
-    "@codemirror/autocomplete": "^0.19.12",
-    "@codemirror/commands": "^0.19.8",
-    "@codemirror/gutter": "^0.19.9",
-    "@codemirror/highlight": "^0.19.7",
-    "@codemirror/history": "^0.19.2",
-    "@codemirror/legacy-modes": "^0.19.0",
-    "@codemirror/rectangular-selection": "^0.19.1",
-    "@codemirror/search": "^0.19.6",
-    "@codemirror/state": "^0.19.6",
-    "@codemirror/stream-parser": "^0.19.5",
-    "@codemirror/text": "^0.19.6",
-    "@codemirror/view": "^0.19.40",
+    "@codemirror/autocomplete": "^6.4.0",
+    "@codemirror/commands": "^6.1.3",
+    "@codemirror/language": "^6.3.2",
+    "@codemirror/legacy-modes": "^6.3.1",
+    "@codemirror/search": "^6.2.3",
+    "@codemirror/state": "^6.2.0",
+    "@codemirror/view": "^6.7.1",
     "@formatjs/intl-datetimeformat": "^4.2.5",
     "@formatjs/intl-getcanonicallocales": "^1.8.0",
     "@formatjs/intl-locale": "^2.4.40",
@@ -49,6 +44,7 @@
     "@fullcalendar/interaction": "5.9.0",
     "@fullcalendar/list": "5.9.0",
     "@fullcalendar/timegrid": "5.9.0",
+    "@lezer/highlight": "^1.1.3",
     "@lit-labs/motion": "^1.0.2",
     "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.7.0-pre.2#./.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch",
     "@material/chips": "14.0.0-canary.261f2db59.0",

diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts
@@ -4,6 +4,7 @@ import type {
   CompletionResult,
   CompletionSource,
 } from "@codemirror/autocomplete";
+import type { Extension } from "@codemirror/state";
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
 import { HassEntities } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, PropertyValues, ReactiveElement } from "lit";
@@ -72,9 +73,9 @@ export class HaCodeEditor extends ReactiveElement {
     if (!this.codemirror || !this._loadedCodeMirror) {
       return false;
     }
-    const className = this._loadedCodeMirror.HighlightStyle.get(
+    const className = this._loadedCodeMirror.highlightingFor(
       this.codemirror.state,
-      this._loadedCodeMirror.tags.comment
+      [this._loadedCodeMirror.tags.comment]
     );
     return !!this.shadowRoot!.querySelector(`span.${className}`);
   }
@@ -136,7 +137,7 @@ export class HaCodeEditor extends ReactiveElement {
 
   private async _load(): Promise<void> {
     this._loadedCodeMirror = await loadCodeMirror();
-    const extensions = [
+    const extensions: Extension[] = [
       this._loadedCodeMirror.lineNumbers(),
       this._loadedCodeMirror.EditorState.allowMultipleSelections.of(true),
       this._loadedCodeMirror.history(),
@@ -152,10 +153,8 @@ export class HaCodeEditor extends ReactiveElement {
         saveKeyBinding,
       ] as KeyBinding[]),
       this._loadedCodeMirror.langCompartment.of(this._mode),
-      this._loadedCodeMirror.theme,
-      this._loadedCodeMirror.Prec.fallback(
-        this._loadedCodeMirror.highlightStyle
-      ),
+      this._loadedCodeMirror.haTheme,
+      this._loadedCodeMirror.haSyntaxHighlighting,
       this._loadedCodeMirror.readonlyCompartment.of(
         this._loadedCodeMirror.EditorView.editable.of(!this.readOnly)
       ),
@@ -227,7 +226,7 @@ export class HaCodeEditor extends ReactiveElement {
     return {
       from: Number(entityWord.from),
       options: states,
-      span: /^[a-z_]{3,}\.\w*$/,
+      validFor: /^[a-z_]{3,}\.\w*$/,
     };
   }
 
@@ -268,7 +267,7 @@ export class HaCodeEditor extends ReactiveElement {
     return {
       from: Number(match.from),
       options: iconItems,
-      span: /^mdi:\S*$/,
+      validFor: /^mdi:\S*$/,
     };
   }
 

diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts
@@ -1,4 +1,4 @@
-import { undoDepth } from "@codemirror/history";
+import { undoDepth } from "@codemirror/commands";
 import "@material/mwc-button";
 import { mdiClose } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";

diff --git a/src/resources/codemirror.ts b/src/resources/codemirror.ts
@@ -1,25 +1,29 @@
 import { indentLess, indentMore } from "@codemirror/commands";
-import { HighlightStyle, tags } from "@codemirror/highlight";
+import {
+  HighlightStyle,
+  StreamLanguage,
+  syntaxHighlighting,
+} from "@codemirror/language";
 import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2";
 import { yaml } from "@codemirror/legacy-modes/mode/yaml";
 import { Compartment } from "@codemirror/state";
-import { StreamLanguage } from "@codemirror/stream-parser";
 import { EditorView, KeyBinding } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
 
-export { defaultKeymap } from "@codemirror/commands";
-export { lineNumbers } from "@codemirror/gutter";
-export { HighlightStyle, tags } from "@codemirror/highlight";
-export { history, historyKeymap } from "@codemirror/history";
-export { rectangularSelection } from "@codemirror/rectangular-selection";
-export { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
-export { EditorState, Prec } from "@codemirror/state";
 export { autocompletion } from "@codemirror/autocomplete";
+export { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+export { highlightingFor } from "@codemirror/language";
+export { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+export { EditorState } from "@codemirror/state";
 export {
   drawSelection,
   EditorView,
   highlightActiveLine,
   keymap,
+  lineNumbers,
+  rectangularSelection,
 } from "@codemirror/view";
+export { tags } from "@lezer/highlight";
 
 export const langs = {
   jinja2: StreamLanguage.define(jinja2),
@@ -37,7 +41,7 @@ export const tabKeyBindings: KeyBinding[] = [
   },
 ];
 
-export const theme = EditorView.theme({
+export const haTheme = EditorView.theme({
   "&": {
     color: "var(--primary-text-color)",
     backgroundColor:
@@ -186,7 +190,7 @@ export const theme = EditorView.theme({
   ".cm-gutterElement.lineNumber": { color: "inherit" },
 });
 
-export const highlightStyle = HighlightStyle.define([
+const haHighlightStyle = HighlightStyle.define([
   { tag: tags.keyword, color: "var(--codemirror-keyword, #6262FF)" },
   {
     tag: [
@@ -259,3 +263,5 @@ export const highlightStyle = HighlightStyle.define([
   { tag: tags.inserted, color: "var(--codemirror-string2, #07a)" },
   { tag: tags.invalid, color: "var(--error-color)" },
 ]);
+
+export const haSyntaxHighlighting = syntaxHighlighting(haHighlightStyle);