Load MapLibre RTL text plugin so Hebrew and Arabic map labels read correctly

The vector base map never registered MapLibre's RTL text plugin, so
right-to-left scripts were shaped left to right and every label came out
reversed. Ship @mapbox/mapbox-gl-rtl-text from /static/map/ alongside the
glyphs (no third-party host) and register it once, lazily, before the
first vector layer is created.

Fixes #53851

build-scripts/gulp/gather-static.js

@@ -108,6 +108,10 @@ async function copyMapPanel(staticDir) {
   // Style, glyphs and sprites for the vector base map
   await ensureMapAssets();
   fs.copySync(mapAssetsDir, staticPath("map/"));
+  copyFileDir(
+    npmPath("@mapbox/mapbox-gl-rtl-text/dist/mapbox-gl-rtl-text.js"),
+    staticPath("map/")
+  );
 }
 
 function copyZXingWasm(staticDir) {

package.json

@@ -75,6 +75,7 @@
     "@lit/context": "1.1.6",
     "@lit/reactive-element": "2.1.2",
     "@lit/task": "1.0.3",
+    "@mapbox/mapbox-gl-rtl-text": "0.4.0",
     "@maplibre/maplibre-gl-leaflet": "0.1.4",
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",

src/common/map/base-layer.ts

@@ -1,6 +1,6 @@
 import type { maplibreGL } from "@maplibre/maplibre-gl-leaflet";
 import type { Map as LeafletMap } from "leaflet";
-import type { StyleSpecification } from "maplibre-gl";
+import type { setRTLTextPlugin, StyleSpecification } from "maplibre-gl";
 import type { LeafletModuleType } from "../dom/setup-leaflet-map";
 
 // Shortbread vector tiles from the OpenStreetMap Foundation. Only their tile
@@ -13,6 +13,10 @@ const VECTOR_STYLES = {
   dark: "/static/map/dark.json",
 } as const;
 
+// Without it Arabic and Hebrew labels render reversed. Loaded by MapLibre's
+// worker, hence a URL rather than an import.
+const RTL_TEXT_PLUGIN_URL = "/static/map/mapbox-gl-rtl-text.js";
+
 // Fallback for browsers without WebGL2, which MapLibre needs even for raster,
 // so it stays a Leaflet tile layer. Still CARTO, and temporarily so: OSM's
 // raster blocks a browser that sends no Referer, and the only referrer a browser
@@ -71,6 +75,20 @@ const loadStyle = async (url: string): Promise<StyleSpecification> => {
   return style;
 };
 
+// Global to MapLibre, and it throws when set twice.
+let rtlTextPluginRequested = false;
+const ensureRTLTextPlugin = (setPlugin: typeof setRTLTextPlugin) => {
+  if (rtlTextPluginRequested) {
+    return;
+  }
+  rtlTextPluginRequested = true;
+  setPlugin(new URL(RTL_TEXT_PLUGIN_URL, location.href).href, true).catch(
+    () => {
+      // RTL labels stay reversed; everything else still renders.
+    }
+  );
+};
+
 const createVectorLayer = async (
   createLayer: typeof maplibreGL,
   leaflet: LeafletModuleType,
@@ -211,8 +229,11 @@ export const createBaseLayer = async (
   if (supportsWebGL2()) {
     let vectorLayer: MapBaseLayer | undefined;
     try {
-      const { maplibreGL: createLayer } =
-        await import("@maplibre/maplibre-gl-leaflet");
+      const [{ maplibreGL: createLayer }, maplibre] = await Promise.all([
+        import("@maplibre/maplibre-gl-leaflet"),
+        import("maplibre-gl"),
+      ]);
+      ensureRTLTextPlugin(maplibre.setRTLTextPlugin);
       vectorLayer = await createVectorLayer(
         createLayer,
         leaflet,

src/components/ha-selector/ha-selector-number.ts

@@ -67,16 +67,15 @@ export class HaNumberSelector extends LitElement {
       }
     }
 
-    // On iOS/iPadOS the numeric and decimal on-screen keypads have no minus key.
-    // Leaving inputmode unset on a number input gives the "Numbers and
-    // Punctuation" keyboard there, which does include a minus. Other platforms
-    // include a minus on their number keypads, so restrict this workaround to
-    // Safari/WebKit and only when the selector allows negatives: either an
-    // explicit negative min, or no min at all (e.g. the numeric threshold
-    // selector used by the power triggers).
-    const useSafariNegativeKeyboard =
+    // On iOS/iPadOS the numeric and decimal on-screen keypads have no minus key,
+    // so negatives can only be typed with the full "text" keyboard. Other
+    // platforms include a minus on their number keypads, so restrict this
+    // workaround to Safari/WebKit and only when the selector allows negatives
+    // (e.g. numeric_state triggers/conditions).
+    const useTextInputMode =
       isSafari &&
-      (this.selector.number?.min === undefined || this.selector.number.min < 0);
+      this.selector.number?.min !== undefined &&
+      this.selector.number.min < 0;
 
     const translationKey = this.selector.number?.translation_key;
     let unit = this.selector.number?.unit_of_measurement;
@@ -113,8 +112,8 @@ export class HaNumberSelector extends LitElement {
         }
         <ha-input
           .inputmode=${
-            useSafariNegativeKeyboard
-              ? undefined
+            useTextInputMode
+              ? "text"
               : this.selector.number?.step === "any" ||
                   (this.selector.number?.step ?? 1) % 1 !== 0
                 ? "decimal"

test/common/map/base-layer.test.ts

@@ -18,6 +18,10 @@ const maplibreGL = vi.hoisted(() => vi.fn(() => maplibreLayer));
 
 vi.mock("@maplibre/maplibre-gl-leaflet", () => ({ maplibreGL }));
 
+const setRTLTextPlugin = vi.hoisted(() => vi.fn(async () => undefined));
+
+vi.mock("maplibre-gl", () => ({ setRTLTextPlugin }));
+
 const STYLE = {
   version: 8,
   sources: {},
@@ -109,6 +113,18 @@ describe("createBaseLayer", () => {
     browser.retina = false;
   });
 
+  it("registers the RTL text plugin once, lazily, from our own host", async () => {
+    const createBaseLayer = await setWebGL2(true);
+    await createBaseLayer(leaflet, map, false);
+    await createBaseLayer(leaflet, map, false);
+
+    expect(setRTLTextPlugin).toHaveBeenCalledOnce();
+    expect(setRTLTextPlugin).toHaveBeenCalledWith(
+      `${location.origin}/static/map/mapbox-gl-rtl-text.js`,
+      true
+    );
+  });
+
   it("uses vector tiles when WebGL2 is available", async () => {
     const createBaseLayer = await setWebGL2(true);
 

yarn.lock

@@ -3502,6 +3502,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mapbox/mapbox-gl-rtl-text@npm:0.4.0":
+  version: 0.4.0
+  resolution: "@mapbox/mapbox-gl-rtl-text@npm:0.4.0"
+  checksum: 10/a678240e4cc6f589726ef2f35fac64a7eb073451a8686c09db58041d3fb351d2e72100bb12607591efc298d8ac5e19691c593b3c213d121b2a0e84978254e1a8
+  languageName: node
+  linkType: hard
+
 "@mapbox/point-geometry@npm:^1.1.0, @mapbox/point-geometry@npm:~1.1.0":
   version: 1.1.0
   resolution: "@mapbox/point-geometry@npm:1.1.0"
@@ -10148,6 +10155,7 @@ __metadata:
     "@lit/reactive-element": "npm:2.1.2"
     "@lit/task": "npm:1.0.3"
     "@lokalise/node-api": "npm:16.3.0"
+    "@mapbox/mapbox-gl-rtl-text": "npm:0.4.0"
     "@maplibre/maplibre-gl-leaflet": "npm:0.1.4"
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch"
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"