Make yaml editor scrollabel in RTL mode (#2706)

* Make yaml editor scrollabel in RTL mode

* Refactor

* Refactor scopped CSS

* Refactor

* Fixes

* Refactor

src/panels/lovelace/components/hui-yaml-editor.ts

@@ -3,7 +3,10 @@ import CodeMirror from "codemirror";
 import "codemirror/mode/yaml/yaml";
 // @ts-ignore
 import codeMirrorCSS from "codemirror/lib/codemirror.css";
+import { HomeAssistant } from "../../../types";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { computeRTL } from "../../../common/util/compute_rtl";
+
 declare global {
   interface HASSDomEvents {
     "yaml-changed": {
@@ -14,6 +17,7 @@ declare global {
 }
 
 export class HuiYamlEditor extends HTMLElement {
+  public _hass?: HomeAssistant;
   public codemirror: CodeMirror;
   private _value: string;
 
@@ -26,25 +30,40 @@ export class HuiYamlEditor extends HTMLElement {
     const shadowRoot = this.attachShadow({ mode: "open" });
     shadowRoot.innerHTML = `
             <style>
-               ${codeMirrorCSS}
-               .CodeMirror {
-                  height: var(--code-mirror-height, 300px);
-                  direction: var(--code-mirror-direction, ltr);
-                }
-                .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;
-                }
-                .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(--primary-text-color));
-                }
+              ${codeMirrorCSS}
+              .CodeMirror {
+                height: var(--code-mirror-height, 300px);
+                direction: var(--code-mirror-direction, ltr);
+              }
+              .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;
+              }
+              .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(--primary-text-color));
+              }
+
+              .rtl .CodeMirror-vscrollbar {
+                right: auto;
+                left: 0px;
+              }
+              .rtl-gutter {
+                width: 20px;
+              }
             </style>`;
   }
 
+  set hass(hass: HomeAssistant) {
+    this._hass = hass;
+    if (this._hass) {
+      this.setScrollBarDirection();
+    }
+  }
+
   set value(value: string) {
     if (this.codemirror) {
       if (value !== this.codemirror.getValue()) {
@@ -76,7 +95,12 @@ export class HuiYamlEditor extends HTMLElement {
             cm.replaceSelection(spaces);
           },
         },
+        gutters:
+          this._hass && computeRTL(this._hass!)
+            ? ["rtl-gutter", "CodeMirror-linenumbers"]
+            : [],
       });
+      this.setScrollBarDirection();
       this.codemirror.on("changes", () => this._onChange());
     } else {
       this.codemirror.refresh();
@@ -86,6 +110,16 @@ export class HuiYamlEditor extends HTMLElement {
   private _onChange(): void {
     fireEvent(this, "yaml-changed", { value: this.codemirror.getValue() });
   }
+
+  private setScrollBarDirection() {
+    if (!this.codemirror) {
+      return;
+    }
+
+    this.codemirror
+      .getWrapperElement()
+      .classList.toggle("rtl", computeRTL(this._hass!));
+  }
 }
 
 declare global {

src/panels/lovelace/editor/card-editor/hui-edit-card.ts

@@ -119,6 +119,7 @@ export class HuiEditCard extends LitElement {
             ? this._configElement
             : html`
                 <hui-yaml-editor
+                  .hass="${this.hass}"
                   .value="${this._configValue!.value}"
                   @yaml-changed="${this._handleYamlChanged}"
                   @yaml-save="${this._save}"

src/panels/lovelace/ha-panel-lovelace.ts

@@ -95,6 +95,7 @@ class LovelacePanel extends LitElement {
     if (state === "yaml-editor") {
       return html`
         <hui-editor
+          .hass="${this.hass}"
           .lovelace="${this.lovelace}"
           .closeEditor="${this._closeEditor}"
         ></hui-editor>

src/panels/lovelace/hui-editor.ts

@@ -18,6 +18,7 @@ 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 { HomeAssistant } from "../../types";
 
 const lovelaceStruct = struct.interface({
   title: "string?",
@@ -26,6 +27,7 @@ const lovelaceStruct = struct.interface({
 });
 
 class LovelaceFullConfigEditor extends LitElement {
+  public hass?: HomeAssistant;
   public lovelace?: Lovelace;
   public closeEditor?: () => void;
   private _saving?: boolean;
@@ -34,6 +36,7 @@ class LovelaceFullConfigEditor extends LitElement {
 
   static get properties() {
     return {
+      hass: {},
       lovelace: {},
       _saving: {},
       _changed: {},
@@ -62,6 +65,7 @@ class LovelaceFullConfigEditor extends LitElement {
         </app-header>
         <div class="content">
           <hui-yaml-editor
+            .hass="${this.hass}"
             @yaml-changed="${this._yamlChanged}"
             @yaml-save="${this._handleSave}"
           >
@@ -102,7 +106,6 @@ class LovelaceFullConfigEditor extends LitElement {
 
         .content {
           height: calc(100vh - 68px);
-          direction: ltr;
         }
 
         hui-code-editor {