fix: set the RTL text plugin

src/Map.js

@@ -15,6 +15,7 @@ import {
     composeTransformRequest,
 } from './utils/images.js'
 import { OVERLAY_START_POSITION, MAP_MAX_ZOOM } from './utils/layers.js'
+import { loadRTLTextPlugin } from './utils/rtlText.js'
 import { mapStyle } from './utils/style.js'
 import syncMaps from './utils/sync.js'
 import './Map.css'
@@ -37,7 +38,9 @@ export class MapGL extends Evented {
     constructor(el, options = {}) {
         super()
 
-        const { locale, glyphs, scrollZoom } = options
+        const { locale, glyphs, scrollZoom, rtlTextPluginUrl } = options
+
+        loadRTLTextPlugin(rtlTextPluginUrl)
 
         const mapgl = new Map({
             container: el,

src/utils/rtlText.js

@@ -0,0 +1,21 @@
+import { setRTLTextPlugin } from 'maplibre-gl'
+
+// Official Mapbox/MapLibre plugin for Arabic shaping and right-to-left reordering.
+const DEFAULT_RTL_TEXT_PLUGIN_URL =
+    'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.3.0/dist/mapbox-gl-rtl-text.js'
+
+let requested = false
+
+export const loadRTLTextPlugin = (url = DEFAULT_RTL_TEXT_PLUGIN_URL) => {
+    if (requested) {
+        return
+    }
+
+    requested = true
+
+    try {
+        setRTLTextPlugin(url, true)
+    } catch (error) {
+        console.error('Failed to set RTL text plugin', error)
+    }
+}