fix(helpers): add missing dir attribute for right-to-left languages (…

…#357)

Co-authored-by: lihbr <lihbr@users.noreply.github.com>

src/lib/serializerHelpers.ts

@@ -15,6 +15,11 @@ type Attributes = Record<string, string | boolean | null | undefined>
 const formatAttributes = (node: RTAnyNode, attributes: Attributes): string => {
 	const _attributes = { ...attributes }
 
+	// Respect `ltr` and `rtl` direction
+	if ("direction" in node && node.direction === "rtl") {
+		_attributes.dir = node.direction
+	}
+
 	// Add label to attributes
 	if ("data" in node && "label" in node.data && node.data.label) {
 		_attributes.class = _attributes.class

test/__fixtures__/arRichText.json

@@ -0,0 +1,67 @@
+[
+	{
+		"type": "paragraph",
+		"text": " المعروف منذ زمن طويل أن المحتوى القابل للقراءة لصفحة ما سيشتت انتباه القارئ عند النظر إلى شكلها الخارجي. والهدف من ",
+		"spans": [
+			{
+				"start": 4,
+				"end": 13,
+				"type": "strong"
+			},
+			{
+				"start": 8,
+				"end": 11,
+				"type": "em"
+			},
+			{
+				"start": 19,
+				"end": 23,
+				"type": "label",
+				"data": {
+					"label": "label_1"
+				}
+			}
+		],
+		"direction": "rtl"
+	},
+	{
+		"type": "o-list-item",
+		"text": "طبيعي إلى حد ما للأحرف، على",
+		"spans": [],
+		"direction": "rtl"
+	},
+	{
+		"type": "o-list-item",
+		"text": "ر المكتبي ومحرري صفحات الوي",
+		"spans": [],
+		"direction": "rtl"
+	},
+	{
+		"type": "o-list-item",
+		"text": "حث عن نص لوريم إيبسوم إلى",
+		"spans": [],
+		"direction": "rtl"
+	},
+	{
+		"type": "paragraph",
+		"text": "إيبسوم إلى اكتشاف العديد من المواقع الإلكترونية التي لا تزال في مهدها. تطورت إصدارات مختلفة على مر السنين، أحيانًا عن طريق الصدفة، وأحيانًا عن عمد (إدخال الفكاهة وما شابه ذلك).",
+		"spans": [
+			{
+				"start": 30,
+				"end": 41,
+				"type": "hyperlink",
+				"data": {
+					"id": "YCiUyRUAACQAxfZK",
+					"type": "kitchen_sink",
+					"tags": [],
+					"slug": "home",
+					"lang": "en-us",
+					"uid": "home",
+					"link_type": "Document",
+					"isBroken": false
+				}
+			}
+		],
+		"direction": "rtl"
+	}
+]

test/__testutils__/createRichTextFixtures.ts

@@ -1,3 +1,4 @@
+import arRichTextJSON from "../__fixtures__/arRichText.json"
 import cnRichTextJSON from "../__fixtures__/cnRichText.json"
 import emojiRichTextJSON from "../__fixtures__/emojiRichText.json"
 import enRichTextJSON from "../__fixtures__/enRichText.json"
@@ -12,11 +13,12 @@ const deepCloneJSON = <T>(json: T): T => {
 }
 
 export const createRichTextFixtures = (): Record<
-	"en" | "cn" | "ko" | "emoji" | "overlapped" | "xss",
+	"en" | "ar" | "cn" | "ko" | "emoji" | "overlapped" | "xss",
 	RichTextField
 > => {
 	return {
 		en: deepCloneJSON(enRichTextJSON) as RichTextField,
+		ar: deepCloneJSON(arRichTextJSON) as RichTextField,
 		cn: deepCloneJSON(cnRichTextJSON) as RichTextField,
 		ko: deepCloneJSON(koRichTextJSON) as RichTextField,
 		emoji: deepCloneJSON(emojiRichTextJSON) as RichTextField,

test/helpers-asHTML.test.ts

@@ -138,6 +138,12 @@ it("includes target attribute on links with a target value", () => {
 	)
 })
 
+it("includes `dir` attribute on right-to-left languages", () => {
+	const richTextFixtures = createRichTextFixtures()
+
+	expect(asHTML(richTextFixtures.ar, { linkResolver })).toMatchSnapshot()
+})
+
 it("returns null for nullish inputs", () => {
 	expect(asHTML(null)).toBeNull()
 	expect(asHTML(undefined)).toBeNull()

test/helpers-asText.test.ts

@@ -1,12 +1,14 @@
 import { expect, it } from "vitest"
 
-import { richTextFixture } from "./__fixtures__/richText"
+import { createRichTextFixtures } from "./__testutils__/createRichTextFixtures"
 
 import { asText } from "../src"
 import { asText as richTextAsText } from "../src/richtext"
 
 it("is an alias for @prismicio/client/richtext's `asText` function for non-nullish inputs", () => {
-	expect(asText(richTextFixture.en)).toBe(richTextAsText(richTextFixture.en))
+	const richTextFixtures = createRichTextFixtures()
+
+	expect(asText(richTextFixtures.en)).toBe(richTextAsText(richTextFixtures.en))
 })
 
 it("returns null for nullish inputs", () => {
@@ -15,12 +17,14 @@ it("returns null for nullish inputs", () => {
 })
 
 it("supports separator configuration", () => {
-	expect(asText(richTextFixture.en, { separator: "__separator__" })).toBe(
-		richTextAsText(richTextFixture.en, "__separator__"),
+	const richTextFixtures = createRichTextFixtures()
+
+	expect(asText(richTextFixtures.en, { separator: "__separator__" })).toBe(
+		richTextAsText(richTextFixtures.en, "__separator__"),
 	)
 
 	// TODO: Remove when we remove support for deprecated tuple-style configuration.
-	expect(asText(richTextFixture.en, "__separator__")).toBe(
-		richTextAsText(richTextFixture.en, "__separator__"),
+	expect(asText(richTextFixtures.en, "__separator__")).toBe(
+		richTextAsText(richTextFixtures.en, "__separator__"),
 	)
 })

test/richtext/__snapshots__/serialize.test.ts.snap

@@ -1,5 +1,21 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`handles Arabic characters correctly 1`] = `
+[
+  "<p> الم<strong>عروف<em> من</em>ذ </strong>زمن طو<span class="label_1">يل أ</span>ن المحتوى القابل للقراءة لصفحة ما سيشتت انتباه القارئ عند النظر إلى شكلها الخارجي. والهدف من </p>",
+  "<ol><li>طبيعي إلى حد ما للأحرف، على</li><li>ر المكتبي ومحرري صفحات الوي</li><li>حث عن نص لوريم إيبسوم إلى</li></ol>",
+  "<p>إيبسوم إلى اكتشاف العديد من ال<a href="linkResolver(YCiUyRUAACQAxfZK)">مواقع الإلك</a>ترونية التي لا تزال في مهدها. تطورت إصدارات مختلفة على مر السنين، أحيانًا عن طريق الصدفة، وأحيانًا عن عمد (إدخال الفكاهة وما شابه ذلك).</p>",
+]
+`;
+
+exports[`handles Arabic characters correctly 2`] = `
+[
+  "<p> الم<strong>عروف<em> من</em>ذ </strong>زمن طو<span class="label_1">يل أ</span>ن المحتوى القابل للقراءة لصفحة ما سيشتت انتباه القارئ عند النظر إلى شكلها الخارجي. والهدف من </p>",
+  "<ol><li>طبيعي إلى حد ما للأحرف، على</li><li>ر المكتبي ومحرري صفحات الوي</li><li>حث عن نص لوريم إيبسوم إلى</li></ol>",
+  "<p>إيبسوم إلى اكتشاف العديد من ال<a href="linkResolver(YCiUyRUAACQAxfZK)">مواقع الإلك</a>ترونية التي لا تزال في مهدها. تطورت إصدارات مختلفة على مر السنين، أحيانًا عن طريق الصدفة، وأحيانًا عن عمد (إدخال الفكاهة وما شابه ذلك).</p>",
+]
+`;
+
 exports[`handles Chinese characters correctly 1`] = `
 [
   "<p>得辞<strong>象今歓<em>予板</em>聞所詐上</strong>修戸間。比保広社配術工務庫載水設応氷諸書評</p>",

test/richtext/serialize.test.ts

@@ -31,6 +31,8 @@ it(
 	serializeMacro("en"),
 )
 
+it("handles Arabic characters correctly", serializeMacro("ar"))
+
 it("handles Chinese characters correctly", serializeMacro("cn"))
 
 it("handles Korean characters correctly", serializeMacro("ko"))