Missing translation, code editor make ltr, checkbox alignment in rtl (#11419)

src/components/ha-yaml-editor.ts

@@ -60,6 +60,7 @@ export class HaYamlEditor extends LitElement {
         mode="yaml"
         .error=${this.isValid === false}
         @value-changed=${this._onChange}
+        dir="ltr"
       ></ha-code-editor>
     `;
   }

src/components/trace/ha-trace-blueprint-config.ts

@@ -17,6 +17,7 @@ export class HaTraceBlueprintConfig extends LitElement {
       <ha-code-editor
         .value=${dump(this.trace.blueprint_inputs || "").trimRight()}
         readOnly
+        dir="ltr"
       ></ha-code-editor>
     `;
   }

src/components/trace/ha-trace-config.ts

@@ -17,6 +17,7 @@ export class HaTraceConfig extends LitElement {
       <ha-code-editor
         .value=${dump(this.trace.config).trimRight()}
         readOnly
+        dir="ltr"
       ></ha-code-editor>
     `;
   }

src/components/trace/ha-trace-path-details.ts

@@ -150,6 +150,7 @@ export class HaTracePathDetails extends LitElement {
       ? html`<ha-code-editor
           .value=${dump(config).trimRight()}
           readOnly
+          dir="ltr"
         ></ha-code-editor>`
       : "Unable to find config";
   }

src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts

@@ -61,6 +61,7 @@ class HaPanelDevMqtt extends LitElement {
                 mode="jinja2"
                 .value=${this.payload}
                 @value-changed=${this._handlePayload}
+                dir="ltr"
               ></ha-code-editor>
             </div>
             <div class="card-actions">

src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts

@@ -42,7 +42,12 @@ class DialogZHADeviceZigbeeInfo extends LitElement {
           this.hass.localize(`ui.dialogs.zha_device_info.device_signature`)
         )}
       >
-        <ha-code-editor mode="yaml" readonly .value=${this._signature}>
+        <ha-code-editor
+          mode="yaml"
+          readonly
+          .value=${this._signature}
+          dir="ltr"
+        >
         </ha-code-editor>
       </ha-dialog>
     `;

src/panels/developer-tools/event/developer-tools-event.js

@@ -94,6 +94,7 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
               value="[[eventData]]"
               error="[[!validJSON]]"
               on-value-changed="_yamlChanged"
+              dir="ltr"
             ></ha-code-editor>
           </div>
           <mwc-button on-click="fireEvent" raised disabled="[[!validJSON]]"

src/panels/developer-tools/state/developer-tools-state.js

@@ -85,6 +85,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
         :host([rtl]) .entities th {
           text-align: right;
+          direction: rtl;
         }
 
         .entities tr {
@@ -145,7 +146,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         [[localize('ui.panel.developer-tools.tabs.states.current_entities')]]
       </h1>
       <ha-expansion-panel
-        header="Set state"
+        header="[[localize('ui.panel.developer-tools.tabs.states.set_state')]]"
         outlined
         expanded="[[_expanded]]"
         on-expanded-changed="expandedChanged"
@@ -181,6 +182,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
               value="[[_stateAttributes]]"
               error="[[!validJSON]]"
               on-value-changed="_yamlChanged"
+              dir="ltr"
             ></ha-code-editor>
             <div class="button-row">
               <mwc-button

src/panels/developer-tools/template/developer-tools-template.ts

@@ -132,6 +132,7 @@ class HaPanelDevTemplate extends LitElement {
             .error=${this._error}
             autofocus
             @value-changed=${this._templateChanged}
+            dir="ltr"
           ></ha-code-editor>
           <mwc-button @click=${this._restoreDemo}>
             ${this.hass.localize(

src/panels/lovelace/editor/hui-element-editor.ts

@@ -11,7 +11,6 @@ import {
 import { property, state, query } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { handleStructError } from "../../../common/structs/handle-errors";
-import { computeRTL } from "../../../common/util/compute_rtl";
 import { deepEqual } from "../../../common/util/deep-equal";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-code-editor";
@@ -200,9 +199,9 @@ export abstract class HuiElementEditor<T> extends LitElement {
                   autofocus
                   .value=${this.yaml}
                   .error=${Boolean(this._errors)}
-                  .rtl=${computeRTL(this.hass)}
                   @value-changed=${this._handleYAMLChanged}
                   @keydown=${this._ignoreKeydown}
+                  dir="ltr"
                 ></ha-code-editor>
               </div>
             `}

src/panels/lovelace/hui-editor.ts

@@ -15,7 +15,6 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { array, assert, object, optional, string, type } from "superstruct";
-import { computeRTL } from "../../common/util/compute_rtl";
 import { deepEqual } from "../../common/util/deep-equal";
 import "../../components/ha-circular-progress";
 import "../../components/ha-code-editor";
@@ -92,10 +91,10 @@ class LovelaceFullConfigEditor extends LitElement {
           <ha-code-editor
             mode="yaml"
             autofocus
-            .rtl=${computeRTL(this.hass)}
             .hass=${this.hass}
             @value-changed=${this._yamlChanged}
             @editor-save=${this._handleSave}
+            dir="ltr"
           >
           </ha-code-editor>
         </div>