Improve code mirror comments check (#8585)

package.json

@@ -25,7 +25,7 @@
     "@braintree/sanitize-url": "^5.0.0",
     "@codemirror/commands": "^0.18.0",
     "@codemirror/gutter": "^0.18.0",
-    "@codemirror/highlight": "^0.18.1",
+    "@codemirror/highlight": "^0.18.0",
     "@codemirror/history": "^0.18.0",
     "@codemirror/legacy-modes": "^0.18.0",
     "@codemirror/rectangular-selection": "^0.18.0",

src/components/ha-code-editor.ts

@@ -47,6 +47,17 @@ export class HaCodeEditor extends UpdatingElement {
     return this.codemirror ? this.codemirror.state.doc.toString() : this._value;
   }
 
+  public get hasComments(): boolean {
+    if (!this.codemirror || !this._loadedCodeMirror) {
+      return false;
+    }
+    const className = this._loadedCodeMirror.HighlightStyle.get(
+      this.codemirror.state,
+      this._loadedCodeMirror.tags.comment
+    );
+    return !!this.shadowRoot!.querySelector(`span.${className}`);
+  }
+
   public connectedCallback() {
     super.connectedCallback();
     if (!this.codemirror) {

src/panels/lovelace/hui-editor.ts

@@ -248,7 +248,7 @@ class LovelaceFullConfigEditor extends LitElement {
       return;
     }
 
-    if (/^#|\s#/gm.test(value)) {
+    if (this.yamlEditor.hasComments) {
       if (
         !confirm(
           this.hass.localize(

src/resources/codemirror.ts

@@ -1,19 +1,24 @@
 import { HighlightStyle, tags } from "@codemirror/highlight";
-import { EditorView as CMEditorView, KeyBinding } from "@codemirror/view";
+import { EditorView, KeyBinding } 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";
 import { indentLess, indentMore } from "@codemirror/commands";
 import { Compartment } from "@codemirror/state";
 
-export { keymap, highlightActiveLine, drawSelection } from "@codemirror/view";
+export {
-export { CMEditorView as EditorView };
+  keymap,
+  highlightActiveLine,
+  drawSelection,
+  EditorView,
+} from "@codemirror/view";
 export { EditorState, Prec } from "@codemirror/state";
 export { defaultKeymap } from "@codemirror/commands";
 export { lineNumbers } from "@codemirror/gutter";
 export { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
 export { history, historyKeymap } from "@codemirror/history";
 export { rectangularSelection } from "@codemirror/rectangular-selection";
+export { HighlightStyle, tags } from "@codemirror/highlight";
 
 export const langs = {
   jinja2: StreamLanguage.define(jinja2),
@@ -31,7 +36,7 @@ export const tabKeyBindings: KeyBinding[] = [
   },
 ];
 
-export const theme = CMEditorView.theme({
+export const theme = EditorView.theme({
   "&": {
     color: "var(--primary-text-color)",
     backgroundColor:
@@ -133,7 +138,7 @@ export const theme = CMEditorView.theme({
       "2px solid var(--paper-input-container-focus-color, var(--primary-color))",
     paddingRight: "0",
   },
-  ".cm-gutterElementags.lineNumber": { color: "inherit" },
+  ".cm-gutterElement.lineNumber": { color: "inherit" },
 });
 
 export const highlightStyle = HighlightStyle.define([

yarn.lock

@@ -1926,10 +1926,10 @@
     "@codemirror/state" "^0.18.0"
     "@codemirror/view" "^0.18.0"
 
-"@codemirror/highlight@^0.18.0", "@codemirror/highlight@^0.18.1":
+"@codemirror/highlight@^0.18.0":
-  version "0.18.1"
+  version "0.18.3"
-  resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.18.1.tgz#9ba1e842dd149b9985ee48cfdbeff6ef191378bb"
+  resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.18.3.tgz#50e268630f113c322a2dc97c9f68d71934fffcb0"
-  integrity sha512-SBbz6hS7/vUrgeiwTBByx/UXY8+Tkdyk7/CUq+XfgGUwPXpK8+llzBlQHa4mov46f/wAy1qoj0uobfgSjcvEpQ==
+  integrity sha512-NmRmkmWl8ht6Y6Y39ghov84AMPCqhUPIH9fmILs2NaWxZFZf4jGCTzrULnmREGsTie+26+LbKUncIU+PBu1Qng==
   dependencies:
     "@codemirror/language" "^0.18.0"
     "@codemirror/rangeset" "^0.18.0"
@@ -2035,9 +2035,9 @@
   integrity sha512-HMzHNIAbjCiCf3tEJMRg6ul01KPuXxQGNiHlHgAnqPguq/CX+L4Nvj5JlWQAI91Pupk18zhmM1c6eaazX4YeTg==
 
 "@codemirror/view@^0.18.0":
-  version "0.18.0"
+  version "0.18.1"
-  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-0.18.0.tgz#3bbb95d71fd526460acb0de724846851d0f7137c"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-0.18.1.tgz#5fbc97acd28997ed2aafbe6e8d48d9446b4bf5ff"
-  integrity sha512-+ll9SL8dIAvaI4OMv4wZWRrW6AGUY45Al5L88KIp+bd1jFKYO1cu21UXAG25EvqYInZ4ctc6el0vYRP9A+VOrw==
+  integrity sha512-chyy+oEnywKMUFDMafVAMcrV+DkjJT3l6pSfN1cvM2LBM/eY54gekv/aXtmsBFRSnd+u09mhjb/kGB+EdNHIjg==
   dependencies:
     "@codemirror/rangeset" "^0.18.0"
     "@codemirror/state" "^0.18.0"