fix: Render media correctly in rtl languages (#1757)

tests/utils/embla/carousel-controller.test.ts

@@ -194,6 +194,7 @@ describe('CarouselController', () => {
       loop: true,
       dragEnabled: false,
       plugins: plugins,
+      textDirection: 'rtl',
     });
 
     expect(EmblaCarousel).toBeCalledWith(
@@ -209,6 +210,7 @@ describe('CarouselController', () => {
         watchSlides: false,
         watchResize: true,
         watchDrag: false,
+        direction: 'rtl',
       },
       plugins,
     );

tests/utils/text-direction.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { getTextDirection } from '../../src/utils/text-direction.js';
+
+// @vitest-environment jsdom
+describe('getTextDirection', () => {
+  it('should return rtl', () => {
+    const element = document.createElement('div');
+    element.style.direction = 'rtl';
+
+    expect(getTextDirection(element)).toBe('rtl');
+  });
+
+  it('should return ltr', () => {
+    const element = document.createElement('div');
+    element.style.direction = 'ltr';
+
+    expect(getTextDirection(element)).toBe('ltr');
+  });
+
+  it('should return ltr by default', () => {
+    const element = document.createElement('div');
+    element.style.direction = '_ANYTHING_ELSE_';
+
+    expect(getTextDirection(element)).toBe('ltr');
+  });
+});